www.webdeveloper.com
Results 1 to 8 of 8

Thread: Help - How to create a liquid layout?

  1. #1
    Join Date
    Mar 2011
    Posts
    31

    Help - How to create a liquid layout?

    New here!

    I was wondering how to create a page that adopts to the user screen size?
    I recently found out I can modify my current CSS layout and it would adopt the user's screen size.
    This is my first time attempting to create a liquid layout and I don't even know where to start.

    I would strongly appreciate your help.

    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;}
    My 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>

  2. #2
    Join Date
    Mar 2012
    Posts
    1,210
    Use the CSS float and clear commands. Take a look at my website http://www.emberwebsites.co.uk. It adjusts right down to 320 pixels screen width.

  3. #3
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Search for "media queries" "responsive design" and "web adaptive design".

    Smashing Magazing is an example of responsvie layout (or maybe it's "adaptive", I get them mixed up), try resizing your browser and see how it changes the layout.

    I found this article quite useful.

  4. #4
    Join Date
    Apr 2012
    Posts
    1
    If you want to see a professional use of this "liquid or fluid layout" checkout bootstrap.

    http://twitter.github.com/bootstrap/scaffolding.html

    View their CSS and you will see how they design fluid layouts.
    jedaisoul is right though, essentially it will come down to float and clear commands, but hopefully Bootstrap will be a good demonstration of that.

  5. #5
    Join Date
    Mar 2011
    Posts
    31
    Thanks for the resources everyone!

  6. #6
    Join Date
    Mar 2011
    Posts
    31
    Hey everyone

    I'm having some issues with my layout.
    I added the max-width; and max-height; properties in some places. However the max-height property is not working at all, regardless which browser I use. When I re-size my browser window, the max-width works, but not the max-height.
    Some of the content seems to re-size well, but I cant seem to be able to re-size images.
    When I set the max-width to 100%, the images don't seem to shrink when I re-size the browser window.

    Could someone please give me some clues? I'm kinda stuck, plus I'm still learning how to create a liquid layout.

    Your help is greatly appreciated!

    Note*
    The zip folder attached contains the images for my layout.
    You may add or replace the images in the html file if you don't want to download the zip folder.

    Here is CSS code:

    Code:
    #container{max-width:1280px; max-height:1024px;  
    max-width:1300px; min-width:320px; min-height:600px; max-height:1024px; float:center; }
    
    body{background-color:silver;}
    
    /*page title*/
    #pagetitle{background-color:black; color:white; list-style-type:none; 
    max-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 side list*/
    #menu{padding:0px 5px 0px 5px; position:absolute; left:1030px; top:270px; background:black; max-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; max-width: 95px; max-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{max-height:600px; max-width:865px; overflow:auto; background:black; margin:60px 0px 0px 145px;}
    
    /*Social tab*/
    #share{position:absolute; top:20px; left:-45px;}
    #share p{color:white; position:absolute;  left:-12px; top:-15px; padding:20px 0px 0px 85px; }
    #share ul a{float:right; max-width:130px; max-height:70px; text-decoration:none; list-style-type:none; }
    #share img{padding:0px 80px 0px 10px; width:60px; height:60px; max-width:100%; max-height:100%; 
    min-width:20px; min-height:20px; 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;}
    My 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="container">
    <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>
    <li><a href=""><img src="yahoo.jpg"><p>Yahoo Mail</p></a></li>
    <li><a href=""><img src="Blogger.jpg"><p>Blogger</p></a></li>
    <li><a href=""><img src="myspace.jpg"><p>My Space</p></a></li>
    <li><a href=""><img src="meebo.jpg"><p>Meebo</p></a></li>
    <li><a href=""><img src="flickr.jpg"><p>Flickr</p></a></li>
    <li><a href=""><img src="delicious.jpg"><p>Delicious</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>
    </div>
    </body>
    </html>
    Attached Files Attached Files

  7. #7
    Join Date
    Mar 2011
    Posts
    31
    Never mind

    I just learned how to use Media Queries to accomplish a liquid layout page.
    Is this the only method to re-size the page and it's contents?

  8. #8
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265

    see this site's "Mobile Web Development" forum

    I'm stumbling and fumbling with this myself.

    Basically, I think you need to give your images (as well as other elements) a percent width and max-width min-width. I think @Media Queries are used to determine the view-port device-width. I read that all @ styles (@media @font-size @import) should go at the very top of a stylesheet, but I've seen @media examples where the Media Queries were not at the very top -- so I'm not sure how important that is.

    See WebDeveloper's "Mobile Web Development" forum http://www.webdeveloper.com/forum/forumdisplay.php?f=49 See resources listed by Major Payne http://www.webdeveloper.com/forum/sh...d.php?t=258054

    So far, for this page http://www.josephdenaro.com/comps/index.html, the alternate thumbnail size I tried to initiate with
    Code:
    <meta name="viewport" content="width=device-width">  and CSS 
    @media only screen and (orientation:portrait) 	{ 	/* portrait mode */ 	
    #wrap, #showpics, 	#container, #footer. .textbox { width:768px; } 	
    #thumbnails img { display: inline-block; float:left; width: 33px; height: 50px; margin: 2px; } 
    }
    did not work

    On page http://www.josephdenaro.com/bw/index.html , the following did work
    Code:
    <style type="text/css" media="all"> 
    #thumbnails img { display: inline-block; float:left; 
    width: 30%; max-width: 50px;  min-width: 10px; max-height:75px; 
    padding: 0.1%; margin: 1.5%; text-align:center; } 
    </style>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles