Re: [css-d] Horizontal drop-down menu placement
On 11/11/10 9:41 PM, Steve Caramia wrote:
I built this nav system with the help of an article from the good
peeps at A List Apart (no javascript!). Since the whole thing is
CSS-driven, is there a way to make the submenus flush right to the nav
bar instead of flush left?
http://www.caramiadesign.com/md/
and the stylesheet:
http://www.caramiadesign.com/md/duclaud_stylesheet.css
Fwiw, I'd suggest leaving the subs flush-left and sliding the menu to
the left to eliminate the horizontal scroll bar that the page draws.
.container {border: 1px solid red;}
#nav_system {left: /*65%*/452px;}
aside
Try:
body {
/*font: 70%/1.4 Verdana, Arial, Helvetica, sans-serif;*/
font : 100%/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Best,
~d
--
:: desktop and mobile ::
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Horizontal drop-down menu placement: FIXED!
As I went to bed the solution came to me.
CSS:
#nav li.off ul#port, #nav li.on ul#port {
position: absolute;
left: -60px;
height: 30px;
}
#nav li.off ul#about, #nav li.on ul#about {
position: absolute;
left: 70px;
height: 30px;
}
xhtml:
li class=offa href=#PORTFOLIO/a
ul id=port
lia href=#IDENTITY/a/li
li class=btwn_below|/li
lia href=#PUBLICATIONS/a/li
li class=btwn_below|/li
lia href=#EVENTS /a/li
li class=btwn_below|/li
lia href=#WEB /a/li
li class=btwn_below|/li
lia href=#DISPLAY /a/li
/ul
/li
li class=offa href=#ABOUT/a
ul id=about
lia href=#APPROACH/a/li
li class=btwn_below|/li
lia href=#BIO/a/li
li class=btwn_below|/li
lia href=#CLIENTS/a/li
/ul
/li
http://www.caramiadesign.com/md/
YAY!
And I thought this link was in my original post. This is the ALA
article I was taking about.
http://www.alistapart.com/articles/hybrid
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
Caramia Design • 510.525.4525 • caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal drop-down menu placement: FIXED!
Hi Steve, http://www.caramiadesign.com/md/ The page looks good on a wide screen, but, as David mentioned, your .container div (the one containing the nav) is pushing the page width out to the right -- by about 380+px past your design, hence the horizontal scroll bar. When I look at it in a 1024 x 768 window or smaller, the drop-down disappears out the right side of the window. Beth __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal drop-down menu placement
Where did you get that picture of the cochlea? Don't know. Got it from the client. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal drop-down menu placement
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Steve Caramia Sent: Friday, November 12, 2010 1:52 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Horizontal drop-down menu placement Where did you get that picture of the cochlea? Don't know. Got it from the client. Slightly off topic but that is a nautilus not a cochlea. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal drop-down menu placement: FIXED!
Thanks for pointing this out. I deleted the container class around the navigation. And David, I don't want to move it to the left. Trying to keep to my client's design. (same with the font) http://www.caramiadesign.com/md/ ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? Caramia Design • 510.525.4525 • caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal drop-down menu placement: FIXED!
On 11/12/10 2:09 PM, Steve Caramia wrote: Thanks for pointing this out. I deleted the container class around the navigation. And David, I don't want to move it to the left. Trying to keep to my client's design. (same with the font) Cross your fingers and hope that none of client's users are at 1024 or less...:-) http://www.caramiadesign.com/md/ Caramia Design Best, ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Horizontal drop-down menu placement
For once, NOT about IE: I built this nav system with the help of an article from the good peeps at A List Apart (no javascript!). Since the whole thing is CSS- driven, is there a way to make the submenus flush right to the nav bar instead of flush left? http://www.caramiadesign.com/md/ and the stylesheet: http://www.caramiadesign.com/md/duclaud_stylesheet.css Thanks! ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? Caramia Design • 510.525.4525 • caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal drop-down menu placement
On Thursday, November 11, 2010 09:41:52 pm Steve Caramia wrote: For once, NOT about IE: I built this nav system with the help of an article from the good peeps at A List Apart (no javascript!). Since the whole thing is CSS- driven, is there a way to make the submenus flush right to the nav bar instead of flush left? http://www.caramiadesign.com/md/ and the stylesheet: http://www.caramiadesign.com/md/duclaud_stylesheet.css It's nice. Where did you get that picture of the cochlea? I'm interested because I have a Cochlear Implant. -- Blessings David M. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
