Site gecentreerd..

**Buddy Bergh** · 25-04-2007, 22:46

Wie weet de oplossing? Werkt nog niet..

**Martijn H** · 26-04-2007, 01:24

no pun intended maar dit is (niet getest) maar logischerwijs een stomme fout:
background: url(images/bg.gif) repeat-x top center;

wat denk jij dat een image doet die zichzelf repeat (oneindig vaak) en centered ?
wat is het midden van ondeindig ? oneindig/2 ?

repeat-x weg.

daarnaast voor het centreren van iets gebruik ik zelf altijd de volgende code (werkt namelijk OVERAL in)
#centre{
position: absolute;
left: 50%;
width: 300px;
margin-left: -150px;
}
margin-left moet -(width/2)px zijn -(300/2)px = -(150)px = -150px

**Michal D** · 26-04-2007, 11:09

nou ik doe het nog makkelijker na en voor de <body> en </body> zet ik even <center> en in de css text-align left, en die werkt ook overal en zonder hoofdpijn. (tot er natuurlijk iets word gevonden dat dat gewoon normaal met css te doen is zonder rijen code)

**Buddy Bergh** · 26-04-2007, 11:12

Ja maar het gaat hier om de achtergrond afbeelding.. Die blijft links aanhouden..

**Martijn H** · 26-04-2007, 11:50

Origineel gepost door Buddy Bergh

Ja maar het gaat hier om de achtergrond afbeelding.. Die blijft links aanhouden..

ik heb even gekeken naar je site, maar je plaatje is 2x zo breed als de de balkjes die je moet gebruiken

dus:

....|.............|...............................
zo ziet je plaatje er ongeveer uit.
wanneer je dit centered dan dat dit het centrum ongeveer zijn (x)
....|.............|.....X.........................

nu heb ik het plaatje aangepast tot ongeveer
....|.............|....

deze code gebruikt (alhoewel je de background eigenschappen van #main weg kunt laten...
html,body {
background-image: url(bg.gif);
background-repeat: repeat-y;
background-position: center top;
margin: 0 0 1em 0;
padding: 0 0 1em 0;
color: #666;
font: 11px Arial, sans-serif;
}

#main {
background-image: url(bg.gif);
background-repeat: repeat-y;
background-position: center top;
margin: 0 auto;
position: relative;
width:1000px;
height:100%;
}
en dit werkt bij mij prima

je had denk ik mijn berichtje niet gelezen want hierin zei ik al dat de repeat-x nooit kon kloppen.

hier een voorbeeld van de 3 verschillen
http://www.backup-factory.com/voorbeeld/

**Cédric Siroux** · 26-04-2007, 21:54

Origineel gepost door Michal D

nou ik doe het nog makkelijker na en voor de <body> en </body> zet ik even <center> en in de css text-align left, en die werkt ook overal en zonder hoofdpijn. (tot er natuurlijk iets word gevonden dat dat gewoon normaal met css te doen is zonder rijen code)

zonder hoofdpijn:
http://w3schools.com/tags/default.asp
kijk bij <center> daar staat bij dat deze afgeschaft is!

**Dirk Bonhomme** · 26-04-2007, 22:56

Een lang topic over iets dat zo simpel is.

Code:

<body>
   <div id="container">
       Lorem ipsum dolor sit
   </div>
</body>

Code:

#container {
   width:800px;
   margin:0 auto;
   border:1px solid red;
}

**Buddy Bergh** · 27-04-2007, 00:27

Tja blijkbaar is het toch voor veel mensen onduidelijk.. Zeker bij mijn website(Zal wel wat fouts gedaan hebben). Ik ga het morgen even proberen.. zou je misschien de juiste codes voor bij mijn website weten..? ipv jou voorbeeld te nemen #container..

**Cédric Siroux** · 27-04-2007, 07:29

html,body {
background: #FFFFFF url(images/bg.gif) top center;
margin: 0 0 1em 0;
padding: 0 0 1em 0;
color: #666;
font: 11px Arial, sans-serif;
}
#main {
margin: 0 auto;
position: relative;
width:1000px;
height:100%;
}

als het zo nog niet lukt pm me dan ff

**Martijn H** · 27-04-2007, 07:50

Origineel gepost door Buddy Bergh

Tja blijkbaar is het toch voor veel mensen onduidelijk.. Zeker bij mijn website(Zal wel wat fouts gedaan hebben). Ik ga het morgen even proberen.. zou je misschien de juiste codes voor bij mijn website weten..? ipv jou voorbeeld te nemen #container..

heb je die code hierboven van mij nou al geprobeerd ? want die werkt.
'lezen: blijkbaar voor veel mensen onduidelijk'

het probleem zit hem in de repeat-x ipv repeat-y en het feit dat je plaatje niet goed gecentreerd is (zoals ook hierboven staat)

**Joeri P** · 09-05-2007, 10:10

Origineel gepost door Dirk Bonhomme

Een lang topic over iets dat zo simpel is.

Code:

<body>
   <div id="container">
       Lorem ipsum dolor sit
   </div>
</body>

Code:

#container {
   width:800px;
   margin:0 auto;
   border:1px solid red;
}

dit werkt niet in IE 6.0 hoor. Hij lijnt die container links uit op deze manier.

**Dirk Bonhomme** · 09-05-2007, 12:58

Doe het constant, werkt altijd.

Misschien hangt het af van de doctype, maar dat bewijfel ik

**Joeri P** · 09-05-2007, 13:34

klopt idd, ligt aan het doctype

nog iets dat ik bijweet dus :)

**maurice den Engelsman** · 15-05-2007, 14:44

Deze als extra even toevoegen aan de elementen in je CSS.

body {
margin:0;
text-align:center;
}
#container {
margin:0 auto;
text-align:left;
}

:)

problem solved ^ ^

Site gecentreerd..

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Site gecentreerd..

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen