On 23/11/06, Graham Anderson <[EMAIL PROTECTED]> wrote:
>
> Hi
>
> I have a menu where all the menu button text is being replaced with
> images.
> For some reason, when the browser text is resized, the "menu bar
> text" images begin to move too....shifting to the right with each resize
> <div id="header">
> <div id="menu">
> <div id="pizzeria_topmenu_btn"> <a title="Bravo Pizzeria" href="../
> pizzeria/">BRAVO PIZZERIA</a> </div>
> <div id="ferrara_topmenu_btn"> <a title="Ferrara Cafe" href="http://
> www.ferraracafe.com/">FERRARA CAFE</a> </div>
> <div id="cucina_topmenu_btn"> <a title="Bravo Cucina" href="../
> cucina/">BRAVO CUCINA</a> </div>
> </div><!-- close menu -->
> </div> <!-- close header -->
>
>
> #header {
> position:absolute;
> width: 690px; height: 109px; margin: 5px 4px 5px 5px;
> background: url('../images/header.jpg') #957e4e;
> }
>
> #menu{
> position:absolute;
> left:0px;
> top: 83px;
> width: 100%;
> height: 25px;
> }
>
> #menu a{
> width:219px;
> height:25px;
> display:block;
> text-indent:9000em;
> background: url('../images/topbar_main_menu_nav_matrix.gif') no-
> repeat 0px 0px;
> }
>
> #pizzeria_topmenu_btn {position: absolute;left: 5px;}
> #pizzeria_topmenu_btn a:link, #pizzeria_topmenu_btn a:visited
> { background-position:0px 0px; }
> #pizzeria_topmenu_btn a:hover, #pizzeria_topmenu_btn a:focus
> {background-position:0px -25px;}
Hello,
Some advice: Please abandon the idea of "this needs a container of some
sort, I'll put it in a div". It's also known nerdily as divitis. There are
other elements that are better suited to this sort of thing. For a menu like
yours, it's better to use an unordered list (<ul>). ul is block-level ( i.e.
default is display:block;) and so are the list elements inside (<li>,
nothing else is allowed inside a ul). So for your menu, you can have this
HTML:
<div id="header">
<ul>
<li id="pizzeria_topmenu_btn"><a title="Bravo Pizzeria"
href="../pizzeria/">bravo pizzeria</a></li>
<li id="ferrara_topmenu_btn"><a title="Ferrara Cafe" href="
http://www.ferraracafe.com/";>ferrara cafe</a></li>
<li id="cucina_topmenu_btn"><a title="Bravo Cucina" href="../cucina/">bravo
cucina</a></li>
</ul><!-- close menu -->
</div> <!-- close header -->
It's much cleaner and easier to follow I think. The second thing you should
also abandon is the idea of positioning everything absolutely. Absolute
positioning is OK if you intend to put everything in a fixed position, but
this makes it very restrictive. It means you will probably have to make your
page 800px wide and so it will look small for people with big screens.
Position:static is the default for everything and it's best to stick to this
unless you need to move something from its natural flow in the document. See
this excellent explanation if you want to read more:
http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute
I'm assuming you want to make this menu horizontal (it's a bit difficult to
see what you're after without the images) so for that you can use this CSS.
It's a good idea to keep your header flexible (in width) to accommodate
different screen sizes.
#header {
margin: 5px 4px 5px 5px;
background: url('../images/header.jpg') #957e4e;
height:109px;
}
#header ul {
margin-top:83px;
}
#header ul li {
display:inline;
}
#header ul li a {
display:block;
width:219px;
height:25px;
background: url('../images/topbar_main_menu_nav_matrix.gif') no-repeat 0px
0px;
}
#header ul li a#pizzeria_topmenu_btn {
margin-left:5px; /* or perhaps padding is better here */
text-transform:uppercase;
}
#header ul li a#pizzeria_topmenu_btn:hover,
#header ul li a#pizzeria_topmenu_btn:focus {
background-position:0px -25px;
}
Besides all that, everything else in your CSS is redundant (except the
text-indent which I omitted. What is that for?). Also note that a and a:link
are practically the same thing and that it's best to use text-transform than
to have things in capital letters in your HTML - screen readers can
interpret that as shouting and if you turn CSS off it makes it look a bit
ugly. That's up to you though, of course.
Also, if you're thinking about what happens when the text is resized (which
is good) you should consider using ems instead of px. Using ems for
everything means that, for instance, a div with its dimensions in ems will
resize proportionally with the text and not stay the same size while the
text is getting bigger. This means your layout is less likely to break, you
respect the user's default font size choices and your site in general is
more flexible.
I hope this helped. Cheers,
Rafael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
