centreren naar links
ik ben bezig met de header. deze wil ik over de hele pagina krijgen. nu heb ik deze code
Code (php)
1
<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?
Gewijzigd op 19/07/2012 22:15:01 door Martin ligtenberg
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?
Code (php)
1
2
3
4
2
3
4
img
{
margin: 0 auto;
}
{
margin: 0 auto;
}
Denk dat de topic start meer zoekt in de richting van:
Code (php)
1
2
3
4
2
3
4
img {
position: absolute;
left: -50%;
}
position: absolute;
left: -50%;
}
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
img
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
}
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
}
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.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#container {
width: 600px;
position: absolute;
top: 0;
left: 50%;
margin-left: -300px; /* de helft van de breedte van de header */
}
width: 600px;
position: absolute;
top: 0;
left: 50%;
margin-left: -300px; /* de helft van de breedte van de header */
}
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
8]
Toevoeging op 20/07/2012 11:57:54:
met de code van Wouter J heb ik het goed gekregen.
dank voor alle reacties