|
CSS - Table Type Layout In Css
Hello,
I have a perl script, and would normally do this with tables, but since tables are such a BAD THING ™ I've been trying to this with CSS, and I've spent too long on it thus far, so I'm looking for a bit of an assist Code: +----+-------------+--------------+ | id | date 1 | date 2 | | | | | +----+-------------+--------------+ what's the best way to accomplish this? --Ax Similar TutorialsI am attempting to construct a layout that is a bit more styled than the typical. I have seen it multiple times and would love it for my main page. It has a left column and a right column In the right column, I would like to split that into two equal columns, width-wise and then underneath that I would like to have three equal columns under the top two which can span as far down as possible. I attempted it using code that I have laying around, and of course, it works in IE (more or less) but absolutely dies miserable in Netscape and Firefox. the link to the test page is http://www.test.angrybrownman.com and the css sheet would be www.test.angrybrownman.com/style_test.css The css for the site (since I am not sure the link will link) is as follows: #container { width:775px; margin:0px auto; background-color:transparent; border:1px solid #424242; line-height: 100%; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #top { padding:0px; height:100px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#FFFFFF; } #main { padding:0px; height:200px; background-image:url(main.jpg); background-repeat:no-repeat; background-position:top left; background-color:#fff; } #mid_box { padding:0px; height:200px; background-color:transparent; margin:0px 0px 0px 258px; /*background-image:url(mid_spacer.jpg); background-repeat:no-repeat; background-position:top left;*/ } #leftnav { float: left; width: 259px; margin-top:0px; padding:0px; } #rightnav { float: right; width: 150px; margin-top:0px; padding:0px; background-color:transparent; border-left:1px solid red; /*border-right:1px solid green;*/ border-top:2px solid #003366; } #center { margin-left: 259px; margin-right: 0px; margin-top:0px; padding:0px 0px 10px 0px; background-color:#fff/*#649DD8*/; border-top:2px solid #003366; } #leftbox { width: 168px; float: left; background-color:transparent; } #rightbox { width:167px; float: right; background-color:transparent; } #middle { margin-left: 169px; margin-right:168px; margin-top:0px; padding:0px 0px 0px 0px; background-color:transparent; } #left_top { width: 250px; float: left; background-color:transparent; } #right_top { width:250px; float: right; background-color:transparent; } I know it is a heavy duty question. The test page at that link has the css placed in each div af what I am trying to do. I am close...I think...I am just not understanding the model somehow to keep it together in the other 2 big browsers. Any help would be appreciated very, very much. Thanks a million. Jon Hi everyone- I'm a rank beginner at CSS and am trying to figure out the whole positioning thing -- you know, the stuff that was generally a no-brainer using tables back in the day. :-) For learning purposes, I'm trying to do this with only CSS and no tables. So, here's my problem. I'm creating a simple two-row layout. The first row contains two columns, and the second/bottom row contains only one. I'm trying to make sure the bottom row always remains below the longest of the two columns in the row above it. With the code below, I can cut text from the left column and the bottom row maintains position. If I cut from the right, however, the bottom row moves up and is partially hidden under the left column. I've tried using both absolute and relative positioning for the bottomRow DIV, but no luck. I'm sure this is probably something simple that I'm just not getting. Any thoughts? Thanks in advance... - Tom Tedeschi Code:
<style type="text/css" title="theStyle" media="screen">
/* <![CDATA[ */
#leftCol {
background: #c0c0c0;
position: absolute;
top: 1px;
width: 250px;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
#centerCol {
background: #f7f7f7;
position: relative;
top: 1px;
left: 250px;
width: 250px;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
#bottomRow {
background: #929292;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
/* ]]> */
</style>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<div id="bigBox">
<div id="topRow">
<div id="leftCol">
<b>TopRow/LEFTCOL here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
<div id="centerCol">
<b>TopRow/CENTERCOL here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
</div>
<div id="bottomRow">
<b>BottomRow here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
</div>
</body>
</html>
i'm trying to get rid of my tables. i have a test site i am making and i have 2 questions. first, how do i make the footer attach at the bottom, and then how do i make the main part stretch all the way down to the footer (between the tabs and the footer)? the web site is at gegg dot bandsondemand dot com slash test thanks! Hi all, I'm trying to complete my first table-less layout and I have run into a couple of issues that I haven't been able to solve. In the past I would have done this with tables and would have had no problem. Please help! See my fledgling steps below. Question #1: In Fire Fox I get big gaps between my header div and my main div and my main div and my footer div. This doesn't happen in IE7. What's up with this? Question #2: I would like my content div to expand to 100% of the screen. In the past I could have done this with a height=100% in a <TR> tag. How do I do it with CSS? Thanks a ton! - Andy P.S. I'm sorry if these are total newbie questions that get answered all the time. Think of it as an opportunity to look really smart and awe me with you brilliance ;-) Code: <!DOCTYPE html PUBLIC "-//W#C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
margin: 0;
padding: 0;
background-color: #0F1144;
text-align: center;
}
#wrapper{
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 820px;
text-align: left;
}
#header{
padding: 0;
margin: 0;
border: 0;
background-color: yellow;
height: 75px;
width:820px;
}
#main{
margin: 0;
padding: 0;
border: 0;
width:820px;
background-color: blue;
}
#navigation{
float: left;
background-color: #FFFFFF;
margin: 0;
padding: 0;
border: 0;
width: 260px;
}
#content{
border: 0;
margin: 0 0px 0 260px;
padding: 0 0 0 0;
width: 560px;
background-color: green;
}
#footer{
clear: both;
padding: 0;
margin: 0;
height: 50px;
background-color: red;
width:820px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><p>header</p></div>
<div id="main">
<div id="navigation"><p>navigation</p></div>
<div id="content">
<p>I wish this div would expand vertically to fill the whole screen!</p>
<p>I wish this div would expand vertically to fill the whole screen!</p>
<p>I wish this div would expand vertically to fill the whole screen!</p>
<p>I wish this div would expand vertically to fill the whole screen!</p>
</div>
</div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>
Hey mates, How can I make this layout work (A table, 2 tr , 2 td in each tr, 1st td in each row has differen width than other tds above or below it. So basically the 20% doesnt work) I tried using class for each td but they seem to overwrite eachother. Any hints? Code: <table>
<tr>
<td width= "50%"> column 1 </td>
<td> column 2 </td>
</tr>
<tr>
<td width= "20%"> column 1 </td>
<td> column 2 </td>
</tr>
</table>
im trying to make the switch from tables to css. I want to have a table with 2 colums so my css is as follows: Code: #mainbody
{
width: 800px;
border: #8FADB4 1px solid;
margin: 0 auto
}
#left
{
float: left;
position: absolute;
width: 325px;
background-color: #8FADB4;
}
#content
{
float: right;
width: 475px;
}
main body is what the whole code sits in, left is the left column and content is the right column. I then use the following code: Code: <div id="mainbody"> <div id="left"><p>left column</p></div> <div id="content"><p>content section</p></div> </div> the problem is that if i type a lot of content into the content section then the left column does not grow vertically, nor does the main body. How do i change this to act like a table where the column would grow?! thanks I am trying to layout a simple table in CSS and have numerous issues; the first and most confusing is why the computer header I am working on currently is not displaying correct. When I look at the computer style in chrome it shows that the height is computing to 31px which is correct but if I measure the image in Photoshop it is only drawing at 17px... if anyone could help I would appreciate it! I was going to post a link to the test page which has all the code cleanly displayed along with the images they use but I guess that is not allowed. I have copied the offending CSS code below. I use it by nesting one div inside another starting with table_head_left and working my way down. Code:
.table_head_left
{
background-image: url(fx/images/tbl_hl.png);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
padding-left: 14px;
height: 31px;
}
.table_head_right
{
background-image: url(fx/images/tbl_hr.png);
background-position: top right;
background-repeat: no-repeat;
background-attachment: fixed;
padding-right: 14px;
height: 31px;
}
.table_head_center
{
background-image: url(fx/images/tbl_ht.png);
background-position: top center;
background-repeat: repeat-x;
background-attachment: fixed;
height: 31px;
text-align: center;
}
Please look at this page - http://www.jimstrans.com/diagnosis.asp I've been working hard to get this table laid out and would appreciate some help with something. If you look at the table in IE all looks just as I want it to look. Now look at it in FF and you will see that the text (in the paragraphs w/ class of "cellp" do not align with the checkboxes, but rather are pushed down 2-3 pixels. I guess I could live with this but would really like to know why they are not aligning at the top with the checkbox. Also, does the way I laid this out code wise look ok? Was it neccessary to use the <p> in the td? Could I have put an absolute position on the input boxes (top left), a fixed width on the cells w/ a left padding to indent the text? I'd be curious to know what you think? Hello, I currently have a Table layout that uses 2 <td>s to display a picture in the left <td> and text in the right <td> so something like this: Code: <tr> <td>Image</td> <td>Text about the Image</td> </tr> Is there a way to rebuild this using DIV tags. I have had so much luck using Code: <DIV> <ul> <li>Image Text</li> <li>Image Text</li> </ul> The problem with this is the text doesn't display properly - It either displays underneath the image, or if I use "vertical-align:text-top", it aligns the top line of the text to the top of the image and then displays the rest of the text underneath the image. Any suggestions would be welcome if there is any way around this? I have worked as a web developer for two years now, and yet I still have not found a satisfactory solution to the problem of table-less layouts. Table-less layouts always end up needlessly complicated or full of CSS and other hacks. Here is the challenge for you all. I have a very simple table layout with header, left nav, main content, and footer: http://brentonboy.com/misc-pages/layouttest.html I am trying to figure out if there is a way to replace the table with CSS stuff only while meeting all of the following requirements: Must be a simple solution with as few HTML elements as possible. Must look and behave the same as the example table. Thus: When the content area is taller than the left nav, the blue of the left matches the height of the content exactly, and the footer drops down nicely below. When the left nav area is taller than the content area, the green of the content area matches the height of the left nav exactly, and the footer drops down nicely below. The solution uses new HTML and new CSS only... not looking for a javascript solution or something else. Do not make use of CSS hacks or any other hacks. All code must be valid. Do not make use absolute positioning: in case I need to center it or do some other fluid thing later. Also avoiding relative positioning would be great too. Must work flawlessly in every browser, just as the table does. Basically, I don't think it's possible to meet all of those requirements, which means that layout tables are better. Please prove me wrong! I know that there has to be a better way to do this than they way I did it with all sorts of "marging-left's". I was hoping there was an efficient way to do this without using a table or the table-layout properties. Code: <h1>Current Natoinal Average Rates*</h1> <p class="rateheader">Bus Types<label style="margin-left: 200px; ">Transfer</label><label style="margin-left: 45px; ">5 Hours</label><label style="margin-left: 45px; ">Day Rate</label></p> <p class="ratewhite">Deluxe Motor Coach<label style="margin-left: 145px; ">$230</label><label style="margin-left: 60px; ">$350</label><label style="margin-left: 60px; ">$735</label></p> <p class="ratepurple">Minibus<label style="margin-left: 220px; ">$175</label><label style="margin-left: 58px; ">$275</label><label style="margin-left: 62px; ">$600</label></p> <p class="ratewhite">Schoolbus<label style="margin-left: 205px; ">$120</label><label style="margin-left: 57px; ">$200</label><label style="margin-left: 64px; ">$400</label></p> <p class="ratepurple">Entertainer<label style="margin-left: 201px; ">N/A</label><label style="margin-left: 65px; ">N/A</label><label style="margin-left: 72px; ">$800</label></p> <p class="ratewhite">Executive<label style="margin-left: 211px; ">N/A</label><label style="margin-left: 63px; ">$600</label><label style="margin-left: 64px; ">$1200</label></p> <p class="ratepurple">Trolley<label style="margin-left: 227px; ">$360</label><label style="margin-left: 56px; ">$550</label><label style="margin-left: 65px; ">$870</label></p> <p class="ratewhite">Double Decker<label style="margin-left: 180px; ">$400</label><label style="margin-left: 57px; ">$600</label><label style="margin-left: 64px; ">$950</label></p> <p class="ratepurple">Van<label style="margin-left: 242px; ">$150</label><label style="margin-left: 57px; ">$250</label><label style="margin-left: 66px; ">$500</label></p> <p class="ratewhite">*Rates vary from city to city. Run a search for specific rates in your area.</p> 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? What is your take on using "table-layout:fixed" property? I'm using tables strictly for data output, not for layout. Is it a good practice to use it? Hi all, Ooooohhh, I think I have a good one... I am trying to eliminate every single table on my site. I have ONE more page to go. http://www.bartlett-family.net/chri...cstrategy2.html is what the original layout, with tables. I need to replace it with a table-less version. I'm attempting that at http://www.bartlett-family.net/chri...icstrategy.html. I've run into a problem. Notice on the first page how S, D, H, & P are all supposed to be different colors. That works out fine when, like in the row for "8" all the items are the same (in that case, "H"). But it just won't work when there's any combination of H, S, D, & P. Have a look at my CSS and source. Can anyone think of a method to solve my dilemna here? Should I be using lists of some kind instead? Chris hi I am shifting to web 2.0 therefore learning a lot of things that I used to do with tables. Now I have a task to make a form and also display text in parallel style e.g Name User Name ------- Rating stars Email User Email ------- Balance amount to accomplish this in tables we might make two cells to hold Name, EMail in one and Rating and Balance in the second then in each CELL further rows and cells for each entity e.g Name User Name how can we display this kinda info using pure CSS? I found a website online http://www.compare-voip.net/viatalk.php there towards the bottom you can see how the email and rating stats are displayed in two columns, this is done with tables though I want to do the same with CSS only thanks in advance my site is totally based on tables. there is one huge table, which outlines the area for the header, left panel menus, right panel boxes, and the footer. inside those, the header is another table, the left panels are another table, each panel being a new row, the right panel boxes are the same thing, and the footer is a table just like the header. that is what every page is like. where on earth do i start? here is what i'm thinking so far, but i need confirmation because i have never done this befo header is just a regular div left panel menus are a div that floats left right content panels is a div that floats right footer is just a regular div will that work? can any1 specify if i need any other css that the float to make this work? So does anyone use div tags only and no tables at all? Not even for tabular data? I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs. I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems! Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O ) Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE. I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is: Code: body {
background: #EFF7FF url(bg.gif);
text-align:center;
padding:0;
}
#outer {
border:5px double #234B77;
width:650px;
padding:0px;
margin:0px;
}
#hdr {
width:650px;
height:151px;
background: #21558C;
}
#bar {
width: 650px;
height:90px;
background: #ADD7EF url(rainbowsitedesign_2x1.gif);
border:solid #000000;
border-width:0px;
padding-top: 37px;
text-align:left;
}
#bodyblock {
position:relative;
background: #ADD7EF url(backgroundforsite.gif);
width:650px;
padding:0;
}
#l-col {
float:left;
background: #ffffff url(white.gif);
color: #333333;
width:140px;
border-left: 1px solid #234B77;
border-right: 1px solid #234B77;
border-top: 1px solid #234B77;
border-bottom: 1px solid #234B77;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
#coltop {
height: 42px;
background: #3971B5 url(tabletop.gif);
color: #000;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#cont {
width:485px;
background: #ffffff url(white.gif);
border-left:1px solid #234B77;
border-right:1px solid #234B77;
border-top:1px solid #234B77;
border-bottom:1px solid #234B77;
text-align:left;
margin-top:10px;
margin-bottom:10px;
margin-right:5px;
font-size: 100%;
font-weight: normal;
color:#1A3958;
}
#contentop {
width:485px;
height:42px;
background: #3971B5 url(tabletop.gif);
color: #333333;
border-left:0px solid #234B77;
border-right:0px solid #234B77;
border-top:0px solid #234B77;
border-bottom:1px solid #234B77;
margin:0px;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#ftr {
width:650px;
height:25px;
background:#346EB4;
color: #333333;
border: 0px solid #000000;
margin:0;
}
#ftr2 {
width:650px;
height:25px;
background:#346EB4;
border: 0px solid #000000;
margin:0;
}
#ftr3 {
width:650px;
height:99px;
background: #346EB4 url(websitedesign.gif);
border: 0px solid #000000;
margin:0;
padding-top: 20px;
}
#home {
width:50px;
height:10px;
border: 1px solid #000000;
margin:0;
}
p:first-letter {
font-size: 120%;
font-weight: bold;
}
a.red:link { text-decoration: none; color: #234B77; }
a.red:visited { text-decoration: none; color:#ff0000; }
a.red:hover { text-decoration: underline; color:#ff0000; }
a.orange:link { text-decoration: none; color: #234B77; }
a.orange:visited { text-decoration: none; color: #ff6600; }
a.orange:hover { text-decoration: underline; color:#ff6600; }
a.yellow:link { text-decoration: none; color: #234B77; }
a.yellow:visited { text-decoration: none; color: #ffff00; }
a.yellow:hover { text-decoration: underline; color:#ffff00; }
a.green:link { text-decoration: none; color: #234B77; }
a.green:visited { text-decoration: none; color: #009900; }
a.green:hover { text-decoration: underline; color:#009900; }
a.blue:link { text-decoration: none; color: #234B77; }
a.blue:visited { text-decoration: none; color: #0000ff; }
a.blue:hover { text-decoration: underline; color:#0000ff; }
a.violet:link { text-decoration: none; color: #234B77; }
a.violet:visited { text-decoration: none; color: #660066; }
a.violet:hover { text-decoration: underline; color:#660066; }
#ftr2 a:link { text-decoration: underline; color: #152F4D; }
#ftr2 a:visited { text-decoration: line-through; color: #ccc; }
#ftr2 a:hover { text-decoration: none; color: #88B2DC; }
Here are the two pages: With doctype: http://rainbowsitedesign.com/withdoctype.html Without it: http://rainbowsitedesign.com/nodoctype.html How can I fix both my browser problems and my doctype problems? Any help is app! I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine. In the image I attached, "1" is the final result I am trying to get. The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes. In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it. Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution! Anyone got any ideas that isn't Javascript based? Thanks! I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: |
|||||||