...

View Full Version : CSS Liquid Layout Help



Glass Casket
11-24-2005, 01:24 AM
So I finally finished my front pages layout and after doing more research about browser and screen reoslution. I read that it is better to use a liquid layout instead of a fixed layout. But I read a few tutorials on how to do it but I get lost.

Anyone know a good start for turning my layout into a liquid layout?

Thank you.

_Aerospace_Eng_
11-24-2005, 01:31 AM
What type of layout do you have currently? Maybe you will find an example here (http://bonrouge.com/3c-hf-fluid-lc.php).

Glass Casket
11-24-2005, 02:01 AM
What type of layout do you have currently? Maybe you will find an example here (http://bonrouge.com/3c-hf-fluid-lc.php).

Sorry, I completly forgot to put up my link.

www.assaultthepress.com

_Aerospace_Eng_
11-24-2005, 02:10 AM
The only thing I see that might cause a problem are your links. Wrap your login and your banner image in a div of its own, set that width to like 780px float it right, add clear:right; to the CSS for that div. Move your date and time up to your header div, this way there is nothing to push your links out of the way.
Now your left column is fine as it is, don't set a width on your content. You don't want to float the content either. You will need to give it enough left margin to clear the width of your left column. Those boxes you have in your content, use percentages for their widths. Thats really about it.

Glass Casket
11-24-2005, 02:39 AM
Thank you, I will give it a shot.

_Aerospace_Eng_
11-24-2005, 02:44 AM
Thank you, I will give it a shot.
Doh I meant clear:left; to the header div.

Glass Casket
11-25-2005, 11:51 PM
I tried following everything you said, Remind me if I missed something. But the banner seems to be out of its cage.

Also, if you see anything in my layout that you think should be done differently or have comments about my coding, don't hesitate to tell me. It's my first CSS layout :)

Thank you very much.

_Aerospace_Eng_
11-26-2005, 12:51 AM
Use this for your CSS

body
{
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #BEBBB0 url(lines.png);
}

/* Header */

#headercontainer
{
height: 6em;;
background-color: #000000;
line-height: 130%;
}
#logo
{
float: left;
width: 160px;
margin: 0;
}
#loginform
{
float: right;
width: 220px;
margin: 0;
padding: 0.5%;
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
text-align: center;
}
input[type=text]
{
font-size: 1em;
width: 60%;
}
input[type=password]
{
font-size: 1em;
width: 60%;
}
input[type=submit]
{
font-size: 1em;
background-color: #000000;
color: #FFFFFF;
}
#ad
{
margin-left: 300px;
margin-right:300px;
}
#ad img
{
border-color: #FFFFFF;
float: right;
margin: 1.5% 3% 0 0;
}
#lbwrap
{
width: 800px;
float: right;
clear:left;
}

/* Navigation */

#navcontainer
{
width: 62%;
float: left;
}
#navlist
{
margin: 0;
padding: 0.5em 0 18px 10px;
border-bottom: 1px solid #000000;
font-size: 0.8em;
}
#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited
{
float: left;
line-height: 18px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #FFFFFF;
background: #BEBBB0 url(lines.png);
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000000;
padding-bottom: -3px;
background: transparent;
color: #000000;
}
#navlist a:hover
{
color: #000000;
}

/* Left Column */

#left
{
position: absolute;
margin: 2% 0 0 3%;
width:250px;
height: 700px;
}
#falbumcontainer
{
width: 95%;
}

#fimage img
{
width: 100%;
}
#fbandname
{
color: #FFFFFF;
background-color: #000000;
font-weight: bold;
text-align: center;
}
#fcontent
{
font-size: 12px;
border: 1px solid #000000;
padding: 0.5%;
font-weight: bold;
line-height: 20px;
background-color: #FFFFFF;
}
#fcontent a:link, a:active, a:visited
{
color: #000000;
text-decoration: none;
font-weight: normal;
}
#fcontent a:hover
{
color: #FF6600;
}
#freviewcontainer
{
padding-top: 2%;
width: 95%;
}

#freviewimage img
{
width: 130px;
height: 130px;
border: 1px solid #000000;
float: left;
}
#freviewcontent
{
font-size: 12px;
border: 1px solid #000000;
padding: 1%;
height: 123px;
line-height: 20px;
background-color: #FFFFFF;
text-align: center;
}
#freviewcontent a:link, a:active, a:visited
{
color: #000000;
text-decoration: none;
font-weight: normal;
background-color: #FFFFFF;
}
#freviewcontent a:hover
{
color: #FF6600;
}
/* Right Column */

#right
{
margin: 2% 0 0 280px;

height: 120px;
}
#newscontainer
{
line-height: 20px;
margin-right:10px;
}

#newscontent
{
font-size: 12px;
border: 1px solid #000000;
padding: 0.5%;
line-height: 20px;
list-style-image: url(pages_11.gif);
background-color: #FFFFFF;
}
#newscontent a:hover
{
color: #FF0000;
}
#newsfooter
{
font-size: 12px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 1%;
line-height: 20px;
background-color: #FFFFFF;
}
#newsfooter a:hover
{
color: #FF0000;
}
#newreviewscontainer
{
width: 100%;
margin-top: 2%;
}

#newreviewscontent
{
border: 1px solid #000000;
font-size: 12px;
line-height: 20px;
list-style-image: url(medium_97.gif);
background-color: #FFFFFF;
}
#newreviewscontent a:hover
{
color: #FF6600;
}
#newintcontainer
{

margin: 1% 10px 0 1%;
}

#newintcontent
{
list-style-image: url(medium_97.gif);
font-size: 12px;
border: 1px solid #000000;
line-height: 20px;
background-color: #FFFFFF;
}
#newintcontent a:hover
{
color: #FF6600;
}

#date
{
float: right;
margin-right: 2%;
padding: 0.5%;
font-weight: bold;
font-size: 12px;
text-align: right;
}
#newleft
{
float: left;
width:35%;
}
#newright
{
width:65%;
position: relative;
margin-left:35%;
}

/* */
#falbumcontainer h1, #freviewcontainer h1, #newscontainer h1, #newreviewscontainer h1, #newintcontainer h1
{
color: #FFFFFF;
width: 96%;
background-color: #000000;
font-weight: bold;
padding: 2%;
font-size: 15px;
margin: 0;

}

Your header is going to give you problems because of the ad, its going to move to the next line if the browser gets smaller once you add in your logo. I would say put the ad at the bottom or somewhere in the news section.

Glass Casket
11-26-2005, 02:04 AM
Thanks for the code. Is there perhaps a way to make it liquid by not making Top Headlines super wide?

_Aerospace_Eng_
11-26-2005, 03:42 AM
Sure just keep in the percentages you already had, though I think it looks better the way the CSS I gave you makes it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum