|
HTML - Tableless Layout
Hello All,
This is my second attempt to layout my page without using table tags. I understand many of the css tags but apparently I am still not proficient enough with css to solve the problems I've encountered. I am trying to place a column of 6 boxes on the left, a column of 6 boxes on the right of the page, a main box between the two columns, and a row of 3 boxes below the main box at the bottom of the page. All of the mentioned columns and row of boxes are encased in a container box. I was able to create the columns but not the row of boxes. Please take a look at my tags to see where I went wrong, thank you in advance for your help. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome</title>
<style type="text/css" media="all">
body {
text-align: center;
}
#Left #Right {float:left;}
#Container{
width: 1000px;
margin: 0 auto;
height: 900px;
background: white;
text-align: Left;
border-style:dashed;
border-width:3px;
border-color:black;
}
.float {
float: left;
width: 200px;
}
.float2 {
float: Right;
width: 200px;
}
.Dashed {
border-style:dashed;
border-color:black;
float:left;
width: 197px;
height: 147px
}
#Left .Dashed {
float:left;
border-width: 0px 3px 3px 0px;
border-style:dashed;
border-color:black;
}
#Right .Dashed {
float:right;
border-width: 0px 0px 3px 3px;
border-style:dashed;
border-color:black;
}
.BottomLeft{ border-style:dashed;
border-color:black;
width:197px;
height:146x;
border-style:dashed;
border-width:3px 3px 0px 0px
}
.Dashed-BottomRight{ border-style:dashed;
border-color:black;
width:194px;
height:146x;
border-style:dashed;
border-width:3px 3px 0px 0px
}
</style>
</head>
<body>
<div id="Container">
<div class="float" id="Left">
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed-bottom"></div>
</div>
<div class="float" id="Main">
<div class="BottomLeft">
</div>
<div class="BottomrRight">
</div>
</div>
<div class="float2" id="Right">
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed"></div>
<div class="Dashed-Bottom"></div>
</div>
<div class="float" id="Bottom">
<div class="BottomLeft">
</div>
<div class="BottomrRight">
</div>
</div>
</div>
</body>
</html>
Similar TutorialsHi all, I'm trying to create a liquid design using tableless design, but im having a slight problem. I'm aware that you should use a div tag and set the width in percentages but i have two images in the header, so while the header div is set to 100% the images inside arent and therefore the website only works on the computer i have developed the website on. Is there a way around this problem. I have pasted the header code below: Code: <div id="header"> <img src="Images/spacer.gif" width="34" height="1" border="0" /> <a href="Index.html"><img src="Images/Header1a.jpg" alt="Angies Florida Villa - Rent Our Luxury Villa At A Low Price!" width="587" height="130" border="0" /></a> <a href="#"><img src="Images/Header_3.jpg" alt="Angies Florida Villa - Rent Our Luxury Villa At A Low Price!" width="480" height="130" border="0" /></a> </div> Code: #header{ background-color:#FFFFCC; border-style:solid; border-color:#000000; border-width:1px; height:130px; width:100%; } Recently one heck of a lot of stuff about why you should use tabless layouts, but I have yet to find any reason to use tabless layouts, apart from their fashionable and W3C say so. However I have found several not to use them. Let me start with a plain simple myth about: Tabless layouts are more browser compatibly. Right? I frequently seen Mozilla Firefox, and IE process tabless layouts in quite different ways. Yet every time I have seen a table based layout, virtual browser has processed it exactly the same. The only exception I have seen is a percentage height on a table. Conitinuing on: Positioning Also has anyone here found with nested div's, a reliable way of positioning a nested div and still keeping firmly fixed to the parent? Ok, you can use the absolute position and make sure the div is within the area of the parent, what happens if you move or resize the parent div? I have yet to find of way of making sure the child stay in a position relative to is parent, apart from not using positioing at all. If their is a way of reliably positioning a div relative to its parent, then I would be very glad to know. Fixing a 'div' to another div. Secondly, if you got a multiple column layout, without using JS, I yet to see a way of fixing two or more divs to together to make sure that they are always the same height. With a table layout, you just had three columns in the table, and they will be fixed together, no faffing about Overflowing Content. Anyone here ever had a content div nested in a parent div, What happens when the content divs hot taller than the parent. In a very large number of setups, the contents of the content will flow straight out the parent. To sort the problem out you resize the parent. With a table, whats in the table stays in the table. I have yet to see it happen any other way. This is how things are my experience, I have yet to see any article that tells any way of doing that completely avoids all of these problems. If you know a way of avoiding these problems please, if not, and I ask the question, what is the practical point of tableless layouts? Hello, I am having trouble converting the following example table into a nice tableless layout: Code: <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td><img src="./left_image.gif" border="0" /></td> <td style="background: url(./bg_image.gif) top left repeat-x;" width="100%">Content</td> <td><img src="./right_image.gif" border="0" /></td> </tr> </table> The main problem is that center 100% width cell. A 100% width div with a div either side doesn't work... Any ideas on how I would go about this? Are there in depth tutorials on making a Div layout? Tables are making way more sense. How do you make a div float to the right of something without having it move to the bottom when a page is shrinked? How do you make a div take up space within a div that not taken out? Like in a div. 80%, inside that div is a 100px div, then have another div inside the 80% div that uses the rest of the space? and how do you fix this? http://vertion.fused.ws/div.html Is it possible for me to upload a picture of my template I sketched and you guys tell me what I need to do in order to accomplish this? Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. I have this gif layout http://i21.tinypic.com/140dn5l.jpg But how Do i turn it into a website or like write stuff on it with html? Please help I can do a bit of html Ok, I've made some changes to my navigation bar on my website with Fireworks so its more interactive. I've now implemented into my html but it has throw a certain part out on the page. Its the small picture thumbs at the bottom of the page, they are supposed to be in one row accross the page, now they go underneath each other. I've been looking for ages now to see the problem but I can not work it out. Here are 2 links to the pages, the first one is the one that works previously and the second is the changed one. If you can see the problem I would be so grateful, thanks. http://www.ashley-stone.co.uk/psychedelic.htm http://www.ashley-stone.co.uk/psychedelic2.htm I'd like to have an image "inside" a block of text such that the text surrounds it. Here's a mock-up: Is that possible? I've tried various things but no luck yet. this is the way it looks right now: http://christoffer.wicb.ots.dk/byrummet/ but i want it to look like this: also with the rounded cornors but i have tryed lot of things but cant get it to work can u help me?? http://i179.photobucket.com/albums/w293/Necro6666/th_****Layout.jpg Thats a link to a picture of my crappy layout going to ask a friend to make a background for me i just need a better layout if someone can help me i'll be gratful Heres the codeing HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Funt's Anime</title>
<style type="text/css">
body {
background-color: rgb(58, 95, 135);
margin-left: 10%;
margin-right: 10%;
border: 5px rgb(90, 150, 150);
padding: 30px 40px 10px 20px;
font-family: sans-serif;
}
</style>
<style type="text/css">
div.c1 {position:absolute;left:500px;top:-10px}
div.c2 {position:absolute;left:150px;top:58px;
margin-left: -5.11%;
margin-right: 55%;
border: 2px solid rgb(150, 150, 150);
padding: 0px 5px 0px 5px}
div.c3 {position:absolute;left:0px;top:58px;
background-color: rgb(205, 205, 205)}
div.c4 {position:absolute;left:0px;top:0px;
background-color: white}
div.c5 {position:absolute;left:403px;top:58px;
margin-left: -5.11%;
margin-right: 40%;
border: 2px solid red;
padding: 0px 5px 0px 5px}
div.c6 {position:absolute;left:703px;top:58px;
margin-left: -5.11%;
margin-right: 10%;
border: 2px solid green;
padding: 0px 0px 0px 0px}
</style>
</head>
<body>
<div class="c1">
<h1>Funt's Anime</h1>
</div>
<div class="c4">
<table width="1280">
<tr><td></td></tr>
</table>
<div class="c2">
<p align="center">Complete List</p>
<hr size="4" align="left" width="100%" color="gray">
<p>May, 09, 2009</p><p>The following Anime are complete:<ul>
</ul></p>
</div>
<div class="c5">
<p align="center">New Episodes</p>
<hr size="4" align="left" width="100%" color="red">
<p>The following have been added to Anime:<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
</ul>
</div>
<div class="c3">
<table border="2">
<tr><td>Links</td></tr>
<tr><td><a href="Anime/AnimeList.html">Anime</a></td></tr>
</table>
</div>
</body>
</html>
Hope someone can help as I'm tearing my hair out at the moment!! I'm working on a site for a friend, I have only ever used basic html to code my own sites, due to this I'm having problems with the layout my friend wants. I've created it with frames, not live yet but you can view it he http://www.ladin.co.uk/Jim/index2.html The layout with color either side and content in middle is how he wants it but obviously without frames, I'm not very knowledgeable where CSS is concerned so haven't a clue how to code it, thanks in advance. Linda How would I go about laying this site out similar to this site? I don't want the bubble text in the blue banner, I want to leave that as it is on my site. Thanks for any help! Hey guys, I created a webpage with a some pictures and roll over images. The page turned out perfectly well, except when i minimize the browser size. All the images from the right push over to the left depending on the size of the browser. Why does this happen ? Thnx in advance !! Hi there I have a layout problem with a news listings page. The listings are database driven and some results pages are fine whereas some others break. I wonder if anyone can help me? http://www.zleeps.co.uk/news.asp?offset=30 Cheers, Kev I really don't like my layout right now. http://www.nike-dunks.net/nike-dunks...2c35315e8843cf I want my new one to look like this with the navigation bar to the left side and the boxes like where the product is. Will some one please show me how or send me to a tutorial. Thank you. I have a template that is being used for a forum and the tables are not working out and everything looks distorted. PHP Code: <script language="JavaScript" src="modules/Forums/bbcode_box/add_bbcode.js" type="text/javascript"></script> <table border="0" cellpadding="3" cellspacing="1" width="100%" class="forumline"> <!-- BEGIN switch_username_select --> <tr> <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td> <td class="row2"><span class="genmed"><input type="text" class="post" tabindex="1" name="username" size="25" maxlength="25" value="{USERNAME}" /></span></td> </tr> <!-- END switch_username_select --> <!-- BEGIN switch_privmsg --> <tr> <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td> <td class="row2"><span class="genmed"><input type="text" class="post" name="username" maxlength="25" size="25" tabindex="1" value="{USERNAME}" /> <input type="submit" name="usersubmit" value="{L_FIND_USERNAME}" class="liteoption" onclick="window.open('{U_SEARCH_USER}', '_phpbbsearch', 'HEIGHT=250,resizable=yes,WIDTH=400');return false;" /></span></td> </tr> <!-- END switch_privmsg --> <tr> <td class="row1" width="22%"><span class="gen"><b>{L_SUBJECT}</b></span></td> <td class="row2" width="78%"> <span class="gen"> <input type="text" name="subject" size="45" maxlength="60" style="width:450px" tabindex="2" class="post" value="{SUBJECT}" /> </span> </td> </tr> <tr> <td class="row1" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="1"> <tr> <td><span class="gen"><b>{L_MESSAGE_BODY}</b></span> </td> </tr> <tr> <td valign="middle" align="center"> <br /> <table width="100" border="0" cellspacing="0" cellpadding="5"> <tr align="center"> <td colspan="{S_SMILIES_COLSPAN}" class="gensmall"><b>{L_EMOTICONS}</b></td> </tr> <!-- BEGIN smilies_row --> <tr align="center" valign="middle"> <!-- BEGIN smilies_col --> <td><img src="{smilies_row.smilies_col.SMILEY_IMG}" border="0" onmouseover="this.style.cursor='hand';" onclick="emoticon('{smilies_row.smilies_col.SMILEY_CODE}');" alt="{smilies_row.smilies_col.SMILEY_DESC}" title="{smilies_row.smilies_col.SMILEY_DESC}" /></a></td><!-- END smilies_col --> </tr> <!-- END smilies_row --> <!-- BEGIN switch_smilies_extra --> <tr align="center"> <td colspan="{S_SMILIES_COLSPAN}"><span class="nav"><a href="{U_MORE_SMILIES}" onclick="window.open('{U_MORE_SMILIES}', '_phpbbsmilies', 'HEIGHT=300,resizable=yes,scrollbars=yes,WIDTH=250');return false;" target="_phpbbsmilies" class="nav">{L_MORE_SMILIES}</a></span></td> </tr> <!-- END switch_smilies_extra --> </table> </td> </tr> </table> </td> <td class="row2" valign="top"><span class="gen"> <span class="genmed"> </span> <table width="450" border="0" cellspacing="0" cellpadding="2"> <tr align="right" valign="middle"> <td> <p dir="rtl" style="margin-top: 0; margin-bottom: 0" align="left"><span class="gen"> <span class="genmed"> <span lang="ar-sy"> </span></span></span></span><p dir="rtl" style="margin-top: 0; margin-bottom: 0"> <span class="genmed"><span style="font-size: 5pt"> </span></span></td> </tr> <span class="gen"> <tr> <td width="100%"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <p dir="ltr" align="left"><span class="gen"> <span class="genmed"> <span lang="ar-sy"> </span></span></span></td> </tr> <tr> <td dir="rtl"> <p align="right" dir="rtl" style="margin-top: 0; margin-bottom: 0"> <span style="font-size: 5pt"> </span><p align="left" dir="ltr" style="margin-top: 0; margin-bottom: 0"><span class="gen"> <span class="genmed"> </span></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td colspan="9"> <span class="gensmall"> <input type="text" name="helpbox" size="45" maxlength="100" style="width:450px; font-size:10px" class="helpline" value="{L_STYLES_TIP}" /> </span></td> </tr> <!-- Canned MOD Begin --> <tr> <td colspan="9">{S_CANNED_SELECT}</td> </tr> <!-- Canned MOD End --> <tr> <td colspan="9"><span class="gen"> <textarea name="message" rows="15" cols="35" wrap="virtual" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MESSAGE}</textarea> </span></td> </tr> </table> </span></td> </tr> <tr> <td class="row1" valign="top"><span class="gen"><b>{L_OPTIONS}</b></span><br /><span class="gensmall">{HTML_STATUS}<br />{BBCODE_STATUS}<br />{SMILIES_STATUS}</span></td> <td class="row2"><span class="gen"> </span> <table cellspacing="0" cellpadding="1" border="0"> <!-- BEGIN switch_html_checkbox --> <tr> <td> <input type="checkbox" name="disable_html" {S_HTML_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_HTML}</span></td> </tr> <!-- END switch_html_checkbox --> <!-- BEGIN switch_bbcode_checkbox --> <tr> <td> <input type="checkbox" name="disable_bbcode" {S_BBCODE_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_BBCODE}</span></td> </tr> <!-- END switch_bbcode_checkbox --> <!-- BEGIN switch_smilies_checkbox --> <tr> <td> <input type="checkbox" name="disable_smilies" {S_SMILIES_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_SMILIES}</span></td> </tr> <!-- END switch_smilies_checkbox --> <!-- BEGIN switch_signature_checkbox --> <tr> <td> <input type="checkbox" name="attach_sig" {S_SIGNATURE_CHECKED} /> </td> <td><span class="gen">{L_ATTACH_SIGNATURE}</span></td> </tr> <!-- END switch_signature_checkbox --> <!-- BEGIN switch_notify_checkbox --> <tr> <td> <input type="checkbox" name="notify" {S_NOTIFY_CHECKED} /> </td> <td><span class="gen">{L_NOTIFY_ON_REPLY}</span></td> </tr> <!-- END switch_notify_checkbox --> <!-- BEGIN switch_delete_checkbox --> <tr> <td> <input type="checkbox" name="delete" /> </td> <td><span class="gen">{L_DELETE_POST}</span></td> </tr> <!-- END switch_delete_checkbox --> <!-- BEGIN switch_lock_topic --> <tr> <td> <input type="checkbox" name="lock" {S_LOCK_CHECKED} /> </td> <td><span class="gen">{L_LOCK_TOPIC}</span></td> </tr> <!-- END switch_lock_topic --> <!-- BEGIN switch_unlock_topic --> <tr> <td> <input type="checkbox" name="unlock" {S_UNLOCK_CHECKED} /> </td> <td><span class="gen">{L_UNLOCK_TOPIC}</span></td> </tr> <!-- END switch_unlock_topic --> <!-- BEGIN switch_type_toggle --> <tr> <td></td> <td><span class="gen">{S_TYPE_TOGGLE}</span></td> </tr> <!-- END switch_type_toggle --> </table> </td> </tr> {ATTACHBOX}{POLLBOX} <tr> <td class="catBottom" colspan="2" align="center" height="28"> {S_HIDDEN_FORM_FIELDS}<input type="submit" tabindex="5" name="preview" class="mainoption" value="{L_PREVIEW}" /> <input type="submit" accesskey="s" tabindex="6" name="post" class="mainoption" value="{L_SUBMIT}" /></td> </tr> </table> <table width="100%" cellspacing="2" border="0" align="center" cellpadding="2"> <tr> <td align="right" valign="top"><span class="gensmall">{S_TIMEZONE}</span></td> </tr> </table> </form> <table width="100%" cellspacing="2" border="0" align="center"> <tr> <td valign="top" align="right">{JUMPBOX}</td> </tr> </table> {TOPIC_REVIEW_BOX} Could somebody take a look at that and see what I'm missing or need to add. Thanks |
|||||||