|
HTML - The Case *against* Tableless Layouts.
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? 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>
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%; } Just before I start, I want to say I'm a total beginner, and don't reallu understand much about HTML and things. For my website, I want a new layout, and I usually download one from DayDream Graphics. But, my old layout was really annoying, as when I wanted to change something on the navigation or side bar, I would have to change the HTML on every page. I know with a lot of other layouts, that when you want to change the side bar, you can just change one thing, and it'll change on everyother page. That's because the side bar is on a different page (I think it might be in the style or something), apposed to the main body of my index. I really want a layout like this, but I don't know what sort of layout to get. Did anything I say just make sense to you, if so please help me! For example, this is the kind of layout that has what I'm talking about. - http://www.collybird.net/alist (The page may take a while to load!) 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? Hello, Lately I've been getting more into HTML/CSS, but I have a problem. What I'm trying to do is make the website the same size on every browser window / resolution. I have heard Fluid Layouts does the trick, however I have not clue how to do that. I've tried going by tutorials, but no one really explains it step by step. What I was wondering if anyone has a link to a "Video Tutorial" on learning how to do Fluid Layouts, or if anyone knows a different way to accomplish this. Thank you Hey, I have made a layout in Photoshop CS3, and would like to start coding it into a website. Anyone have a tutorials that they can point me to inorder to achieve this? Cheers. -JT Hi everyone. I'd like people's opinion on something. That something being layout design, or more specifically, width. When designing your website layouts, what width do you optimise your site for? Which technique do you find works best? I have had a tendency to make sites that are centered in the browser window and are optimised for 800px width screens, usually setting up the layout to be 788px wide, allowing 12px for a scrollbar if required. Another technique I have considered is the so-called Holy Grail liquid layout. With larger screens and half decent graphics cards now a lot cheaper than in the past, do you still optimise based on a 800x600 resolution, or 1024x768? I guess it can depend on the website's target audience as to how it is designed. For instance, a website aimed at a target audience of the elderly or younger children would need to have an easier to follow layout with larger text etc on screen. What are your thoughts on this? Hi I hope someone can help me here, please view my site at www.sydneycivilcelebrant.com/divsite/index.html - when I zoom in or out using ie, the layout becomes all out of order, yet when I do it in firefox its fine. viewing the site with chrome or safari doesnt work yet as im still trying to figure out the css for both sets of browsers, but any help you could afford would be greatly apreciated! thanks Hi I want to give the visitors the option to view a layout of their choice when they enter my site can someone tell me how to do this please but instead of basically making 3 sites for 3 lots of HTML which is useless when i can do something simpler in just one go if this makes sense thanx I want it to be like so: first page visitors see will have previews of the layouts they click one then for the rest of the site that's there layout i dont want them to enter and be able to choose a different one while browsing the rest of the site with like a banner at the top of the page with the different layout options I have made 3 layouts for 3 headers Hello guys and girls! I'm currently working on a Web Design assignment for College, and I'm having a hard time trying to find the second way of building a lay out using HTML. We have done the table way of doing it, and I have got that way down, but i can't find out the other way. Could you guys maybe give me a little help, or at least a push in the right direction? Thank you! i recently learned html, still a n00b though, lol i made a layout, which im proud of but i wanna know how to make a layout changer, which i can pput as a topic and have links, when ppl click them, the layout changes, and u can always chnge it bak to the original or something else mind helping me out? Ok so here I am yet again with another mess on my hands. I know tables are tales of yore so I have recently dived into the world of divs. Well now I find myself with a coding issue that I could easily achieve with a table no problem. If I was using a table I could set a BG image and then I could put text over the image or another transparent image over that. I am wanting to achieve the same effect but with divs. If I am not mistaken all I have to do is create a div and float another div on top of that div however this I am finding is not as easy for the CSS beginner. Mind you I am not new to programming. So how is it done? here is a link to the site I am working on DeeJayOctane I am wanting to put text on top of the image in the nav div. But yet again this alludes me for some odd reason. Any help would be appreciated! Thanks Hi, I have many pictures withthe extension ".JPG" on the web site. In my code Code: <td><a href='../Photos/2011/DSC_0001.jpg' target='_new' title='Click to enlarge'> <img src='../Photos/2011/DSC_0001.jpg' width=100 height=75 border=0></a> <br>Photo1</td> They never show up, but if I replace "jpg" with "JPG", then everything is fine. Why? Thanks. I apoligise for what may seem a basic question but I have built a very large website in HTML 4.0, which runs fine in both IE7 and Firefox 3. Out of habit, I put the first letter of each name - folder, file, and image, in upper case. I have been told, however, that I shouldn't have done that as it could cause problems with some browsers. As there really is a very large number of folders, files, and images that I would have to change, and because the website works fine with IE7 and Firefox, I thought I'd ask what forum members know (or think). I've looked in my book on HTML and searched the Internet but have not managed to find the answer anywhere. TIA Tyger I am simply developing a HTML website page, on this page, there are two flag images(USA and Poland) which is used as a language selection of the page for users. I am wondering, for this single web page development (without any backend system), is there any efficient way to implement the page localization(that's display the page in different language) based on the flag selection from user? Thank you in advance for any help. This is really strange. Normally I would expect to see something like this happening on pure CSS sites, but this is a good old fashioned table-based layout. If you go to: url and try to click on any of the menus, you'll see the menu item below it moves up. Also if you click on the logo it jumps down to the menu area? Very bizarre and have never seen this behavior in the 10 years I've been coding. Any insight would be greatly appreciated :-) |
|||||||