| 2012-08-12, 13:28 | #1 |
UozonMedlem Plats: Uppsala Registrerad: okt 2008 |
CSS-meny krånglar
Hej
Prio 1 När jag försöker ändra min CSS-meny från vanlig till en med undermeny går det inte som jag vill. Jag har fixat fram så att undermenyn syns när jag hovrar över respektive ord i huvudmeny. Det som däremot jag ej kan få bukt på är att jag inte kan klicka på undermeny efter som att den försvinner när man försöker föra muspekare dit. Prio 2 Jo en annan sak jag inte heller vet hur jag ska lösa är hur jag ska få varje enskild undermeny att ligga centrerad med respektive ord i huvudmenyn. Sub 2 ska ligga centrerad under nyheter, sub 3 centrerad under auktioner osv. Vill/behöver du se hur sidan ser ut just nu kan jag länka i PM. HTML <body> <div id="page-wrap"> <ul id="nav"> <li class="current"><a href="#">HEM</a> <ul> <li><a href="#">Sub1</a></li> <li><a href="#">Sub1</a></li> <li><a href="#">Sub1</a></li> </ul> </li> <li><a href="#">NYHETER</a> <ul> <li><a href="#">Sub2</a></li> <li><a href="#">Sub2</a></li> <li><a href="#">Sub2</a></li> </ul> </li> <li><a href="#">AUKTIONER</a> <ul> <li><a href="#">Sub3</a></li> <li><a href="#">Sub3</a></li> <li><a href="#">Sub3</a></li> </ul> </li> <li><a href="#">VILLKOR</a> <ul> <li><a href="#">Sub4</a></li> <li><a href="#">Sub4</a></li> <li><a href="#">Sub4</a></li> </ul> </li> <li><a href="#">OM</a> <ul> <li><a href="#">Sub5</a></li> <li><a href="#">Sub5</a></li> <li><a href="#">Sub5</a></li> </Ul> </li> <li><a href="#">Kontakt</a> <ul> <li><a href="#">Sub6</a></li> <li><a href="#">Sub6</a></li> <li><a href="#">Sub6</a></li> </li> </ul> <div id="Widget"> </div> </ul> <object width="980" height="120" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="movie" value="http://kampanj.tradera.com/widget/20100702/widget.swf"/> <param name="flashvars" value="backgroundColor=%239b00ff&foregroundColor=%23ffffff&sellerIDs=2176828"/> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://kampanj.tradera.com/widget/20100702/widget.swf" width="980" height="120"> <param name="flashvars" value="backgroundColor=%239b00ff&foregroundColor=%23ffffff&sellerIDs=2176828"/> <!--<![endif]--> <p><a href="http://www.tradera.com/category/category.aspx?ftgnr=2176828">Auktioner på Tradera</a></p> <p><a href="http://widget.tradera.com/">Skapa din egen Tradera-widget</a></p> <!--[if !IE]>--> </object> <!--<![endif]--> </object> <div id="Widget"> [pre]width:980px;
ma div#page-wrap {
rgin0: auto;
}
#nav {
list-style:none;
height: 75px;
width:980px;
position:relative;
line-height:1.4em;
}
#nav li {
height: 15px;
width: 100px;
float:left;
font-size: 1.4em;
text-align:center;
padding: center;
}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
background:
margin-top: 110px;
margin-bottom: 15px;
color: black;
padding-top: 2px;
font-weight: bold;
position: center;
background:green;
}
#nav a:active, #nav a:focus, #nav a:hover {
color: red;
background:#deeef2;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0px;
}
#nav ul {
display: none;
position:center;
left: 0em;
height:0px;
width:980px;
list-style:none;
padding:center;
margin-right: 100px;
padding-top:-100px;
}
#nav li:hover > ul {
display:inline;
position: absolute;
width:auto;
margin: 0px;
}
#nav ul a {
font-size:60%;
width: 100px;
height:0px;
padding:10px;
margin:-10px;
background: green;
}
#nav li:active ul, #nav li:hover ul {
color:red;
left:0;
}
div#widget {
width: 980px;
height: 12px;
|
|
| 2012-08-12, 17:33 | #3 |
Calvin HarrisMedlem 
Plats: Örebro Registrerad: jul 2012 |
Citat:
Ursprungligen inskrivet av Uozon
Skickades från m.sweclockers.com
__________________
Gillar för övrigt inte Calvin Harris.
|
|
|
| 2012-08-12, 17:49 | #4 |
UozonMedlem Plats: Uppsala Registrerad: okt 2008 |
Citat:
Ursprungligen inskrivet av Calvin Harris
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
margin-top: 0px;
margin-bottom: 0px;
color: black;
padding-top: 2px;
font-weight: bold;
position: center;
background:none;
Någon som har någon lösning till Prio två? |
|
|
| 2012-08-13, 14:13 | #6 |
TeknocideMedlem Plats: i din garderob Registrerad: sep 2007 |
Citat:
Ursprungligen inskrivet av Uozon
 #nav > li ska ha position:relative och #nav > li > ul ska justeras mot sin förälders vänsterkant med position:absolute; left:0. Det är en början. Att centrera undermenyn relativt till sin förälder — vilket är hur jag tolkar din bild — är krångligare. position: center i din spec ovan är förresten felaktigt. (negativ padding fungerar inte heller) Senast redigerad av Teknocide 2012-08-13 klockan 14:26.
__________________
Bilanaloger är som Volvo — varenda svenne kör med dem |
|
|
| 2012-08-13, 14:39 | #7 |
UozonMedlem Plats: Uppsala Registrerad: okt 2008 |
Citat:
Ursprungligen inskrivet av Teknocide
edit: jag har fel, det jag skrev först löser inte problemet (om någon råkade se det). Jag får läsa mer noggrant i fortsättningen
#nav > li ska ha position:relative och #nav > li > ul ska justeras mot sin förälders vänsterkant med position:absolute; left:0. Det är en början. Att centrera undermenyn relativt till sin förälder — vilket är hur jag tolkar din bild — är krångligare. position: center i din spec ovan är förresten felaktigt. (negativ padding fungerar inte heller) Hittade detta men det verkar som du säger krångligt. http://www.sitepoint.com/forums/show...-dropline-menu |
|
|
| 2012-08-13, 16:18 | #8 |
TeknocideMedlem Plats: i din garderob Registrerad: sep 2007 |
Citat:
Ursprungligen inskrivet av Uozon
position:relative bör inte ha impakt på hur din meny raddar upp sig, men det kan finnas andra stilregler som i kombination ger det resultatet.
__________________
Bilanaloger är som Volvo — varenda svenne kör med dem |
|
|
| 2012-08-13, 17:15 | #9 |
UozonMedlem Plats: Uppsala Registrerad: okt 2008 |
Citat:
Ursprungligen inskrivet av Teknocide
div#page-wrap {
width:980px;
margin: 0 auto;
}
#nav {
list-style:none;
height: 55px;
width:980px;
position:relative;
line-height:1.4em;
}
#nav li {
position:relative
height: 15px;
width: 100px;
float:left;
font-size: 1.4em;
text-align:center;
}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
margin-top: 0px;
margin-bottom: 0px;
color: black;
padding-top: 0px;
font-weight: bold;
position: center;
background:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
color: red;
background:none;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:auto;
}
#nav ul {
display: none;
position:absolute;
left: 0em;
width: 100px;
height:0px;
width:980px;
list-style:none;
}
#nav li:hover > ul {
display:inline;
position:absolute;
width:auto;
}
#nav ul a {
font-size:60%;
width: 100px;
height:20px;
padding:center;
background: none;
}
#nav li:active ul, #nav li:hover ul {
color:red;
left:auto;
margin-left: -185px;
}
div#widget {
width: 980px;
height: 12px;
|
|
|
| 2012-08-15, 08:54 | #13 |
TeknocideMedlem Plats: i din garderob Registrerad: sep 2007 |
Citat:
Ursprungligen inskrivet av Uozon
Tror inte det är någon fara. Du har satt fast bredd på alla underliggande li- och a-element, vilket leder till att ett kort menyalternativ får större luftspalt än ett längre. edit: CSS:en nedan ger det resultat du är ute efter. För att kunna centrera undermenyn under det toppalternativ den tillhör är det enklaste att ge den fast bredd, se #nav ul nedan. left:50% skjuter in undermenyns vänsterkant till mitten av föräldraelementet (som har position:relative) och margin-left:-100px drar tillbaka undermenyn med halva dess angivna bredd. Resultatet blir att menyalternativets undermeny centreras. Undermenyn har här en ljusgrå bakgrund för att visa hur stor den är. Undermenyns menyalternativ har en orange ram för att visa hur de beter sig inuti menyn. <style> #nav, #nav ul { list-style:none; margin:0; padding:0; } #nav ul { background:#eee; display:none; left:50%; margin-left:-100px; position:absolute; width:200px; } #nav > li { float:left; position:relative; } #nav > li:hover ul { display:block; } #nav ul > li { border:1px solid #fa0; display:inline; } </style> Senast redigerad av Teknocide 2012-08-15 klockan 09:59.
__________________
Bilanaloger är som Volvo — varenda svenne kör med dem |
|
|
Redaktionens senaste nyhetsrubriker
Prylar säljes, köpes, bytes och skänkes
Do you want to ask for a review, send us a press release or advertise? Don’t hesitate to contact the largest website about computer hardware in Sweden!
Vill du nå mer än 270 000 unika besökare i veckan som gillar datorer, teknik och hemelektronik? Kontakta vår mediasäljare
för mer information.
Tipsa redaktionen om en intressant produkt, önska ett test eller framför andra önskemål direkt till oss.
Copyright © 1999-2013 SweClockers AB. Allt innehåll tillhör SweClockers AB.
Citering är tillåten om källan anges. Vi reserverar oss för eventuella informationsfel.
Linjär visning
