Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

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

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

    Default

    ok gotcha, I've made it liquid now, but I had to cheat a bit.
    HTML Code:
    <img src="images/DRO_trans.png"  style="width: 330px; float: left; display: inline-block;">
    <div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/glimpses-astral.png);"></div>
    <img src="images/Thor-3rd-300.jpg" style="width: 300px; float: left; position: absolute; right: 0;">
    ok, let's go through this:
    Firstly, I've made it all inline, which you can change if you want.
    Secondly, and very importantly to how it works; the center image is now actually a div with the image src as a background.
    Code:
    <div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/glimpses-astral.png);"></div>
    Thirdly, it's alos now absolutely positioned. The idea behind this, is that one thing that div's can do that images can't, is that their width can be dictated by their positioning. So the idea here is, it's positioned the width of the left and right images away from each edge, causing it to fill that space:
    Code:
    <div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/glimpses-astral.png);"></div>
    Just say if you have any problems.
    "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

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

    sreilly24590 (11-04-2012)

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

    Default

    Bernie,

    I appreciate the time and effort. The issue I had was the middle image being used as a background image it was repeating so I added the CSS rule for background-repeat: no repeat. Problem is I was using an image I created of a gray scale gradient as the background across the header. This is turning out to be more of a challenge than I thought it would be. Is it possible that a Dreamweaver extension like Flexi CSS is worth considering?

    Steve

  4. #13
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    I'm a little confused as to what the exact problem is. Do you want to repeat it sideways? Or not at all? I can't help much with dreamweaver, sorry, I haven't ever used it.
    "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

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

    sreilly24590 (11-04-2012)

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

    Default

    The background image is suppose to be the gradient image which does repeat-x across all 3 div tags of the header. The DRO_trans.png image is fixed 330x200px, the right image Thor-3rd-300.jpg is fixed at 300x200px, and the center expands to the area between the two (liquid) width wise while the height remains at 200px with the glimpses-astral.png image centered. Click image for larger version. 

Name:	layout example.jpg 
Views:	64 
Size:	95.0 KB 
ID:	4825

    Thanks again,

    Steve

  7. #15
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    ok, I think I get what you're saying, try this:
    HTML Code:
    <img src="images/DRO_trans.png"  style="width: 330px; float: left; display: inline-block;">
    <div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/background-gradient.png);"><img src="images/glimpses-astral.png" style="margin: 0 330 0 300;"></img></div>
    <img src="images/Thor-3rd-300.jpg" style="width: 300px; float: left; position: absolute; right: 0;">
    so the only changes in this are:
    Code:
    <div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/background-gradient.png);"><img src="images/glimpses-astral.png" style="margin: 0 330 0 300;"></img></div>
    and the margin rule in the image is what is centering the image:
    Code:
    <img src="images/glimpses-astral.png" style="margin: 0 330 0 300;"></img>
    at least that's what I think you're talking about.
    "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

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, 04: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, 10:25 AM
  3. fixed vs. liquid layout
    By afe in forum CSS
    Replies: 1
    Last Post: 01-25-2008, 01:41 AM
  4. Replies: 2
    Last Post: 12-08-2006, 10:50 AM
  5. Replies: 4
    Last Post: 11-09-2006, 11:32 AM

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
  •