Søg
Avatar billede nph12 Nybegynder
02. december 2010 - 18:49 Der er 16 kommentarer og
1 løsning

Centrering af div

Hej
Hvordan centrer jeg en div, så jeg får en top og bundmargin på 20 px?

Jeg har prøvet følgende:

#side {
    width: 920px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border: solid black 1px;
    background-color: #FFFFFF;
}

men jeg får en fejl på en af de fem sider jeg har lavet. Det er den side (forsiden), hvor jeg har indsat et billede, som rykker til bredden af siden. Hvis jeg fjerner billedet, så opfører siden som alle de andre. Billedet har en bredde på 918 px.
Avatar billede webweaver Praktikant
02. december 2010 - 20:03 #1
Hvad er problemet? Er det top og bundmargin som du starter med at spørge indtil eller billedet, som gør siden bredere?

Har du et link evt?
Avatar billede The_Buzz Novice
02. december 2010 - 20:11 #2
Vil også gerne se et link...

Men en 920px div med auto margin, tror jeg bommer.

Ville nok skrive

#side {
    width: 920px;
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    border: solid black 1px;
    background-color: #FFFFFF;
    text-align:center;
}
Avatar billede nph12 Nybegynder
02. december 2010 - 20:16 #3
Mit problem er det billede som gør siden bredere. Hvis jeg fjerner margin-left: auto; og margin-right: auto; så bliver siden ikke bredere, men så er den ikke centreret (den er venstrestillet) - hvordan får jeg den centreret?

Jeg har ikke mulig for at linke til siden
Avatar billede nph12 Nybegynder
02. december 2010 - 20:35 #4
Jeg googlede lige, at fandt noget om css centrering. Der stod at man kunne prøve følgende: html, body {height:100%;}

Det virker - selvom jeg ikke helt forstår hvorfor.
Avatar billede Slettet bruger
04. december 2010 - 21:01 #5
Er det et baggrundsbillede i en div eller et <img> ?
Skal den skaleres så den passer i højden af browservinduet minus margin ?
Skal der ikke være en horisontal scrollbar eller skal der ?
Avatar billede nph12 Nybegynder
11. december 2010 - 21:59 #6
Undskyld mit sene svar..

På forsiden har jeg en div som hedder "content", hvor jeg har et baggrundsbillede i en <img>. Skulle det lave problemet?

Man skal være en horisontal scrollbar, da man skal kunne scrolle ned på siden.
Avatar billede Slettet bruger
12. december 2010 - 00:20 #7
Et det content der skal have en top- og bundmargin på 20px ?
og dit <img> inden i content der gør content bredere ?

Horisontal = Vandret ... er det ikke vertical (lodret) du mener der skal være scroll på ?
Avatar billede Slettet bruger
12. december 2010 - 00:36 #8
Sådan her forestiller jeg mig dit problem:

Du har din content div i en hvis størrelse, og et billede inden i den div, der overskrider divens bredde. Det gør at dit billede skrider ud over kanten i højre side, som i det her eksempel hvor jeg har givet content en blå baggrundsfarve: http://finks.dk/pic.html

Det du gerne vil have, er at den går ligeligt ud over begge sider, som i dette eksempel: http://finks.dk/pic2.html

...er det rigtigt forstået ?
Avatar billede nph12 Nybegynder
12. december 2010 - 18:55 #9
"Et det content der skal have en top- og bundmargin på 20px ?"
>> JA
"og dit <img> inden i content der gør content bredere ?"
>> JA

"Horisontal = Vandret ... er det ikke vertical (lodret) du mener der skal være scroll på ? " >> JA, vertical og ikke horisontal - min fejl!
Avatar billede nph12 Nybegynder
12. december 2010 - 20:25 #10
Min CSS-fil:


body {
    background-color: #DCE8FC;
    font-size: 12px;
    font-family: Verdana, Geneva, sans-serif;
}

#container {
    width: 920px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border: solid black 1px;
    background-color: #FFFFFF;

}

Min forside:
<body>
<div id="container">
  <?php include("banner.php");?>
  <?php include("menu.php");?>
  <div id="content">
      <img src="/inc/forside.png" width="918" height="514" />
  </div>
  <?php include("footer.php");?>
</div>
</body>

>> Jeg kunne måske fjerne content div´en her??


"Skabelon" for de andre sider:
<body>
<div id="container">
    <?php include("../banner.php");?>
    <?php include ("../menu.php");?>
    <div id="content">
        <h1>Overskift</h1>
    </div>
    <?php include("../footer.php");?>
