Avatar billede mifomifo Nybegynder
20. maj 2005 - 22:57 Der er 18 kommentarer og
1 løsning

Centreret web

Hvordan centrerer jeg min hjemmeside?
Den er lavet i Frontpage, 755 px bred
Avatar billede apo Praktikant
20. maj 2005 - 23:04 #1
Forkert kategori, men...

<body style="text-align:center;"></body>

Herefter skal du huske at styre dine tables o.lign. ved at bruge style="text-align:left;" eller style="text-align:right;" (Ellers bliver alt indhold centreret!)

Apo
Avatar billede mifomifo Nybegynder
20. maj 2005 - 23:11 #2
Tak for instant svar ;-) Jeg prøver.
Avatar billede foxmulder58 Praktikant
20. maj 2005 - 23:15 #3
Du kan også gøre det ved at lave et <div> tag der omkranser alt indholdet og ade det referere til et css hvor du angiver følgende:

.bodywrap {
    background-color: transparent;
    position: relative;
    width: 750px;
    left: auto;
    top: 25px;
    right: auto;
    bottom: 0px;
    margin: 0px auto;

din div ska så se således ud:

<div class="bodywrap"> alt dit indhold på sitet </div>



mvh
Mads
Avatar billede olebole Juniormester
20. maj 2005 - 23:39 #4
<ole>

Nej, apo ... det virker kun i IE - og det er en bug, at det virker  :)

Du kan gøre som foxmulder58 viser - og det er 'margin:0 auto', der centrerer divet. Det er faktisk - sammen med bredden - det eneste, du behøver

/mvh
</bole>
Avatar billede apo Praktikant
20. maj 2005 - 23:56 #5
Ole > Jep, det har du sq da ret i :-/

Apo
Avatar billede claus_joergensen Nybegynder
21. maj 2005 - 00:11 #6
og hvis du vil centeret den verticalt, så smid indhold ind i en table, uden v-align på <td> elementet, så centeret den indholdet.

Husk dog height 100% på både body og table, for at det er muligt :)
Avatar billede foxmulder58 Praktikant
21. maj 2005 - 01:53 #7
JEPS! olebole -------> det har jeg nemlig lært af dig  ;-)

mvh
Mads
Avatar billede mjl Nybegynder
21. maj 2005 - 10:30 #8
Er denne måde totalt yt?

<html>
<body>
<center>

Sidens indhold her...

</center>
</body>
</html>

Når <center> ikke bruges mere, er der så en forklaring?
Avatar billede apo Praktikant
21. maj 2005 - 12:26 #9
Men hvis man ikke kan centrere <body> med text-align:center;, hvordan kan det så være, at W3C anbefaler følgende?:

"To center the entire document with CSS:

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
  BODY {text-align: center}
</STYLE>
<BODY>
...the body is centered...
</BODY>"

Kilde: http://www.w3.org/TR/REC-html40/present/graphics.html#h-15.1.2

Apo
Avatar billede krokohunter Nybegynder
22. maj 2005 - 21:34 #10
Du skal være forberedt på, at ældre versioner af IE, samt IE 6.0 i quirksmode ikke understøtter margin: auto.

Jeg bruger position: absolute og negative marginer til at centrerer med. Det fungere rigtig god, og understøttes i en lang række browsere (har desværre ikke lige en oversigt over hvilke der ikke understøtter).

Det kan gøres ved at du putter dit indhold der skal centreres i en div, som vi kalder "wrapper",så bruger du følgende CSS.

#wrapper {
  position: absolute;
  left: 50%;
  width: 700px;
  margin-left: -350px;
}

left: 50%; centrerer div boxen, men da den tager udgangspunkt i #wrapper's øverste venstre hjørne, bliver #wrapper rykket for langt mod højre.

Derfor defineres en negativ margin på den halve bredde, og dermed bliver #wrapper centreret.

Det virker også fint i højden, så skal du bare bruge top og margin-top.

Håber du kan bruge det til noget.

/Niels
Avatar billede krokohunter Nybegynder
22. maj 2005 - 21:36 #11
hovsa jeg brugte bare lige 700px som eksempel, men det er s'følig ikke anderledes med en bredde på 755px .... margin-left bliver så bare 377px eller 378px (lidt svært at definere 377,5px) ;-)

/Niels
Avatar billede krokohunter Nybegynder
23. maj 2005 - 21:05 #12
jeg har fundet et problem med den metode jeg har nævnt. Den fungerer rigtig godt, så længe, browservinduet er større end størrelsen på den centrerede div, men bliver browservinduet mindre, begynder den at æde i siderne, så scrollbaren ikke kan vise alt indholdet.

Jeg kan ikke forklare hvorfor dette sker, men jeg skal nok prøve at kigge nærmere på det.

/Niels
Avatar billede mifomifo Nybegynder
23. maj 2005 - 22:36 #13
Jeg takker igen og fortsat ;_) interessante svar, jeg håber jeg kan finde ud af det. Point tildeling venter jeg lidt med... mvh
Avatar billede Kengun Praktikant
24. maj 2005 - 14:37 #14
du kan måske lege lidt med det her:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" height="100%">
      <p align="center">det der skal centreres her</td>
  </tr>
</table>

www.Kengun.com
Avatar billede apo Praktikant
04. juni 2005 - 15:36 #15
Kengun > Du anvender forældede tags...

Se evt. oleboles løsning på et centreret web, i indlægget: 20/05-2005 23:39:16.

Mifomifo > Er det ikke på tide, at lukke og give points for de brugbare løsninger du har modtaget (Ikke min løsning!).

Apo
Avatar billede Kengun Praktikant
10. juni 2005 - 14:58 #16
måske forældet, men det fungerer skam godt i MSIE, Firefox, etc. browsere.
Avatar billede krokohunter Nybegynder
23. juni 2005 - 07:41 #17
I forlængelse af foxmulder58's metode.

Enkelte ældre browsere har lidt problemer med den. Defor kan du kombinere den med text-align. Dog skal man huske at venstre justere selve indholdet igen, ellers vil nyere browsere som Firefox, der forstår og bruger Text-align korrekt, centrere alt indholdet i den wrapper som du vil centrere.

Det kommer til at se ud som følgende:

body {
  text-align: center;
}

#wrapper {
  width: 755px;
  margin: 10px auto;
  text-align: left;
}

håber det kan bruges

/Niels
Avatar billede mifomifo Nybegynder
23. juni 2005 - 10:31 #18
Tak )-
Avatar billede Kengun Praktikant
23. juni 2005 - 11:19 #19
np
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
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

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