Door de <div>'s het bos niet meer zien. - Softwareontwikkeling

woensdag 9 augustus 2006 15:18

Acties:

Topicstarter

Ik wil graag dit bereiken
Afbeeldingslocatie: http://www.blaap.nl/martijn/indeling-divs.JPG

Ik heb al aardig wat topics rondgebladert hier op GOT, maar kan eigenlijk geen vinden waarmee ik mijn vraagstuk op kan lossen. Wat doe ik fout?

Ik heb deze HTML code:

HTML:

<body>
<div class="leeglinks"></div>
<div class="middle">
    <div class="header"> <h1>SHOP</h1></DIV>
    <div class="menu"><br>
        <!-- Menucode -->
        </div>
    <DIV class="body"> <P> BODY </P>
        <h1>Hier komt de body </h1>
    </DIV>
    </DIV>
<div class="leegrechts"></div>
</body>

En deze CSS code:

Cascading Stylesheet:

 
div.leeglinks   {
    width       : 10%;
    float       : left;
    }
    
div.middle      {
    width       : 80%
    float       : center;
    }   
    
div.leegrechts  {
    width       : 10%;
    float       : right;
    }

div.header      {
    background  : #ffffff;          
    color       : #000000;  
    border      : double;       
    }

                
div.menu        {
    background  : #c4cdaa;      
    color       : #ffc;         
    float       : left;
    width       : 19%;
    border      : double;
    }

                
div.body        {
    background  : #ffffff;              
    color       : #000000;
    float       : right;
    width       : 80%;
    }

woensdag 9 augustus 2006 15:24

Acties:

faabman

Volgens mij kun je leeglinks en leegrechts vervangen door een #wrapper om de rest heen te zetten met een

Cascading Stylesheet:

#wrapper{
  display:block;
  width:xx;
  margin:0 10%;
}

float:center; bestaat niet (lees anders even wat over de flow in je document en wat float voor effecten heeft op een element)

Volgens mij ben ik er dan al zo'n beetje

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

woensdag 9 augustus 2006 15:33

Acties:

Savantas

Tja, simpel vertalen van tabel naar div gaat je niet lukken.
Zet eens bij div.middle achter width: 80% een ; dat helpt al een boel... Verder wat hierboven al gezegd word, neem gewoon een wrapper.
Overigens hoef je niet overal die div voor te zetten, hoor. En als je het goed doet horen al die unieke classes id's te zijn (maakt voor je output in eerste instantie niet uit, maar is simpelweg correcter!).
Dan krijg je dus #menu. Verder probeer dubbele namen te vermijden. Een class body noemen terwijl je al een element body hebt is nog niet heel verwarrend, maar als je veel meer elementen met classes en id's hebt kan dat behoorlijk verwarrend gaan werken...
daarnaast zou ik bv het menu een vaste in plaats van percentuele breedte geven. Als je eenmaal weet wat voor menuopties hier komen, weet je meestal ook hoe breed hij ongeveer word. En wil je het lettertype schaalbaar houden (de site ook voor mensen die wat mindere ogen hebben geschikt houden) geef dan de breedte op in em-eenheden. Dan schaalt de breedte mee met de letters!

In ieder geval een eerste prijs voor de goede topictitel in dit geval!

