[css/html] groeiende divjes

dinsdag 8 juli 2003 13:27

*zucht*

Dit is iets wat dus niet mogelijk is met DIV's. Helaas lopen achtergronden nooit door met uitrekkende DIV's.

Er is NIETS mis met tabellen.

Er is een hoop mis met tabellen

- Ze zijn zijn niet flexibel in opbouw en het is dus lastig aanpassingen maken later
- Ze zijn er niet voor bedoeld om de hele layout op te zetten, wat tot gevolg heeft dat bijvoorbeeld screenreaders moeite hebben ze in een logische volgorde te lezen
- Ze zijn traag in opbouw in vergelijking met losse containers. Grootste fout die je kan maken is je complete site in een grote tabel.

Helaas kan je met de beperkingen van de huidige HTML/CSS standaarden er vaak niet omheen. Maar dat is geen voordeel van tabellen, maar een nadeel van de juiste methode: containers gebruiken waar ze voor bedoeld zijn.

[ Voor 86% gewijzigd door Bosmonster op 08-07-2003 13:26 ]

Acties:

dinsdag 8 juli 2003 13:29

Devver

Pixelated

geen floats gebruiken, maar absoluut gepositioneerde divs in je container, en je container een vaste hoogte geven (geen 'auto' dus).
vb:

HTML:

<html>
<head>
<title>div</title>
<style type="text/css">

* {
  -moz-box-sizing: border-box;
}

#header
{
    height:100px;
    background-color:#ccc;  
}

#footer
{
    height:100px;
    background-color:#ccc;  
}

#container 
{
    width: 100%;
    border: 1px solid #000000;
    height: 200px;
    position: relative;
}

#content1
{
    width: 33%;
    height:100%;
    border: 1px solid #000000;
    position: absolute;
    left: 0%;
    background-color:#0f0;
}

#content2 
{
    width: 34%;
    height:100%;
    border: 1px solid #000000;
    position: absolute;
    left: 33%;
    background-color:#f00;
}

#content3
{
    width: 33%;
    height:100%;
    border: 1px solid #000000;
    position: absolute;
    left: 67%;
    background-color:#00f;
}


</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
    <div id="content1">links</div>
    <div id="content2">
        en nu een textje en nu een textje
        en nu een textje en nu een textje<br />
        en nu een textje<br />
        en nu een textje<br />
        en nu een textje<br />
        en nu een textje<br />
        en nu een textje<br />
    </div>
    <div id="content3">rechts</div>
</div>
<div id="footer">footer</div>
</body>
</html>

Intentionally left blank

Acties:

dinsdag 8 juli 2003 13:29

*zucht*

crisp schreef op 08 July 2003 @ 13:27:

geen floats gebruiken, maar absoluut gepositioneerde divs in je container, en je container een vaste hoogte geven (geen 'auto' dus).

Dat lost zijn probleem niet op... de containers schalen niet (goed) mee.. en dat is wel zo handig in een website

Acties:

dinsdag 8 juli 2003 13:33

Devver

Pixelated

Bosmonster schreef op 08 July 2003 @ 13:29:
[...]

Dat lost zijn probleem niet op... de containers schalen niet (goed) mee.. en dat is wel zo handig in een website

dan zal hij daar een stukje scripting voor moeten gebruiken

Intentionally left blank

Acties:

robjanssen

Software Developer

Zo misschien

HTML:

<html>
<head>
<title>div</title>
<style type="text/css">

* {
  -moz-box-sizing: border-box;
}

#header
{
    height:100px;
    background-color:#ccc;  
}

#footer
{
    height:100px;
    background-color:#ccc;  
}

#container 
{
    width: 100%;
    border: 1px solid #000000;
    padding: 10px;
    height:auto
    position: relative;
}

#content
{
    width: 200px;
    height:100%;
    border: 1px solid #000000;
    float: left;
    background-color:#0f0;
}

#float_left 
{
    width: 200px;
    height:100%;
    border: 1px solid #000000;
    float: left;
    background-color:#f00;
}

#float_right 
{
    width: 200px;
    height:100%;
    border: 1px solid #000000;
    float: left;
    background-color:#00f;
}


#placeholder 
{
  clear: both;
}

</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="100%">
    <div id="float_left">float</div>
    <div id="content">
        en nu een textje en nu een textje en nu een textje en nu een 
        textje en nu een textje en nu een textje en nu een textje en 
        en nu een textje<br />
        en nu een textje<br />
        en nu een textje<br />
        en nu een textje<br />
        en nu een textje<br />
    </div>
    <div id="float_right">float</div>
    <div id="placeholder"><!-- --></div>
        </td>
      </tr>
    </table>
</div>
<div id="footer">footer</div>
</body>
</html>

[ Voor 22% gewijzigd door Bosmonster op 08-07-2003 14:03 ]

dinsdag 8 juli 2003 14:07

Acties:

dinsdag 8 juli 2003 14:52

*zucht*

crisp schreef op 08 July 2003 @ 13:29:
[...]

dan zal hij daar een stukje scripting voor moeten gebruiken

scripting != html

Kan het niet met HTML/CSS dan kan het niet.. Als je werkelijk scripting nodig hebt om zoiets simpels te bereiken dan is er iets goed mis

Maar daar hebben we het in Clay z'n topic al over gehad

Acties:

dinsdag 8 juli 2003 15:09

Topicstarter

Als ik voorbeeld van robjanssen volg dan werkt het netjes zowel in IE en mozilla..
wel weer een tabel ( en ik probeer hier die toch te vermijden.. sorry )...
vervang ik de tabel echter door een span