</div>
</body>

Håber det giver lidt klarhed over min problemstilling.
Avatar billede Slettet bruger
13. december 2010 - 10:19 #11
Faktisk ikke. Jeg forstår ikke hvorfor dit billede går ud over din div, hvis den har en bredde der er 2px mindre end din div.

Hvis dit billede går ud over din div alligevel er der flere ting du kan gøre:

1:    Du kan udregne hvor meget dit billede går ud over din div, og derefter give dit billede en venstre minus margin på halvdelen af det.
      Hvis vi siger at din divs bredde er X, og dit billedes bredde er Y, så vil du kunne regne det ud sådan her:

      (x - y)/2 = left-margin

2:    Hvis du kun skal have et billede i din div, kan du bare sætte din billede URL ind i din divs 'background-image' og sætte diven til billedets bredde.

      Hvis du først vil have at den laver horisontal-scroll når dit browser vindue er mindre end 920px i bredden, kan du fjerne din width og istedet sætte en min-width: 920px; og max-width: [dit billedes størrelse];
Avatar billede nph12 Nybegynder
15. december 2010 - 17:21 #12
Det virker stadig mystik, men da det eneste som virker er dette:

html, body {height:100%;}

så kører jeg videre med det.

Mange tak for hjælpen alle sammen. Opret et svar, hvis I vil have point, da det snart er lukketid!
Avatar billede Slettet bruger
15. december 2010 - 22:57 #13
jeg forstår ikke hvad body{ height 100%; } gør godt for ... men hvis det virker, er det vel bedre end ingenting ;)
Avatar billede nph12 Nybegynder
16. december 2010 - 08:14 #14
Jeg forstår heller ikke, hvorfor det driller sådan, men jeg laver videre på min hjemmeside. Jeg håber, at jeg finder ud af på et tidspunkt, hvorfor fejlen opstår og hvordan jeg retter den.

Det skal dog lige sige, at godt nok overskrides bredden på forsiden ikke med html, body{ height 100%; }, men i stedet så laver den ikke 20 px margin i bunden.

Endnu en gang mange tak for hjælpen:-)
Avatar billede nph12 Nybegynder
16. december 2010 - 09:01 #15
Det er øjnene man først bliver blind på! Det er selvfølgelig fordi, at forsiden får en vertical scrollbar, hvilke de andre sider ikke har (endnu).

Hvordan tager man normal højde for dette? Jeg ved ikke endnu, hvor højde de andre sider bilver (afhængig af indhold).
Avatar billede webweaver Praktikant
16. december 2010 - 10:49 #16
Har du virkelig ikke et link til siden, så det kan løses en gang for alle? Der må være mulighed for at du kan skaffe et.

Hvis du har en div og et billede (ikke en baggrund, eftersom du bruger <img> tag) som er lige brede, skal billedet ikke gå 2 px ud over. Så er det fordi at du har sat en margin, padding eller width et sted, som er forkert umiddeltbart. Lad os få det løst ved problemets rod, istedet for en masse workaround løsninger.

Men det er umuligt at arbejde ud fra noget, som man ikke har adgang til.
Avatar billede nph12 Nybegynder
16. december 2010 - 11:35 #17
Jeg har ikke adgang til et webhotel, hvor jeg kan oploade min hjemmeside til, da jeg ikke har købt et endnu.

Det er scollbaren som er årsagen til "fejlen", hvilket er et problem jeg kan se løser sig, når jeg putter indhold i mine andre sider. Når der er indhold på alle mine sider, så er det ikke noget som forrykker sig på forsiden - problem løst!

Endnu en gang mange tak for hjælpen:-)
Avatar billede 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.

Loading billede Opret Preview
Kategori
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
27/1222:02 Låse brugt iPad op Af drstein i iOS, iPhone & iPad
27/1219:21 Hvor finder jeg en oversigt over mine spørgsmål Af KurtG i Hjælp og fejl
27/1211:31 TP-Link Wifi extender opsat som accesspoint giver 50% up- og download, Af Uvanga i Wifi
26/1213:05 Hvorfor bliver tiff-filer større ved konvertering til samme format Af KurtG i Billedbehandling
23/1221:36 Gøre Ikonerne lidt større i proceslinjen (Windows 10) Af Ikke-ekspert i Windows
White papers
Flere white papers »