Groeiende DIV met min waarde en met een border

donderdag 4 februari 2010 11:28

Acties:

0 Henk 'm!

That is the way I am!

Topicstarter

Nou ik heb me al suf gezocht op internet, maar niks gevonden wat ik wil.

Het gaat om de volgende. Wat ik wil is de volgende code op een nette manier te maken met DIV en CSS.

HTML:

<html>
<body>
<table height="100%" width="100%">
    <tr height="100px">
        <td width="50px">
        </td>

        <td width="*">
        </td>

        <td width="250px">
        </td>
    </tr>
    <tr height="*">
        <td>
        </td>

        <td style="border: solid 1px black; background:yellow;">
        </td>

        <td>
        </td>
    </tr>
    <tr height="50px">
        <td>
        </td>

        <td>
        </td>

        <td>
        </td>
    </tr>
</table>
</body>
</html>

De rode vlak groeit mee als er meer tekst in de vlak komt te staan terwijl de onderste gedeelte door schuift.

Zoals eerder gezegd, heb ik behoorlijk wat op internet zitten zoeken. Waar je snel op uitkomt zijn uitleggen hoe je een footer en een header gebruikt. Zoals de volgende voorbeeld: http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

Je zou dan zeggen, nou dat is dan toch prima? Nou zet maar een border om de content, en je zal zien dat de border alleen om de tekst gaat en niet om de hele vlak. en dat is niet wat ik wil dus, ik wil gebruik maken van de hele vlak.

Mijn vraag is, is dit wel mogelijk met CSS en DIV of wordt je verplicht om TABLE te gebruiken?

donderdag 4 februari 2010 11:43

Acties:

0 Henk 'm!

MBV

In het ergste geval zou je de correcte semantische tags kunnen gebruiken, en die dan met CSS als table-elementen laten werken

Maar is er geen 3-column-layout, bijvoorbeeld faux columns, waarmee je kan doen wat jij wilt?

donderdag 4 februari 2010 11:57

Acties:

0 Henk 'm!

Twan V

...en er stralend uitzien

Ozhan99 schreef op donderdag 04 februari 2010 @ 11:28:

De rode vlak groeit mee...

Ik neem aan dat je het gele vlak bedoelt. Als ik in dreamweaver één regel tekst invul, worden de bovenste en onderste tabelregels ineens helemaal klein. Wil je dat?

Ozhan99 schreef op donderdag 04 februari 2010 @ 11:28:
Je zou dan zeggen, nou dat is dan toch prima? Nou zet maar een border om de content, en je zal zien dat de border alleen om de tekst gaat en niet om de hele vlak. en dat is niet wat ik wil dus, ik wil gebruik maken van de hele vlak.

Google eens naar "Border box model", dat legt je probleem uit.
Als je een div 400px hoog wilt hebben, met rand eromheen en wat ruimte tussen de tekst en de rand, dan stel je de hoogte in op 350px en voeg je boven en onder een padding van 25px toe (350 + 25 + 25 = 400).

Min-height wordt slecht ondersteund bij divs. Wat je wel kunt doen, is een spacer maken (lees: transparante gif) van 1px breed en de minimale hoogte.
Zet die in je div en de hoogte van de div zal nooit kleiner worden dan de hoogte van de spacer.

Toegegeven: dit is wel smerig.

Blaat het niet dan schaadt het niet...
Reflex Discoshow - Het beste wat je bruiloft kan overkomen

donderdag 4 februari 2010 11:59

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

[google="3 column layout fixed header"] leverde bij mij redelijk snel op: http://ago.tanfa.co.uk/cs...s-3-column-layout-v1.html (al zijn de classnames etc een ramp). Ik kan me niet aan de indruk onttrekken dat je niet bijzonder veel gezocht hebt.

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

donderdag 4 februari 2010 14:11

Acties:

0 Henk 'm!

bindsa

Dit is wat je zoekt:

http://www.cssplay.co.uk/layouts/3cols2.html#

Maar dat was ook te vinden met wat speurwerk via:

http://lmgtfy.com/?q=3+column+fixed+header+lay+out

donderdag 4 februari 2010 14:22

Acties:

0 Henk 'm!

mcDavid

Twan V schreef op donderdag 04 februari 2010 @ 11:57:
[...]