HTML:

1	<span style="height:100%"> </span>

dan werkt het goed in IE... jammer genoeg niet in mozilla...
ik puzzel weer ff verder

[ Voor 6% gewijzigd door deviltje op 08-07-2003 15:08 ]

Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

Acties:

dinsdag 8 juli 2003 15:13

Devver

Pixelated

Een span is een inline element en kan je als zodanig ook nooit gebruiken om blocklevel elementen te omvatten. Dat IE die height wel pikt is gewoon fout, en trek je source eens door de validator en je zal zien dat het er niet door komt.

In dit geval sluit ik me aan bij Bosmonster; de huidige standaard voorziet er niet in dit soort dingen met divs op te lossen; terugvallen op een table is dan ook geen schande in mijn ogen.

Intentionally left blank

Acties:

dinsdag 8 juli 2003 15:18

Topicstarter

Het is gelukt om het ook in mozilla voor elkaar te krijgen...

HTML:

<div id="header">header</div>
<div id="container">
    <div style="height:100%; display:table">
        <div id="float_left">float</div>
        <div id="content">
            en nu een textje en nu een textje en nu een textje en nu een 
            textje en nu een textje en nu een textje en nu een textje en 
            en nu een textje<br />
            en nu een textje<br />
            en nu een textje<br />
            en nu een textje<br />
            en nu een textje2<br />
        </div>
        <div id="float_right">float</div>
        <div id="placeholder"><!-- --></div>
    </div>
</div>
<div id="footer">footer</div>

ik heb de style even inline laten staan... en de css niet toegevoegd, die is niet veranderd. Er is display:table bijgekomen..
en dit helpt.. zowel in IE als in mozilla werkt het nu.....

bedankt voor de hulp

Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

Acties:

dinsdag 8 juli 2003 15:27

Topicstarter

crisp schreef op 08 July 2003 @ 15:09:
Een span is een inline element en kan je als zodanig ook nooit gebruiken om blocklevel elementen te omvatten. Dat IE die height wel pikt is gewoon fout, en trek je source eens door de validator en je zal zien dat het er niet door komt.

ik heb http://www.risico.demon.nl/exp/test3.html door de validator gehaald.. en het werd als valid gezien...
ik heb echter wel een div ipv een span gebruikt...

Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

Acties:

dinsdag 8 juli 2003 15:33

Devver

Pixelated

leuk gevonden met die display: table

jammer dat je weer een extra container nodig hebt, maar idd het werkt

en inderdaad, div in div mag wel, dus is het gewoon valid.

Intentionally left blank

Acties:

dinsdag 8 juli 2003 15:37

't Is inderdaad wel geldige HTML, maar als ik kijk met Opera, dan staan de DIVs niet naast elkaar, maar onder elkaar. Sites die ik zelf heel graag gebruik voor dit soort issues zijn:

http://www.thenoodleincid...als/box_lesson/boxes.html
http://www.positioniseverything.net/

Succes!

Acties:

dinsdag 8 juli 2003 15:55

Nog als toetje even een direct link naar wat je wil

:

http://www.positioniseverything.net/thr.col.stretch.html

Acties:

dinsdag 8 juli 2003 16:15

Topicstarter

JJvG schreef op 08 July 2003 @ 15:37:
Nog als toetje even een direct link naar wat je wil :

http://www.positioniseverything.net/thr.col.stretch.html

dit is niet wat ik wil eigenlijk... de linker en rechter kolom krijgen hier de background color van de pagina en deze is dus niet apart op te geven...
en dit wilde ik dus juist...

de oplossing die ik hierboven had neergezet is ook nog niet helemaal goed.... ik had voor de validator netjes een doctype toegevoegd... de loose versie.. maar dan heeft IE ( 6 met sp1 ) er geen zin meer in... zonder doc-type wel...

dus toch nog ff verder zoeken

Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

Acties:

dinsdag 8 juli 2003 16:21

De linker-kolom krijgt een plaatje dat herhaalt over de y-as (bruin) en de rechterkolom krijgt inderdaad de gele achtergrond kleur. 't Kan zijn dat IE het plaatje niet toont, omdat het niet gequote wordt in de source, maar daar moet je maar even naar kijken.

Omdat je vraag meer ging over het posititioneren van divjes met verschillende grootte, leek de kleur niet echt belangrijk. Volgens mij kan je dit zelf ook gewoon aanpassen door je css aan te passen naar je wensen.

Op mijn eigen site heb ik hetzelfde ongeveer toegepast; misschien dat je daar nog wat aan hebt. See: www.jochemenjanneke.nl en www.jochemenjanneke.nl/onshuisje/ (Site gaat over mijn bruiloft en de verbouwing die we achter de rug hebben. Content is niet interessant voor jullie, maar de styles misschien wel)

Acties:

dinsdag 8 juli 2003 16:25

*zucht*

Die rechter kolom klopt ook voor geen meter met de content

De marges verschuiven met het scherm... Niet echt netjes.

(In dat voorbeeld dan van positioniseverything, niet jouw site die je er snel ff tussen post

)

[ Voor 30% gewijzigd door Bosmonster op 08-07-2003 16:25 ]

Acties:

dinsdag 8 juli 2003 16:31

Welke site refereer je aan? P.I.E of J&J.nl?

@Bosmonster(na edit): Oke

[ Voor 28% gewijzigd door JJvG op 08-07-2003 16:28 ]

Acties: