PDA

View Full Version : How do I make this layout with CSS?



alohav
10-03-2007, 10:45 PM
I am trying to do this layout, but my CSS skills are nowhere near jedi-strength (i pretty much suck at it).

Used to be into html coding (2-3 yrs. back) but kinda neglected to keep up. Nevertheless, my site needs face lift so I wish to redo it with CSS.

Navigation will be through menu made in Sothink DHTML menu (200px wide), but the rest is a challenge.

Anyone have a suggestion? The layout was made in PS so graphic design wise, this will work. Technical issues (CSS coding) are causing me problems.

Much obliged.
@loh@!

mvy
10-04-2007, 02:52 AM
Hi,

I didn't read your instructions, just saw your gif and went coding.

Hope this helps you, it looks good in IE 7.......I didn't tested in other browsers.

Hope this helps you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<style type="text/css" media="screen">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font: 62.5% Verdana, Arial, Helvetica, sans-serif;
}
#container {
background-color:#9900CC;
width: 980px;
height: 800px;
}
#lefttop {
float:left;
padding 0px 0px 0px 0px;
width: 200px;
height: 210px;
background-color:#FF99CC;
}
#righttop {
float:left;
padding: 0px 0px 0px 0px;
width: 780px;
height:210px;
background-color:#FF9900;
}
#clear {
clear:both;
}
#menuleft {
float:left;
/* clear:right; */
padding 0px 0px 0px 0px;
width: 200px;
height: 600px;
background-color:#00FFFF;
}

#rightmiddle {
float:inherit;
padding 200px 0px 0px 0px;
width: 780px;
height: 230px;
background-color:#FFFF99;
}
#rightbottom {
float:right;
padding 0px 0px 150px 0px;
width: 330px;
height: 370px;
background-color:#CCCCCC;
}
#bottommiddle {
/* float:left; */
padding 200px 0px 0px 0px;
width: 450px;
height: 370px;
background-color:#666666;
}

#cl {
clear:left;
}
</style>
</head>

<body>
<div id="container">
<div id="lefttop"> left top </div><div id="righttop">right top</div>
<div id="clear"></div>
<div id="menuleft">Menu</div>
<div id="rightmiddle"> right middle</div>
<div id="rightbottom">right bottom</div>

<div id="bottommiddle"> bottom-right middle</div>
</div>
</body>
</html>

boogyman
10-04-2007, 12:39 PM
Okay I am remaking this post... My previous post was going off the thumbnail, but when I enlarged the picture I can see there are some changes that should be made.

1) you shouldn't be declaring your widths explicitly but rather letting the browser do that according to screen resolution. to prevent the browser from "breaking" the page because of a lack of width, we can assign some min-width values.

2) there is no reason why you need the "empty" div you can do that width margins / padding. If you would like your logo not be on the left then the next best place is to center it on the page, and again we can use some margins and padding, and we can use an image replacement technique to showcase our logo image, however not break the page if the user has images disabled. based off FIR technique (http://www.stopdesign.com/articles/replace_text/)

3) mvy... the transitional DOCTYPE was created for when CSS 1 was first coming of light nearly a decade ago. Virtually all browsers have support for CSS1 at the least, so there is no need for this; we should be using HTML4.01 Strict DOCTYPE because of the IE not supporting XHTML.



<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-18859-1">
<title>Title of Page</title>
<style type="text/css">
* { /* clears default margins / padding */
margin: 0;
padding: 0;
}
body {
width: 100%;
min-width: 780px; /* 800x600 resolution friendly */
text-align: center;
background-color: #fff;
}
div#header {
height: 100px;
background-color: inherit;
background-image: url('/path/to/image.gif');
background-repeat: no-repeat;
background-position: top left;
}
div#header h1 {
visibility: invisible;
}

/* Page Styles */
ul#nav {
float: left;
width: 30%;
background-color: #09f /* light blue */
}
ul li {
list-style: none;
}
div#content {
float: right;
width: 65%; /* leaves 5% padding for cosmetics & IE friendly */
}

div#content div#pic {
background: inherit;
}
div#content div#text {
float: left;
width: 65%;
}
div#content p#caption {
float: right;
width: 30%;
}
div#footer {
clear:both;
}
</head>
<body>

<div id="header">
<h1>Site Name</h1>
</div>
<ul id="nav">
<li><a href="/url/to/page.com">Link 1</a></li>
<li><a href="/url/to/page.com">Link 2</a></li>
<li><a href="/url/to/page.com">Link 3</a></li>
<li><a href="/url/to/page.com">Link 4</a></li>
<li><a href="/url/to/page.com">Link 5</a></li>
</ul>
<div id="content">
<div id="pic">
<img src="/url/to/image.gif" alt="alternate description">
</div>
<div id="text">
<p>MAIN TEXT OF THE SITE</p>
</div>
<p id="caption">PICTURE CAPTION</p>
</div>
<div id="footer">
<p>Copyright Site. All Rights Reserved.</p>
</div>


</body>
</html>


now personally any captions should really be on right below or above the image to not confuse them with regular text, but that is just a matter of opinion


if you have any questions about the layout feel free to ask, but that will give you a scalable page that is accessible in multiple browsers, however is still 800x600 resolution friendly.


i get a question alot of times about the image replacement and i gave you the link to the site it was based from, here is a quick break down


div#header {
height: 100px;
background-color: inherit;
background-image: url('/path/to/image.gif');
background-repeat: no-repeat;
background-position: top left;
}
div#header h1 {
visibility: invisible;
}


div#header is creating the actual logo image.
div#header h1 is getting rid of the text that you keep there for css, and also having the h1 tag is to give yourself a better page rank in search engines. the logo / company name is the second most important feature of a site behind the content, thus it should be pronounced and given the largest header.

alohav
10-04-2007, 11:48 PM
Thanks mvy and boogyman for a detailed posts, cool coding, and extremely swift reply. I really appreciate it!

I will play around with both codes and report back tomorrow.

You have made my day guys.

@loh@

mvy
10-05-2007, 02:37 AM
to boogyman:

You are right.....doctype should be used accordingly, thanks for explaining maybe 50th time I will start using the right one.......

I didn't check your code but it's cool that you posted too, very nice of you too.


to alohav:

I hope you will understand the difference between mine and boogyman code, I think it will be great way to deepen your knolwledge........
I hope you understand what boogyman meant about doctype.......

I hope you enjoy it......

alohav
10-07-2007, 05:23 PM
Ok guys this is what I ended up with.

Now I am trying to make the #bodytxt and #caption to have the same height to avoid situations like the one in this code with mismatched column lengths.

Any tips?

I will use #empty for future links to other languages (hopefully).

Thank you both for your help. You saved me hours of reading and experimenting.

All the best,
@loh@



<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout_0</title>
<style type="text/css" media="screen">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
#container {
background-color:pink;
width: 780px;
height: 800px;
}
#empty {
float:left;
padding 0px 0px 0px 0px;
width: 200px;
height: 210px;
background-color:white;
}
#logo {
float:left;
padding: 0px 0px 0px 0px;
width: 580px;
height:210px;
background-color:#0082c8;
}
#clear {
clear:both;
}
#menu {
float:left;
/* clear:right; */
padding 0px 0px 0px 0px;
width: 200px;
height: 600px;
background-color:white;
}

#rotatingpic {
float:right;
padding 200px 0px 0px 0px;
width: 580px;
height: 230px;
background-color:green;
}
#caption {
float:right;
padding 0px 0px 150px 0px;
width: 200px;
background-color:red;
}
#bodytxt {
/* float:right; */
padding 200px 0px 0px 0px;
width: 380px;
background-color:gray;
float: right;
}

#cl {
clear:left;
}
</style>

</head>

