marge links t.o.v. monitor grootte

Status
Niet open voor verdere reacties.

gast0515

Gebruiker
Lid geworden
4 jan 2010
Berichten
134
Mijn website wordt niet gecentreerd maar loopt meer naar links.
Vanaf linke kant is er sprake van 2/3 - 1/3 verhouding.
Dat betekent voor mij in praktijk 250px marge links.
Container (website inhoud) is 850px breed.
Dat is 250px marge + 850px inhoud = 1100px vanaf de linke kant
Prima voor de grote monitoren.
Voor de monitoren 1152px en kleiner moet je plots horizontaal scrollen (naar links/rechst).
Hoe zorg ik in dit geval dat mijn container (website inhoud) mee gaat naar links (dus de marge links minder wordt naar mate de monitor kleiner wordt?)
 
Laatst bewerkt:
@csshunter, ja, zoiets maar dan met 250px marge links en dus niet gecentreerd
De marge links zou voor de grote schermweergave altijd 250px breed (en niet groter) moeten zijn.
Daarbij - hoe kleiner de monitor, hoe kleiner de marge links.

Hoe kan ik dus dat oplossen????
 
Laatst bewerkt:
Ik heb de code toegepast. Werkt prima, in principe.
Enkel... de #container staat veel te veel naar rechts.
Hoe zorg ik dus dat het ook op grote monitoren kleinere marge heeft aan de linke kant?

Ik heb de code iets aangepast maar krijg het toch niet voor elkaar om het geheel minder marge links te geven

html {
min-width: 850px; /* zodat de content er altijd vanaf de linkerkant op past */
padding-bottom: 1px;
background-image: url(../plaatjes/bg.jpg);
}
body {
max-width: 850px; /* om bij brede schermen de content niet helemaal rechts te krijgen */
margin: 0px auto; /* gecentreerd: voor idem */
padding-left: 1%; /* deze fluctueert met de schermbreedte */
position: relative;
}
#container{
position: absolute; /* ten opzichte van de body */
right: 0; /* vanaf rechterzijkant body */
width: 810px; /* = 850px incl. padding L/R */
padding: 0 20px;
}

voorbeeld.jpg
 
Laatst bewerkt:
opgelost

body {
margin-top: 0px;
}
html {
background-image: url(../plaatjes/bg.jpg);
}
#flexwrap{
max-width:1075px;
min-width:850px;
height:100%;
}
#container{
float:right;
width: 810px; /* = 850px incl. padding L/R */
min-height:750px;
padding: 0 20px;
position:relative;
}
 
Mooi zo! :thumb:
(Ik had niet begrepen dat er bij breedbeeldschermen een (hele) grote vrije ruimte rechts mocht zijn.)

Als er verder niet iets speciaals met de body en de #flexwrap moet gebeuren, kan de #flexwrap er zelfs ook nog tussen uit: alle #flexwrap-eigenschappen kunnen dan rechtstreeks in de body.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan