Oprettet man. d. 20. august 2012 kl. 14:12:21
30 point uddelt | 12 kommentarer
Centrere en undermenu
HejJeg har et problem med at få min undermenu til at blive centreret under min hovedmenu.
Min hovedmenu består at 5 punkter (vandret menu):
- Home
- profil
- projketer
- info
- kontakt
Min undermenu til punktet "projekter" består af 4 punkter (vandret menu):
-projekt1
-projekt2
-projekt3
-projekt4
Problemet er at undermenuen ikke skal starte ude til venstre, men altid stå centreret under hovedmenuen.
Jeg kan få det til at virke hvis jeg bruger tabeller, men det er jo ikke særlig kønt.
Er der nogen der har en bedre løsning?
Skrevet man. d. 20. august 2012 kl. 14:21:48| #1
KHHP (8.906 point)
Har du noget HTML og CSS vi kan se, så er det ofte nemmere at finde fejlen.
Hvis du vil have en lodret dropdown-menu, så kan jeg anbefale denne tutorial: http://www.nemprogrammering.dk/ (...)
Den har jeg selv brugt på et par sider og det fungerer rigtig fint.
Hvis du vil have en lodret dropdown-menu, så kan jeg anbefale denne tutorial: http://www.nemprogrammering.dk/ (...)
Den har jeg selv brugt på et par sider og det fungerer rigtig fint.
Skrevet man. d. 20. august 2012 kl. 16:29:53| #2
olebole (216.748 point)
<ole>
#1 Nej, den tutorial kan ikke anbefales. Fyren bag nemprogrammering.dk har desværre ikke særlig godt styr på det, han prøver at lære andre. Derfor er der desværre rigtig mange, der lærer at kode skidt ved at lære fra det site.
float er beregnet til at skabe tekstomløb omkring en boks eller billede. display:inline-block er det, der er beregnet til at lægge block-elementer ved siden af hinanden. Og så behøver man ikke hacke sig ud af tilstødende problemer med clear =)
/mvh
</bole>
#1 Nej, den tutorial kan ikke anbefales. Fyren bag nemprogrammering.dk har desværre ikke særlig godt styr på det, han prøver at lære andre. Derfor er der desværre rigtig mange, der lærer at kode skidt ved at lære fra det site.
float er beregnet til at skabe tekstomløb omkring en boks eller billede. display:inline-block er det, der er beregnet til at lægge block-elementer ved siden af hinanden. Og så behøver man ikke hacke sig ud af tilstødende problemer med clear =)
/mvh
</bole>
Skrevet man. d. 20. august 2012 kl. 17:05:20| #3
@olebole: Men denne er jo skrevet af en af hans brugere? :D
Skrevet man. d. 20. august 2012 kl. 17:28:02| #4
olebole (216.748 point)
#3: Sorry, men det gør ham ikke mere anbefalelsesværdig *D
Skrevet man. d. 20. august 2012 kl. 21:43:23| #5
olebole (216.748 point)
@krk: Du kan prøve denne struktur, som burde kunne, hvad du søger. Farver/borders er kun lagt på for at give en idé om, hvordan du styrer hover-situationerne:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horsitontal Menu</title>
<style type="text/css">
body {
font-family: verdana, arial, sans-serif;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
background: silver;
cursor: pointer;
}
.menu li div {
position: absolute;
display: none;
top: 100%;
left: -500px;
right: -500px;
text-align: center;
}
.menu ul {
display: inline-block;
text-align: left;
border: 1px solid red;
}
.menu ul li {
display: list-item;
background: yellow;
}
.menu li:hover {
background: #fff;
}
.menu li:hover div {
display: block;
}
.menu ul li:hover {
background: red;
color: yellow;
}
</style>
</head>
<body>
<ul class="menu">
<li>Menupunkt #1</li>
<li>Menupunkt #2</li>
<li>Menupunkt #3
<div><ul>
<li>Menupunkt #3_1</li>
<li>Menupunkt #3_2</li>
<li>Menupunkt #3_3</li>
</ul></div>
</li>
<li>Menupunkt #4</li>
</ul>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horsitontal Menu</title>
<style type="text/css">
body {
font-family: verdana, arial, sans-serif;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
background: silver;
cursor: pointer;
}
.menu li div {
position: absolute;
display: none;
top: 100%;
left: -500px;
right: -500px;
text-align: center;
}
.menu ul {
display: inline-block;
text-align: left;
border: 1px solid red;
}
.menu ul li {
display: list-item;
background: yellow;
}
.menu li:hover {
background: #fff;
}
.menu li:hover div {
display: block;
}
.menu ul li:hover {
background: red;
color: yellow;
}
</style>
</head>
<body>
<ul class="menu">
<li>Menupunkt #1</li>
<li>Menupunkt #2</li>
<li>Menupunkt #3
<div><ul>
<li>Menupunkt #3_1</li>
<li>Menupunkt #3_2</li>
<li>Menupunkt #3_3</li>
</ul></div>
</li>
<li>Menupunkt #4</li>
</ul>
</body>
</html>
Skrevet man. d. 20. august 2012 kl. 21:50:33| #6
olebole (216.748 point)
PS: Centreringen sørger dette DIV for:
Det positionerer jeg absolute og lader det rage 500px ud på hver side af det overliggende menupunkt. Derefter centrerer jeg alt inline indhold i det med text-align.
Den underliggende UL får display:inline-block og bliver derfor centreret. På den neutraliserer jeg centreringen, så alt underliggende igen bliver venstrestillet
<li>Menupunkt #3
<div><ul>
<li>Menupunkt #3_1</li>
<li>Menupunkt #3_2</li>
<li>Menupunkt #3_3</li>
</ul></div>
</li>
<div><ul>
<li>Menupunkt #3_1</li>
<li>Menupunkt #3_2</li>
<li>Menupunkt #3_3</li>
</ul></div>
</li>
Det positionerer jeg absolute og lader det rage 500px ud på hver side af det overliggende menupunkt. Derefter centrerer jeg alt inline indhold i det med text-align.
Den underliggende UL får display:inline-block og bliver derfor centreret. På den neutraliserer jeg centreringen, så alt underliggende igen bliver venstrestillet
Skrevet ons. d. 12. september 2012 kl. 21:56:58| #7
olebole (216.748 point)
Gad vide, om du også ville spilde vores tid, hvis det var til den timebetaling vores almindelige kunder betaler?
Skrevet tor. d. 04. oktober 2012 kl. 09:02:49| #8
Afvist svar
krk (13.350 point)
Olebole du har ret. Jeg burde ikke spille jeres tid, undskyld mange gange.
Menuen blev lavet om i designet lige efter jeg havde lavet indlægget og så havde jeg glemt alt om dette.
Jeg har ikke andet end dårlige undskyldninger og beklager mange gange.
I forhold til din kode så var dit forslag lige det jeg skulle have brugt. Det er nu gemt til en anden god gang.
Som et lille plaster på såret kan jeg kun tilbyde ekstra point
Menuen blev lavet om i designet lige efter jeg havde lavet indlægget og så havde jeg glemt alt om dette.
Jeg har ikke andet end dårlige undskyldninger og beklager mange gange.
I forhold til din kode så var dit forslag lige det jeg skulle have brugt. Det er nu gemt til en anden god gang.
Som et lille plaster på såret kan jeg kun tilbyde ekstra point
Skrevet tor. d. 04. oktober 2012 kl. 09:03:39| #9
krk (13.350 point)
Olebole: jeg mente du skulle ligge et svar ikke mig selv.
Det køre rigtig godt for mig ;-)
Det køre rigtig godt for mig ;-)
Skrevet tor. d. 04. oktober 2012 kl. 16:23:34| #10
olebole (216.748 point)
Hehe ... det er okay. Jeg samler ikke points, så du accepterer bare dit eget svar. Din undskyldning er modtaget og fuldt accepteret. 'Shit happens' for os alle sammen - men det er befriende at møde folk, der har 'blommerne' til at give en undskyldning, når det sker. Respekt! *o)
Skrevet fre. d. 05. oktober 2012 kl. 08:36:14| #11
Accepteret svar!30 point tildelt
Skrevet fre. d. 05. oktober 2012 kl. 08:37:02| #12
Log ind
Seneste spørgsmål
Lidt hjælp til en nybegynder i PHP
Oprettet den 25. maj 2013 kl. 11.44
thegenni giver 30 point for svar | Giv et svar »
jQuery scroller til top ved refresh?
Oprettet den 23. maj 2013 kl. 15.20
jonaslr giver 200 point for svar | Giv et svar »
Seneste guides
Seneste nyheder
Tips & Tricks fra PC World
Fem smarte funktioner i din Mac som du sikkert ikke kender
Her har du fem muligheder for at tweake din Mac på en fed måde.
Anmeldelser fra PC World
Test: Samsung Galaxy S4 er et hit - trods gøglertricks
Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.
Seneste blogindlæg
Tvangslukke spørgsmål: Hvad er den bedste løsning?
Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...
Nyheder fra PC World
Ny opfindelse: Oplad din mobil på 20 sekunder
Måske er det snart slut med at lade mobilen op hver aften. Med ny opfindelse kan telefonen få fuld energi på sølle 20 sekunder.
Nyheder fra Computerworld
Galleri: De 10 vildeste datacentre i verden
I en gammel kirke, i et oppusteligt telt, på nedlagte militæranlæg eller midt i ørkenen. Der er ingen grænser for, hvor man kan banke et datacenter op. Her er de 10 sejeste anlæg i verden. I...
IT Kurser
Samarbejdspartnere
Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger