|
HTML - Tableless Liquid Designs
Hi 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%; } Similar TutorialsHello 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>
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? Hi Everyone, I'd like to learn the details about liquid layout and like to know how to develop the liquid layout site like timberland[dot]com. Looking forward for your ideas... Thanks... Yespee Hi, I am trying to create a liquid website. I have drawn up a prototype on paint and the image is attached. Can anyone help me to turn the prototype into a website? Thanks, Hi, I am building a website and would like to make it liquid. The website address is: http://www.cse.dmu.ac.uk/~p04283218/mainframe9/ Can anyone point me in the right direction as to how I would do this please. Thanks. Hi everyone. I am trying hard to use liquid design in my websites, so when I have a gallery of thumbnails, I want the number of rows of thumbnails to adjust according to the window size, avoiding horizontal scrolling. If you go to this url: http://www.surecarehomehealth.com/pa...ttheteam.shtml, you will see that resizing the window will do what I want it to. However, if you click on the first thumbnail, after opening that page, the thumbnails no longer adjust as desired. It seems that having that large image on top prevents this, but why? I can't figure it out. I can't see what would be preventing the thumbnails from collapsing to fit inside the window. Can anyone tell me why this is? Thanks. Aloha! Would anyone kindly review this simple html and tell me why the liquid layout doesn't work? Thank You. Uldra <html> <head> <title>Mystical Reflections</title> <meta name="description"content="The Artistry of Uldra Johnson"> </head> <body bgcolor="black" text="silver" link="purple"> <div align="center"> <table cellpadding="16" width="100%" border="0" cellspacing="0"> <tr> <td width="30%" align="center"> <td width="100%" align="center"><font face="chopinscript" size="+4">The Artistry of Uldra Johnson</td> <td width="0%" align="center"> </tr> <tr> <td width="30%" align="center"><font face="chopinscript" size="+4"> Shinay</td> <td width="40%" align="center"><font face="chopinscript" size="+3">All of my art<br> - my photography, my artifacts, as well as my writings and music -<br> is born of spirit, and its intent is spiritual.</td> <td width="30%" align="center"><font face="chopinscript" size="+4"><a href="photodirectory.html">Photography</a></td> </tr> <tr> <td width="30%" align="center"></td> <td width="40%" align="center"><img src="shinayreduced3.jpg"></td> <td width="30%" align="center"></td> </tr> <tr> <td width="30%" align="center"><font face="chopinscript" size="+4">Writing</td> <td width="40%" align="center"><font face="chopinscript" size="+3">May it touch your ruby heart,<br> and dance with your diamond mind.</td> <td width="30%" align="center"><font face="chopinscript" size="+4">Artifacts</td> </tr> <tr> <td width="30%" align="center"><font face="chopinscript" size="+2"><u>Contact info</u></td> <td width="40%" align="center"><img src="beig.gif"></td> <td width="30%" </td> </tr> </table> </div> </html> Hello! I recently uploaded a site I've been working on in Dreamweaver- www.gmerch.net My question is about templates. Currently the page will display with the main content below the nav bar, and not to the right. I suspect this is an issue of having a liquid template and not a fixed one. Am I on the right track here? Is there a way to switch to fixed without having to copy all of the site content into a new document? Thanks! Toby |
|||||||