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

Ekspertbruger Nybegynder

19. juli 2011 - 13:57 Der er 23 kommentarer og
1 løsning

Problem med margin:auto

Hej eksperter.

Jeg har det problem at min div ikke vil centreres. :)
Kode:

div#top {
width:100%;
height:75px;
background-image:url('baggrundbanner.jpg');
background-repeat:repeat-x;
}

div#header {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
height:75px;
width:850px;

}

div#logo {
float:left;
height:75px;
width:400px;
}

div#login {
float:left;
height:75px;
width:450px;
}

div#undertop {
width:100%;
height:30px;
margin:0px;
padding:0px;
background-image:url('topbanner.jpg');
background-repeat:repeat-x;
border-bottom:1px solid black;
border-top:1px solid black;

div#undertopindhold {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
height:30px;
width:850px;

<div id="top">
<div id="header"><div id="logo"></div>
<div id="login"> </div>
</div>
</div>

<div id="undertop"><div id="undertopindhold">h4j</div></div>

Sådan ser det ud - jeg har brugt samme metode i diven ovenover, men det virker åbenbart ikke her? :)

Nogen der kan hjælpe?

Synes godt om

michael_stim Ekspert

19. juli 2011 - 14:25 #1

Hvilken div?

Synes godt om

webweaver Praktikant

19. juli 2011 - 14:27 #2

Beskriv dit problem bedre. hvilken div er det helt præcist? Kan du ikke få den centreret horisontalt eller vertikalt? Hvis den ikke er centreret, hvor havner den så henne og så videre? ...

Synes godt om

michael_stim Ekspert

19. juli 2011 - 14:30 #3

Du kan jo prøve at sætte borders om dine divs og evt. noget tekst, så kan du se hvor de havner.

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 14:33 #4

Undskyld at min forklaring ikke er bedre :)

Jeg vil gerne centre diven undertopindhold i undertop, men det der sker er bare, hvis jeg nu skriver noget tekst, så kommer teksten ude i venstre side istedet inde i midten - jeg kunne selvfølgelig bruge noget text align, men det skal være lidt mere præcist end det, og i mine øjne bliver jeg nødt til at bruge margin:auto, men det virker bare ikke. :)

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 14:34 #5

#3

Det er prøvet - Borderen bliver ikke vist :)

Synes godt om

michael_stim Ekspert

19. juli 2011 - 14:35 #6

Skriv noget tekst i dine div'er, så vises de fint.

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 14:42 #7

Kunne det så klares med noget istedet <div style="clear: left;"></div> ?

Der skal jo helst ikke være tekst :)

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 16:07 #8

Det fungerer stadig ikke :)

Synes godt om

webweaver Praktikant

19. juli 2011 - 16:29 #9

Jeg er stadig i tvivl om hvad du vil helt præcist?

Centrere en div eller en tekst inde i en div?
Hvis det er tekst inde i en div, kan jeg ikke se, hvorfor text-align ikke kan gøre det. Ved ikke rigtig, hvad du mener med at den ikke er præcis nok?

Og hvis du har et block element som en div, vil margin: auto; også virke. Så der ligger noget andet et sted og blokerer eller også har du glemt noget.

Som det er nævnt, så er altid smart at gøre borders synlige, imens man positionerer sine elementer. Giv dem en højde/bredde eller smid noget indhold i dem, for at få dem vist ...

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 17:51 #10

hmm - jeg har jo prøvet margin:auto og det virker ikke :)

Jeg har prøvet at se, hvor min border er, men den kommer simpelthen ikke frem - som om div'en ikke eksisterer.

Det jeg gerne vil er at have en fast baggrund med et banner bag i - det bruger jeg undertop til - det gør at lige meget hvor bred browseren er vil det følge med.(rette sig efter browser)

Men jeg vil stadig gerne have at indholdet er fast og derfor bruger undertopindhold og putter ind i undertop. Men det skal jo kunne fungere i alle browsere, så har valgt længden 850px, som så gerne skulle centreres i længde i 850px i div'en undertop.

Problemet at det gør den som sagt ikke, og kan ikke finde ud af hvorfor - min kode ser sådan her ud - jeg kan ikke se hvad jeg skulle have glemt eller hvad der skulle blokere:

div#undertop {
width:100%;
height:30px;
margin:0px;
padding:0px;
background-image:url('topbanner.jpg');
background-repeat:repeat-x;
border-bottom:1px solid black;
border-top:1px solid black;

div#undertopindhold {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
height:30px;
width:850px;

<div id="undertop"><div id="undertopindhold">h4j</div></div>

Synes godt om

olebole Juniormester

19. juli 2011 - 18:44 #11

<ole>

Hvis din kode her svarer til den, du har skrevet i dokumentet, mangler du afslutninger:

div#undertop {
width:100%;
height:30px;
margin:0px;
padding:0px;
background-image:url('topbanner.jpg');
background-repeat:repeat-x;
border-bottom:1px solid black;
border-top:1px solid black;
} /* <-- Her */

div#undertopindhold {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
height:30px;
width:850px;
} /* <-- Her */

/mvh
</bole>

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 18:48 #12

Hej ole :)

jeg ved ikke hvorfor at det ikke kom med i kopiringen, men det er med i min kode :)

Desværre er det ikke den fejl, men tak for dit svar :)

Synes godt om

olebole Juniormester

19. juli 2011 - 19:27 #13

Hehe ... jamen, så må jeg jo til at forholde mig til, hvad koden gør :D

Det inderste div er fint centreret. Prøv:

div#undertop {
width:100%;
height:30px;
margin:0px;
padding:0px;
background-color:#ff0;
background-image:url('topbanner.jpg');
background-repeat:repeat-x;
border-bottom:1px solid black;
border-top:1px solid black;
}
div#undertopindhold {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
height:30px;
width:850px;
background-color:#f00;
}

- men du kan centrere teksten i det inderste div med text-align:center, hvis det er det, du vil =)

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 19:35 #14

Vil helst ikke centre teksten, men div'en :)

Det virker desværre ikke :)

Synes godt om

webweaver Praktikant

19. juli 2011 - 20:05 #15

Har du et link til siden du arbejder på?

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 21:38 #16

Ja har lige lagt det op her :)

Synes godt om

olebole Juniormester

19. juli 2011 - 21:45 #17

#14 >> Jo, det virker endda eksemplarisk. Det burde være overflødigt at spørge, men du bruger vel en DTD?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 22:07 #18

Underligt, mit link kom vist ikke med :)
Jeg bruger:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Link:
http://www.ja-ki.at/test/

Synes godt om

olebole Juniormester

19. juli 2011 - 22:24 #19

Fra din reelle kildekode:

Jeg savner divet "undertopindhold" en smule *o)

Synes godt om

Ekspertbruger Nybegynder

19. juli 2011 - 22:29 #20

Sådan! :)

Hvorfor havde jeg dog i alverden ikke set det :)

du må gerne angive svar :)

Synes godt om

olebole Juniormester

19. juli 2011 - 22:33 #21

Ellers tak, jeg samler ikke points. Læg selv et svar og accepter det, så spm'et lukkes ;o)

Synes godt om

olebole Juniormester

19. juli 2011 - 22:35 #22

Det burde have undret, divet ikke tog den røde baggrundsfarve =)

Synes godt om

Ekspertbruger Nybegynder

22. juli 2011 - 00:34 #23

Ja jeg skulle have undret mig mere og bruge den logiske sans :)

Synes godt om

olebole Juniormester

22. juli 2011 - 01:25 #24

Ja, den får man zq ofte lagt de særeste steder. Hvor er det nu, jeg kender det fra ...? *D

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
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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