Ik neem aan dat je het gele vlak bedoelt. Als ik in dreamweaver één regel tekst invul, worden de bovenste en onderste tabelregels ineens helemaal klein. Wil je dat?

[...]

Min-height wordt slecht ondersteund bij divs.

Que?
IE6 is de enige browser die dit niet ondersteunt. En daar zijn wel makkelijkere hacks voor te vinden (googlen op "IE6 min-height hack" ofzo)

donderdag 4 februari 2010 15:25

Acties:

0 Henk 'm!

MBV

je bedoelt: gewoon een hoogte instellen, werkt precies zoals min-height in een normale browser?

dinsdag 9 februari 2010 15:40

Acties:

0 Henk 'm!

MM99

That is the way I am!

Topicstarter

MueR schreef op donderdag 04 februari 2010 @ 11:59:
[google="3 column layout fixed header"] leverde bij mij redelijk snel op: http://ago.tanfa.co.uk/cs...s-3-column-layout-v1.html (al zijn de classnames etc een ramp). Ik kan me niet aan de indruk onttrekken dat je niet bijzonder veel gezocht hebt.

Naar gekeken, maar dat is niet wat ik wil. Als je goed kijkt zie je dat de header op de middelste rij wordt gedrukt als de ware. Dit geeft als nadeel dat je geen border om de middelste vlak kan zetten. Want je ziet de bovenste border van de middelste vlak niet.

Dit is wat je zoekt:

http://www.cssplay.co.uk/layouts/3cols2.html#

Maar dat was ook te vinden met wat speurwerk via:

http://lmgtfy.com/?q=3+column+fixed+header+lay+out

Kan je mij vertellen welke browser jij gebruikt? want ik heb in IE 6.0 en in Chrome geprobeerd, en bij beide werkte het niet.

Ik heb nu de volgende website gevonden, maar nog niet precies gekeken hoe het werkt: http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

dinsdag 9 februari 2010 15:59

Acties:

0 Henk 'm!

MBV

we doen hier niet aan script-requests. Ik denk dat je op basis van de 3-col-layouts die je hebt gevonden prima kan bereiken wat jij wilt. Je moet uiteraard wat aanpassen om te zorgen dat het aan jouw specifieke eisen voldoet. Als je dat hebt geprobeerd en het werkt niet kunnen we je weer verder helpen.

dinsdag 9 februari 2010 16:04

Acties:

0 Henk 'm!

MM99

That is the way I am!

Topicstarter

Nee heeft ook geen effect, ook met allemaal "vuile" trucjes opgelost dat alleen werkt in specifieke gevallen..

dinsdag 9 februari 2010 17:01

Acties:

0 Henk 'm!

MBV

Die oplossing van Muer doet het prima

Je kan je header toch prima kwijt in het blauwe vak? En anders zal je toch echt een simpel voorbeeldje online moeten gooien die bijna doet wat je wilt, met een duidelijke omschrijving van je probleem

Als je je 'tabel' een kleinere breedte wilt geven dan 100%, hoef je maar 3 dingen te doen:
- fake body-tag (div id=body) maken voor IE, waar alles in staat. Die een vaste breedte en hoogte geven (en iig layout triggeren)
- div id=header niet absoluut positioneren
- slordige typo bij de IE6-quirks-trigger fixen (<!-- ipv <--), of nog beter: <?xml version="1.0" encoding="utf-8"?> zoals microsoft ooit heeft gesuggereerd.

woensdag 10 februari 2010 08:12

Acties:

0 Henk 'm!

MM99

That is the way I am!

Topicstarter

MBV schreef op dinsdag 09 februari 2010 @ 17:01:
Die oplossing van Muer doet het prima Je kan je header toch prima kwijt in het blauwe vak? En anders zal je toch echt een simpel voorbeeldje online moeten gooien die bijna doet wat je wilt, met een duidelijke omschrijving van je probleem

Als je je 'tabel' een kleinere breedte wilt geven dan 100%, hoef je maar 3 dingen te doen:
- fake body-tag (div id=body) maken voor IE, waar alles in staat. Die een vaste breedte en hoogte geven (en iig layout triggeren)
- div id=header niet absoluut positioneren
- slordige typo bij de IE6-quirks-trigger fixen (<!-- ipv <--), of nog beter: <?xml version="1.0" encoding="utf-8"?> zoals microsoft ooit heeft gesuggereerd.

