|
CSS - Custom Design -> Converting To Tableless Layout
hi guys
I've begun trying so I finally can leave <tables> I've started trying with a little opensource template, and now want to be how much correct I am... The following image shows the original design, also with the layers division I've created I'd like to know if I'm going ok with this initial design, or which would you modify, and so on. Then I'll follow up the thread with the code, so I can see if I learned correctly Thanks a lot in advance, Similar TutorialsHi all, After using silktide.com to test my site's score, the report suggested that I remake the site using CSS to make it tableless. The site i am remaking is www.verdicts.co.uk So far ive remade the interface which you can see he www.verdicts.co.uk/verdicts_css Problem is, i have absolutely NO clue how i would go about making much more complex table replication using CSS. For example, the "popular review catagories" as seen on the www.verdicts.co.uk homepage. ...Or the product listing pages like this one: http://www.verdicts.co.uk/items/663/items.html or how about the reviews tables as seen he http://www.verdicts.co.uk/reviews/1140/1140.html What i am asking, is: Should i try and find a way to recreate these tables with CSS, or is the only way to do this, with *some* use of tables? Silktide.com's checker says make the site "tableless" - so i am guessing it's saying not to use a single table?! Thanks Mat. I've been designing web pages for 7 years now, using layout tables. I realize that it's time to let go with them now. Do you recommend any good book about this? I've red Ben Henick's article on Alistapart (http://alistapart.com/articles/12lessonsCSSandstandards). Do you know if he has written any books about the topic too? A website generally has a header/footerand then a left column and main column. The left column contains links and the main column contains the content. Years ago I saw a design that was validated and used CSS to achieve a tableless design that actually had the main column content BEFORE the left column links in the sourcecode, but on the site itself, it was like a normal site (left column was on the left and main content was on the right or center). Does this achieve better search engine results by having the main content first in the eyes of the search engines, but in reality, to the people, the left links actually shows up first. Also, can someone provide a link to this or show some coding on what you have seen done to achieve this? I am already used to tableless design but I have not yet solved the way to vertically center texts the way a cell of a table does by default. How do you solve this problem?. Obviously I look for a simple CSS style to manage this need. Thanks! Hi, Learning CSS and trying to convert a table layout to DIVs. Example..... PHP Code: x---------------------------------------------------------x | | | Banner | | | x---------------------------------------------------------x | Nav 1 | Nav 2 | Nav 3 | Nav 4 | [Nav graphic] | Nav 5 | x--------------x------------------------------------------x | | | | Menu | | | (Fixed | Introduction | | Height) | (Fixed Height) | | | | x--------------x------------------------------------------x | | | | | | | Main Text | | (Auto Height - So it can expand) | | | | | | | x-----------------------------------------x---------------x | Closing Text | Photo | | (Fixed Height) | (Fixed | | | (Height) | | | | | | | x---------x-------------------------------x-----x---------x | | Graphic Footer Bar | | x---------x---------x-----------------x---------x---------x | | | Stats Bar | | | | | | | | | x---------x---------x-----------------x---------x---------x | | | Text Nav Bar | | | x---------------------------------------------------------x Problem: How do I align the vertical columns (nav buttons especially)? I don't know enough about DIVs to know how to align them flush against each other. That's 6 columns of graphic images. Could someone post a code example to learn from? Heads up welcome. Hello to all, There are lots of talks lately that tables are dying. Well, I am trying to rebuild my site using tableless layout. At one point I though I was there, but here is one problem I am having (see the attached image). When a text in a right or a left column exceeds my 100% height, I loose the layout. Is there anything that I can do to fix that? Here is the html: Code:
<html>
<head>
<title> New Document </title>
<style>
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
background-color: #EEEEEE;
margin: 0;
padding: 0;
}
#cssNavigationTop {
padding: 10px;
color: #FFFFFF;
text-align: center;
background-color: #330033;
clear: both;
}
#cssNavigationBottom {
padding: 5px;
color: #FFFFFF;
text-align: center;
background-color: #330033;
clear: both;
}
#cssColumnLeft {
width: 18%;
float: left;
}
.cssPanelLeft {
margin: 10px;
}
#cssColumnRight {
width: 18%;
float: right;
}
.cssPanelRight {
margin: 10px;
}
#cssContent {
margin: 0 18% 0 18%;
padding: 10px;
background-color: #FFFFFF;
height: 100%;
border: 1px dotted #666666;
border-top: 0;
border-bottom: 0;
}
#cssFootNote {
padding: 3px;
text-align: center;
clear: both;
}
//-->
</style>
</head>
<body>
<div id=cssNavigationTop>cssNavigationTop</div>
<div id=cssColumnLeft>
<div class=cssPanelLeft>
cssPanelLeft
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</div>
<div id=cssColumnRight>
<div class=cssPanelRight>
cssPanelRight
</div>
</div>
<div id=cssContent>cssContent</div>
<div id=cssNavigationBottom>cssNavigationBottom</div>
<div id=cssFootNote>cssFootNote</div>
</body>
</html>
Hey everybody I am trying my hand at doing a tableless layout for the first time. Here is the original look of the page I am trying to convert... http://www.bleutiger.com/houstontruckclub/indexoriginal.html here is wht I have so far... http://www.bleutiger.com/houstontruckclub/testindex.html and my css file is... http://www.bleutiger.com/houstontruckclub/testindex.css What am I doing wrong? I realize that I have not included all of the content but I am having trouble with a couple of things... I built a container to hold the entire page.. I put a second container called "header" that holds... three more div's.. MainTitle Spacer MainNav that part is working fine with all of the formating. THe next container "Header2" is suppose to have two columns in it but I can't get them to float to the left and right the way they are supposed to? Help!!! Hi all- I m building a tableless site and am having difficulties getting the one section to fit in properly. It works great in FF but bumps down below the left nav in IE and I'm bashing my head against the wall trying to figure out which property is causing this behaviour. The majority of my audience uses IE so this is important that it displays properly See the example he http://verticalextreme.com/redesign.html CSS is he http://verticalextreme.com/_site_stylesheets/veStyle_green.css thanks in advance for any pointers! Hi. I'm making a registration and login pages with some additional information, and I'm wondering how to make them tableless? What I'd do with tables is put table in a table, because I want to do something like this: A 640px (or any other value) width box in the center of the screen, in which there is another box under some text, which is borderless login box. Same would go for the registration box. And without tables - I have no idea how to do it. Not sure if this is the right section, sorry if it isn't. Thanks. Hey All, I'm playing with elastic design for the first time--trying to use ems for all of my lengths, but I'm having a problem with my ems not converting to pixels consistently and I keep running into this using Firebug. For example: Code:
<body>
<div id="page-wrap" class="clearfix">
<div id="left-container"></div>
<div id="center-container"></div>
<div id="right-container"></div>
</div>
<body>
body {
font-size: 62.5%;
}
#page-wrap {
max-width: 96em;
}
#left-container {
position: relative;
float: left;
margin: 1.5em 0 1.5em 1em;
border: 0.1em solid red;
width: 22.8em;
height: 6em;
}
#center-container {
position: relative;
float: left;
margin: 1.5em 0;
border: 0.1em solid red;
padding: 0 1.5em;
width: 44.8em;
height: 6em;
}
#right-container {
position: relative;
float: left;
margin: 1.5em 0 1.5em 1em;
border: 0.1em solid red;
width: 22.8em;
height: 6em;
}
In firebug, the values are computing consistently and thus the right container is getting pushed down because of 3 pxs. In firebug, the computed values a page-wrap = 960px left-container margin-right = 10px border = 1px width = 229 px center-container border = 1px padding (left and right) = 15px width = 449 px right-container margin-left= 10px border = 1px width = 229 px Can anyone help me understand why the widths aren't converting consistently? Why they're adding a pixel? This is my first tableless layout and it's not working thus far. Take a look at: http://wwww.planetbattleground.com/test/ There is a gap above and below the header's buttons. There is also some weird spacing at the top of the DIV that contains "Lorem ipsum dolor sit amet...". The padding is inconsistent compared to the left and right. If there any other tips you could give me to improve the CSS (in case it uses bad style or whatever) please tell me! 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 | | | | | ------------------------------------- I'm a relative CSS newbie. I'm trying to convert an image heavy fireworks table created layout to all CSS for a friend. The designs not great but I'm trying to match it best i can Here's the comp... <a href="http://www.beardenfoundation.org/newpage.html">http://www.beardenfoundation.org/newpage.html</a> And here's my first stab at it... <a href="http://www.timmanteau.com/redo/redo_css.htm">http://www.timmanteau.com/redo/redo_css.htm</a> Can anyone give me a suggestion as the best way to approach this. I was thinking a fixed width, 3 column layout with a header and footer. Then I would place a repeating background image in each column to keep the look. How can I get the 3 columns to size to 100%. Any advice would be greatly appreciated. Thanks Tim My current HTML looks like this... Code: <table width="90%" align="center"> <tr class="gen_small" height="25"> <td colspan="5"><b>Test Category</b></td> </tr> <tr class="gen_small" height="50"> <td width="50" align="center"><img src="./templates/images/forum_open.gif" border="0"></td> <td><b><a href="view_forum.php?f=1">Test Forum</a></b><br>This is a test forum</td> <td width="200" align="right"></td> <td width="50" align="center"></td> <td width="50" align="center"></td> </tr> </table> I have some ideas on how to get a similar layout but how do i ensure the distances specified by the widths are also kept intact? I'm converting a site from a table layout to a css layout. I've got a basic 3 column layout and it seems to work just fine except for one problem. my left and middle columns will never be set heights and they are different colors. So, is there anyway to make the two divs be the same height so that the colors go all the way down regardless of which column is longer? here are 2 examples, the first is the left column longer(teal) and the second is the middle column longer(white). first example left column longer second example middle column longer thx! Good morning all, iv been fiddling with css for a couple months now, and iv done a couple pages and i want to do a more advanced style layout Im running into some float problems, im hoping somone can think of a better way to do this. heres a picture of what im roughly immaginging my page layout to look like. The problem i run into is having the 3 nav boxes on the right they seem to mess up any floats in the main window where content would go. heres a picture of how the problem looks: Its like i want to clear the floats inside the main content div, but not clear the div floats outside. Im a bit stumped can anyone help me out, would be happy to explain more or provide css source. any suggestions on a better way to do this. 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. Guys.... I am newbie in CSS tableless design and I wanna build a website w/o tables..... JUST CSS... Well, I have been working hard on this but I can make it work... Here is the design that I wanna build... and here is the code that I have so far... PLEASE... some CSS GURU answer this puzzle... Thanks.. [code] /* CSS Document */ body { margin: 0; padding: 0; font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif; color: #7c7c7c; text-align: center; background-color: transparent; background-image: url(images/background.jpg); background-position: center top; } #container-main { margin: 0px auto; padding: 0; width: 648px; border: none; text-align: left; background-position: bottom; } #container-top { margin: 0px auto; padding: 0; width: 648px; border: none; text-align: left; background-position: bottom; } #left { width: 20px; background-image: url(images/l-shadow.jpg); float: left; height: 543px; } #main { border: none; background-image: url(images/header.jpg); float: left; width: 598px; height: 67px; } #right { width: 30px; background-image: url(images/r-shadow.jpg); height: 543px; float: right; } /* #container { position:absolute; left:0px; top:0px; width:100%; height:100%; background-image:url(images/background.jpg); } */ #e-mail-templ-final2-01_ { position:absolute; left:0px; top:0px; width:81px; height:600px; } #top_ { position:relative; top:0px; width:648px; height:57px; background-image: url(images/top.jpg); } #background_ { position:absolute; left:729px; top:0px; width:243px; height:600px; } #e-mail-templ-final2-04_ { position:absolute; left:81px; top:57px; width:20px; height:90px; } #header_ { position:relative; top:57px; width:598px; height:67px; background-image: url(images/header.jpg); } #e-mail-templ-final2-06_ { position:absolute; left:699px; top:57px; width:30px; height:90px; } #red-bar_ { float: left; width: 598px; height: 17px; background-color: #990000; border-top-width: medium; border-right-width: 0px; border-bottom-width: medium; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; text-align: center; } #l-shadow_ { position:absolute; left:81px; top:57px; width:20px; height:542px; background-image: url(images/l-shadow.jpg); } #title-content_ { left:139px; top:143px; width:452px; height:33px; background-image: url(images/title-content.jpg); float: left; } #ncaa_ { height:67px; background-image: url(images/ncaa.jpg); float: right; width: 146px; } #r-shadow_ { position:absolute; left:699px; top:56px; width:30px; height:544px; background-image: url(images/r-shadow.jpg); } #e-mail-templ-final2-12_ { position:absolute; left:81px; top:154px; width:20px; height:446px; } #e-mail-templ-final2-13_ { position:absolute; left:699px; top:156px; width:30px; height:444px; } #content_ { left:101px; top:180px; width:452px; height:349px; background-color: #FFFFFF; float: left; } #e-mail-templ-final2-15_ { position:absolute; left:553px; top:214px; width:146px; height:1px; } #big-pix-golf_ { left:553px; top:215px; width:146px; height:265px; background-image: url(images/big-pix-golf.jpg); float: right; } #facilities_ { left:553px; top:480px; width:146px; height:16px; float: right; background-image: url(images/facilities.jpg); } #facilities-pix_ { left:553px; top:496px; width:146px; height:51px; float: right; background-image: url(images/facilities-pix.jpg); } #e-mail-templ-final2-19_ { position:absolute; left:101px; top:529px; width:156px; height:18px; } #bottom-shadow_ { left:101px; top:529px; width:452px; height:18px; background-image: url(images/bottom_shadow.jpg); float: left; } #e-mail-templ-final2-21_ { position:absolute; left:262px; top:529px; width:291px; height:71px; } #e-mail-templ-final2-22_ { position:absolute; left:101px; top:547px; width:19px; height:53px; } #lu-seal-bottom_ { position:absolute; left:186px; top:365px; width:137px; height:53px; } #bottom-backg_ { left:101px; top:547px; width:598px; height:53px; background-image: url(images/bottom-backg.jpg); float: left; } #e-mail-templ-final2-25_ { position:absolute; left:553px; top:547px; width:47px; height:53px; } #apply-now_ { position:absolute; left:434px; top:390px; width:86px; height:53px; } #e-mail-templ-final2-27_ { position:absolute; left:686px; top:547px; width:13px; height:53px; } I am designing a login box for my web page and have seen how to do it with tables but was wondering if CSS is a better way to do it. With a tables I set up a table with 4 cols and 3 rows. 1st row had the title spanned across both columns, 2nd row had "username" in first col and textbox in second col, 3rd row had "password" in first col and textbox in second col and the 4th row had the login button in the second column. With CSS I've made a div to hold the content and inserted a div for the titlebar. Do I now just keep placing divs inside this content div for the rest of the elements? Is this a good way to approach the login box or should I just put a table inside the original div? |
|||||||