|
CSS - Table -> Css Layout Changeover... This Is Impossible.
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? Similar TutorialsI want my page to have 3 columns spread over 100% of the page. the 2 outer columns are just for backgroundcolors (they should differ) and the center one is the actual content of the page. Everything should be 100% height en the center div also contains 2 divs besides eachother! like this: http:/ /www.benkhard nl/sites/divs/divs.jpg just go to index.html for the page/css view. I can't seem to get it right, any help? Thanks! http://www.hostnet.nl/bestelmodule/...er_gegevens.php can something like this be done with or without CSS? and without everything beeing a fixed width i think its not possible but im having very much trouble with that idea so thats why i ask for your opinion Hi again , I've got one more question: when you've used a 2 or 3-col layout for your webpage (the right, possibly the middle col holds the actual content, the others are floating divs used as menus), you can no more use the clear property for the actual content? Because it clears the space until all floating elements ends - including menus , so it finally looks like here. Here are CSS used for this page: CSS_1 (used for the fotogallery only) and CSS_2 (used mainly for layout of the web). I think there is a solution, I've already thought it can be found on BonRouge's pages (very useful pages by the way), but he made the menu using absolute positioning . So has anyone any idea how to solve this? And maybe one more detail: can be pictures in this fotogallery centered in their parent <div> (red bordered)? They're all floating, so it's not so easy, if possible. Oh man, rebuild these pages without tables, it really drives me mad... I am stuck using a tool in asp by now choice of my own. I am also stuck with a layout that is impossible with the tool, I think. The tool generates a table like so: Row 1 Row 2 Row 3 Row 4 The html looks like: <table> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> </table> I would love to find a way in css to get this to layout like Row 1 Row 2 Row 3 Row 4 Or Even better would be Row 1 Row 2 Row 3 Row 4 I tried everything I could think of to get this to happen. I read the specifications and I was under the impression that if you run position on a table row it turns into a block box. Any help? Hi, Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea??? Cheers, 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;
}
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 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>
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! 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>
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? 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> 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 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! 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? 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? So does anyone use div tags only and no tables at all? Not even for tabular data? 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 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! |
|||||||