58 users online (1 members and 57 guests)  


  Results 1 to 5 of 5

Related

  1. 4 corner liquid box issue sample...    Forum: CSS Forum
    Replies: 0
  2. Off Set of layout...HELP!!!!    Forum: Myspace Forum
    Replies: 17
  3. Need Help with my layout!!!    Forum: Myspace Forum
    Replies: 3
  4. CSS Layout    Forum: CSS Forum
    Replies: 1
  1. #1
    HTMLer's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2010
    Posts
    17

    CSS liquid layout

    This is my first time attempting to create a Liquid layout with CSS, and I don't even know how to start.
    I read somewhere that I must have some sort of a container for the layout to stretch or shrink.
    My page contains lots of ULs, LIs and IMGs.

    Could someone please help me?
    Thanks in advance.

  2. #2
    HTMLer's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2010
    Posts
    17

    Re: CSS liquid layout

    Here is my CSS code:

    Code:
    /*Background */
    body{background-color:silver;}
    
    /*page title*/
    #pagetitle{background-color:black; color:white; list-style-type:none; 
    width:400px; height:27px; margin:0px 0px 0px 450px; text-align:center;}
    #pagetitle img{width:25px; height:25px; margin:0px 0px 0px 20px; float:left;}
    
    /*right hand list*/
    #menu{padding:0px 5px 0px 5px; position:absolute; left:1030px; top:270px; background:black; width:230px;} 
    #menu ul{list-style-type: none; background:white;}
    #menu a {text-decoration:none; color:black; } 
    #menu li a{display:block; margin:-3px 0px 0px -40px;}
    #menu p{color:white; margin: 6px 50px 0px 85px; }
    #menu a:hover{color:white;  background:black;}
    #menu li a:active{color:black; background:grey;}
    
    /*Icons*/
    #icons img{margin:30px; padding:15px; width: 95px; height:95px; float:left; 
    position:relative; left:-32px; top:-40px; }
    #icons ul{list-style-type:none;}
    #icons li a{margin:10px 45px 60px -30px; float:left; width:120px;
     text-decoration:none; height:135px; color:white; }
    #icons li p{position:relative; top:-82px; left:45px; }
    
    /*Scroll bar*/
    #scroll{height:600px; width:865px; overflow:auto; background:black;  margin:60px 0px 0px 145px;}
    
    /*Social tab*/
    #share{position:absolute; top:200px; left:-45px;}
    #share p{color:white; position:absolute;  left:-12px; top:-15px;  padding:20px 0px 0px 85px; }
    #share ul a{float:right; width:130px;  text-decoration:none; list-style-type:none; }
    #share img{padding:0px 80px 0px 10px; width:60px; height:60px; background:black;}
    #share li a{position:relative; top:10px; }
    
    /*footer*/
    #footer{width:850px; position:absolute; bottom:5px;}
    #footer ul {word-spacing:15px; margin-bottom:180px; margin-left:30px;
    text-indent:-35px; position:absolute; bottom:-150px; left:475px; background:black}
    #footer li{display:inline; color:black;}
    #footer a{color:white; text-decoration:none;}
    #footer li a:hover{text-decoration:none; background:grey; color:yellow; letter-spacing:8px; }
    #footer a:active{ color:yellow; letter-spacing:8px; background:red;}
    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
     
    <html>
    <head>
    <title>Title</title>
    <link rel="stylesheet" href="mystylesheet.css" type="text/css">
    </head>
    
    <body>
    <div id="pagetitle"><img src="example.jpg"><p>Page Title</p></div>
    
    <div id="menu">
    <p>Main menu</p>
    <ul>
    <li><a href="">option 1</a></li>
    <li><a href="">option 2</a></li>
    <li><a href="">option 3</a></li>
    <li><a href="">option 4</a></li>
    <li><a href="">option 5</a></li>
    <li><a href="">option 6</a></li>
    <li><a href="">option 7</a></li>
    <li><a href="">option 8</a></li>
    <li><a href="">option 9</a></li>
    <li><a href="">option 10</a></li>
    <li><a href="">option 11</a></li>
    <li><a href="">option 12</a></li>
    <li><a href="">option 13</a></li>
    <li><a href="">option 14</a></li>
    <li><a href="">option 15</a></li>
    <li><a href="">option 16</a></li>
    </ul>
    </div>
    
    <div id="scroll">
    <div id="icons">
    <ul>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    <li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
    </ul>
    </div>
    </div>
    
    <div id="share">
    <ul>
    <li><a href=""><img src="facebook.jpg"><p>Facebook</p></a></li>
    <li><a href=""><img src="twitter.jpg"><p>Twitter</p></a></li>
    <li><a href=""><img src="hotmail.jpg"><p>Hotmail</p></a></li>
    <li><a href=""><img src="linked-in.jpg"><p>Linked in</p></a></li>
    <li><a href=""><img src="Google+.jpg"><p>Google +</p></a></li>
    <li><a href=""><img src="dropbox.jpg"><p>Dropbox</p></a></li>
    </ul>
    </div>
    
    <div id="footer">
    <ul>
    <li><a href= "about.html">About </li></a>
    <li><a href="links.html">Links </li></a>
    <li><a href="contact.html">Contact</li></a>
    <li><a href ="directory.html">Directory </li></a>
    </ul>
    </div>
    
    </body>
    </html>

  3. #3
    leonpot's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2013
    Posts
    2

    Re: CSS liquid layout

    You could make a container div, around all your other divs, and give it a relative, float left and then marge it on 50%. Or something like that

  4. #4
    edda0199's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2012
    Posts
    1

    Re: CSS liquid layout

    Quote Originally Posted by leonpot View Post
    You could make a container div, around all your other divs, and give it a relative, float left and then marge it on 50%. Or something like that
    Agreed, it is easy to find something like that, good luck!!

  5. #5
    FrankC's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2011
    Posts
    13

    Re: CSS liquid layout

    Mind that there is a downside to some liquid layouts: the text line length can easily become longer than the recommended 65 characters, including spaces. Articles with long lines are a drag to read.