div binnen browserscherm houden - Softwareontwikkeling

donderdag 21 februari 2013 22:38

Acties:

O_o

Topicstarter

Hallo,

Ik heb een container div in de rechteronderhoek geplakt;

Cascading Stylesheet:

.bottommenucontainer {
    position:fixed;
    bottom:50px;
    right:67px;
    width:260px;
    height:20px;
    font-family:Tahoma;
    font-size:12px;
    font-weight: bold;
    color:#000;
    word-spacing:9px;
    text-align:right;
}

Dit werkt allemaal prima, echter als ik het browserscherm in de breedte kleiner maak dan zou ik eigenlijk willen dat als de 'border' (dus width 260) is bereikt dat die dan aan de linker kant blijft plakken en er een horizontale scrollbalk komt.

Beter als ik daar ook nog een margin aan kan hangen want ik heb links dan weer de content staan, en daar valt die div dan overheen en krijg je de tekst over elkaar.

Ik heb gegoogled, maar de content die links staat blijft wel staan en wordt niet uit beeld gedrukt, maar de content die rechts zweeft dus wel.

'Kan niet moeilijk zijn', iemand een tip?

donderdag 21 februari 2013 22:55

Acties:

CH4OS

It's a kind of magic

Je hebt een div-container in de rechter onderhoek, maar je float hem links?

Ik zou daar een float: right; van maken, en werken met margins, niet met een fixed (vaste) positie.

Als je wilt dat het later scrolled als het venster resized wordt, dan gebeurd dat met jQuery gok ik zo.

donderdag 21 februari 2013 23:02

Acties:

BLACKfm

O_o

Topicstarter

CptChaos schreef op donderdag 21 februari 2013 @ 22:55:
Je hebt een div-container in de rechter onderhoek, maar je float hem links? Ik zou daar een float: right; van maken, en werken met margins, niet met een fixed (vaste) positie.

Als je wilt dat het later scrolled als het venster resized wordt, dan gebeurd dat met jQuery gok ik zo.

Ja, wat die float daar deed weet ik ook niet, vast een copy fail, maar had ik 10 minuten geleden al uit de post verwijderd, wellicht was je aan het zoeken naar de jquery.

Ik heb het stukje er even uitgeknipt waar het om gaat, even knippen/plakken @ www.draac.com/htmltester.html en dan de browser resizen. Kijk ik ondertussen even naar die jquery.

code:

<!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>
<style type="text/css">
html, body {
    /* height: 100%; */
    margin:0px;
    padding:0px;
    background-color:#000;
    font-family:Tahoma;
}

.bottommenucontainer {
    position:fixed;
    right:67px;
    bottom:50px;
    width:260px;
    height:20px;
    font-family:Tahoma;
    font-size:12px;
    font-weight: bold;
    color:#000;
    word-spacing:9px;
    text-align:right;

}

a {
    text-decoration:none;
    color:#FFF;
}

a:hover {
    text-decoration: underline;
}

</style>
</head>

<body>

<div class="bottommenucontainer">
    <div style="width:260px; height:20px;">
        <a href="#">Contact</a> <a href="#">Support</a> <a href="#">Facebook</a> <a href="#">Twitter</a>
    </div>
</div>
</body>
</html>

Edit:

Er lijkt in ieder geval geen simpele oplossing te zijn om objecten die rechts aligned zijn binnen de browser te houden.

Alles links alignen en daar maar een margin aan te hangen is geen oplossing, als de browser breder is dan staat het object maar ergens te hangen en heb ik een scrollbalk als het smaller wordt maar je eigenlijk nog ruimte hebt om te krimpen/in te korten.

[ Voor 9% gewijzigd door BLACKfm op 21-02-2013 23:19 ]

maandag 25 februari 2013 18:23

Acties:

F.West98

Alweer 16 jaar hier

De body een min-width van 260px geven?
Je kan ook met @media queries werken:

Cascading Stylesheet:

1	@media screen and (max-width: 260px) { /* Put stuff */ }

Dan past die dat alleen toe met breedtes minder dan 260px...

2x Dell UP2716D | R9 7950X | 128GB RAM | 980 Pro 2TB x2 | RTX2070 Super
.oisyn: Windows is net zo slecht in commandline als Linux in GUI