[CSS/HTML] Tot het eind van de pagina - Softwareontwikkeling

dinsdag 24 mei 2005 21:18

Acties:

Verwijderd

Topicstarter

Hey,

Ik ben nu mijn site aan het veranderen zodat het met div's werkt in plaats van met tabellen. Het lukt me alleen niet om de laatste div tot het eind van de pagina te laten doorlopen. Voorbeeldje:

code:

    <body>
        <div class="all" align="center">
            <div class="headerimg">
                
            </div>
            <div class="headermenu">
                <table width="100%" height="27%" border="0">
                    <td valign="middle">
                    
                    </td>
                </table>
            </div>
        <div class="content">
        
        </div>
        </div>
    </body>

De div 'content' (waar dus de pagina in moet komen) moet tot het eind van de pagina doorlopen, ongeacht de lengte van de tekst of de resolutie van het scherm. In de CSS aanpassen dan .content 100% hoog is maakt de tabel veel te lang..

Hoe moet ik dat dan doen?

Groet,

Gijs

p.s. De tabel is omdat ik knoppen in die balk met CSS niet vertikaal in de div uitgelijnd krijg..

dinsdag 24 mei 2005 21:27

Acties:

faabman

je moet je site niet herbouwen met DIVs, maar met semantisch correcte html. Mophor heeft hier een leuk stukje over geschreven http://www.rikkertkoppes.com/thoughts/smurf-language
zoek eens op faux columns, dan vind je de oplossing voor jou visuele probleem...
navigatie menu's kun je beter in lijsten (ul / ol) weergeven en niet in divs...

Overigens kun je met de GoT search en Google al deze oplossingen vrij snel vinden...

[ Voor 12% gewijzigd door faabman op 24-05-2005 21:28 ]

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

dinsdag 24 mei 2005 21:42

Acties:

Verwijderd

Topicstarter

Zucht.. De een zegt divs, de ander tables, ik weet ondertussen niet meer goed wat ik nou moet geloven. Semantisch snap ik dat ik op moet letten, maar div's en classes lijken me nu ik het wat beter bekeken heb eigenlijk veel handiger?

Maargoed.. Je verwijst me naar die site, maar onder welke term moet ik zoeken?

En hoe bedoel je ol/ul's? Die zijn toch voor lijsten?

[ Voor 10% gewijzigd door Verwijderd op 24-05-2005 21:43 ]

dinsdag 24 mei 2005 21:49

Acties:

Tonio

terrible gibberish

probeer 'semantische html', 'what is semantic html' en 'waarom semantisch?' eens.. zo moeilijk zijn zoekwoorden toch niet te bedenken?
nog wat andere linkjes hierover:
• http://home.parse.nl/~michiel/semantiek.html
• http://www.rikkertkoppes.com/thoughts/about-div
• http://brainstormsandraves.com/articles/semantics/structure/

en zo is er nog heel veel meer over te vinden

En wat betreft de menu's als lijsten, kijk eens naar een menu, dat is toch gewoon een lijst van een aantal links onder/naast elkaar? misschien interessant voor je om te lezen:
• http://www.alistapart.com/articles/taminglists/
• http://css.maxdesign.com.au/index.htm

[ Voor 34% gewijzigd door Tonio op 24-05-2005 21:51 ]

D200|F90x|Leica M6|Yashica T3|Hasselblad 503cx
Nikon: 12-24/4|17-35/2.8|10,5mm/2.8|30mm/1.4|50mm/1.4|85mm/1.8|SB-800|SB-24|SB-26|MC-36
Zeiss: 80mm/2.8 50mm/4 ZM: 35mm/2
When the going gets weird... the weird turn pro

dinsdag 24 mei 2005 21:50

Acties:

Verwijderd

Topicstarter

Ik bedoel met welke term ik vind hoe ik die div tot onderaan kan laten doorlopen..

dinsdag 24 mei 2005 21:52

Acties:

Tonio

terrible gibberish

Zoek eens op Faux columns

D200|F90x|Leica M6|Yashica T3|Hasselblad 503cx
Nikon: 12-24/4|17-35/2.8|10,5mm/2.8|30mm/1.4|50mm/1.4|85mm/1.8|SB-800|SB-24|SB-26|MC-36
Zeiss: 80mm/2.8 50mm/4 ZM: 35mm/2
When the going gets weird... the weird turn pro

dinsdag 24 mei 2005 21:52

Acties:

faabman

Verwijderd schreef op dinsdag 24 mei 2005 @ 21:42:
Zucht.. De een zegt divs, de ander tables, ik weet ondertussen niet meer goed wat ik nou moet geloven. Semantisch snap ik dat ik op moet letten, maar div's en classes lijken me nu ik het wat beter bekeken heb eigenlijk veel handiger?

Wat is eigenlijk "handiger"

Een hele lijst met divs en aparte classes maken of ook gebruik kunnen maken van CSS selectors van je specifieke html elementen??

Maargoed.. Je verwijst me naar die site, maar onder welke term moet ik zoeken?

[google=faux colums]

En hoe bedoel je ol/ul's? Die zijn toch voor lijsten?

ol / ul is een manier om structuur aan te brengen in je links (de content van je site)... Hou er rekening mee dat je site ook nog te navigeren moet zijn in een text-only browser... En dan is het hebben van structuur altijd handig

[ Voor 12% gewijzigd door faabman op 24-05-2005 21:57 ]

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

dinsdag 24 mei 2005 21:58

Acties:

Verwijderd

Topicstarter

Dat hele semantiek heeft toch niet met DIV te maken? Dat is in ieder geval wat ik me in een ander topic heb laten vertellen...

En ik snap ook wel hoe ik op Faux Columns kom..
En daar maak ik niet veel uit op.. Is er hier gewoon niemand die het concrete antwoord weet?

(Sorry voor het gezeur, maar ik kom er gewoon ff niet uit..

)

[ Voor 50% gewijzigd door Verwijderd op 24-05-2005 22:04 ]

dinsdag 24 mei 2005 22:02

Acties:

Tonio

terrible gibberish

Tuurlijk wel? een div is een html element, en als je een html element niet gebruikt waar het voor bedoeld is, ben je semantisch gezien fout bezig.

En als je weet dat je faux columns moet hebben, wat is dan het probleem? ik volg je niet helemaal...

D200|F90x|Leica M6|Yashica T3|Hasselblad 503cx
Nikon: 12-24/4|17-35/2.8|10,5mm/2.8|30mm/1.4|50mm/1.4|85mm/1.8|SB-800|SB-24|SB-26|MC-36
Zeiss: 80mm/2.8 50mm/4 ZM: 35mm/2
When the going gets weird... the weird turn pro

dinsdag 24 mei 2005 22:05

Acties:

Verwijderd

Topicstarter

Zie edit..

dinsdag 24 mei 2005 22:07

Acties:

Rowanov

Kop eens wat anders...

Verwijderd schreef op dinsdag 24 mei 2005 @ 21:58:
Dat hele semantiek heeft toch niet met DIV te maken? Dat is in ieder geval wat ik me in een ander topic heb laten vertellen...

Div stelt semantisch niets voor, maar dat betekent niet dat je het moet gebruiken om alle tables, td's en tr's te vervangen. Ik geloof dat je div het beste voor kan stellen als een soort container waar je de content van je site mee scheidt. Semantiek is puur het juiste element (tag) gebruiken voor het juiste doel zonder opmaak tussen de body tags te zetten om het even plat te zeggen. Dus als je een kopje wilt, dan blijf je van de font tag af en gebruik je gewoon h1 etc. Je opmaak gaat tussen de style tags in de header of via een extern css bestand wat je ook met een style tag in de header zet.
Voorbeeld:

code:

<html>
    <head>
        <title>voorbeeld</title>

        <style type="text/css">
        /* hier al je opmaak */
        </style>
    </head>
    <body>

        <div id="header">
            <h1>bladiebla</h1>
        </div>

        <ul id="menu">
            <li><a href="#">link 1</a></li>
        </ul>

        <div id="content">
            <h2> etc.</h2>
            <p>bladiebla</p>
        </div>

    </body>
</html>

Ik hoop dat de uitleg duidelijk (en juist) is en dat je er wat aan hebt

edit:
Foutloos typen is ook een kunst

[ Voor 55% gewijzigd door Rowanov op 24-05-2005 22:11 ]

dinsdag 24 mei 2005 22:13

Acties:

Verwijderd

Topicstarter

Bedankt voor de uitleg.. Maar zou je me dan aanraden mijn ontwerp (hier bijvoorbeeld), naast het scheiden van delen met div's, voor de rest ook in div's te doen of (zoals in dit voorbeeld) in tabellen? (Om maar even off-topic te blijven..)

dinsdag 24 mei 2005 22:23

Acties:

Rowanov

Kop eens wat anders...

Verwijderd schreef op dinsdag 24 mei 2005 @ 22:13:
Bedankt voor de uitleg.. Maar zou je me dan aanraden mijn ontwerp (hier bijvoorbeeld), naast het scheiden van delen met div's, voor de rest ook in div's te doen of (zoals in dit voorbeeld) in tabellen? (Om maar even off-topic te blijven..)

Vooral niet in tabellen! Een tabel staat voor... ...juist, geen opmaakt maar tabullaire data. Tabellen kan je dus goed gebruiken voor prijslijsten en zulk soort dingen. Zo'n ontwerp is met een beetje oefening goed met css te maken, voor een beetje droge introductie in de css is de reference toch wel goed om te beginnen. Gewoon eens op wat sites rondkijken en vooral veel proberen en uiteindelijk zal het met css nog sneller gaan omdat tabellen gewoon meer typwerk zijn

dinsdag 24 mei 2005 22:39

Acties:

Borizz

Ik denk dat hij meer hebt aan deze links ipv de hele specificatie

.

http://www.w3schools.com/css
http://www.w3schools.com/html

If I can't fix it, it ain't broken.

dinsdag 24 mei 2005 22:40

Acties:

Verwijderd

Topicstarter

Ik ben al op weg met het 'omzetten' (ondanks dat ik net weer tegenstrijdige berichten hoorde van wat 'beter' zou zijn), en dat bevalt eigenlijk best goed.

Behalve.... En dan kom ik weer op de beginvraag..

Bij Faux Columns hebben ze het over het uitrekken en gelijke lengte maken van twee colommen d.m.v. een bg uit te rekken oid, maar als ik dat probeer werkt het niet. Ik durf het bijna niet meer te vragen, maar.. Weet iemand hoe ik dat moet doen? Mijn stukje CSS van de class 'content' is nu alsvolgt:

code:

.content {
    width: 698px;
    background-color: #FFFFFF;
    border: solid #777777;
    border-width: 0px 1px 0px 1px;
}

Maar daar moet dus nog een bepaalde height aan komen (lijkt me)..

Edit: School heb ik ook al bekeken maar wederom op die site vind ik onder 'height' en/of 'full page' geen geschikt resultaat.

[ Voor 11% gewijzigd door Verwijderd op 24-05-2005 22:42 ]

dinsdag 24 mei 2005 22:42

Acties:

Borizz

Verwijderd schreef op dinsdag 24 mei 2005 @ 22:40:
Ik ben al op weg met het 'omzetten' (ondanks dat ik net weer tegenstrijdige berichten hoorde van wat 'beter' zou zijn), en dat bevalt eigenlijk best goed.

Behalve.... En dan kom ik weer op de beginvraag..
Bij Faux Columns hebben ze het over het uitrekken en gelijke lengte maken van twee colommen d.m.v. een bg uit te rekken oid, maar als ik dat probeer werkt het niet. Ik durf het bijna niet meer te vragen, maar.. Weet iemand hoe ik dat moet doen? Mijn stukje CSS van de class 'content' is nu alsvolgt:
code:
1
2
3
4
5
6
.content {
    width: 698px;
    background-color: #FFFFFF;
    border: solid #777777;
    border-width: 0px 1px 0px 1px;
}
Maar daar moet dus nog een bepaalde height aan komen (lijkt me)..

Je mag er zelf ook wel iets voor doen ? 2 seconden zoeken op google leverde me dit op.
Je post zo vlug achter elkaar dat je onmogelijk alle opties geprobeerd kan hebben die in de voorgaande posts uiteengezet worden.

[ Voor 9% gewijzigd door Borizz op 24-05-2005 22:43 ]

If I can't fix it, it ain't broken.

dinsdag 24 mei 2005 22:48

Acties:

Rowanov

Kop eens wat anders...

Je container een background geven die over de y-as (dus in de lengte van de pagina) laten herhalen.
Ik denk dat dat hier heel goed uitgelegd word.

To-do:
Meeneme 1 container met daarin twee divs die de twee kolommen voorstellen.
Ram deze code in je css om al je marges en zo uit te schakelen, puur voor de oefening maakt dit het makkelijker:

Cascading Stylesheet:

1	* { margin: 0; padding: 0; border: 0;}

Zorg dat de je een breedte opgeeft bij je twee divs die in totaal gelijk is aan de breedte van de container en geef ze allebei float: left; en een andere achtergrondkleur. Dan zie je dat als je de content van de ene kolom groter maakt dat de lengte van de andere niet mee gaat, dat kan je dus neppen door een achtergrond aan je container te geven.

Note: je geeft je kolommen dus geen height, dat schiet niet op.

[ Voor 4% gewijzigd door Rowanov op 24-05-2005 22:50 ]

dinsdag 24 mei 2005 22:49

Acties:

Verwijderd

Topicstarter

- knipje, nieuwe post lezen -

[ Voor 95% gewijzigd door Verwijderd op 24-05-2005 22:49 ]

woensdag 25 mei 2005 16:42

Acties:

Verwijderd

Topicstarter

Ok, dat heb ik gezien, en dat lukt, maar dat is het probleem niet..

Ik wil dus dat de div, ookal staat er niks in de container/div, doorloopt tot onderaan.. Wacht, ik laat wel ff een voorbeeld zien hoe het nu is..

woensdag 25 mei 2005 16:54

Acties:

Spruit_elf

Intentionally left blank

.content {height: 100%}

of denk ik nu te simpel?

eventueel ff verdiepen in het boxmodel van w3c

geef anders ff een linkje naar een pagina waarin alles al is aangepast want die testcase is een beetje nutteloos

EDIT: wat loopt iedereen nu te miepen over faux columns? dat heb je volgens mij gezien het ontwerp niet eens nodig tis maar 1 kolom....

[ Voor 62% gewijzigd door Spruit_elf op 25-05-2005 17:03 ]

Those who danced were thought to be quite insane by those who could not hear the music.

woensdag 25 mei 2005 17:02

Acties:

Verwijderd

Topicstarter

Mja, die heigth dacht ik dus ook al, maar dat werkt niet..

woensdag 25 mei 2005 17:05

Acties:

Spruit_elf

Intentionally left blank

Verwijderd schreef op woensdag 25 mei 2005 @ 17:02:
Mja, die heigth dacht ik dus ook al, maar dat werkt niet..

ligt denk ik aan het boxmodel en dat height van een object (helemaal als je met procenten gaat spelen) soms door de inhoud bepaald wordt en soms door de container.

Those who danced were thought to be quite insane by those who could not hear the music.

woensdag 25 mei 2005 17:12

Acties:

Verwijderd

Topicstarter

Ah ok. Ik snap denk ik wat er fout gaat. Ik zal proberen het uit te leggen:

Er is eerst een header met een plaatje (voorbeeldje komt er nog aan), daarna nog een balk met menu. Daar onder komt de kolom waar de content in komt, en die moet tot het eind van de pagina komen. Alles bij elkaar moet dus height: 100% krijgen. Als ik die content kolom 100% geef wordt het totaal natuurlijk 100% + de hoogte van de header en menu lang. Ik moet dus voor de hoogte van die betreffende kolom eigenlijk "100% - *het aantal pixels van header en menu*" kunnen instellen.. Maar (hoe) kan dat?

EDIT: Linkje

[ Voor 6% gewijzigd door Verwijderd op 25-05-2005 17:18 ]

woensdag 25 mei 2005 17:22

Acties:

Spruit_elf

Intentionally left blank

Edit: te snel

onderstaande van sappie werkt igg maar ben er van overtuigd dat er ook een andere manier is..

[ Voor 91% gewijzigd door Spruit_elf op 25-05-2005 17:31 ]

Those who danced were thought to be quite insane by those who could not hear the music.

woensdag 25 mei 2005 17:28

Acties:

Sappie

De Parasitaire Capaciteit!

bovenstaande werkt leuk totdat de inhoud groter wordt dan het browservenster...

Als je goed had gekeken naar faux columns had je er zelf ook wel uit moeten komen.....(zucht)

bg.gif in onderstaande voorbeeld is een plaatje van 600x1 met een rode achtergrond kleur

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
    <style type="text/css">
        body, html { margin: 0; height: 100%; background: url("./bg.gif") repeat-y center top; } 
    </style>
</head>
<body>
    <div style="width: 600px; margin: 0 auto; ">
        <p style="margin: 0;">blaat</p> <!-- margin: 0  ivm margin collapsing in FF -->
        <p>blaat</p>
        <p>blaat</p>
        <p>blaat</p>
        <p>blaat</p>
        <p>blaat</p>
        <p>blaat</p>
        <p>blaat</p>
        <p>blaat</p>
        <p>blaat</p>
    </div>
</body>
</html>

Specs | Audioscrobbler

woensdag 25 mei 2005 23:44

Acties:

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op woensdag 25 mei 2005 @ 17:35:
Er is al een andere BG aan in de pagina zoals je ziet. Of kun je ook 2 achtergrondjes bij je html, body plakken..

En daarnaast; zo omslachtig moet het toch niet hoeven?

Omslachtig? Ik geef nu alleen de body een background.. faux columns echt al wel goed bekeken? Je wekt de schijn dat de "container" altijd minstens de hele pagina lang is doormiddel van die background...

Verwijderd schreef op woensdag 25 mei 2005 @ 18:37:
Toch niet..
Die container waar alles nu in zit en die de bg van 700x1 heeft rekt niet mee als de teksten langer dan 1 pagina worden.. Oftewel; het is 100% en rekt ook niet verder uit.. Pff, verder proberen..

Heb je het uberhaupt wel geprobeerd met mijn code (waarbij de body de background heeft en niet de "container") ? (heb je wel een gifje aangemaakt zodat je ziet wat er gebeurt?) Onderstaande code is bij mij (1280*1024) "hoger" dan 1 "pagina" (mocht het bij jou niet het geval zijn dan voeg je nog maar wat paragraafjes toe.. ) en rekt netjes uit: (zie ook nog edit onderaan)

edit:
hier stond niet helemaal de goede html / css.. kijk onderaan voor de oplossing

edit
Ik zie nu pas dat je gebruik maakt van 2 backgrounds ja.. daar had ik nog niet aan gedacht

Ik ga ff kijken of dat ook op te lossen is.. maar dan wordt het iig ff lastiger

edit 2

Na ff gepiel lijkt dit hier goed te werken in zowel IE als FF: bg.gif is hier je "repeatende" achtergrond met die diagonalen erin. en red.gif is de achtergrond van de "container"

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
    <style type="text/css">
        html {margin: 0; height: 100%; background: url("./bg.gif") top left; } 
        body {margin: 0; min-height: 100%; _height: 100%;background: url("./red.gif") repeat-y center top; }
    </style>
</head>
<body>
      <div style="width: 600px; margin: 0 auto; ">
          <p style="margin: 0;">blaat</p> <!-- margin: 0  ivm margin collapsing in FF -->
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p>blaat</p>
          <p style="margin: 0;">blaat</p> <!-- margin: 0  ivm margin collapsing in FF -->
      </div>
</body>
</html>

[ Voor 251% gewijzigd door Sappie op 26-05-2005 00:15 ]

Specs | Audioscrobbler

donderdag 26 mei 2005 18:45

Acties:

Spruit_elf

Intentionally left blank

code:

<style>
*{padding:0;margin:0}
body{padding-top:110px;}
.head{height:80px;position:absolute; top:0}
.menu{height:30px;position:absolute;top:80px}
.content{height:100%;}

/*alleen voor demo, 1px border zorgt voor de scrollbalk, is op te lossen*/
div{width:99%;border: 1px solid black;}
</style>


<body>  
    <div class="head">header</div>
    <div class="menu">menu</div>
    <div class="content">content</div>
</body>

niets faux colums, dat is een workaround, ik wist wel dat het ook gewoon kon...

naja ik geef het op, hangt er een beetje vanaf wat je wil, dit kan een oplossing zijn, maar als je tekst langer als het scherm word moet fauxcolumns gebruiken

[ Voor 47% gewijzigd door Spruit_elf op 26-05-2005 19:26 ]

Those who danced were thought to be quite insane by those who could not hear the music.

donderdag 26 mei 2005 18:46

Acties:

Verwijderd

Euh. Zet er een DOCTYPE geven. Zet in #content meer inhoud en geef het een achtergrondkleur. (En test in Mozilla.) Et cetera.

donderdag 26 mei 2005 19:19

Acties:

Spruit_elf

Intentionally left blank

Verwijderd schreef op donderdag 26 mei 2005 @ 18:46:
Euh. Zet er een DOCTYPE geven. Zet in #content meer inhoud en geef het een achtergrondkleur. (En test in Mozilla.) Et cetera.

code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style>
*{padding:0;margin:0}
html,body{height:100%}
html{margin-bottom:-110px;}
body{padding-top:110px;}
body{_padding-top:0px;}
.head{height:80px;position:absolute; top:0}
.menu{height:30px;position:absolute;top:80px}
.content{height:100%;}

/*alleen voor demo 1px border zorgt voor de scrollbalk, is op te lossen*/
div{width:99%;border: 1px solid black;}
</style>


<body>  
    <div class="head">header</div>
    <div class="menu">menu</div>
    <div class="content">content</div>
</body>

ff aangepast dat er een doctype boven staat en dat ie het in standaard compilance mode ook doet

wel lelijk IE hack maar daar weet ik zo gauw niets op

[ Voor 33% gewijzigd door Spruit_elf op 26-05-2005 19:22 ]

Those who danced were thought to be quite insane by those who could not hear the music.

donderdag 26 mei 2005 19:36

Acties:

Verwijderd

M'n argument voor .content (ik dacht dat het een ID was...) geldt nog steeds. Je wilt 'min-height' of iets dergelijks.