Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Expanding Contracting Header

Status
Not open for further replies.
oharab

oharab

Programmer
May 21, 2002
2,152
GB
I'm trying to create an xhtml 1.0 compliant page where the header has 3 seperate images spread along it, aligned far left, middle and far right, which move as the browser is resized or with different resolutions.
I want it to look like the header of (please don't view this in anything other than IE! It really doesn't work very well, which is why I'm trying to make it xhtml compliant!) which uses tables for the layout.
So far I have:
Code: 
<div id="header">
    <img id="header1" src="_images/header1.gif" alt="BeatCrime.info (logo)"/>
    <img id="header2" src="_images/header2.gif" alt="Get the Picture of Crime on Your Beat" />
    <a href="[URL unfurl="true"]http://www.wypa.org.uk"><img[/URL] id="header3" src="_images/header3.gif" alt="West Yorkshire Police Authority (logo)" class="link" /></a>
</div>

<div id="main">...
and the css looks like:
Code: 
#header {
width:100%;
background-image: url('_images/header4.gif');
margin-top: 5px;
margin-bottom: 5px;
float: left;
}
#header1 {
float:left;
}

#header2 {
float:left;
}
#header3 {
float:right ;
}
#main {
width: 100%;
float: left;
}
So far, the left and right images are fine, I just can't centre the middle one.
To be honest, it's no biggie, it looks ok as it is, but that's what the client asked for, so who am I to argue?

Cheers

ben

----------------------------------------------
Ben O'Hara "Where are all the stupid people from...
...And how'd they get so dumb?"
rockband.gif
NoFX-The Decline
----------------------------------------------
Want to get great answers to your Tek-Tips questions? Have a look at F
 
Sort by date Sort by votes
Tables are xhtml 1.0 compliant, aren't they? [smile]

Maybe you could make the center image a background image in the div, and float the other two images?
...
background-image:
url('_images/header2.gif');
background-repeat:
no-repeat;
background-position:
center;
}

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
And you could always make margins on the two floating images so there is always room for the background image...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Tables are xhtml 1.0 compliant, aren't they?
Click to expand...
:p Technically yes, but you know what I mean! I'm trying to embrace the principals of the thing and only use tables for tabular data.

I've already got a background image repeating over the header div (header4.gif). I can't layer background images can I?

Ben

----------------------------------------------
Ben O'Hara "Where are all the stupid people from...
...And how'd they get so dumb?"
rockband.gif
NoFX-The Decline
----------------------------------------------
Want to get great answers to your Tek-Tips questions? Have a look at F
 
Upvote 0 Downvote
Sorry. I didn't notice the background image. You can't layer them as far as I know.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Would this work?

Code: 
<style type="text/css">
DIV#centerdiv{
text-align:center;
}
DIV#leftdiv{
position: absolute;
top: 0px;
left: 0px;
float:left;
text-align:left;
}
DIV#rightdiv{
position: absolute;
top: 0px;
right: 0px;
float:right;
text-align:right
}
</style>
</head>
<body>
<div id="leftdiv">
<img src="image1.gif" alt="*" />
</div>
<div id="rightdiv">
<img src="image2.gif" alt="*" />
</div>
<div id="centerdiv">
<img src="image3.gif" alt="*" />
</div>

Clive
 
Upvote 0 Downvote
Well, I don't know if I like this one, but seems to work across browsers and is just simple html and css.
Code: 
<!-- HTML code. -->
<div id="two"> </div>
<div id="one"> </div>
<div id="three"> </div>
What I don't like there is that div two (the middle, centered picture) appears before the left side picture in the html. If you mess around with this enough, you can probably find a way to fix that.
CSS:
Code: 
#two {
position: relative;
width: 6em;
height: 10em;
margin: 0 auto;
background-color: #222292;
}

#one {
float: left;
width: 5em;
height: 10em;
margin: -10em 0 0 4%;
background-color: #922222;
}

#three {
float: right;
width: 5em;
height: 10em;
margin: -10em 4% 0 0;
background-color: #EEEEEE;
}
Note, I just used a background color for easy of visualizing things and made up some margins and sizes. The important parts are the -10em margins for #one and #three that keep the divs from falling below the centered one.

Hope that is helpful. :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lupidol
  • Locked
  • Question
CSS: How can I keep the header of an HTML table fixed while scrolling the page?
Replies
4
Views
262
jbenson001
jbenson001
benderulz
  • Locked
  • Question
Table Body colums do not match fixed header
Replies
3
Views
178
ChrisHirst
ChrisHirst
PSchubert
  • Locked
  • Question
How to prevent fixed header from overlapping content when browser resized?
Replies
4
Views
219
ChrisHirst
ChrisHirst
Doc1355
  • Locked
  • Question
DIV 100% height minus header
Replies
7
Views
208
ChrisHirst
ChrisHirst
gnubie
  • Locked
  • Question
Paragraph spacing when preceded by a header
Replies
2
Views
107
gnubie
gnubie

Part and Inventory Search

Sponsor

Back
Top