<body>
<div id="container">
<div id="empty">#empty 200w x 210h</div>
<div id="logo">#logo 580w x 210h</div>
<div id="clear"></div>
<div id="menu">#menu 200px</div>
<div id="rotatingpic">#rotatingpic 580w x 230h</div>
<div id="caption">
#caption 280px w
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sagittis lectus vel lectus. Vestibulum dignissim interdum ipsum. Duis pharetra enim sit amet velit. Donec commodo, odio quis nonummy tempor, justo nunc aliquet ante, vitae convallis massa eros sed leo. In aliquam sodales mi. Nunc non erat. In sollicitudin tempus odio. Suspendisse quis turpis. Mauris libero. Curabitur cursus, leo ac imperdiet tempor, dui eros facilisis purus, quis imperdiet lectus lorem quis odio. Suspendisse ornare blandit orci. Ut luctus mi egestas diam commodo hendrerit. Quisque suscipit diam sit amet nibh.
<p>
Nulla non magna. Fusce ipsum. Ut in nisl. Maecenas id leo. Nullam cursus. Donec ac purus. Nulla felis. Fusce nec metus non dui rhoncus suscipit. Nunc sed arcu dictum mi malesuada mattis. Quisque sagittis. Phasellus blandit ante eu nibh. Proin felis.
<p>
Aenean purus nunc, cursus id, gravida non, ultricies a, sem. Maecenas ut augue. In dui libero, tincidunt non, faucibus eget, viverra quis, lorem. Phasellus lorem mauris, sagittis quis, eleifend sed, ultricies sed, urna. Pellentesque commodo, ante in blandit dictum, ligula velit mollis lectus, a sollicitudin massa est ut erat. Proin dictum purus quis arcu. Vestibulum vestibulum odio ac ipsum. In non pede in enim dignissim imperdiet. Nullam id libero. Ut nec nisi id tortor mattis accumsan. Nullam euismod orci quis arcu.
</div>
<div id="bodytxt">
#bodytxt 380px w
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sagittis lectus vel lectus. Vestibulum dignissim interdum ipsum. Duis pharetra enim sit amet velit. Donec commodo, odio quis nonummy tempor, justo nunc aliquet ante, vitae convallis massa eros sed leo. In aliquam sodales mi. Nunc non erat. In sollicitudin tempus odio. Suspendisse quis turpis. Mauris libero. Curabitur cursus, leo ac imperdiet tempor, dui eros facilisis purus, quis imperdiet lectus lorem quis odio. Suspendisse ornare blandit orci. Ut luctus mi egestas diam commodo hendrerit. Quisque suscipit diam sit amet nibh.
<p>
Nulla non magna. Fusce ipsum. Ut in nisl. Maecenas id leo. Nullam cursus. Donec ac purus. Nulla felis. Fusce nec metus non dui rhoncus suscipit. Nunc sed arcu dictum mi malesuada mattis. Quisque sagittis. Phasellus blandit ante eu nibh. Proin felis.
<p>
Aenean purus nunc, cursus id, gravida non, ultricies a, sem. Maecenas ut augue. In dui libero, tincidunt non, faucibus eget, viverra quis, lorem. Phasellus lorem mauris, sagittis quis, eleifend sed, ultricies sed, urna. Pellentesque commodo, ante in blandit dictum, ligula velit mollis lectus, a sollicitudin massa est ut erat. Proin dictum purus quis arcu. Vestibulum vestibulum odio ac ipsum. In non pede in enim dignissim imperdiet. Nullam id libero. Ut nec nisi id tortor mattis accumsan. Nullam euismod orci quis arcu.
<p>
Cras placerat nisl quis augue varius tristique. Fusce pellentesque pede ut pede. Ut adipiscing, sem sit amet aliquet ultrices, diam lectus vulputate erat, in molestie est dui at massa. Mauris lobortis nisi eget est. Cras ipsum massa, ultricies vel, fringilla posuere, ultricies eget, metus. Phasellus fringilla, dolor vel tincidunt tincidunt, arcu velit nonummy turpis, ut vestibulum dolor sapien non urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin id risus. Phasellus sit amet dui id ligula vehicula placerat. Nam est massa, rutrum eu, egestas a, laoreet a, eros. Nulla placerat tristique magna. Maecenas volutpat ipsum sit amet lacus malesuada vestibulum. Sed at est eu nunc dictum vestibulum. Nulla feugiat, arcu sit amet sollicitudin molestie, erat lorem fringilla urna, eu rhoncus felis est et nulla.
<p>
Etiam urna lacus, ultrices eget, adipiscing quis, posuere non, ante. Ut mollis tristique tortor. Donec ipsum enim, venenatis eu, nonummy posuere, feugiat eget, turpis. Aliquam non massa. Praesent pulvinar feugiat nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vestibulum. Donec convallis urna eu tellus. Donec metus. Aliquam est. Curabitur nec lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<p>
Duis laoreet luctus neque. Donec vel velit eget arcu dictum facilisis. Nunc neque ligula, dapibus at, vestibulum eu, sodales id, mi. Quisque porttitor dolor a sem molestie blandit. Aliquam augue metus, interdum quis, volutpat id, gravida vel, risus. Pellentesque pulvinar diam quis sapien. Pellentesque consectetuer justo et erat posuere viverra.
</div>
</div>
</body>
</html>

boogyman
10-08-2007, 02:35 PM
if you are using background images you can use Faux Columns (http://www.alistapart.com/articles/fauxcolumns/) technique.
if you just have plain background color you can use Balanced Columns (http://www.paulbellows.com/getsmart/balance_columns/) which employ's some javascript.


also when you are posting code please be sure to wrap them in [code] tags

alohav
10-10-2007, 12:43 AM
i was wondering how to post code, thanks for the tip.

i did manage to get faux version to work, but only on IE. firefox is not liking it, or the other way around.

i used balanced with js, but IE displayed some padding issues that firefox did not mind. kinda lost now.

i will play around some more and check in with results.

thanks for quick reply boogyman.

Tawni
10-10-2007, 06:27 AM
<h1>Site Name</h1>
</div>
<ul id="nav">
<li><a href="/url/to/page.com">Link 1</a></li>
<li><a href="/url/to/page.com">Link 2</a></li>
<li><a href="/url/to/page.com">Link 3</a></li>
<li><a href="/url/to/page.com">Link 4</a></li>
<li><a href="/url/to/page.com">Link 5</a></li>
</ul>
<div id="content">
<div id="pic">
<img src="/url/to/image.gif" alt="alternate description">
</div>
<div id="text">
<p>MAIN TEXT OF THE SITE</p>
</div>
<p id="caption">PICTURE CAPTION</p>
</div>
<div id="footer">
<p>Copyright Site. All Rights Reserved.</p>
</div>


</body>
</html>
[/code]



I pasted this code saved as html page loads i see nothing.

I realize there is images, do I need to put them in ( I won't see menu or the alt text ) ?

Or do I save all or parts as a CSS then link it ?

thanks

Looks cool in code

p.s. can you explain the single quotes in image path? background-image: url('/path/to/image.gif');

Thanks

Tawni
10-10-2007, 06:33 AM
I think I need to still have that explained but I did catch the link to
FIR technique Late .

This Reminds me of the sIFR technique which I have used in the past.

but that relies on people having flash enabled. otherwise they see alt text, so I guess this is different.

very cool.

boogyman
10-10-2007, 01:18 PM
I pasted this code saved as html page loads i see nothing.

I realize there is images, do I need to put them in ( I won't see menu or the alt text ) ?

Or do I save all or parts as a CSS then link it ?
you need to put in your path to the images.

<img src="/url/to/image.gif" alt="alternate description"> and you should see the alternate description on this image because it is right in the file



can you explain the single quotes in image path? background-image: url('/path/to/image.gif');
html allows for single or double quotes, its really just a matter of preference, and scope. personally I like to use double quotes inside an html file, and single quotes in a css file, but thats just my preferences. now on that note yo would have to be careful if you are adding 2 sets of quotes, because you could actually break out of the first set before you want to... there are a few remedies for that


<img src="/url/to/image.ext" width="100" height="100" alt="alternate description onclick="this.style='width:200px;height:200px'">

in that example when the user clicks on the image, in theory it should expand the image to double in size. I had to use 2 sets of quotes there so I chose to use single quotes inside the outer double quotes... you can also do this visa versa and have single quotes on the outside and double on the inside.



<img src="/url/to/image.ext" width="100" height="100" alt="alternate description onclick="this.style=\"width:200px;height:200px\"">

in this example i did the same as the previous except i used double quotes for each. however I needed to escape the quotes with a backslash or the browser would think it was the end of the set and process the rest of the line, subsequently erroring out. Personally I do not like to use this method because of the backslash.


I think I need to still have that explained but I did catch the link to
FIR technique Late .

This Reminds me of the sIFR technique which I have used in the past.

but that relies on people having flash enabled. otherwise they see alt text, so I guess this is different.

very cool.
now much different. the sFIR technique was based off the FIR technique, but as you said it requires flash to be enabled, thats not very accessible. im glad that the person would see the alternate description so its not entirely broken, but it still would be nice if they had a non flash image representation.