Sun, 2003-07-06 18:19
Greetings,
Newbie here trying to move on from tables. I've been trying to do this since last night, but haven't found any real solutions. I have a top navigation bar that spans the entire page. There are two fixed elements, a left image and a right image, the middle image must be dynamic and scale with the page. So far, I've use the following (should I switch from span to divs?):
<span style="float:left;width:500px;"><img src="images/menuleft.jpg" width="500" height="150"></span> <div align=""></div> <span style="float:right;width:150px;"><img src="images/menuright.jpg" width="150" height="150"></span>
I have no idea what to do for the div align part (the middle cell) to make it go the 100 percent and repeating a background image.
The only thing I can think of right now, is to make everything div's, and have the second (middle) div go all the way across the screen and then have the right div float on top of it using the z:index...
Any help will be appreciated. Thanks!
Sun, 2003-07-06 18:40
#1
Here's the code using DIVs
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:500px; height:150px; z-index:1; background-image: url(images/menuleft.jpg); layer-background-image: url(images/menuleft.jpg); border: 0px none #000000;"></div> <div id="Layer2" style="position:absolute; left:500px; top:0px; width:100%; height:150px; z-index:2; background-image: url(images/menuback.jpg); layer-background-image: url(images/menuback.jpg); border: 0px none #000000;"></div> <div id="Layer2" style="position:absolute; right:0px; top:0px; width:150px; height:150px; z-index:3; background-image: url(images/menuright.jpg); layer-background-image: url(images/menuright.jpg); border: 0px none #000000;"></div>
Problems I've run into using this I'm getting horizontal scrollbars when I shouldn't be. There's nothing else on the page so in theory, the page should be whatever size I set the window to. With the scrollbar, if I scroll to the right, the right div stays in place, so I can actually see the second div show up behind it and extending all the way to the right.
Mon, 2003-07-07 03:09
#2
Newbie here, how to make a span or div a dynamic size?
So I got rid of the second DIV's left offset of 500pixels and it worked. I made the second/middle DIV the bottom layer and just made it 100% width and placed the left and right DIVs as layers on top of it.
Now all I need is to figure out a way to sort of prevent the right DIV from sliding over and covering the first or second DIV when resizing the window. There's some sort of min-width function I can do right?
I'm pretty sure there is a better way of doing it, where the elements would follow one after another. Would anyone like to educate me? =D. I've been reading a lot about CSS and PHP and this stuff is GOLD... just wish I had a better mind for this stuff, graphic dudes weren't made for coding... even this simple layout stuff gives me a headache.
Mon, 2003-07-07 09:21
#3
Newbie here, how to make a span or div a dynamic size?
You've done well with answering your own problems... 
There is a min-width property but that won't work with IE AFAIK. If you want to give us what you've got so far then we can look further into it...
I think preventing two fixed-width DIVs from overlapping could be interesting, need a challenge!
Thu, 2003-07-10 04:13
#4
Newbie here, how to make a span or div a dynamic size?
http://www.alexduan.com/liferollcall/includes/menu.php
Here's what I have so far. Only problem is when the window is too small, the right image goes down one line.