Vaste breedte definieren in stylesheet

Status
Niet open voor verdere reacties.
S

Syphera

Gebruiker
Lid geworden
19 jan 2004
Berichten
189
Ik heb een style sheet.
NU heb ik die, op een ding na, kunnen aanpassen naar mijn wensen.

Wat ik nu nog wil is dat mijn website op een vaste breedte gecentreerd wordt.
Bij voorkeur op 1200px

De stylesheet zorgt er nu namelijk voor dat hij over de volle breedte van het beeldscherm getoond wordt en dat wil ik dus niet

Wie kan mij vertellen hoe ik dit moet doen?

Stylesheet heb ik bijgevoegd.
 

Bijlagen

{marge: 0px auto;}

Er is bijna geen mogelijkheid om dit met Google niet te vinden
 
Ik heb veel geprobeert en ook veel opgezocht, maar ik kreeg het niet voor elkaar.

Waar moet ik dit in de stylesheet zetten?
 
Je hebt een container-div nodig die alles omvat;
dat wil zeggen
als eerste element na de <body> een <div> openen
en die pas weer sluiten als laatste voor de </body>
In zo'n div zit dan de hele pagina 'opgesloten'
en door die div auto-margins te geven (in de breedte), wordt die automatisch gecentreerd.
Zo'n div moet je dan wel een 'id' meegeven (bijv. "container" of "pagina")

Ik zie in je stylesheet wel van alles staan
maar niet iets wat op een dergelijke container-div lijkt.
Dus die zul je nog moeten toevoegen.

Als je die div een vaste breedte geeft van x-aantal px
wordt het verschil tussen dit aantal en de breedte van je scherm automatisch verdeeld over de linker en rechter marge.
 
Het is nu gelukt, maar nu kom tik het volgende probleem tegen.
Voor de achtergrond wordt een jpg bestand gebruikt, maar deze wordt nog steeds weergegeven over de volle breedte van het beeld.

Kan dit ook beperkt worden tot de breedte van de webpagina en kan ik dan, doordat ik een afbeelding gebruik ook nog een 2e achtergrondkleur definiëren die de zijkanten dan gaat opvullen?

body {
font: 76.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
color:#aaa;
margin:0 auto;
width: 1000px;
background:url(../images/body_bg.jpg) top repeat-x #333 ;
}
 
Bedankt voor de link.

Ik heb nu verschillende mogelijkheden geprobeerd, maar ik kom niet tot het gewenste resultaat.

Ik wil dus het achtergrondplaatje gecentreerd hebben op de breedte die ik gespecificeerd heb alszijne "1000px"

Als iemand mij kan uitleggen hoe ik dat moet doen, dan zou dat heel fijn zijn.
 
Centreren van de body!

Hoi Syphera,
Het gaat mis als je de kleur links en rechts (en onder) de achtergrond-figuur in de css opgeeft voor de <body>.
Dat zou een logisch denkend mensch niet verwachten! Maar als je de achtergrondkleur voor naast de figuur opgeeft in de html, komt op geheimzinnige manier alles vanzelf in orde:
Code: 
html {
	background: #E3FFFF; /* de kleur buiten de achtergrond-figuur */
	}
body {
	width: 1000px; /* gewenste breedte */
	margin: 0 auto;
	background: url(images/bg-figuur-1000x700.png);
	}
Het kan ook, als je de achtergrond-figuur in de <body> een "no-repeat" (of "repeat-y" voor verticaal herhalen) meegeeft, en tegelijkertijd de achtergrond-figuur zelf centreert met de background-position:
Code: 
body {
	width: 1000px;
	margin: 0 auto;
	background: #E3FFFF url(images/bg-figuur-1000x700.png) repeat-y 50% 0;
	height: 750px; /* tijdelijk */
	}
Maar bij een "repeat-y" komt de herhaalde achtergrond-figuur weer wel over de opgegeven hoogte heen. :rolleyes:
In mijn ogen is het een inconsequentie van w3c om een background-image in de <body> pas automatisch te laten centreren als er een html-kleur of -achtergrondfiguur is toegewezen. De css-specificatie op dit punt vind ik ook niet erg ondubbelzinning.
Maar wie ben ik? Ik ben klein en zij zijn groot. ;)

Met vriendelijke groet,
CSShunter
____________
PS: voorbeelden te bekijken in resolutie van > 1024*768px, dan zijn de verschillen het duidelijkst.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan