Menu need to be fixed - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

August 24, 2010 at 5:13 pm #30031

Historical Forums User

Participant

how can i get this menu fixed? try to use my menu over here: http://www.om-it.net
thank you

August 24, 2010 at 5:25 pm #81523

Historical Forums User

Participant

CSS

August 24, 2010 at 9:22 pm #81479

Historical Forums User

Participant

@charset "utf-8";

/* CSS Document */

* { margin: 0; padding: 0; }

body { margin: 5% auto; text-align:center; background:#172c40 url(../img/bg.png) repeat-x top left;font-family:Arial;}



#cu3er-container {width:950px; outline:0; top:80px;}

#logo-fh{

position:absolute;

top:0px;

left:160px;

z-index:1000;

border: none;

}

#menu-fh{

position:absolute;

top:80px;

left:45px;

padding-top:18px;

margin-left:91px;

height:28px;

width:1000px;

z-index:1000;

cursor:pointer;

font-family:Arial, Helvetica, sans-serif;

font-size:10px;

}

#header{

background:url(../img/ban_header.jpg);

}

#table

{

position:relative;

display: inline;

width: 350px;

margin-left: 10px;

}

#menu-fh a{color:white; width:auto; }

#menu-fh a{text-decoration:none;padding:7px 8px;display:block;_width:auto;zoom:1;_white-space:nowrap;

//height:36px;color:red; vertical-align:middle}

#menu-fh a.logo {padding-top: 0px; margin-top: 0px;}

#menu-fh li li a{display:block;font-weight:normal;color:#00386E;height:auto;padding:2px 0; vertical-align:middle}

#menu-fh li li a:hover{text-decoration:underline; vertical-align:middle}

#menu-fh li div{padding-right:1px; height:40px; text-align:center; vertical-align:middle}

#menu-fh li {background:url(http://www.novotel.com/imagerie/foo.png) repeat left top; }

#menu-fh li:hover div a,

#nav li.hover div a{-moz-opacity:0.3;-khtml-opacity:0.3;filter:alpha(opacity=30);opacity:0.3;zoom:1;}

#menu-fh li{float:left;position:relative;text-align:left;cursor:pointer;list-style:none;padding-bottom:2px; vertical-align:middle}

.IS_IE

#menu-fh li {behavior:expression(NOV.display.addHover(this)); vertical-align:middle}

#menu-fh li div a{background:transparent url(../img/menuBBG.gif); height:40px; padding:5px 5px 5px 5px; color:white; font-weight:bold; font-size:11px; font-family:Arial; line-height:1px; vertical-align:middle}

#menu-fh li div a.one-line {padding-top:15px; vertical-align:middle;}

#menu-fh li:hover div,

#menu-fh li.hover div{background:transparent url(../img/menu-top-hover.png) no-repeat 50% 95%;}

#menu-fh li:hover div {background:transparent url(../img/menu-top-hover.png) no-repeat 50% 95%;}

#menu-fh li.hover div{background:transparent url(../img/menu-top-hover.png) no-repeat 50% 95%;}

#menu-fh

#novotel.hover div{background:transparent url(../img/menu-top-hover.png) no-repeat 50% 80%;}

#menu-fh

#fidelite.hover div{background:transparent url(../img/menu-top-hover.png) no-repeat 50% 80%;}

#menu-fh li ul{clear:left;display:none;position:absolute;top:150px;font-weight:normal;padding:1px;background-color:#fff;opacity:0.8;-moz-opacity:0.8;-khtml-opacity:0.8;filter:alpha(opacity:80);zoom:1;width:120px;padding:5px 10px;}

#menu-fh li.last ul{right:0;}

#menu-fh li li{display:block;float:none;background-color:transparent;border:0;zoom:1;padding:0;}

#menu-fh li:hover ul,

#menu-fh li.hover ul{display:block; vertical-align:middle;}

#menu-fh ul{list-style:none;}

#menu-fh

#recherche {width:123px; vertical-align:middle;}

#menu-fh

#offres {width:123px; vertical-align:middle;}

#menu-fh

#business {width:125px; vertical-align:top;}

#menu-fh

#family {width:122px; vertical-align:middle;}

#menu-fh

#idees {width:125px; vertical-align:middle;}

#menu-fh

#net {width:123px; vertical-align:middle;}



#menu-fh

#novotel {width:123px; vertical-align:middle;}

#menu-fh

#novotel  {width:123px; vertical-align:middle;}

#menu-fh

#fidelite {width:123px; vertical-align:middle;}



/* ====== Utils   =====*/

#utils-fh{

list-style:none;

position:absolute;

top:0;

right:128px;

margin-right:25px;

height:15px;

z-index:1001;

font-family:Arial, Helvetica, sans-serif;

font-size:10px;

width: 206px;

}

#utils-fh a{color:#64604e;_width:1%;_white-space:nowrap}

#utils-fh li{color:#64604e;float:left;position:relative;text-align:left; padding:0 1px 1px;background-color:#ffffff;}

#utils-fh li.first{background:transparent url(../img/bg-utils-fh.png) no-repeat top left; padding-left:8px; vertical-align:middle;}

#utils-fh li.last{background:transparent url(../img/bg-utils-fh.png) no-repeat top right; vertical-align:middle;}

#utils-fh li.last a {padding-right:20px;}

#language-fh {

list-style:none; position:absolute; top:1px; right:0;

margin:14px 34px 0 0; width:64px;

z-index:1001;

font-family:Arial, Helvetica, sans-serif;

font-size:10px;

background-color:#ffffff ;

}

li.first b.menu-current-tr{background-position:right top;top:0px;right:-5px;background-image:url(http://www.novotel.com/imagerie/corner-menu-current-first.png);z-index:5000}

#domains {

top: 640px;

position:absolute;

width: 250px;

height: 100px;

text-align:justify;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color: #FFFFFF;

left: 200px;



}

#domain{

background:url(../img/ban_header.jpg);

}

#host {

top: 640px;

position:absolute;

width: 250px;

height: 100px;

text-align:justify;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color: #FFFFFF;

left: 500px;



}



#develop {

top: 640px;

position:absolute;

width: 250px;

height: 100px;

text-align:justify;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color: #FFFFFF;

left: 825px;



}

#language-fh li {background-color:#ffffff ;padding:0; height: 13px;}

#language-fh li a {color:#7A888F; display:block;padding:0 5px ; height: 13px; margin: 0}



#apple {

/*bottom: -245px;

left: 160px;

position:absolute;*/

}

#mpn {

/*position: absolute;

right: 160px;

bottom: -245px;*/

}

a {

color: #CC7825 ;

}

hover{

text-decoration: underline;

color: #CC7825;

}

visited

{

color: #CC7825 ;

}

.style3 {color: #FFFFFF; font-weight: bold; }

.style5 {font-size: 9px}

.tbll

{

width: 630px;

text-align: left;

}

.tblr

{

text-align: center;

width: 320px;

vertical-align: top;

}

.style8

{

text-align: left;

}

footer

{

text-align: center;

font-size: 9px;

}

footerL

{

width: 160px;

}

#footerM

{

width: 630px;

font-size: x-small;

}

footerR

{

width: 160px;

}

August 24, 2010 at 10:53 pm #81434

Chris Coyier

Keymaster

Man that’s annoying how hashtags are linked to searches automatically, I gotta look into getting that fixed.

August 25, 2010 at 2:43 pm #81354

Historical Forums User

Participant

ok chris take your time

August 25, 2010 at 4:42 pm #81342

virtual

Participant

You need to reduce the “top” position of your absolute positioning in menu-fh li ul, so that it sits under the menu bar.

That is not all you need to fix though, there’s a lot going on in there.
To center your site you should put everything in a container, give it a width and margin: 0 auto.

Also the CC link to the IE style sheet needs to come after the main style sheet.

August 25, 2010 at 11:54 pm #81287

Historical Forums User

Participant

thank you very very much for your help

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘CSS’ is closed to new topics and replies.