divjes even hoog, meergroeien? - Softwareontwikkeling

maandag 8 december 2008 12:35

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Voor een schoolopdracht moet ik een website maken met divjes, ik mag geen tabellen gebruiken. Nu had ik een idee voor een ontwerp maar loop ik tegen een probleem aan.
-----------------
-----------------
|m | |c **** |
-----------------

m en c zijn divjes,

Nu wil ik dat als c groeit door meer content dat m even hoog blijft. Met tabellen geen probleem maar met divjes een ware ramp. Weet iemand een makkelijke oplossing met divjes en css?

Ik heb tot nu toe dit geprutst:

code:

<?php defined( "_JEXEC" ) or die ( "Restricted acces" );?>
<!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" xml:lang="<?php echo $this->language; ?>" >
<head>
<link rel="stylesheet" href="css/template.css" type="text/css" />
<!--NOG WEL FF FIXEN VOOr TEMPLATE -->
</head>
<body>
<div class="container">
  <div class="header"></div>
  <div class="panel"></div>
  <div class="h_spacer"></div>
  <div class="menu"></div>
  <div class="content">Hallo ik ben Sven en dit is een test</div>
  <div class="h_spacer"></div>
</div>
</body>
</html>

met deze css:

code:

@charset "UTF-8";
/* CSS Document */
body {
    margin: 0px;
}
.container {
    width: 1024px;
    margin: 0px auto;
    padding: 0px;
}
.header {
    width: 1024px;
    height: 152px;
    background: url(../images/header.png);
    background-repeat: repeat-x;
}
.panel {
    width: 1024px;
    height: 33px;
    background: url(../images/panel.png);
    background-repeat: repeat-x;
}
.h_spacer {
    width: 1024px;
    height: 10px;
    float: left;
}
.menu {
    width: 180px;
    height: 400px;
    background-color: #fffdfa;
    border-style: solid;
    border-color: #f1f1f1;
    border-width: 1px;
    float: left;
}
.content {
    width: 832px;
    height: 400px;
    background-color: #fffdfa;
    border-style: solid;
    border-color: #f1f1f1;
    border-width: 1px;
    float: right;
}

Ik heb me al helemaal rot gezocht maar ik kan geen oplossing vinden, kan iemand mij helpen?

maandag 8 december 2008 12:38

Acties:

0 Henk 'm!

Cubix

Dat gaat niet zo makkelijk.

Wat je wel kan doen is het middels een achtergrondplaatje de boel visueel wel uittrekken. Als er geen content in die korte div staat is dit een prima oplossing:

http://www.alistapart.com/articles/fauxcolumns/

maandag 8 december 2008 12:38

Acties:

0 Henk 'm!

mithras

Elementen groeien van links naar rechts en van boven naar beneden. Wanneer je content dus groeit, blijft je menu staan. Op geen enkele manier zal je menu groter worden als je content vult. Uiteraard gaat je container meegroeien. Ik zie je probleem niet?

maandag 8 december 2008 12:45

Acties:

0 Henk 'm!

Verwijderd

Ik los dit probleem op door aan de container een background-image te geven die qua kleuren het menu en de content scheid.

Voorbeeld: http://www.kubica.nl/tweakers/

Btw: Leuk dat je Joomla gebruikt

EDIT: Een voorbeeld van mijn oplossing

[ Voor 28% gewijzigd door Verwijderd op 08-12-2008 13:02 ]

maandag 8 december 2008 12:52

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

Niet dat het wat voor de werking uitmaakt, echter wel voor de semantiek:
Gebruik je elementen die je eenmalig (en dus uniek) gebruikt, een id toewijzing.

Daarmee kan je je CSS file veel overzichtelijker maken dan dat het is.

HTML:

<div id="menu">
  <ul>
    <li>Item</li>
  </ul>
</div>

bijvoorbeeld.

In principe hoef je je menu (als je goed kijkt) niet eens in een div te pleuren:

HTML:

1
2
3

<ul id="menu">
    <li>Item</li>
</ul>

Zal immers ook werken...

[ Voor 21% gewijzigd door CH4OS op 08-12-2008 12:53 ]

maandag 8 december 2008 12:59

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

ja is voor een joomla theme maar eerst moet ik de html werkend krijgen

een achtergrond is mischien mogelijk ja maar hoe verdeel ik content dan over verschillende vakken als de content ook mee moet groeien als het menu hoger is?

of als je vier divjes naast elkaar hebt staan die allemaal even hoog moeten zijn, zo hoog als het hoogste divje, dat maakt de situatie weer lastige lijkt me?

maandag 8 december 2008 13:06

Acties:

0 Henk 'm!

Verwijderd

Heb me post aangepast met een voorbeeld oplossing.

donderdag 11 december 2008 15:06

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt allemaal, ik heb het opgelost met faux-collumns al vind ik het een beetje een gare oplossing. Maar goed, het werkt:D

vrijdag 12 december 2008 09:51

Acties:

0 Henk 'm!

Clay

cookie erbij?

Dat je je divjes even hoog wil hebben is de gare oplossing

9 van de 10 vragen hier gaat daarover.

Je zegt het al, "met tabellen geen probleem", maar je bent er natuurlijk niet als je je <td>tjes van naam verandert naar <div>, en er verder nog steeds hetzelfde mee probeert te doen; de hele aanpak is anders in CSS.

Je probleem is dus niet zozeer dat die divjes even hoog moeten, maar dat je denkt dat die divjes even hoog moeten.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin