So you're making a menu and you're forced to use Doctype 4.0 Transitional. This means that min-width will not work for you if you are doing this for IE7. So for fancy stuff like a menu bar, the elements will start stacking underneath each other as the window is resized. I believe min-width may work for Google Chrome, I'm not sure.
I won't put any code here in the mean time since I'm at a very special place, so I'll try to give an idea as best as I can.
My goal was to make a horizontal menu to look like this:
| ---------------------------- page width = 100% --------------------------------------------|
-----------------------------------------------------------------------------------------------
| Home | Links | About Me |
-----------------------------------------------------------------------------------------------
Let's break it down (3 parts) and give them the needed CSS values.
1. Wrapper
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
width:100%
border-top: whatever u want
border-bottom: whatever u want
2. Wrapper of the actual menu elements ( no visual representation here)
width:Choose a value that extends the width of the accumulated menu elements
3. Actual Menu Elements
| Home | Links | About Me |
float: left
border-left: whatever u want
border-right:whatever u want
That's ittt....
Next up is blocking a floating right div. So say you have a layout like this:
----------------------------------------------------------------------------------------------
| float item |
| |
So when you resize it, it will look like this, which is not desired
---------
| at item|
So you want to block it the float at some point to keep it from moving left. I haven't figured that out yet so stay tuned.
No comments:
Post a Comment