Replacing HTML TABLE tags, transparent images, image maps with CSS
ESPN announced that their website no longer uses HTML hacks and tricks
to achieve stunning formatting. The aforementioned tricks also made
accessibility extremely hard providing further incentive to learning
how to format in CSS. I'm a semi-professional web designer who is
trying to learn how to do the same.
I've already read the http://www.w3.org/ web site on articles on CSS.
But they do not have an example of what I want to do. Actually, they
have nice examples, but not all of them work in IE, FireFox, Opera,
etc in the same way.
I've also read http://www.useit.com/alertbox/9605.html the usability
guidelines. But honestly, my audience want a little flash. One big
point was pages that don't expand to fill the whole screen. Visitors
with big screens want to use it all.
I've also read http://www.alistapart.com/articles/practicalcss/ and
http://glish.com/css/7.asp but can't seem to be able to translate that
into my situation.
As I learn best by example. Please consider this problem.
<BODY>
<FORM>
<DIV style="background-color: red; width: 100%;">
<DIV id="image01" style="height: 50px; width: 770px;
background-color: green">This DIV tag will really be an image</DIV>
</DIV>
<DIV style="background-color: red; width: 100%:">
<DIV id="menu" style="background-color: lime; width: 626px;">Menu |
Items | Here | and | More</DIV>
<INPUT type="text" name="search" value="search"> <INPUT
type="submit" name="go" value="Go!">
</DIV>
</FORM>
My main material
</BODY>
This example viewd in IE will have the text field directly below the
Menu | Items | Here section. I would like it to be exactly right of
the lime div section.
I've tried.
1) changing div id="menu" to span
But this doesn't allow me to specify the width of the lime green section.
why is it important?
Because the div id="image01" will really be an image with to main
colors: left greenish, right reddish. The image has a total width of
770px, starting left going right, at the 626px mark the color changes.
The menu div will be teh same color as the left side of the image, and
the text input will be the same color as the right side of the image;
giving the illusion that the image encompasses the text input and
menu...with out doing image maps or cutting the image and putting in a
table.
2) changing the red div to be relative positioned and the text section
to be absolute positioned. Like so:
<DIV style="position: relative; top: 0px; left: 0px; background-color:
red; width: 100%:">
<DIV id="menu" style="background-color: lime; width: 626px;">Menu |
Items | Here | and | More</DIV>
<DIV style="position: absolute; top: 0px; left: 626px;">
<INPUT type="text" name="search" value="search"> <INPUT
type="submit" name="go" value="Go!">
</DIV>
</DIV>
But the go button drops down out of the red section if the screen is too small.
3) I've tried setting the width, height style properties of everything
so that it would work. But as i said eariler i want the right red of
the top and bottom div to stretch so the entire top looks like part of
the image and the main body of the screen fills the entire monitor of
those luckly enought to have those hugh monitors.
Answer I would like:
Modify my example so that the text input is directly to the right of
the menu section. Ideally, example should be simple and work on the
majority of platforms. Should it get complicated, plenty of comments
explaining why a particular piece of code is there. Other tips,
suggestions, resources, etc. greatly appreciated.
Thank you |
