website centreren

Status
Niet open voor verdere reacties.
H

henriet

Gebruiker
Lid geworden
15 apr 2010
Berichten
12
Hallo allemaal,

ik ben een site aan het maken(vbk.flashbackwebdesign.nl) en wil hem graag in elke resolutie in het midden hebben staan.

Ik maak hem gied voor 1024x768 en als ik dan een grotere resolutie heb wil ik graag dat de site in het midden komt te staan. Nu gaat hij links bovenin de hoek staan?

Kan iemand mij helpen??
 
ja maar ik wil wel graag met px blijven werken. de site moet blijven zoals hij nu is maar dan voor elke resolutie gecentreerd
 
je kan de gehele body in een div plaatsen dan in de css die div margin-left en margin-right de waarde auto meegeven, samen met de breedte van je site. dus als je wilt dat aan beide kanten een witruimte is van 10%, dan moet je de volgende css toepassen:

HTML: 
<html>
<head>
<style type="text/css">
#blok {
margin-rigth: auto;
margin-left: auto;
width: 80%; // je houdt 20% over die eerlijk wordt verdeeld over beide zijkanten. Je kan deze waarde vervangen door iedere
//procentuele waarde of een waarde in pixels. 
}
</style>
</head>
<body>
<div id="blok">
<!-- hier komt dus de body van je site -->
</div>
</body>
</html>

let er wel op dat alle margins en paddings e.d die je al had opgegeven nu worden opgeteld bij de 10%(uit dit voorbeeld).
 
Laatst bewerkt:
nog wel even een vraagje. ik heb het blok als vaste waarde 100px gegeven, maar dan centreerdhij meer naar rechys ipv in het midden

Hoe kan dat?
 
mooi dat het werkt. dat hij meer naar rechts centreert kan komen doordat er ergens nog een verdwaalde margin staat ofzo, of om een andere reden. Dat is lastig te zeggen zonder de code van je site erbij te houden. Soms kan je layout er ook raar uitzien als de div waar alles in staat, smaller is dan de elementen die het bevat, misschien moet je even controleren of dat niet het geval is.
 
ik heb alle margin er uit gehaald maar hij doet het nog niet. Dit is mijn CSS:(sorry dat ik het zo plaats, ik weet niet hoe ik het in de HTML-code moet zetten)

/* CSS Document */

body {
font-family:Arial, Helvetica, sans-serif;
background-color:#000000;
color:#FFFFFF;

}

div.blok{
background-color:#000000;
margin-rigth: auto;
margin-left: auto;
width: 1000px;
}


div.placeholdertop{
background-color:#000000;
width: 950px;
height: 30px;
position:absolute;
}

div.header{
width: 901px;
height: 78px;
position:absolute;
top: 49px;
background-repeat:no-repeat;


}

div.topmenu{
background-color:#000000;
z-index:2;
position:absolute;
margin-left: 287px;
top:45px;
height:15px;
width: 517px;
color:#FFFFFF;
letter-spacing: 3pt;
font-size:11px;


}

table.toptable {
margin:0;
padding:0;
}

td.topitem {
width: 120px;
height: 15px;




}

td.subitem {
width = 70px;
height: 15px;





}

div.midden{
top:19.9%;
height:57.7%;
float:left;
position:absolute;


}

div.footerplaceholder {
background-color:#000000;
width: 901px;
height: 10px;
top:481px;

position:absolute;


}

div.footer{
background-color:#000000;
width: 950px;
height: 100px;
position:absolute;
top:491px;

}

div.submenu{
background-color:#000000;
width: 700px;
height: 25px;
position:absolute;
letter-spacing: 3pt;
font-size: 11px;


}

div.a{
background-color:#000000;
width:55px;

}



div.c{
background-color:#000000;
width:894px;
height: 345px;
top: 126px;


}

div.contentlinks{
background-color:#000000;
width:348px;
height:235px;
top: 56px;


}

div.contentrechts{
background-color:#000000;
width:348px;
height:125px;
top:115px;

}

div.pijllinks{
background-color:#000000;
width:70px;
top:160px;


}

div.pijlrechts{
background-color:#000000;
width:70px;
top:160px;


}



div.f{
background-color:#000000;
width:55px;;

}





img.pijl {
visibility:hidden;
}

img.fotoshow{
padding-top:0.5%;
padding-bottom:0.5%;
width:100%;
height:97%;
}

img.verborgen {
display:none;
}



.topmenu a:link {
color: #ffffff; /*wit*/
text-decoration: none;

}
.topmenu a:visited {
text-decoration: none;
color:#ffffff;
}
.topmenu a:hover {
text-decoration: none;
color: #FFFF00; /*geel*/
}
.topmenu a:active {
text-decoration: none;
}

.submenu a:link {
color: #ffffff; /*wit*/
text-decoration: none;

}
.submenu a:visited {
text-decoration: none;
color:#ffffff;
}
.submenu a:hover {
text-decoration: none;
color: #FFFF00; /*geel*/
}
.submenu a:active {
text-decoration: none;
}

.contentlinks a:link {
color: #000000;
text-decoration: none;

}
.contentlinks a:visited {
text-decoration: none;
color:#000000;
}
.contentlinks a:hover {
text-decoration: none;
color: #000000; /*geel*/
}
.contentlinks a:active {
text-decoration: none;
}

.pijllinks a:link {
color: #000000;
text-decoration: none;

}
.pijllinks a:visited {
text-decoration: none;
color:#000000;
}
.pijllinks a:hover {
text-decoration: none;
color: #000000; /*geel*/
}
.pijllinks a:active {
text-decoration: none;
}


.pijlrechts a:link {
color: #000000;
text-decoration: none;

}
.pijlrechts a:visited {
text-decoration: none;
color:#000000;
}
.pijlrechts a:hover {
text-decoration: none;
color: #000000; /*geel*/
}
.pijlrechts a:active {
text-decoration: none;
}
 
en weet je misschien ook hoe ik de site verticaal kan centreren?
 
volgens mij hetzelfde verhaal: margin-top: auto; margin-bottom: auto;

maar waarom zou je in hemelsnaam een site verticaal willen centreren?

trouwens, in plaats van

margin-top: auto;
margin-bottom: auto;
margin-left:auto;
margin-right: auto;

kun je beter schrijven:

margin: auto;

dan doet ie ze allemaal in een keer.

en dan moet je weer even een hoogte en breedte opgeven en dan centreert ie denk ik.
 
ok ik ga het proberen. ja ik weet het ook niet. de klant wil graag de site in het midde hebben staan als de resolutie groter wordt.

Maar heb je nog een idee waarom het horizontaal centreren nog niet goed gaat> Iets fout in mijn code?
 
horizontaal is gelukt. moest gewoon precies de totale breedte doen van mijn site. Verticaal pakt hij nog niet
 
In je css lijkt niks vreemds te zitten, maar dat is natuurlijk lastig te zeggen zonder je html erbij te houden. Je zult een beetje moeten experimenteren, nogmaals, met je css en kijken of je het kan oplossen. Vaak hebben dit soort problemen een heel eenvoudige oplossing zoals het vergeten van een puntkomma, of het verkeerd typen van een id of class enz.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan