Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Liquid Layout Help

    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What type of layout do you have currently? Maybe you will find an example here.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    What type of layout do you have currently? Maybe you will find an example here.
    Sorry, I completly forgot to put up my link.

    www.assaultthepress.com

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you, I will give it a shot.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Glass Casket
    Thank you, I will give it a shot.
    Doh I meant clear:left; to the header div.

  • #7
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Use this for your CSS
    Code:
    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.

  • #9
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the code. Is there perhaps a way to make it liquid by not making Top Headlines super wide?

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sure just keep in the percentages you already had, though I think it looks better the way the CSS I gave you makes it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •