CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

MagnusELH Nybegynder

16. december 2011 - 19:27 Der er 8 kommentarer og
1 løsning

plancering af ul#navigation. (øverst i midten,) ?

er der nogle der kan få ul#navigation til at stå øverst i midten. så det er det på alle skærme. ?

ul#navigation {
position: 0,50%;
margin-left: 0;
padding-left: 18%;
list-style-type: none;
background: #FFF;
float: left;
width: 100%;

}
ul#navigation li {
display: inline;
}
ul#navigation a{
display: block;
float: left;
padding: .2em 1em;
text-decoration: none;
color: #FEA0A0;
background: #FFF;
border-right: 1px solid #FFF;
height: 40px;
}
ul#navigation a:hover {
color: #FFF;
background: #9BB1FF;
}

????

Synes godt om

olebole Juniormester

16. december 2011 - 19:50 #1

<ole>

ul#navigation {
width: 700px;
margin: 0 auto;
list-style-type: none;
background: #FFF;
}

Ret selv de 700px i bredden, så det passer til din menu

/mvh
</bole>

Synes godt om

olebole Juniormester

16. december 2011 - 19:55 #2

- men det giver ikke mening, at du sætter LI elementerne til inline, når de indeholder A elementer, som er sat til block. Inline elementer kan ikke indeholde block elementer.

Løsningen kunne være at give LI elementerne display:inline-block i stedet. Så opfører de sig 'udadtil' som inline elementer - men som block elementer 'indadtil'

Synes godt om

MagnusELH Nybegynder

16. december 2011 - 20:55 #3

tak skal du have, for en ekstra oplysning!

du smider bare et svar :-)

Synes godt om

olebole Juniormester

16. december 2011 - 21:20 #4

Ellers tak, jeg samler ikke point. Du smider bare et selv og accepterer det, så tråden lukkes =)

Synes godt om

MagnusELH Nybegynder

16. december 2011 - 21:23 #5

men det går udover sarafi browseren, det var derfor jeg satte det i display: inline;

Synes godt om

olebole Juniormester

16. december 2011 - 21:28 #6

- og den logiske forklaring på det med inline og block er, at et block element skaber en blok/afsnit af linjer - mens et inline element kan rummes i en linje.

Et tekstafsnit kan indeholde linjer og andre afsnit. En linje kan ikke indeholde et afsnit. Dette afspejler standarden ved, at block elementer kan indeholde andre block og inline elementer. Inline elementer kan derimod kun indeholde andre inline elementer

Synes godt om

MagnusELH Nybegynder

16. december 2011 - 21:34 #7

Tak skal du have :)

Synes godt om

olebole Juniormester

16. december 2011 - 21:36 #8

Jeg har lige testet denne kode, og den fungerer ens i de browsere, jeg har kørende under Win7 (herunder Safari):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 0.8em verdana, arial, sans-serif;
}
ul#navigation {
width: 700px;
margin: 0 auto;
list-style-type: none;
background: #f00;
}
ul#navigation li {
display: inline-block;
}
ul#navigation a{
display: block;
padding: .2em 1em;
text-decoration: none;
color: #FEA0A0;
background: #FFF;
border-right: 1px solid #FFF;
height: 40px;
}
ul#navigation a:hover {
color: #FFF;
background: #9BB1FF;
}
</style>
</head>
<body>

<ul id="navigation">
<li><a href="#">Menulink #1</a></li>
<li><a href="#">Menulink #2</a></li>
<li><a href="#">Menulink #3</a></li>
<li><a href="#">Menulink #4</a></li>
</ul>

</body>
</html>

Synes godt om

olebole Juniormester

16. december 2011 - 21:40 #9

PS: Afstanden mellem menupunkterne kan du slippe for ved at fjerne white space mellem LI elementerne i koden:

<ul id="navigation">
<li><a href="#">Menulink #1</a></li><li>
<a href="#">Menulink #2</a></li><li>
<a href="#">Menulink #3</a></li><li>
<a href="#">Menulink #4</a></li>
</ul>

- og et måske lidt mere overskueligt 'hack' består i at lave kommentarer mellem de forskellige tags:

<ul id="navigation">
<li><a href="#">Menulink #1</a></li><li><a href="#">Menulink #2</a></li><li><a href="#">Menulink #3</a></li><li><a href="#">Menulink #4</a></li>
</ul>

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS