Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Liquid CSS 3 column Header Layout - fixed, liquid, fixed

  1. #1
    Join Date
    Nov 2012
    Location
    Central Virginia
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Liquid CSS 3 column Header Layout - fixed, liquid, fixed

    Hello,

    I'm new to this forum and eager to learn. I've written several websites over the years and none that were anything close to web standard compliant. They were designed using MS FrontPage utilizing many tables, nested tables, and then more tables. It's a HTML mess. While the content is solid, the site needs a serious overhaul and re-write. I've taken several online classes through Ed2go through my local community college that cover the basics of Dreamweaver CS5 and then intermediate HTML and CSS. I plan to continue with the intermediate HTML & CSS class after an upcoming total knee replacement surgery. At least after I no longer need the pains meds and can concentrate better.

    In the meantime, my pressing issue is creating my templates needed to get this re-write done. Where I am at this point is stuck. The header I envision would use three images I created in Photoshop. The first is the left column (fixed width of 330px) with my observatory name and coordinates, the right column is an image of fixed width of 300px. The center column would be liquid, if possible, allowing the left and right pictures to remain in their positions and the center image, title of the website with shadow and bevel affects, to remain center of the two columns regardless of monitor resolution. I would set the minimum width to 1024 and maximum to 100%. Height would be fixed at 200px. Actual dimensions of the images used are: left - 330x200px right - 300x200px center - 450x120px. I could remake that center image giving it a 200px height placing the text where I want it aligned if that makes it any easier. Is this possible or even practical? I should mention that I can easily do this using tables but I am trying to 1) learn the proper technique 2) be standards compliant.

    As far as scripts go, if it's in DW CS5 I may have played with them and they would have been Javascript most likely. I'm no web designer. I am a retired HVAC tech that specialized in computer controlled zoning systems for home and commercial buildings. I build my own Windows based computer systems so hardware wise I'm pretty proficient. I'll be re-writing my church's website after completing mine. Hopefully I'll learn a good deal more doing mine first but they are totally different in design. I think the church site is actually much easier and a lot smaller overall.

    Thanks for reading.

    -Steve
    Last edited by sreilly24590; 11-01-2012 at 04:59 PM.

  2. #2
    Join Date
    Nov 2012
    Location
    Central Virginia
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Example of Layout using Tables

    I've uploaded a screenshot of what I'm trying to do but not the html as this is only an example of the layout I'm trying to get using CSS <div> tags. Or maybe there's a better tag to use? The header is the issue with it's three columns and making it a fluid design. What I didn't do in the example is give any padding or margins so it does butt right up against the monitor edge. This is not a finished layout so there are tweaks to be done yet but only as a quick example.

    Thanks for any thoughts.

    -Steve
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	layout example.jpg 
Views:	383 
Size:	95.0 KB 
ID:	4822  

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,038
    Thanks
    16
    Thanked 316 Times in 314 Posts
    Blog Entries
    13

    Default

    So you're probably looking to float 3 divs alongside each other - the outer ones with fixed widths and the middle one with a fluid % width, and all displayed as inline-block elements.

    The middle div should have text-align:centre and the pic inside should have left and right auto margins to place it in the centre.

    You should also probably consider containing everything in an outer div and use max-width to limit the overall width on very wide screens. A fluid design is brilliant up to a certain point but with these really high resolution monitors on the market, a totally fluid middle content might look weirdly stretched for some folk.

    An any case, using some of the pointers above along with your budding new web designer skills, you should mock up a dummy page to give us something to offer further advice on.

    Good luck - let us know how you get on.
    Last edited by Beverleyh; 11-02-2012 at 10:37 PM. Reason: Tips expanded
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. The Following User Says Thank You to Beverleyh For This Useful Post:

    sreilly24590 (11-02-2012)

  5. #4
    Join Date
    Nov 2012
    Location
    Central Virginia
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Forgive my ignorance here but are we talking the following?:

    HTML Code:
    <!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=utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    
    <div id-wrapper>
    <div id=obs>
    </div>
    <div id=title>
    </div>
    <div id=image>
    </div>
    </div>
    
    </body>
    </html>
    And have the style sheet to place the divs?

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    .wrapper {
    	height: 200px;
    	width: 100%;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat-x;
    }
    .obs {
    	display: inline-block;
    	float: left;
    	height: 200px;
    	width: 330px;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat-x;
    }
    .image {
    	display: inline-block;
    	float: left;
    	height: 200px;
    	width: 300px;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat;
    }
    .title {
    	text-align: center;
    	display: inline-block;
    	height: 200px;
    	width: 100%;
    	margin-right: auto;
    	margin-left: auto;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat-x;
    }
    The images are stacked on top of each other and the background image doesn't show up at all. I think I'm going crossed eyed from all my reading.

    Thanks,

    Steve

  6. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,038
    Thanks
    16
    Thanked 316 Times in 314 Posts
    Blog Entries
    13

    Default

    Thats because you've set the middle column to 100% so its filling all the width and pushing out the divs to either side (which in this case causes the stacking effects)

    What I gave you was just the basics to start you off but a full example would be this here: http://www.dynamicdrive.com/style/la...d-fluid-fixed/
    Last edited by Beverleyh; 11-02-2012 at 11:57 PM. Reason: Hit send prematurely on iPhone
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    sreilly24590 (11-03-2012)

  8. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Please use the forum's bbcode tags to make it more readable:

    for php code............[php] <?php /* code goes here */ ?> [/php]
    for html...............[html] <!-- markup goes here -->.....[/html]
    for js/css/other.......[code] code goes here................[/code]
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  9. The Following User Says Thank You to bernie1227 For This Useful Post:

    sreilly24590 (11-03-2012)

  10. #7
    Join Date
    Nov 2012
    Location
    Central Virginia
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Unhappy

    I think I see where I went wrong. I set the left margin to 330px and the right to 300px with the top and bottom at 0. It still isn't displaying properly so I need to look deeper. I hope I posted this properly.

    HTML Code:
    <!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=utf-8">
    <title>Untitled Document</title>
    <link href="div.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <div id-wrapper>
    <div id=obs><img src="images/DRO_trans.png" width="330" height="200">
    </div>
    <div id=title><img src="images/glimpses-astral.png" width="450" height="120">
    </div>
    <div id=image><img src="images/Thor-3rd-300.jpg" width="300" height="198">
    </div>
    </div>
    
    </body>
    </html>
    The CSS:

    HTML Code:
    @charset "utf-8";
    /* CSS Document */
    
    .wrapper {
    	height: 200px;
    	width: 100%;
    	background-repeat: repeat-x;
    }
    .obs {
    	display: inline-block;
    	float: left;
    	height: 200px;
    	width: 330px;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat-x;
    }
    .image {
    	display: inline-block;
    	float: left;
    	height: 200px;
    	width: 300px;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat;
    }
    .title {
    	text-align: center;
    	display: inline-block;
    	height: 200px;
    	margin-right: 300px;
    	margin-left: 330px;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat-x;
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    I have to say tables are so much easier!

    Thanks again,

    Steve

  11. #8
    Join Date
    Nov 2012
    Location
    Central Virginia
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by bernie1227 View Post
    Please use the forum's bbcode tags to make it more readable:

    for php code............[php] <?php /* code goes here */ ?> [/php]
    for html...............[html] <!-- markup goes here -->.....[/html]
    for js/css/other.......[code] code goes here................[/code]
    Sorry about the snafu, I'll be sure to use the above format.

    Thanks,

    Steve

  12. #9
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    here you go:
    Code:
    <!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=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    @charset "utf-8";
    /* CSS Document */
    
    
    .wrapper {
    	height: 100px;
    	width: 100%;
    	background-repeat: repeat-x;
    }
    #obs {
    	display: inline-block;
    	float: left;
    	height: 200px;
    	width: 330px;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat-x;
    }
    #image {
    	display: inline-block;
    	height: 200px;
    	width: 400px;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat;
    	position: absolute;
    }
    #title {
    	text-align: center;
    	display: inline-block;
    	height: 200px;
    	background-image: url(images/banner_background.png);
    	background-repeat: repeat-x;
    }
    </style>
    </head>
    
    <body>
    
    <div class="wrapper">
    <div id="obs"><img src="images/DRO_trans.png" width="330" height="200">
    </div>
    <div id="title"><img src="images/glimpses-astral.png" width="450" height="120">
    </div>
    <div id="image"><img src="images/Thor-3rd-300.jpg" width="300" height="198">
    </div>
    </div>
    
    </body>
    </html>
    one of the main problems was that you were using class identifiers in the css for objects that are id's.
    so for example:
    Code:
    .example1 {
        position: absolute;
    }
    would correspond with:
    Code:
    <div class="example1">
    so, if you are refering to a class, you use the . and if you use an id:
    Code:
    #example1 {
        position: absolute;
    }
    would correspond with:
    Code:
    <div id="example1">
    so in short, in css, you use . for class= and you use # for id=
    Last edited by bernie1227; 11-03-2012 at 01:49 AM. Reason: more detail
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  13. The Following User Says Thank You to bernie1227 For This Useful Post:

    sreilly24590 (11-03-2012)

  14. #10
    Join Date
    Nov 2012
    Location
    Central Virginia
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thanks Bernie, that was a great help. I did correct the css sheet and put the proper widths for the left and right images, 330px and 300px respectively as well as correct the confusion between the id's and class designations. I also changed the wrapper height to 200px to match the total header height. That said, the preview in browsers isn't showing a liquid display. It seems the center content is now a fixed width. The layout only seems to go partially across my 1920 px monitor display, maybe 1000 or so pixels. In IE9 there's a gap between the right image and the center although there isn't any gap with Firefox or Google Chrome.

    -Steve

Similar Threads

  1. CSS Liquid Layout - (Fixed-Fluid) Auto Height of left column
    By Rajan Thought in forum Submit a DHTML or CSS code
    Replies: 1
    Last Post: 01-23-2012, 05:27 PM
  2. CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)
    By icoombs in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-17-2009, 11:25 AM
  3. fixed vs. liquid layout
    By afe in forum CSS
    Replies: 1
    Last Post: 01-25-2008, 02:41 AM
  4. Replies: 2
    Last Post: 12-08-2006, 11:50 AM
  5. Replies: 4
    Last Post: 11-09-2006, 12:32 PM

Bookmarks

Posting Permissions

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