[CSS] Content float niet zoals het hoort - Softwareontwikkeling

zondag 18 april 2010 15:49

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo,

Misschien overbodig, maar als ik goed gezocht heb is er geen algemeen CSS topic?

Ik heb een probleem met met de volgende layout en begrijp simpelweg niet hoe het onderstaande kan:

Afbeeldingslocatie: http://i39.tinypic.com/wb2is2.jpg

Afbeeldingslocatie: http://i39.tinypic.com/wb2is2.jpg

XHTML:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head>
        <title>TITLE HERE</title>
        <meta name="description" content="DESCRIPTION HERE" />
        <meta name="keywords" content="KEYWORDS HERE" />
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
        <link rel="stylesheet" type="text/css" href="main2.css" media="screen" />
    </head>
    <body>
        <div id="wrapper">
            <div id="navigation">
                <ul>
                    <li><a href='#'>Menu 1</li></a>
                    <li><a href='#'>Menu 2</li></a>
                    <li><a href='#'>Menu 3</li></a>
                    <li><a href='#'>Menu 4</li></a>
                    <li><a href='#'>Menu 5</li></a>
                </ul>
            </div>
            <div id="content">
                <h2>
                    Dit is een header
                </h2>
                <p>
                    Content
                </p>
            </div>
        </div>
    </body>
</html>

CSS:

code:

#wrapper {
    width: 1024px;
    height: 621px;
    margin: 0 auto 0 auto;
    background: url(wrapper-bg.jpg);
    background-color: #fff;
    border: 1px solid black;
}
#navigation {
    float: left;
    width: 10em;
    background-color: silver;
}
#content {
    float: left;
    margin-left: 10em;
    background-color: #ff0;
    border: 1px solid #4d4d4d;
}

En dan nu mijn vraag waarom #content zich niet om het menu heen float? Waar doe ik iets verkeerds?

[ Voor 49% gewijzigd door MueR op 18-04-2010 17:22 ]

zondag 18 april 2010 16:03

Acties:

0 Henk 'm!

Raynman

offtopic:
Als je hier dan al code dumpt om het te laten fixen zonder (zichtbare) eigen inzet, haal dan op zijn minst wat overbodige zaken weg (CSS voor tables, forms, enz.).

Je zet nu een margin en een float:left op die content. Haal er eens één weg.

[ Voor 4% gewijzigd door Raynman op 18-04-2010 16:04 ]

zondag 18 april 2010 16:13

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Raynman schreef op zondag 18 april 2010 @ 16:03:

offtopic:
Als je hier dan al code dumpt om het te laten fixen zonder (zichtbare) eigen inzet, haal dan op zijn minst wat overbodige zaken weg (CSS voor tables, forms, enz.).

Je zet nu een margin en een float:left op die content. Haal er eens één weg.

Ik wil mijn code hier niet dumpen om het te laten fixen. Op die manier leer ik er niks van. Maar je hebt gelijk in het feit dat mijn inzet niet zichtbaar is, ik had er bij moeten vermelden wat ik zelf gedaan heb. Dit heb ik zelf gedaan:

- margin-left op #content had ik al eens verwijderd, wat er dan logischerwijs gebeurt is dat de #content zich uitstrekt van links naar rechts, maar hij float er nog niet omheen.
- ik vraag me af of het iets te maken kan hebben met het feit dat de #wrapper fixed height en width heeft?

Edit: float left op #content weg halen en margin-left toevoegen doet de trick. Dan float content zich netjes om het menu heen.

[ Voor 7% gewijzigd door Verwijderd op 18-04-2010 16:15 ]

zondag 18 april 2010 16:15

Acties:

0 Henk 'm!

WeeJeWel

#wrapper {
width: 20em;
}

Homey — Critics are those without skills to create.

zondag 18 april 2010 16:31

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

WeeJeWel schreef op zondag 18 april 2010 @ 16:15:
#wrapper {
width: 20em;
}

Hmm kun je misschien uitleggen wat je bedoeld, ik begrijp je niet

zondag 18 april 2010 17:11

Acties:

0 Henk 'm!

Asator

Die float: left moet weg bij #content omdat hij daardoor 100% breed wordt als je niks anders aangeeft.

Edit: zie net dat je het al had

[ Voor 15% gewijzigd door Asator op 18-04-2010 17:13 ]

zondag 18 april 2010 17:23

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Even wat overbodige CSS weggehaald. Post alleen relevante code, niet je complete stylesheet.

Raynman schreef op zondag 18 april 2010 @ 16:03:

offtopic:
Als je hier dan al code dumpt om het te laten fixen zonder (zichtbare) eigen inzet, haal dan op zijn minst wat overbodige zaken weg (CSS voor tables, forms, enz.).

Als je dan commentaar hebt op het topic, maak een topic report.

Anyone who gets in between me and my morning coffee should be insecure.

zondag 18 april 2010 17:49

Acties:

0 Henk 'm!

macciez

Wat gebeurt er als je content een vaste breedte meegeeft, zodat content en navigation beide makkelijk in de wrapper passen?

offtopic:
Is het gebruikelijk om em en px door elkaar te gebruiken? Ik doe het zelf nooit, maar zag laatst ook bij een ander hetzelfde.

[ Voor 13% gewijzigd door macciez op 18-04-2010 17:49 ]

Do what you love, do it often

zondag 18 april 2010 17:56

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

macciez schreef op zondag 18 april 2010 @ 17:49:
Wat gebeurt er als je content een vaste breedte meegeeft, zodat content en navigation beide makkelijk in de wrapper passen?

offtopic:
Is het gebruikelijk om em en px door elkaar te gebruiken? Ik doe het zelf nooit, maar zag laatst ook bij een ander hetzelfde.

True, dat is een optie, hoewel je #content ook een margin-right van xx kan meegeven. Ik ben alleen aan het spelen met de layout. Ik ga zo alles tekenen, uitrekenen en de maten erbij zetten.

Ik gebruik ook nooit px en em door elkaar, maar omdat dit nog een soort van schets is mag dat. Als alles zometeen is uitgerekend zet ik alles om in em

zondag 18 april 2010 20:13

Acties:

0 Henk 'm!

WeeJeWel

#navigation {
position: absolute;
width: 10em;
background-color: silver;
}
#content {
margin-left: 10em;
background-color: #ff0;
border: 1px solid #4d4d4d;
}

werkt in jouw situatie vast ook wel.

Homey — Critics are those without skills to create.