ik ben bezig met een ontwerp voor de site van mijn vereniging.
ik ben bezig met de header. deze wil ik over de hele pagina krijgen. nu heb ik deze code

<img src="<?php header_image(); ?>" width="2000" height="250" alt="" />


deze afbeelding moet in het midden komen. ik ben al meerdere codes tegen gekomen om hem in het midden te plaatsen maar telkens heb ik weer het probleem dat de afbeelding niet verder naar links wil dan de rand van het schrerm aan de linker kant.
weet iemand aan goede code?
Dus je wilt hem in het midden maar dan ook weer links dan linkser van het rand van het scherm met een meerdere code in je header van je vereniging zodat het links van het midden komt?

Ik wil (en kan je waarschijnlijk) je goed helpen, maar snap echt totaal niet wat je bedoelt. Zou je je bericht kunnen verduidelijken? Wellicht wat interpunctie erin?

img
{
margin: 0 auto;
}
Een width meegeven, en de linkse en rechtse margin op auto zetten. Dat centreert een block element horizontaal.
Eddy en Jeroen ik weet niet zeker, maar volgens mij werkt dat niet bij negatieve margins? Althans dat is mij nog nooit gelukt voor zover ik weet.

Denk dat de topic start meer zoekt in de richting van:

img {
	position: absolute;
	left: -50%;
}
Doe dan zoiets:

img
{
position: absolute; 
top: 0;
left: 0;
right: 0;
height: 200px;
}
Eddy volgens mij helpt dat nog niks aangezien hij links op 0 zet... en rechts ook 0. Dan gaat hij volgens mij gewoon links op 0 en recht steekt hij dan uit...
Gewoon dit? (blauwe lijn is het midden) of begrijp ik je vraag verkeerd?
ik bedoel iets als dit:

de header moet over bijde kanten van de pagina heen gaan. en dan in het midden gezet worden. (situatie twee)
nu wil de afbeelding niet verder naar links als de rand aan de linker kant (situatie 1)
de codes van Hertog Jan en Eddy Erkelens maar ik krijg een foutmelding in dreamweaver als ik ze erin zet.
#container {
  width: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -300px; /* de helft van de breedte van de header */
}
Probeer die header eens buiten de div te zetten waar hij overheen moet. En dan z-index gebruiken om hem naar voren te brengen.

Geef de afbeelding een class mee zodat je met marges kan spelen in je css file.

Let wel dat je problemen kunt krijgen met verschillende browsers (de uitlijning ervan zullen verschillen!).

Ik gebruik altijd een wrapper waar de hele site in moet zitten, dan bijvoorbeeld een content div die kleiner is als een wrapper en deze in het midden zetten, vervolgens kun je dan de header div boven de content div zetten, groter maken en met margin of padding omlaag zetten.

Vooral voor headers gebruik ik ook een div met een fixed height en width. Plaats daar je afbeelding in zodat je meer vrijheid hebt. Je kunt dan ook eens kijken wat je met float kunt bereiken.

Conlusie, maak slim gebruik van css :-D
oke het meeste matriaal heb ik opgezocht of aangeleverd gekregen vanuit de vereniging kun je meschien een code voorbeeld geven ik weet hoe ik een afbeelding in een class enzo maar daar bij die wrapper kom ik nog niet helemaal uit
8]

[size=xsmall]Toevoeging op 20/07/2012 11:57:54:[/size]

met de code van Wouter J heb ik het goed gekregen.
dank voor alle reacties

Reageren