Layout question [Archive] - CodingForums.com

royall

04-09-2005, 11:33 PM

How would I be able to construct this:
http://img157.exs.cx/img157/931/layouthome8ee.jpg

Would I create a background image and position the content according to the layout?

Edit: I just realized I was supposed to post this in the HTML/CSS forum, so I expect a Mod is going to move it there. If not i wont protest against it.

rpgfan3233

04-10-2005, 12:18 AM

Just the basic CSS and XHTML:
body { text-align: center; }

div#pageContainer {
margin: auto;
width: 80%; /* size to your liking */
text-align: left;
}

div#banner {
float: right;
}

div#menu {
float: left;
width: 20%; /* size to your liking */
height: 90%; /* size to your liking */
clear: right;
}

div#news {
float: left;
width: 60%; /* size to your liking */
height: 95%; /* size to your liking */
}

div#sidebar {
float: left;
width: 20%; /* size to your liking */
height: 95%; /* size to your liking */
}

br#clearing {
clear: left; /* for height purposes */
}

------
<body>
<div id="pageContainer">
<div id="banner">

</div>
<div id="menu">

</div>
<div id="news">

</div>
<div id="sidebar">

</div>
<br id="clearing" />
</div>
</body>

I think that should work in IE and Gecko browsers.

royall

04-10-2005, 12:20 AM

What about FireFox?

Edit: Nope, doesnt work on firefox. Got anything that will? I use firefox and I would like it to be an all-brower (is cross browser the term?) layout please.

person

04-10-2005, 01:10 AM

you could try creating a background image with all of your content boxes in, and position your content using layers (<div>) and tables.

royall

04-10-2005, 01:12 AM

Would I create a background image and position the content according to the layout?

You could have just said "yes", but ok

chilipie

04-10-2005, 08:17 AM

What about FireFox?Just to clear up the confusion, Firefox is also a Gecko browser (from the same family as Mozilla and Camino).

you could try creating a background image with all of your content boxes in, and position your content using layers (<div>) and tables.I wouldn't recommend doing this, mainly because of the slow loading times. Also, it makes it impossible to have a fluid layout ;) .

person

04-10-2005, 12:28 PM

Also, as I have just found out, layers become mis-aligned in different browsers.

_Aerospace_Eng_

04-10-2005, 07:39 PM

is this going to be a fluid layout or a fixed one?

royall

04-10-2005, 10:25 PM

What does fluid mean? http://www.clicksmilies.com/s0105/sauer/angry-smiley-044.gif

Sorry, I'm not good on the computer words.

rpgfan3233

04-10-2005, 10:27 PM

"Fluid" in Web design refers to a page that stretches or shrinks to fit a user's resolution. Sort of like a "one size fits all" page.
"Fixed" refers to a page that is suited to only one resolution, such as 800x600 or 1024x768, and not another.

royall

04-10-2005, 10:33 PM

Then fixed I guess.

JamieR

04-10-2005, 11:16 PM

Then fixed I guess.
Well if you want a accessible site, which views properly in different screen resolutions and browsers, then go for a fluid layout rather than fixed.

ronaldb66

04-10-2005, 11:27 PM

go for a fluid layout rather than fixed I'd like to disagree; this all depends on which -base- resolution you would be aiming at. Besides that, neither a fixed nor a fluid layout should interfere with accessibility.

If you want to make optimal use of the canvas offered in various visitor environments, a fluid layout would be the better choice; if you want to excercise more control over dimension, line length, basic layout, etc. then maybe a fixed width layout would fit the job better. To achieve maximum results this would mean limiting the maximum width to something slightly under 800 pixels (typically 750 to 760 px).

royall

04-10-2005, 11:52 PM

Hmm....all that I'm really looking for is a user and editor friendly interface that will work in most/all browsers. Especially FireFox and IE.

_Aerospace_Eng_

04-11-2005, 05:31 AM

here is a fixed layout, it works in IE 6.02, FF 1.0.2, and Opera 7.54
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="header1">1</div>
<div id="header2">2</div>
</div>
<div id="container2">
<div id="leftcol">3</div>
<div id="midcol">4</div>
<div id="rightcol">5</div>
</div>
</div>
</body>
</html>

royall

04-11-2005, 08:20 PM

This is all I get with that code on FF:

http://img199.echo.cx/img199/8184/screenshot8ud.jpg

http://www.clicksmilies.com/s0105/fragend/confused-smiley-012.gif http://www.clicksmilies.com/s0105/fragend/confused-smiley-009.gif

_Aerospace_Eng_

04-12-2005, 03:46 AM

pretty strange sounds like a saving problem, how did you save the html file? It needs to be saved as ascii or utf-8, here is that example attached

royall

04-14-2005, 11:10 PM

http://www.clicksmilies.com/s0105/grinser/grinning-smiley-004.gif Thanks _Aerospace_Eng_ I owe ya two http://www.clicksmilies.com/s0105/grinser/grinning-smiley-008.gif

Now I can continue my site.

_Aerospace_Eng_

04-16-2005, 08:46 AM

yw glad to have helped