[ Voor 92% gewijzigd door Savantas op 09-08-2006 15:43 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

woensdag 9 augustus 2006 15:39

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Savantas schreef op woensdag 09 augustus 2006 @ 15:33:
Tja, simpel vertalen van tabel naar div gaat je niet lukken.

klopt, dat is de allergrootste fout in het ontwerp hier ..
het is gewoonweg een tabel, waarin alle vlakken een element toegewezen krijgen ....

Draai nu eens conceptueel om, en kijk niet naar het precieze design wat je aan het eidne wilt bereiken, maar bepaald gewoon wat voor 'elementen' je pagina bevat:
- een gecenteerd vlak van 80% breed, welke bevat:
- - een header over de hele breedte
- - een linkermenu (veelal kan dat ook een UL-lijstje zijn)
- - een content-blok (deze hoeft meestal niet eens een element te zijn, je kunt veelal gewoon de achtergrond van de main-container nemen en evt. margins aan de H* en P-tags geven)

eigenlijk drie blokken in één container ... en die kun je vervolgens een precieze layout met CSS geven ..

als je wilt blijven denken in table-cellen, kun je ook gewoon een table blijven gebruiken

[ Voor 10% gewijzigd door RM-rf op 09-08-2006 15:54 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 9 augustus 2006 15:46

Acties:

XWB

Devver

Cascading Stylesheet:

*
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: #999999;
}

#container
{
    margin: 0 auto;
    width: 80%;
    border: 1px #000000 solid;
    height: 100%;
}

#top
{
    height: 15%;
    background-color: #666666;
    width: 100%;
}

#left
{
    float: left;
    background-color: #00FF00;
    width: 15%;
    height: 85%;
}

#right
{
    height: 85%;
    background-color: #0033FF;
}

HTML:

<div id="container">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

Weet alleen niet wat die witte balk in het midden moet voorstellen.

March of the Eagles

woensdag 9 augustus 2006 15:52

Acties:

Savantas

Wat schoner kan ook:

HTML:

<body>
    <DIV id="wrapper">
        <DIV id="header">
            <h1>Autowebshop.nl</h1>
        </DIV>
            <!-- Menucode -->
            <ul id="menu">
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
                <li>menu4</li>
                <li>menu5</li>
                <li>menu6</li>
                <li>menu7</li>
                <li>menu8</li>
            </ul>
            <h1>Hier komt de body </h1>
            <P>Body language</P>
            <p>Meer geblaat</p>
    </DIV>
</body>

en CSS

Cascading Stylesheet:

1
2
3

    #wrapper { display: block; margin: 0 10%; background: #F5F5F5 } 
    #header { background : #ffffff; color : #000000; border : double; }
    #menu { background : #c4cdaa; color : #ffc; float : left; width : 10em; border : double; margin: 0; padding: 5px; }

Is al een stuk overzichtelijker. Je ziet wel een veelvoorkomend probleem, namelijk dat de containers menu en wrapper niet even lang zijn. Hoogtes opgeven mbv van divs kan dus alleen voor vaste waarden! Maar daarover is al heel veel geschreven in dit sub-forum (of iig in het oude verzameltopic /13). zoek maar eens op faux-columns

[ Voor 18% gewijzigd door Savantas op 09-08-2006 15:55 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

woensdag 9 augustus 2006 15:53

Acties:

feelthepower

Topicstarter

Hartelijk bedankt allemaal, dit is genoeg voor voor mij om mee aan het puzzelen te gaan. De elementen die ik nog niet kende kan ik zelf wel googlen, dus ik kom er nu wel uit.

klopt, dat is de allergrootste fout in het ontwerp hier ..
het is gewoonweg een tabel, waarin alle vlakken een element toegewezen krijgen ....

Klopt, ik wil omdat ik eigenlijk pas sinds kort CSS gebruik (ik schaam me diep) van mijn vaste tabel manier af. In principe kun je met div's gruwelijk veel, je moet alleen wel weten hoe.

Weet alleen niet wat die witte balk in het midden moet voorstellen.

Die was bedoelt om aan te geven dat de hoogte 85% moest worden.

Nogmaals bedankt allemaal.

woensdag 9 augustus 2006 15:57

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

feelthepower schreef op woensdag 09 augustus 2006 @ 15:53:

Klopt, ik wil omdat ik eigenlijk pas sinds kort CSS gebruik (ik schaam me diep) van mijn vaste tabel manier af. In principe kun je met div's gruwelijk veel, je moet alleen wel weten hoe.

Met DIVs kun je weinig meer en weinig minder dan met andere tags ... behalve dan met de BLINK + MARQUEE, de enige tags waar je werkelijk iets meer mee kunt.

De winst zit hem in het aanwennen van een abstracte denkwijze, waarbij je niet meer visueel over je HTML denkt, maar in de structuur van je informatie... die zo lean-and-mean mogelijk maakt

maar iig ben je op de goede weg

[ Voor 14% gewijzigd door RM-rf op 09-08-2006 15:57 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 9 augustus 2006 16:12

Acties:

Calamor

feelthepower schreef op woensdag 09 augustus 2006 @ 15:53:
Hartelijk bedankt allemaal, dit is genoeg voor voor mij om mee aan het puzzelen te gaan. De elementen die ik nog niet kende kan ik zelf wel googlen, dus ik kom er nu wel uit.

[...]

Klopt, ik wil omdat ik eigenlijk pas sinds kort CSS gebruik (ik schaam me diep) van mijn vaste tabel manier af. In principe kun je met div's gruwelijk veel, je moet alleen wel weten hoe.

Je bent niet de enigste die het heeft.
Ik zelf zit soms ook nog zo te denken. En lees ook vaak deze forums als ze voorbij komen.
En het nadeel is zo dat je veel kan met div ja. Al moet ik zelf nog veel naar zoeken. Maar er komt wel veel langs er over dat ik er van leert.

dinsdag 15 augustus 2006 17:37

Acties:

feelthepower

Topicstarter

Ik krijg het nog niet helemaal opgelost zoals ik wil.

De site ziet er in FF in vergelijking met IE niet uit.
Het probleem is dat de lichtgroene DIV niet lijkt te passen. Heeft een van jullie een relevante link met informatie, of heb ik gewoon een tikfout ergens gemaakt.

http://www.blaap.nl/martijn/test/divtest.html

Congratulations!

Valid CSS! This document validates as CSS!

This Page Is Tentatively Valid HTML 4.01 Strict

Cascading Stylesheet:

h1 { text-align: center;}
body
{
    background-color: #999999;
    
}

#headermenu
{
    border:         0px;    
    width:          100%;
    text-align:     Center;
    

}
#container
{
    margin:             0 auto;
    width:              90%;
    border:             1px #000000 solid;
    height:             100%;
}

#header
{
    height: 15%;
    background-color: #666666;
    width: 100%;
}

#menu
{
    float: left;
    background-color: #00FF00;
    width: 15%;
    height: 85%;
}

#content
{
    height: 85%;
    background-color: #0033FF;
}


        a:link { color: #036; }
        a:visited { color: #066; }
        a:hover, a:active   {
                            color: #fff;
                            background-color: #036;
        }

[ Voor 13% gewijzigd door feelthepower op 15-08-2006 17:40 ]

dinsdag 15 augustus 2006 17:42

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

code:

1	HTML, BODY { width: 100%; height: 100%; }

wil hier mogelijk wel helpen

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 15 augustus 2006 17:46

Acties:

feelthepower

Topicstarter

RM-rf schreef op dinsdag 15 augustus 2006 @ 17:42:
code:
1
HTML, BODY { width: 100%; height: 100%; }
wil hier mogelijk wel helpen

Eigenlijk was dat niet eens het probleem, maar nou zijn mijn div's wel mooi schermvullend. Het probleem is bijvoorbeeld dat de achtergrondkleur van de bovenste div niet de border van die div raakt. en de kleur van de lichtgroene div loopt buiten de border verder

dinsdag 15 augustus 2006 17:52

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

ik denk dat dat een probleem is van het gebruikte boxmodel ....

probeer bv eens de propertie: box-sizing: content-box;
http://www.quirksmode.org/css/box.html

daarmee simuleert firefox dan het proprietaire ms Internet explorer boxmodel.
Aanrader is ook de pagina van quirksmode door te lezen en te begrijpen waardoor het verschil komt

[ Voor 17% gewijzigd door RM-rf op 15-08-2006 17:53 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 15 augustus 2006 18:10

Acties:

Verwijderd

Ondanks dat het niet heel erg belangrijk is zou ik je aanraden om alle tags/elementen in lowercase te schrijven.

[ Voor 4% gewijzigd door Verwijderd op 15-08-2006 18:10 ]

dinsdag 15 augustus 2006 19:05

Acties:

feelthepower

Topicstarter

RM-rf schreef op dinsdag 15 augustus 2006 @ 17:52:
ik denk dat dat een probleem is van het gebruikte boxmodel ....

probeer bv eens de propertie: box-sizing: content-box;
http://www.quirksmode.org/css/box.html

daarmee simuleert firefox dan het proprietaire ms Internet explorer boxmodel.
Aanrader is ook de pagina van quirksmode door te lezen en te begrijpen waardoor het verschil komt

Ik heb daarmee lopen experimenteren, ik heb beide zowel content-box als border-box en hun mozilla equivalenten in mijn CSS gehad, maar het lukt me maar niet. De bovenste header div wordt niet gevuld met de gewenste inhoud, er zit op mijn scherm ongeveer een centimeter tussen de border en de grijze achtergrondkleur

[ Voor 11% gewijzigd door feelthepower op 15-08-2006 19:07 ]

dinsdag 15 augustus 2006 19:24

Acties:

Verwijderd

Dat heeft te maken met de margin en padding van P en H1, probeer dit maar eens:

code:

h1 {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

p {
    margin: 0px;
    padding: 0px;
}

dinsdag 15 augustus 2006 19:33

Acties:

feelthepower

Topicstarter

[quote]Verwijderd schreef op dinsdag 15 augustus 2006 @ 19:24:
Dat heeft te maken met de margin en padding van P en H1, probeer dit maar eens:
$_/-\o_$ $_/-\o_$ $_/-\o_$
That did the trick...

Rest mij alleen nog de vraag, waarom deed hij het in IE dan al wel?
In ieder geval bedankt nogmaals

dinsdag 15 augustus 2006 23:10

Acties:

Verwijderd

Mijn methode bij deze layouts is om absolute positionering te gebruiken, in procenten. Ik heb daar ooit een kort stukje over geschreven. Hier is een voorbeeld van die techniek.