Liquid CSS 3 column Header Layout - fixed, liquid, fixed [Archive]

View Full Version : Liquid CSS 3 column Header Layout - fixed, liquid, fixed

sreilly24590

11-01-2012, 03:23 PM

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

sreilly24590

11-02-2012, 04:45 PM

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

Beverleyh

11-02-2012, 09:26 PM

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.

sreilly24590

11-02-2012, 10:01 PM

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

<!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?

@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

Beverleyh

11-02-2012, 10:55 PM

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/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

bernie1227

11-02-2012, 11:08 PM

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

for php code............
<?php /* code goes here */ ?>
for html...............
.....
for js/css/other.......
code goes here................

sreilly24590

11-03-2012, 12:22 AM

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.

<!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:

@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

sreilly24590

11-03-2012, 12:24 AM

bernie1227

11-03-2012, 12:45 AM

here you go:

<!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:

.example1 {
position: absolute;
}

would correspond with:

<div class="example1">

so, if you are refering to a class, you use the . and if you use an id:

#example1 {
position: absolute;
}

would correspond with:

<div id="example1">

so in short, in css, you use . for class= and you use # for id=

sreilly24590

11-03-2012, 04:17 PM

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

bernie1227

11-03-2012, 11:29 PM

ok gotcha, I've made it liquid now, but I had to cheat a bit.

<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.

<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:

<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.

sreilly24590

11-04-2012, 01:54 AM

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

bernie1227

11-04-2012, 02:55 AM

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.

sreilly24590

11-04-2012, 12:22 PM

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. 4825

Thanks again,

Steve

bernie1227

11-04-2012, 07:51 PM

ok, I think I get what you're saying, try this:

<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:

<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:

<img src="images/glimpses-astral.png" style="margin: 0 330 0 300;"></img>

at least that's what I think you're talking about.