CSS dropdown menu vertikální zarovnání položky

27. 2. 2013 11:46:30

Dobrý den,

chtěl bych poprosit někoho, kdo se dobře orientuje v css. Mám připravené horizontální drop down css menu. Pracuje v pořádku až do chvíle kdy submenu dostane delší název. Tento název se správně zalomí na dva řádky, ale bohužel se již vertikálně nezarovná na střed buňky.

Nevěděli byste prosím jak tuto chybu odstranit,

Předem moc Děkuji za pomoc.

css

#nav {
    padding:0;
    list-style:none;
    margin-left: 15px;
}

#nav li {
        float:left;
        display:block;
        position:relative;
        z-index:500;
        margin:0 1px;
    }

#nav li a {
        display:block;
        padding:8px 15px 0 15px;
        font-weight:normal; 
        height:23px;
        text-decoration:none;
        color:#fff;
        text-align:center;
        color:#333;
    }
 
    #nav li a:hover {
        color:#fff;
    }
    #nav li p {
        display:block;
        padding:8px 15px 0 15px;
        font-weight:normal; 
        height:23px;
        text-decoration:none;
        color:#fff;
        text-align:center;
        color:#333;
	   margin:0 0;
    }
    #nav li p:hover {
        color:#fff;
		text-decoration:none;
		background: #93c842; 
    }
     
    #nav li li {
        float:left;
        display:block;
        width:100px;
        background: #ccc;
        position:relative;
        z-index:500;
        margin:0 1px;
        border: solid 0px #000;
        min-height: 20px;
        line-height: 20px;
    }

#nav li li a{
		text-align: left;
		text-decoration:none;
    }

#nav a.selected {
        color:#f00;
    }
     
        /* submenu */
        #nav ul {
            position:absolute;
            left:0;
            display:none;
            margin:0 0 0 -1px;
            padding:0;
            list-style:none;
        }
         
        #nav ul li {
            width:200px;
            float:left;
            border-top:1px solid #fff;
        }

#nav ul a {
            display:block; 
/*            height:15px;*/
            padding: 8px 5px;
            color:#666;
        }
        
        #nav li a:hover {
            text-decoration:none;
            background: #93c842; 
        }

#nav ul li a:hover {
            text-decoration:none;
            background: #93c842; 
        }

.active{
        	background: #93c842;
        	color: #FFF; 
		}

27. 2. 2013 11:46:30

https://webtrh.cz/diskuse/css-dropdown-menu-vertikalni-zarovnani-polozky#reply871690

Miloslav Lešetický

(10 hodnocení)

27. 2. 2013 11:48:58

Nenastavuj elementu A pevnou výšku. Shodným horním a dolním paddingem pak text snadno vycentruješ.

27. 2. 2013 11:48:58

https://webtrh.cz/diskuse/css-dropdown-menu-vertikalni-zarovnani-polozky#reply871689

KamilB

(9 hodnocení)

27. 2. 2013 11:59:19

MOc děkuji! tohle mi vůbec nedošlo. Jen bych se ještě zeptal, pokud odstraním pevnou velikost v A. Najednou si hover efekt v hlavním menu zobrazuje pouze do půlky. Nevím prosím jak tuto věc ošetřit?

27. 2. 2013 11:59:19

https://webtrh.cz/diskuse/css-dropdown-menu-vertikalni-zarovnani-polozky#reply871688

Miloslav Lešetický

(10 hodnocení)

27. 2. 2013 12:02:50

Musel bych vidět živou ukázku, z fragmentu kódu se těžko hádá, protože kupříkladu nevím v kterém prohlížeči se problém vyskytuje či v jakém režimu jednotlivé browsery honíš (quirk, standard?). Atd.

27. 2. 2013 12:02:50

https://webtrh.cz/diskuse/css-dropdown-menu-vertikalni-zarovnani-polozky#reply871687

KamilB

(9 hodnocení)

27. 2. 2013 12:10:57

Bohužel kód zatím nikde zveřejněný nemám. Ale i tak Vám mockrát děkuji!

27. 2. 2013 12:10:57

https://webtrh.cz/diskuse/css-dropdown-menu-vertikalni-zarovnani-polozky#reply871686

Pro odpověď se přihlašte.

Přihlásit