divs met border verlopen bij verkleinen scherm

Status
Niet open voor verdere reacties.
F

frankie60

Gebruiker
Lid geworden
21 jul 2009
Berichten
7
beste helpmijs,
deze vraag is vast al vaak gesteld. kom hier en daar ook wel een antwoord tegen maar telkens niet het goede.
probleem is: ik gebruik een aantal div's met een border van 1 px. padding, margin, etc, allemaal netjes bij elkaar opgeteld. ziet er in zowel firefox als ie ook gewoon netjes uit.
probleem doet zich voor wanneer ik het scherm verklein met control en de scrollknop. dan ineens passen de divs met borders niet meer en schuiven ze uit beeld, naar onderen meestal.
haal ik de borders weg en maak ik de div's 2 px breder en hoger, probleem opgelost.
nu weet ik niet hoevaak mensen hun scherm verkleinen dan wel vergroten. als ze dat nooit doen, waar doe ik dan moeilijk over.
doen ze dat wel, dan moet ik toch eens een goede oplossing hebben.
wie weet raad?
groet frank
p
 
Kun je het even online zetten? Dan kunnen we er even gericht naar kijken.
 
het is nog sterker: als ik het netjes zo doe als hieronder, loopt de ene kolom in dreamweaver zelfs al uit de pas. niettemin, ziehier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="include/opmaak.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="banner"></div>
<div id="inhoud">
<div id="introdeel">
<div id="introtekst"></div>
<div id="naastintrotekst"></div>
<div id="keurmerkdeel"></div>
</div>
<div id="kolommendeel">
<div id="kolom1"></div>
<div class="kolom2-4"></div>
<div class="kolom2-4"></div>
<div class="kolom2-4"></div>
</div>
<div id="rechterdeel"></div>
</div>
<div id="footer">
<div align="center">poi poi poi poi poi poi poi </div>
</div>
</div>
</body>
</html>

en ziehier css:

@charset "utf-8";
/* CSS Document */

#container{
height: 800px;
width: 955px;
margin-right: auto;
margin-left: auto;
left: 0px;
top: 0px;
margin-top: 10px;
}
#banner{
background-image: url(../images/meedenkpagina.banner.jpg);
height: 103px;
width: 955px;
float: left;
}
#inhoud{
height: 656px;
width: 953px;
border: 1px solid #FF3300;
float: left;
}
#footer{
background-color: #FF3300;
float: left;
height: 39px;
width: 955px;
padding-top: 8px;
}
#introdeel{
float: left;
height: 146px;
width: 953px;
}
#introtekst{
padding: 25px;
height: 96px;
width: 349px;
float: left;
}
#naastintrotekst{
float: left;
height: 146px;
width: 350px;
}
#keurmerkdeel{
float: left;
height: 146px;
width: 204px;
}
#kolommendeel{
height: 510px;
width: 749px;
float: left;
}
#kolom1{
float: left;
height: 483px;
width: 160.5px;
margin-bottom: 25px;
margin-left: 24px;
border: 1px solid #FF3300;
}
.kolom2-4{
height: 483px;
width: 160.5px;
margin-bottom: 25px;
margin-left: 25px;
float: left;
border: 1px solid #FF3300;
}
#rechterdeel{
height: 510px;
width: 204px;
float: left;
}
 
Ik weet niet of die vraag vaak is gesteld, want er zijn (helaas) maar weinig mensen die hun site testen op zoomen.
Als je gaat zoomen, moet de hele indeling opnieuw worden berekend. Dat is 'n ongelooflijk gecompliceerd proces, want vaak zullen dingen dan gewoon niet meer passen. Daarbij kan het niet anders of browsers moeten soms gaan afronden. Dat kan hele kleine verschillen opleveren tussen browsers. (Overigens kan IE 6 helemaal niet zoomen, en IE 7 verruïneert alles dat ingewikkelder is dan 'n puntje boven 'n i).
Om die reden kan 't handig zijn 'n beetje speling te laten bij floaten, 'n paar px. Hoewel uiteindelijk, als je maar genoeg verkleint, dingen toch gewoon op de volgende regel worden gezet: het gefloate element past gewoon niet meer binnen z'n ouder.

In principe passen bij jou die kolommen binnen #kolommendeel. Maar op 'n gegeven moment kiest Firefox ervoor om niet verder te versmallen, maar 't op de volgende regel te zetten. Opera bijvoorbeeld doet dat niet. Dan blijken borders soms ook nog anders te worden gezoomd dan andere dingen, enz. Daarom kan soms wat speling handig zijn.

Wat zou kunnen helpen:
Je gebruikt halve pixels. Dat kan helemaal niet, die bestaan niet. (Althans niet zonder met 'n figuurzaagje je beeldscherm te gaan bewerken, haal wel eerst de stekker eruit.)
Als je 160.5 px verandert in 160 px, geeft dat al zoveel ruimte dat je in Firefox kunt verkleinen tot 80%.
Je zou ook kunnen kiezen voor absoluut positioneren, dan speelt het probleem veel minder, maar dat heeft weer andere nadelen.

'n Betere oplossing is misschien om de kolommen naar rechts te floaten, en #rechterdeel ook. Als je dan bij de eerste kolom de marge links weghaalt, krijg je daar 'n heel grote speling die bij zoomen kan worden gebruikt. Als er niet wordt gezoomd, blijft 't precies hetzelfde als nu. Als je wel verkleint, wordt gewoon de marge helemaal links kleiner.

't Lijkt me trouwens dat je wel heel enthousiast aan 't floaten bent geslagen. Volgens mij hoef je #banner en #inhoud helemaal niet te floaten, en kun je bij #footer beter clear:both; gebruiken in plaats van float.
 
Laatst bewerkt:
dank!

zeer bedankt goeroeboeroe en ook erik!
werkt perfect door rechts te floaten, hebben wij 'op de cursus' niet geleerd. in ie loopt hij er nou pas helemaal aan het eind uit, bij firefox helemaal niet meer.
ben heel blij!
groet frank
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan