[XHTML/CSS] dynamische lengte van pagina's

[Verwijderd]

De afgelopen maanden heb ik behoorlijk wat nieuwe dingen geleerd op het gebied van HTML, CSS en graphics. Waar ik jarenlang websites met tabellen en vaak fout gebruik van HTML heb gemaakt, wil ik het vanaf nu netjes gaan doen en me aan standaarden gaan houden.

Vandaar dat ik nu bezig ben een vernieuwde persoonlijke website te bouwen. Ten eerste om te laten zien wat ik kan, en ten tweede als leermiddel. Nu zit ik echter met een probleempje. Bij het gebruik van tabellen voor de lay-out was het simpel om de lengte van de pagina's dynamisch te maken, met andere woorden: als een pagina langer werd, werd de tabel automatisch uitgerekt waardoor het design intact bleef.

Ik heb echter geen idee hoe ik hetzelfde effect met CSS kan krijgen. De bedoeling is namelijk dat de gehele website in de lengte mee 'groeit', inclusief andere div's dan alleen de div's waar de tekst zelf in staat (en zelfs dit gebeurt niet in Firefox).

Als voorbeeld heb ik een testpagina online gezet (waarmee jullie meteen als eersten ter wereld een exclusieve preview van mijn nieuwe website te zien krijgen ):

(verwijderd)

De CSS file is hier te bezichtigen: (verwijderd)

Dan nog even een kleine note: de website is nog 'under construction'. Ik werk dus nog aan de code, die op dit moment nog zaken bevat die niet echt correct zijn. Elke suggestie voor betere code (zowel CSS als HTML) is echter altijd welkom, hoewel het hoofddoel van dit topic voor mij niet is om m'n website door anderen te laten verbeteren.

Overigens ter informatie: vooralsnog is de website compatible met Mozilla 1.0, Mozilla Firefox 0.8, Microsoft Internet Explorer 6, Netscape Navigator 6.2 en Opera 7. Ik werk nog aan verbeterde Lynx en Internet Explorer 5 support. Mocht de website het slecht doen in andere browsers mag dat ook gemeld worden, maar zie wederom de note: dit is niet het hoofddoel voor dit topic (zeker aangezien browser-testing natuurlijk de taak van de webmaster zelf is).

[ Voor 17% gewijzigd door Verwijderd op 14-04-2021 18:29 ]

[curry684]

Uh je div 'tekst' zit in de div 'content', en 'content' is fixed height op 373px: dat gaat niet echt werken. Ik gok dat je 'min-height' zoekt ipv 'height'.

Daarnaast vind ik je CSS erg lelijk: je zet alle ID's global uit (ipv div #tekst) en gebruikt verbazend weinig 'inheritance'.

Voor een leuk voorbeeld van wat je zoekt kun je overigens eens op mijn homepage rondneuzen (XHTML 1.1 met CSS en vergelijkbare layout).

edit:
doetutweer

[ Voor 25% gewijzigd door curry684 op 17-05-2004 17:51 ]

[T-MOB]

Ok om je min-height op te lossen kun je de min-height in safari hack van Anne goed gebruiken. Dat komt neer op het toevoegen van display: table-cell; aan je content-div.

My 2cts over je code:
er zijn meer elementen dan <div>, <p> en <br />. Voor lijsten kun je bijv prima gebruik maken van de list elementen die in HTML aanwezig zijn (ul, ol, dl). Dat maakt je site gelijk toegankelijker in bijv. lynx.
dus ipv:

code:

    <h2>Favoriete bands:</h2>
    <p>The Offspring<br />
       The Ataris<br />
       The Get Up Kids<br />
       The Strokes<br />
      </p>

    <h2>Favoriete albums:</h2>

zoiets:

code:

  <dl>
    <dt>Favoriete bands:</dt>
       <dd>
          <ul>
            <li>The Offspring</li>
            <li>The Ataris</li>
            <li>The Get Up Kids</li>
            <li>The Strokes</li>
           </ul>
         </dd>

     <dt>Favoriete albums:</dt>
         <dd>
           <ul>
             <li>etc...</li>

Daarnaast is <i> deprecated in XHTML en horen images een alt attribuut te hebben. Plaatjes uit je design (zoals je header image) kun over het algemeen trouwens beter in je CSS opnemen als achtergrond van een element. Dan heb je meer scheiding tussen content en lay-out en heb je dus meer voordeel van de flexibiliteit die CSS kan bieden....

[Verwijderd]

