[CSS] Rechts uitlijnen: geen horizontale scrollbalk? - Softwareontwikkeling

dinsdag 6 maart 2007 17:34

Acties:

Topicstarter

Wanneer iets niet binnen het scherm past krijg je standaard een horizontale scrollbalk. Logisch.
Ik kwam er zojuist achter dat het niet het geval is wanneer iets rechts gepositioneerd is. De logica ontgaat mij even, maar het is zowel in IE7 als FF het geval.

code:

<html>
<head>
<style type="text/css">
#bla
{
    position: absolute;
    background-color: #FF0000;
    top: 0px;
    right: 0px;
    width: 600px;
}
</style>
</head>
<body>

<div id="bla"></div>

</body>
</html>

Wanneer ik in de CSS #bla een left: 0px; ipv right: 0px; meegeef krijg ik wel een horizontale scrollbar. Is hier een (nette) workaround voor? Een zojuist afgestofte originele 1999 transparante .gif van dezelfde breedte erin zetten werkt ook niet.

Het gaat toevallig om een pagina die rechts gepositioneerd is, bij een te lage resolutie is deze pagina dus niet te gebruiken

woensdag 7 maart 2007 00:06

Acties:

HyperioN

Tom schreef op dinsdag 06 maart 2007 @ 17:34:
[...]
Het gaat toevallig om een pagina die rechts gepositioneerd is, bij een te lage resolutie is deze pagina dus niet te gebruiken

Dat is wel een héle lage resolutie dan, als een 600px-brede pagina er niet eens oppast.. Maar dat is geen antwoord op je vraag.

Dit wel:
Volgens mij werkt het niet omdat de div absoluut gepositioneerd is.. Of het een bug in de browser is of omdat het met een reden gebeurt weet ik niet, maar het werkt wel wanneer je de div relatief positioneert:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
    margin: 0;
}

#bla {
    background-color: black;
    color: white;
    height: 100px;
    width: 600px;
    margin: 0px 0px 0px auto;
}
</style>
</head>
<body>
    <div id="bla">testttt</div>
</body>
</html>

Voor de demonstratie heb ik even de div een hoogte en kleur gegeven met wat tekst erin, dan kun je zien wat er gebeurt.

De div is bij deze dus relatief gepositioneerd, dus heb ik de margin van je body op 0 gezet zodat de div helemaal rechtsbovenin komt te staan.
De truc zit 'm in de margin van de div. Deze staat overal op 0 behalve de linkse, die staat op auto. Dat betekent dus dat de rechtse margin 0 is en dat de linkse margin de ruimte opvult in de rest van het scherm, waardoor de div dus tegen de rechterkant van het scherm aangeplakt wordt, oftewel rechts uitgelijnd is.
Belangrijk is dat je een doctype opgeeft anders pakt IE6 'm niet.

woensdag 7 maart 2007 14:15

Acties:

Tom

Topicstarter

HyperioN. schreef op woensdag 07 maart 2007 @ 00:06:
[...]
Dat is wel een héle lage resolutie dan, als een 600px-brede pagina er niet eens oppast.. Maar dat is geen antwoord op je vraag.

Dit was even een snel voorbeeld zonder extra onnodige zaken (en de doctype mistte idd).
De pagina waar het om gaat past prima op 1024x768, alleen kreeg de opdrachtgever wel eens klachten van mensen met links de favorietenbalk opengeklapt (lijkt mij sowieso irritant surfen, maargoed). De linkerkant van het scherm was dan niet toegankelijk omdat er geen scrollbar verschijnt

Volgens mij werkt het niet omdat de div absoluut gepositioneerd is.. Of het een bug in de browser is of omdat het met een reden gebeurt weet ik niet, maar het werkt wel wanneer je de div relatief positioneert:

Thanks, dat was inderdaad de oplossing