Richard_Johnson
05-11-2005, 06:01 PM
Hello
Could anyone help me with this layout? I need to place the divs like the image attached.
Thats all, after that i can drop in the images i am going to make.
Thanks in advance.
Richard
sumeet
05-11-2005, 06:39 PM
<html>
<head>
<style>
#container{
width: 750px;
}
#header, #main, #left, #topright, #bottomright, #_left, #_right, #footer{
margin: 0;
padding: 0;
}
#header, #left, #topright, #_left, #_right, #footer{
}
#header{
background: #fcc;
}
#left{
background: #ccf;
float: left;
width: 15%;
}
#topright{
background: #00e;
float: right;
width: 85%;
}
#_left{
background: #cfc;
float: left;
width: 60%;
}
#_right{
background: #fef;
float: right;
width: 25%;
}
#footer{
background: #ffc;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>This is your website</h1>
</div>
<div id="main">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquipaliquip ex</p>
</div>
<div id="topright">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="bottomright">
<div id="_left">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue nulla facilisis at vero eros nulla facilisis at vero eros nulla facilisis at vero eros nulla facilisis at vero eros nulla facilisis at vero eros nulla facilisis at vero eros nulla facilisis at vero eros </p>
</div>
<div id="_right">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
</html>
It occurs to me that this won't help you out in the case of the IE bug. I don't like hacks, so I don't generally use them. If you want to hack it yourself for proper display that "browser" then please feel free.
Richard_Johnson
05-11-2005, 07:00 PM
Thanks, that was fast but unforunatly it doesn't display correctly.
I don't need the bg colours or anything fancy just the basic layout...
Thanks again for your time!
Rich
mcdougals4all
05-11-2005, 07:17 PM
How about posting what you've tried so far? :thumbsup:
There is a work offers forum if you need something done from scratch.
sumeet
05-11-2005, 07:19 PM
You must be using IE. On a decent standards-compliant browser, it displays fine.
The background colors are easily changed. Just edit or remove the "background: #_______" element from whichever <div> you want.
And if you want proper display in IE, just consult a website about the bugs.
http://www.positioniseverything.net/explorer/peekaboo.html
That's a website that should at least get you started.
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.