Resizen DIVs - Softwareontwikkeling

zaterdag 24 juni 2006 14:16

Acties:

Topicstarter

Hoi,

ik ben bezig met een website voor een bandje en ik wilde graag DIVs gebruiken.
Nu ben ik tegen de functie float aangelopen en dacht dat ik daar wel mooi mijn layout mee kon maken.

Hier is het probleem. De DIVs moeten mee gaan qua hoogte met de genestelde DIV.

Ik heb die testcase van JHS bekeken, maar ik kan er niet uit komen.

index.php

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" [url]http://www.togooz.nl/moonflower[/url]"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <TITLE>Moonflower</TITLE>
  <LINK rel="stylesheet" href="stylesheet.css">
</HEAD>
<BODY>
  <DIV class="top">top</DIV>
  <DIV class="ctr">
    <DIV class="main">main</DIV>
    <DIV class="rgt">
      <DIV class="rgt_link">goto music [img]"images/arrow.gif"[/img]</DIV>
      <DIV class="rgt_nav">rgt nav</DIV>
    </DIV>
  </DIV>
  <DIV class="btm">Design door David Homan en Jaap Koekkoek</DIV>
</BODY>
</HTML>

stylesheet

code:

/* Stylsheet voor moonflower     */
/* Gemaakt door: Jaap Koekkoek*/
/* Datum: 3 juni 2006                  */
/* Versie: 1.0                                 */

BODY {
    margin:           0px 0px 0px 0px;
    background-color: #372413;
    text-align:       center;
}

DIV.top {
    width:      625px;
    height:     85px;
    margin:     0px auto 0px auto;
    text-align: left;
}

DIV.ctr {
    width:               605px;
    _height:             1%;
    background-color:    #CACBA7;
    background-image:    url("images_bg/ctr.jpg");
    background-repeat:   no-repeat;
    background-position: 90px 80px;
    border:              10px solid #544331;
    margin:              0px auto 0px auto;
    text-align:          left;
    overflow:            hidden;
    clear:               both;
}

DIV.btm {
    width:      625px;
    height:     40px;
    margin:     0px auto 0px auto;
    padding:    30px 0px 0px 0px;
    font-size:  12px;
    text-align: right;
}

/* [CTR] */

DIV.main {
    width:               605px;
    height:              500px;
    background-image:    url("images_bg/ctr.gif");
    background-repeat:   no-repeat;
    background-position: left bottom;
    padding:             0px 0px 0px 0px;
    overflow:            hidden;
    clear:               both;
}

DIV.rgt {
    width:            215px;
    _height:          1%;
    float:            right;
    padding:          10px 10px 10px 0px;
    overflow:         hidden;
    clear:            both;
}

DIV.rgt_link {
    width:       215px;
    color:       #3B1108;
    font-weight: bold;
    font-size:   17px;
    text-align:  right;
}

DIV.rgt_nav {
    width:            215px;
    height:           450px;
    background-color: #32150E;
    margin:           10px 0px 0px 0px;
    filter:           alpha(opacity=95);
    -moz-opacity:     0.95;
}

Kan iemand mij misschien een handje helpen.

Voorbeeld:
http://www.togooz.nl/moonflower

Resultaat:
http://www.togooz.nl/moonflower/files/preview.jpg

[ Voor 19% gewijzigd door k0ewl op 24-06-2006 14:18 ]

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

zaterdag 24 juni 2006 19:01

Acties:

Rowanov

Kop eens wat anders...

Eerlijk gezegd begrijpt ik er vrij weinig van.

Een div zal altijd meegaan in hoogte als de inhoud hoger wordt, dit gebeurt tenzij je een hoogte hebt ingesteld. Als je bedoelt dat de hoogte hetzelfde moet blijven, maar dat bij een langere inhoud er een scollbalk moet komen dan gebruik je overflow: auto;. Als twee kolommen een gelijke lengte moeten hebben, kan dat niet met css worden opgelost, maar wel met faux collumns waarbij je de container van de twee kolommen een achtergrodn geeft waardoor ze even lang lijken.

Dit blijft voor mij, zoals je ziet, maar raden. Verduidelijking van je probleem zou wel helpen.

zaterdag 24 juni 2006 19:54

Acties:

Blaise

Ik zie dat je graag div's wil gebruiken aangezien dat zo ongeveer het enige element is wat je gebruikt, maar er bestaan nog meer elementen die vaak beter op hun plaats zijn.

[ Voor 4% gewijzigd door Blaise op 24-06-2006 19:57 ]