Als je een header wilt, kan je dan indd kwijt in de blauwe vlak. Maar ik wil geen header. Ik wil hetzelfde maken als dat ik in de eerste post heb gepost. Dus een gele vierkant, met een border omheen en om de vierkant moet gewoon niks staan (zodat ik eventueel een background image op de body kan zetten). Een soort van hangende Div die een minimale hoogte heeft en die voor de rest mee groeit als de content er in groter wordt.

En in de voorbeeld van Muer moet je een header gebruiken en moet je een footer gebruiken. Want die twee vlakken zitten op de middelste rij. Hierdoor kan je geen border om een vak in de middelste rij zetten.

woensdag 10 februari 2010 17:32

Acties:

0 Henk 'm!

MBV

sinds wanneer is dat een punt dan? Heb je al gezien wat die code doet: die zorgt met CSS ervoor dat je een tabel krijgt, exact hetzelfde

De buitenste div (thetable) krijgt display:table (net zoals <table> dus). Die daarin (tablerow) krijgt display:tablerow (zie <tr>) en de divs daarin (alledrie tablecell, met 3 andere classes erbij om verschillende kleurtjes te krijgen) krijgen display:tablecell (zie ook: <TD>). Dus met

HTML:

<div class="thetable">
  <div class="tablerow">
    <div class="tablecell">
    blaat
</div></div></div>

krijg je dezelfde layout als:

HTML:

<table>
  <tr>
   <td>
   blaat
</td></tr></table>

Alles wat je op die tabel had willen doen kan je dus net zo goed op de div-structure uit Muer z'n link uithalen. Die blauwe vlakken etc zijn alleen maar blauw omdat het een voorbeeld is.

En dat was dus mijn laatste reactie in dit topic: je bent alleen op zoek geweest naar een kant-en-klare oplossing, en hebt geen enkele moeite gedaan om zelfs maar te lezen wat er in die voorbeelden stond.

woensdag 10 februari 2010 18:17

Acties:

0 Henk 'm!

mcDavid

ligt het nou aan mij, of ben je met één wrapper-div met margin: 100px 250px 50px 50px al klaar?

donderdag 11 februari 2010 09:44

Acties:

0 Henk 'm!

MM99

That is the way I am!

Topicstarter

MBV schreef op woensdag 10 februari 2010 @ 17:32:
sinds wanneer is dat een punt dan? Heb je al gezien wat die code doet: die zorgt met CSS ervoor dat je een tabel krijgt, exact hetzelfde De buitenste div (thetable) krijgt display:table (net zoals <table> dus). Die daarin (tablerow) krijgt display:tablerow (zie <tr>) en de divs daarin (alledrie tablecell, met 3 andere classes erbij om verschillende kleurtjes te krijgen) krijgen display:tablecell (zie ook: <TD>). Dus met
HTML:
1
2
3
4
5
<div class="thetable">
  <div class="tablerow">
    <div class="tablecell">
    blaat
</div></div></div>
krijg je dezelfde layout als:
HTML:
1
2
3
4
5
<table>
  <tr>
   <td>
   blaat
</td></tr></table>
Alles wat je op die tabel had willen doen kan je dus net zo goed op de div-structure uit Muer z'n link uithalen. Die blauwe vlakken etc zijn alleen maar blauw omdat het een voorbeeld is.

En dat was dus mijn laatste reactie in dit topic: je bent alleen op zoek geweest naar een kant-en-klare oplossing, en hebt geen enkele moeite gedaan om zelfs maar te lezen wat er in die voorbeelden stond.

Als eerst bedankt voor je inbreng. Ik zal zo kijken of je drie "rows" aan de "table" kan toevoegen.

verder ben ik niet eens met je conclusie. Naast dat ik hier een bericht op had gepost, ben ik wel zeker op zoek geeft naar de antwoord. Ik heb meerdere websites bekeken en allemaal ook uitgeprobeerd. Als ik niet naar de source code had gekeken, had ik ook niet kunnen weten dat de blauw vlakken boven elkaar zaten...

@mcDavid: Dat wilt dus niet omdat je geen minimale hoogte kan instellen.

Onderwerpen