Bedankt voor de reacties. Ik merk dat ik toch nog heel wat meer over CSS te leren heb dan ik dacht, maar ik ga er zeker mee aan de slag, en plaats mijn website niet online voordat deze technisch echt goed in elkaar steekt.

Maar om weer even terug te komen op de hoofdvraag: hoe kan ik er nou voor zorgen dat ook dat <divs> onder het menu (met de zwarte balk aan de linkerkant) meegroeien met de tekst?

@T-MOB, ik ben wel bekend met de meeste HTML tags, en ben niet echt blij met de bolletjes (of vierkantjes) die de <ul> tag met zich mee brengt. Ik geloof echter dat ook dit met CSS te wijzigen is, ik zal het eens opzoeken. Het gebruik van de <ol> bij nummering is natuurlijk wel erg handig.

Edit: ik heb inmiddels al een beetje gespeeld met lijsten zonder bolletjes en zonder inspringing (ik wil dit o.a. gebruiken in het menu in plaats van <br /> tags), maar zowel IE als Opera gaan hier niet echt goed mee om.

Overigens is naar mijn weten de <i> tag echt niet deprecated in XHTML 1.0 hoor, hoewel een font-style: italic symantisch beter is.

Ik had vrijwel elk plaatje voorzien van een alt attribuurt overigens, hoewel de omschrijvingen hierbij wel erg nutteloos waren. Beter is dus om alle plaatjes met betrekking tot lay-out (dus lijnen en dergelijke) via CSS als achtergrond te laten weergeven?

Ik heb vandaag vrij van werk, dus ik ga eens aan de slag om de code een flinke upgrade te geven.

Overigens zit ik ook nog een beetje met een grafisch dillemma, maar ik zal dit nu niet hier posten, ik wil voorkomen dat dit topic een slotje krijgt omdat het teveel op een sitecheck gaat lijken.

[ Voor 14% gewijzigd door Verwijderd op 18-05-2004 17:19 ]

[curry684]

Verwijderd schreef op 18 mei 2004 @ 11:40:
Ik had vrijwel elk plaatje voorzien van een alt attribuurt overigens, hoewel de omschrijvingen hierbij wel erg nutteloos waren. Beter is dus om alle plaatjes met betrekking tot lay-out (dus lijnen en dergelijke) via CSS als achtergrond te laten weergeven?

Ja

Voor een goede rule-of-thumb: sloop om de tijd de CSS eens uit je pagina. Als je dan een bruikbare overzichtelijke pagina overhoudt heb je de scheiding informatie/presentatie goed aangebracht

[Verwijderd]

Oke. Ik heb vanmiddag zowel de gehele XHTML als CSS code herschreven (deze staat nu tevens online, zelfde links als in de startpost staan). Vooralsnog is het al een hele verbetering, hoewel nog lang niet perfect. Ik gebruik nu zowel de min-height als height attributen, aangezien IE geen min-height ondersteunt. Anne's Safari hack werkt vooralsnog niet (gooit de lay-out een beetje omver), maar ik blijf eraan werken om ervoor te zorgen dat de site zo compatible en stabiel mogelijk is.

Overigens zie ik niet echt waar ik meer inheritance zou kunnen toepassen op het moment, behalve wellicht bij de inhoud, maar hier werk ik nog aan. Let dus nog even niet op de titel, intro en tekst divjes, deze worden nog veranderd.

De meeste graphics zijn inmiddels van XHTML naar CSS overgeheveld, ik zit alleen nog met de knoppen, maar ik zie geen mogelijkheid om die weg te halen en in de CSS code te zetten.

Ik ga nog een paar dingen proberen om de lengte van de pagina's dynamisch te maken, maar vooralsnog is dit een onopgelost probleem.

[Verwijderd]

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

[Verwijderd]

Ah, thanks! Stom dat ik er zelf niet op gekomen was dat je knoppen als achtergrond bij a tags op kunt geven.. Ik ga ook zeker dat roll-over trucje uitproberen.

[Verwijderd]

Ik heb de afgelopen dagen flink aan m'n website gesleuteld, en ben inmiddels erg tevreden met de code. Alles met betrekking tot lay-out zit nu in CSS, de CSS-code zelf is verbeterd, en de website is zeer compatible met een hoop browsers (hoewel ik helaas niet kan testen onder Mac IE of Safari).

Het lengte probleem heb ik echter nog steeds. Is er echt niemand die me hiermee kan helpen? Ter verduidelijking heb ik de nieuwe code geupload en de divs waar het betrekking op heeft met een gekleurde rand aangegeven (zie ook de tekst die erbij staat). De link is wederom (verwijderd).

