|
CSS - Php, Css, And Migrating From Table-based Design
Like many PHP programmers, I've been migrating from table-based design to CSS for a few websites now, but there's still a problem I've yet to get around.
Most dynamic websites have at least one page that displays a number of dynamic results that need to be displayed in a tabular format. That is, you need to display variable results in orderly columns and rows. Traditionally, this has been done with html tables. No problem. Tried and true. But WC3 has recommend the migration away from tables. Thus, I feel like I'm a "bad" web developer when I resort back to using tables for the dynamic results on my otherwise CSS-based page. Question: since this is a problem that many PHP programmers currently face, has anyone found a good resource for information on this problem? Is it even possible? I've purchased several CSS books and have combed through many websites, but I've never found information relevant to the dynamic design that we PHP programmers face. In fact, the O'Reilly book seems to indicate that it's not possible to achieve tabular layout without using tables: Quote: Tables are unique, compared to the rest of document layout. As of CSS2.1, tables alone possess the unique ability to associate element sizes with other elements--all the cells in a row have the same height, for example, no matter how much or how little content each individual cell might contain. The same is true for the widths of cells that share a column. There is no other situation in layout where elements from different parts of the document tree influence each other's sizing and layout in so direct a way. - p.331, Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A . Meyer, (c) 2004, O'Reilly Media, Inc. So before I give up my search, I thought I'd post to this forum to see if anyone has found a good solution. Many thanks, Steve Stringer Similar TutorialsOkay, so finally I've taken the plunge to DIVs from TABLEs after everyone raves above the benefits CSS. I've almost finished the outline of my page but I want the shadow of the main box to have a dynamic width. This is what i've ascertained from the code around on the web. I think I may have made it more complicated then necessary... My problem is when you adjust the size of the window, the shadow image in #bottom won't automatically adjust. What I think I need is a way to make #bottomright overwrite what is in #bottom. Any help would be GREATLY appreciated! The page: --------- http://www.jmusician.com/temp.php my HTML code: -------------- <div id="header"> <img src="./graphics/main_heading.gif"> </div> <div class="container"> <div id="topleft"> </div> <div id="topmiddle"> </div> <div id="topright"> </div> </div> <div class="container"> <div id="left"> </div> <div id="main"> </div> <div id="right"> </div> </div> <div id="btmlink1"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_bio.gif"></a> </div> <div id="btmlink2"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_comp.gif"></a> </div> <div id="btmlink3"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_perf.gif"></a> </div> <div id="btmlink4"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_rep.gif"></a> </div> <div id="btmlink5"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_teach.gif"></a> </div> <div id="bottom"> </div> <div id="bottomright"> </div> my CSS code: ------------ html, body { margin: 5px 3% 3% 3%; padding: 0; background-color: #EEE3B9; color: #FFFFFF; } //I realised that the code for container isn't //absolutely necessary .container{ } #topleft { margin: 0px; float: left; padding: 0px; background-color: Black; width: 8px; } #topmiddle { float: left; padding: 0px; margin: 0px; width: 100%; background-color: Black; clear: right; } #topright { float: right; padding: 0px; margin: 0px; width: 8px; background-image: url(../graphics/inner_top_right.gif); background-repeat: no-repeat; clear: right; } #left { margin: 0px; float: left; padding: 0px; background-color: Black; width: 8px; height: 400px; } #main { float: left; padding: 0px; margin: 0px; width: 100%; background-color: Black; height: 400px; clear: right; } #right { float: right; padding: 0px; margin: 0px; width: 8px; background-image: url(../graphics/inner_right.gif); background-repeat: repeat-y; height: 400px; clear: right; } #btmlink1 { margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 134px; height: 36px; clear: right; } #btmlink2{ margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 128px; height: 36px; clear: right; } #btmlink3{ margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 173px; height: 36px; clear: right; } #btmlink4{ margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 136px; height: 36px; clear: right; } #btmlink5{ margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 133px; height: 36px; clear: right; } #bottom { float: left; padding: 0px; margin: 0px; background-image: url(../graphics/inner_bottom.gif); background-repeat: repeat-x; width: 30%; clear: right; } #bottomright { float: right; padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: -8px; background-image: url(../graphics/inner_bottom_right.gif); background-repeat: no-repeat; width: 8px; position: static; clear: right; } THANKS! justin Hello. My first post at this section I'm trying to familiarize with all the positioning properties in CSS but got stuck when trying to migrate the table at the bottom of this code, to div blocks: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<style>
body
{
margin: 0;
padding: 0;
font-size: 90%;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
background-color: #FFF;
color: #000;
}
table, div {
padding: 15px;
margin: 0;
background-color: #464646;
height: 30px;
width: 100%;
}
tr, div div {
color: #FFFFFF;
font-size: 18px;
height: 100%;
}
</style>
<body>
<table class="top"><tr><td>Product Name</td><td align="right">Company Name</td></tr></table>
</body>
</html>
I tried wrapping two <span> inside a <div> and float the second <span> to the right, but from what I read so far, floating is not the solution because it sets the element as a block even if it's inline. Although it works using plain old tables - btw why is IE rendering a somewhat different page then FF? - and I should follow the KISS rule I want to learn how can I make this work. Thank you a lot! Hi, How do i make a table in which "title" is in the middle of the table and "help" is on right side. <table class="" width="700"> <tr><td colspan="2" align="center"> <span>title</span><span>help</span> </td></tr></table> something like this: ------------------------------------------------------ |...................................title...........................help | ------------------------------------------------------ Thank you. OK - this may sound a bit cheeky but I have been looking everywhere for a table-less design which will work in the 3 major browsers (Opera, Firefox, IE) I am looking for a 2 column layout (left column about 130 px wide) and with a header and footer - I can't find anything that works for me in all browers (I know M$ haven't made IE fully compatible ) but if anyone knows where I can get this popular and simple structure I would be most grateful, thanks, j as seen in this forum when posting a message, i was wondering how they get it so that the title of a section appears inside the border? example: ------ Title here --------------------| | | | bit of content | | | | | ------------------------------------- Hello all, I'm pretty fresh here, but unrelenting confusion has driven me to attempt and find help with my particular question. I am sure there must be a tutorial to help me with this, but I've been all over and I think I'm getting cross-eyed just trying to find what I need! I have been trying to format a website header section using CSS. With tables, it would seem so easy; make a table with two columns, plop one image on the left, make a margin in between, and plop the other image on the right. But with CSS, I simply can't bend my head around it. It's driving me mad! The header is simply a rectangular logo, and a decorative image next to it, with a two pixel margin in between them. I've gotten the logo on there in its top left corner, but every time I try to get the decorative image to snuggle in next to it, it keeps wanting to sit UNDER the logo instead. I have been, to this point, a table designer and apologize if this is an incredibly simple concept with tutorial answers all over the web. Any links to these would be great too! Hello, I'm trying to make a neat CSS version of the tabled "itembox" in the attached image. I've got this far: http://offhourscomputing.com/ibdev.php The CSS for that page is: Code:
/*Item Box*/
#ib{
margin:10px;
width:38%;
overflow:hidden;
padding:3px;
border-top:2px solid #eaeaea;
border-right:2px solid #eaeaea;
border-bottom:1px solid #eaeaea;
border-left:1px solid #eaeaea;
}
#ib #l{
width:25%;
border-right:#eaeaea 1px dashed;
}
#ib #r{
width:75%;
display:inline;
}
#ib #r #n{
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none; color:#000000
}
#ib #r #n,#m{
display:block;
}
/*Item Box*/
How can i have: "SAMSUNG 40GB 7200RPM Light and Slim IDE Hard Drive, Model SP0411N, OEM Drive only ...More Testing" inline with the image? (looking similar to the attached screenshot of the item boxes) Thanks. look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. I've done these types of thing before myself, and the pages actually loaded faster, it was easier to edit and find things I wanted. This layout is completely table based, too much positioning for me to do. I would like the layout to preserve it's flexiblity yet still look quite the same. I need a great CSS Guru to completely CSSfy my site. This includes positioning, changing images to texts and small taggies and stuff. Since it's only one page and it'll take half hour at the most, I will pay $7 whoever asks me first. Nadalitian@VFEmail.net April 18th, 2004 It looks alright in IE, but looks really messed up in Mozilla, Firefox and Netscape. I wanted vertical UL tabs down the left side. http://www.members.shaw.ca/welcomehere/test.htm please help. Hi sorry if this is the wrong place for this thread, I have been given a project to take a fully flash website and convert it into xhtml and css. There are roughly 30 pages or so but Im am really unsure of how much I should be asking as a fixed price for the work. What does everyone else usually do? I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design:
body background: fixed full page image
banner: fixed, 100 pixels high, full-width, transparent background
nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background
content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background
footer: fixed, 30 px high, full width, transparent background
mockup: Here is as far as I could get in the actual design: web page attemp okay, so what i want to achieve is a result similar to: www.simplebits.com anyways, first thing is that using divs when the browser is resized everything gets screwed up, however not on the above site. thanks, any help would be great. Chris Heya everyone, The next item on my todo list is to work on a design for DynaSig with just CSS for layout rather than the current tables. I haven't used CSS to create a really complex template before and I am not sure where to start. I want it to look pretty much exactly the same as the original. So. What do I do first? What should I learn and complete first? I'm kinda stuck on this one, and I don't want it to get put on the back-burner. Thanks for ideas/tips/comments/help/whatever comp I was told in the html forum that I should design my layout with CSS instead of tables... I'm using FireworksMX and Dreamweaver MX. Any help figuring out how to do that with the layout on this page would be great - I don't know very much about CSS. I know dreamweaver makes new ones every time I type, and it keeps changing my text when I don't want it to. I understand that you can make ones for text, html tags, and other more complicated stuff that I don't understand - is it possible for me to figure this out without spending a month studying it? Here's the non-css layout page http://www.thecurrencyofthefuture.com I am new to this forum and need some help! I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated! http://annesweb.com/abramoff/ Hey everyone, I'm new to CSS, but now web design. I could find a way to build this design in tables, but thought I might try the CSS thing. I've been reading a bunch and have a general plan, but any advice on where my plan could be improved or if I should stick with tables would be great. hutec-inc. com/personal/css.gif Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm I am trying to improve design of most popular div in one section (http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=3). I designed something in photoshop but I am having hard time wth integrating it(http://www.pearl.ru/isdunyasi/newtable.gif). I cannot figure out how to do it because if I set what I designed as a background there is big chance texts will overflow as that area gets its values from the database. Code:
#innersubcontentpopular{
float:right;
width:300px;
height:450px;
background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;
}
#innersubcontentpopular h1{
padding:0px;
margin-bottom:5px;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
}
#innersubcontentpopular h2 {
padding:5px 2px 5px 2px;
font-size:12px;
font-weight:bold;
color:#aaaaaa;
}
#innersubcontentpopular p {
padding:2px;
margin:0;
font-size:12px;
}
|
|||||||