Hi Ana,
Sorry for the delay... Was night time here!
There seems to be some missing images that you have in as background
images in your code, as they weren't appearing I stripped them out of
the CSS and changed these 3 rules so that it works as I believe you want
it in firefox (pc) and should be fine in other browsers. I have extended
the depth of the header so that it matches where it was before (now
97px) and removed the background and width from the #globalnavi list
(the background will be inherited and the width is not necessary). By
making the header relatively positioned you can absolutely position the
list inside it at the bottom right corner rather than floating and using
margins. This will work a lot better if users resize text. So if you
change the header, globalnavi and ul li rules to the following it should
work. I put 10px on the right hand side of the nav just for spacing...
You could put anything there.
#header {
position:relative;
background: #FF7B27;
height: 97px;
}
#globalNavi {
position:absolute;
bottom:0;
right:10px;
list-style: none;
}
ul li {
margin: 0;
padding: 0;
}
Apologies about the bit that made no sense, my html code was rendered in
the email client but what I was suggesting is removing the divs around
the ul's and assigning the id's to the ul instead. This will save you a
couple of lines of code and by the looks of it the lists are the only
things in those divs anyway.
I hope that makes more sense... It's a bit early for me so my
explanation may be poor. If you are using the background images I
stripped out, it should be quite easy to put them back in. If you get
stuck give me a shout... I have very little to do today!
James
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Ana Aguilar
Sent: 07 December 2006 19:12
To: Rob Wilmshurst
Cc: [email protected]
Subject: Re: [css-d] first posting
Hi James,
thanks for the explanation ( I'll be answering to you directly also,
please let me know if the proper thing...) I took out the float: right
away from ul li. but left it in globalNavi, (took out the width and put
it again in 100% since without It broke apart in Safari) an now is
moved to the left, and I will place the logo there; is there any way to
move it to the right but keep the right order of tabs?
This is how it looks right now (in FF Mac looks fine horizontaly only
that I need it on the right, on Safari starts to look off, the line I
have at the bottom border is higher not at the base of the header)
http://preview.aguilar-hauke.de/Sites/test/print.html
and
http://preview.aguilar-hauke.de/Sites/test/styles/masterTest.css
I already try what you suggested about been specific didnt work but I
will try the suggestion from James Leslie I only wish I understood the
difference between specifying the way you said and I did and this other
one.
ul#something{
Attributes in here
}
ul#something li{
Attributes in here
}
Thanks very much
Ana
Rob Wilmshurst <[EMAIL PROTECTED]> wrote: Hi Ana,
The reason the #globalNavi is in the wrong order is because each is
individually floated right. So the browser sees the first element,
'home', and sends it to the right. Elements appearing afterwards are
'queued' to the right, putting them in the opposite order to what you
intended.
To solve this, you can remove the 'float:right' on the li { } rule, and
remove the width declaration from 'globalNavi'. Thus, globalNavi will
float to the right, but elements within it are left-aligned. You'll
also need to reduce the margin-top on #globalNavi to prevent it from
dropping down too far.
As for the modifications to subNavi, the CSS rules are not specific
enough. Whenever you adjust the ul { } rules, they are affecting
*every* on the page.
If you make the rules more specific by defining a rule such as '#subnavi
ul li { ...styles... }', you will only affect the subnavi. Something
such as this should do the trick:
#globalNavi {
float: right;
margin: 66px 50px 0 0; /* or whatever... */
padding: 0;
background: #FF7B27 url('../images/navbar.gif') repeat-x bottom left;
list-style: none;
}
#globalNavi ul li {
margin: 0;
padding: 0;
}
#subnavi {
...styles...
}
#subnavi ul li {
...styles...
}
Hope that helps,
Rob
--
Rob Wilmshurst
[EMAIL PROTECTED]
______________________________________________________________________
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/
---------------------------------
Need a quick answer? Get one in minutes from people who know. Ask your
question on Yahoo! Answers.
______________________________________________________________________
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/
______________________________________________________________________
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/