[ Voor 5% gewijzigd door Verwijderd op 14-04-2021 18:30 ]

[AkaXakA]

Hoe je dit wil doen is de onderste balk _in_ het einde van je #content div zetten. Dan geef je er een negatieve margin aan mee zodat hij altijd onder de content blijft, en vervolgens een z-index die lager is dan de rest (0 zou moeten werken)

Zo blijft de onderste balk altijd onder je content en als er echt weinig tekst is, schuift hij onder het menu.

[-Mous-]

Het komt doordat je de #content absoluut hebt gepositioneerd. Als je die relatief zet tov. je #main kan de #main meeschalen, anders lukt dat nooit.

@AkaXakA: Dat kan niet, want dan lopen de borders aan de zijkanten niet mee.

[edit]
Wat ik persoonlijk zou doen is alle positions er uit slopen:

code:

body {
        text-align : center; }  /*Dit is nodig voor sommige browsers */

#main {
        margin : 10px auto;
        text-align : left;
        width : 750px; }

#menu en #content dan een float : left; geven. Dan moet je misschien even puzzelen met de breedtes, marges en padding om ze recht te krijgen. Misschien volstaat het om alleen je menu te floaten.

[edit 2]
Heb maar even een voorbeeld gemaakt :

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Voorbeeld</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
    text-align : center; }

#main {
    border : 1px solid red;
    margin : 10px auto;
    text-align : left;
    width : 750px; }

#header {
    background : blue;
    height : 100px; }

#balk {
    background : red;
    padding : 10px; }
#balk ul {
    margin : 0;
    padding : 0; }
#balk li {
    display : inline;
    margin : 0;
    padding : 5px 10px; }

#menu {
    background : yellow;
    float : left;
    padding : 10px;
    width : 200px; }

#content {
    background : green;
    float : left;
    padding : 10px;
    width : 510px; }

.clear {
    clear : both; }

</style>
</head>

<body>

<div id="main">

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

    <div id="balk">
    <ul>
        <li><strong>Menu</strong></li>
        <li><a href="index.html">Pre-index</a></li>
        <li><a href="index_p.html">Personal sectie</a></li>
        <li><a href="index_d.html">Digital sectie</a></li>
        <li><a href="copy.htm">Copyright informatie</a></li>
    </ul>
    </div>

    <div id="menu">
    <ul>
        <li><strong>Submenu personal sectie:</strong></li>
        <li><a href="home.htm">Personal home</a></li>
        <li><a href="info.htm">Persoonlijke informatie</a></li>
        <li><a href="updates.htm">Personal updates</a></li>
        <li><a href="muziek.htm">Muziek</a></li>
        <li><a href="fotos.htm">Foto's</a></li>
        <li><a href="over.htm">Over de website</a></li>
        <li><a href="gboek.htm">Gastenboek</a></li>
        <li><a href="sitemap.htm">Sitemap</a></li>
    </ul>
    </div>

    <div id="content">

        <h1>Titel</h1>
        <h2>Deze tekst geeft een beschrijving van de betreffende rubriek</h2>

        <p>En dan de eigenlijke tekst.</p>

        <p>Het is de bedoeling dat wanneer de content div
           (gemarkeerd met een groene rand) langer
           wordt, de main div (gemarkeerd met een rode rand) ook meegroeit.</p>

        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>

    </div>
    <br class="clear" />
</div>

</body>
</html>

[ Voor 255% gewijzigd door -Mous- op 24-05-2004 13:16 ]

[Verwijderd]

AkaXakA schreef op 23 mei 2004 @ 14:14:
Hoe je dit wil doen is de onderste balk _in_ het einde van je #content div zetten. Dan geef je er een negatieve margin aan mee zodat hij altijd onder de content blijft, en vervolgens een z-index die lager is dan de rest (0 zou moeten werken)

Zo blijft de onderste balk altijd onder je content en als er echt weinig tekst is, schuift hij onder het menu.

Bedankt voor de gouden tip! Ik heb er even mee gespeeld, en heb het uiteindelijk goed werkend gekregen.

De borders aan de zijkant lopen toch mee doordat ik de #content div even lang heb gemaakt als de #main div (met grote linkermarge zodat de tekst toch goed op z'n plek komt, en een kleinere z-index dan het menu zodat deze er niet per ongeluk overheen gaat), met als achtergrond het plaatje met de randen.

-Mous- schreef op 23 mei 2004 @ 23:46:
Het komt doordat je de #content absoluut hebt gepositioneerd. Als je die relatief zet tov. je #main kan de #main meeschalen, anders lukt dat nooit.

Je hebt inderdaad gelijk. Ik ben echter wel voorstander van absoluut positioneren, dan weet ik zeker dat alles hoe dan ook netjes op z'n plek blijft, hoewel dit eigenlijk alleen maar voor m'n gevoel zo is natuurlijk.

Ik heb nu dus eindelijk een werkende template. Ook de (CSS) code heb ik vandaag weer wat verbeterd, en is nu zo goed als af. Iedereen bedankt voor de reacties, het heeft me zeker meer inzicht in CSS gegeven. Ik ben erg blij dat ik na jarenlang met tabellen gewerkt te hebben nu een fatsoenlijke XHTML/CSS website heb gemaakt (hoewel ik kwa inhoud nog heel wat te doen heb), die ook nog valideert (zie validation results @ w3.org).

Eventueel kan dit topic nu nog gebruikt worden om opmerkingen/kritiek/tips te geven over de website (zowel de code als grafisch als compatibiliteit, etc).

[-Mous-]

Verwijderd schreef op 24 mei 2004 @ 00:39:
[...]


Bedankt voor de gouden tip! Ik heb er even mee gespeeld, en heb het uiteindelijk goed werkend gekregen.

De borders aan de zijkant lopen toch mee doordat ik de #content div even lang heb gemaakt als de #main div (met grote linkermarge zodat de tekst toch goed op z'n plek komt, en een kleinere z-index dan het menu zodat deze er niet per ongeluk overheen gaat), met als achtergrond het plaatje met de randen.


[...]


Je hebt inderdaad gelijk. Ik ben echter wel voorstander van absoluut positioneren, dan weet ik zeker dat alles hoe dan ook netjes op z'n plek blijft, hoewel dit eigenlijk alleen maar voor m'n gevoel zo is natuurlijk.

Ik heb nu dus eindelijk een werkende template. Ook de (CSS) code heb ik vandaag weer wat verbeterd, en is nu zo goed als af. Iedereen bedankt voor de reacties, het heeft me zeker meer inzicht in CSS gegeven. Ik ben erg blij dat ik na jarenlang met tabellen gewerkt te hebben nu een fatsoenlijke XHTML/CSS website heb gemaakt (hoewel ik kwa inhoud nog heel wat te doen heb), die ook nog valideert (zie validation results @ w3.org).

Eventueel kan dit topic nu nog gebruikt worden om opmerkingen/kritiek/tips te geven over de website (zowel de code als grafisch als compatibiliteit, etc).

Ah! toen ik net keek was het nog niet goed.
Nouja, het werkt nu tenminste goed.

[Verwijderd]

Wow, ik zie net je tweede edit. Het werkte dus net, maar toch zeker bedankt voor de moeite om zo uitgebreid de code te herschrijven. Ik zal je code bestuderen, en weet zeker dat ik er het een en ander van kan leren (wellicht voor een volgende website), want het ziet er goed (en vooral compacter) uit.

Edit: ik zie dat je <ul> en <li> tags gebruikt voor de menu-items. Dit was oorspronkelijk ook mijn bedoeling (in verband met semantieke correctheid), maar ik kreeg er geen goede resultaten mee. Ik ga er toch nog eens naar kijken.

Edit 2: ik zie nu dat je code niet Firefox compatible is, hoewel dit vast wel vrij simpel te verhelpen is.

Overigens zal ik het nog in dit topic laten weten als mijn website helemaal af is en online gaat, hoewel dit waarschijnlijk nog twee weken zal duren. Ik moet namelijk nog redelijk wat doen aan inhoud, en aangezien ik een full-time baan heb heb ik niet verschrikkelijk veel tijd.

[ Voor 56% gewijzigd door Verwijderd op 24-05-2004 01:01 ]

[-Mous-]

Ik heb die code in een paar minuten geschreven, dus er zijn misschien wat foutjes in geslopen.

De bedoeling was te laten zien dat je met lists als menu's en zonder de positions in je css toch het gewenste resultaat kunt krijgen. Dit is imho dus een wat nettere oplossing. Ik zal kijken of ik 'm in Firefox aan de praat kan krijgen.

[edit]
Werkt nu ook in Vuurvos.

[edit2]
Ik zie dat je in principe zelfs de div's om de lijsten weg zou kunnen halen, dan moet alleen het css wat aangepast, maar dat mag je lekker zelf uitzoeken als je er zin in hebt.

[ Voor 30% gewijzigd door -Mous- op 24-05-2004 13:11 ]