[CSS] Rechts positioneren van element in breed document. - Softwareontwikkeling

zondag 25 september 2005 13:19

Acties:

Eersteklas beunhaas

Topicstarter

Ik probeer een block-element rechts uit te lijnen in een document. Dit gaat prima zolang het venster breed genoeg is (right: 0px;).

Nu is het echter zo dat het geheel een minimale breedte heeft, beneden waar er een verticale scrollbar verschijnt (min-width: 975px;).

Ik kan het element niet rechts floaten, want dan gaat het naar beneden, omdat het linker element niet gefloat is (en dat kan niet, want die moet meerekken met de pagina). Ik kan dus ook niet absoluut positioneren, want dan blijft het rechts in het venster staan, i.p.v. het document.

Iemand een idee hoe het wel kan?

[ Voor 1% gewijzigd door cyberstalker op 26-09-2005 14:08 . Reden: spelvaut ]

Ik ontken het bestaan van IE.

maandag 26 september 2005 14:07

Acties:

cyberstalker

Eersteklas beunhaas

Topicstarter

*bump*

Ik ontken het bestaan van IE.

maandag 26 september 2005 14:12

Acties:

DJ Buzzz

Je kunt een element wel rechts floaten als het in de html code eerder voorkomt dat het linker element dat niet float, is dat misschien iets om te proberen?

maandag 26 september 2005 14:39

Acties:

cyberstalker

Eersteklas beunhaas

Topicstarter

djbuzzz schreef op maandag 26 september 2005 @ 14:12:
Je kunt een element wel rechts floaten als het in de html code eerder voorkomt dat het linker element dat niet float, is dat misschien iets om te proberen?

Bedankt, dat is de oplossing.

Wat ik wel raar vind is dat mijn gefloatte box vervolgens precies 13 pixels lager uitkomt. Ik kan hier natuurlijk een negatieve margin-top op zetten, maar ik zou wel graag willen weten waarom dit gebeurt. Ik heb in mijn css nergens een margin of padding staan.

Ik ontken het bestaan van IE.

maandag 26 september 2005 15:55

Acties:

Verwijderd

klinkt als witruimte in je source-code... kan je eens wat code en een voorbeeld plaatsen, dat denkt wat makkelijker mee

maandag 26 september 2005 16:28

Acties:

cyberstalker

Eersteklas beunhaas

Topicstarter

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="index.css" />
        <title>Welcome to the online nzbq client</title>
    </head>
    <body>
        <div id="status_container">
            <h2 id="status_header" class="unknown">Unknown status...</h2>
            <div id="status_content"></div>
        </div>
        <div id="addqueue_container">
            <h2 id="addqueue_header">Add download to queue</h2>
            <div id="addqueue_content"></div>
        </div>
    </body>
</html>

Dit is de xhtml code. CSS is als volgt:

Cascading Stylesheet:

body
{
    cursor: default;
    background-color: white;
    min-width: 975px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 15px;
}

a, a:active, a:visited, a:link, .link
{
    cursor: default;
    text-decoration: none;
    color: blue;
}

a:hover, .link:hover
{
    text-decoration: underline;
}

#addqueue_container
{
    margin-right: 380px;
}

#status_container
{
    float: right;
    width: 360px;
    margin-top: -13px;
}

#status_container h2.unknown
{
    color: white;
}

#status_container h2.bad
{
    color: red;
}

#status_container h2.good
{
    color: green;
}

/* box headers */
div > h2
{
    background-color: #c3d9ff;
    font-size: 1.0em;
    color: white;
    text-align: center;
    padding-top: 3px;
    
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
}

De gefloatte div komt sowieso eerder dan de niet gefloatte div, dus is het logischer dat de niet gefloatte div lager zou komen

[ Voor 17% gewijzigd door cyberstalker op 26-09-2005 16:29 ]

Ik ontken het bestaan van IE.