Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[css] basis opzet vraagje

Drewster
22 antwoorden
  • Beste forumleden,

    Ik ben bezig met de eerste stappen voor de ontwikkeling van een nieuwe website voor het bedrijf waar ik werk. Uiteindelijk zal deze nieuwe site in een cms gezet worden. (modx)

    –> hxxp://www.planetdust.nl/kpptest/ (vervang hxxp dor http)

    dit is de opzet. Echter Ik wil dat de footerbalk altijd volledig onderaan komt te staan. Sommige pagina's hebben meer content dan de andere. Ik wil daarom dat de footer onder de het laatste element komt.

    Hoe kan ik dit het beste aanpakken?
  • Voor de duidelijkheid, hier mijn css en html:

    HTML
    [code:1:e3c08a9858]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
    </head>

    <body>
    <div id="holder">

    <div class="style1" id="logo">Logo</div>

    <div id="nav">Navigatie</div>

    <div id="bestellen">Bestellen</div>

    <div id="aanbieding">Aanbieding</div>

    <div id="nieuwprod">Nieuwproduct</div>

    <div id="reacties">Reacties</div>

    <div id="moviebox">Intro movie</div>

    <div id="maincontent_index">
    <p>Main content</p>
    </div>

    <div id="footer">Footer</div>

    </div>

    </body>
    </html>
    [/code:1:e3c08a9858]

    CSS
    [code:1:e3c08a9858]
    body {
    background-image: url(../images/body_bg.png);
    background-repeat: repeat-x;
    background-color: #d2e5f2;
    text-align: center;
    }

    #holder{
    margin: 0 auto;
    text-align: left;
    width: 750px;
    }

    #logo{
    height: 110px;
    width: 750px;
    background-color: #333333;
    }

    #nav{
    width: 750px;
    height: 36px;
    background-color: #999999;
    }

    #moviebox{
    width: 450px;
    height: 300px;
    background-color: #CCCCCC;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }

    #maincontent_index{
    width: 450px;
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }

    #titel{
    }

    #maincontent{
    width: 250px;
    height: 150px;

    }

    #bestellen{
    width: 270px;
    height: 150px;
    background-color: #006600;
    margin-right: 10px;
    float: right;
    margin-top: 10px;
    }

    #aanbieding{
    width: 270px;
    height: 190px;
    background-color: #006666;
    float: right;
    clear: right;
    margin-top: 10px;
    margin-right: 10px;
    }

    #nieuwprod{
    width: 270px;
    height: 190px;
    float: right;
    background-color: #999900;
    clear: right;
    margin-top: 10px;
    margin-right: 10px;
    }

    #reacties{
    width: 270px;
    height: 190px;
    float: right;
    background-color: #999900;
    clear: right;
    margin-top: 10px;
    margin-right: 10px;
    }

    #footer{
    width: 750px;
    height: 30px;
    background-color: #CC3333;
    }
    [/code:1:e3c08a9858]
  • Geen antwooord op je vraag, maar het valt me op, dat het er in firefox totaal anders uitziet dan in msie.
  • Hmm, wat bedoel je met totaal anders? Welke IE gebruik je?
    Ik heb zelf alleen firefox en IE7 op het werk.

    bij mij is het enige verschil dat in mozilla de footerbalk onder de content div hangt en bij IE onder de "reacties" div hangt.

    Ik wil in elk geval proberen om die footerbalk onder het laagste element te positioneren. (geen idee of dat uberhaubt met css kan).

    Als dit niet kan dan moet ik voor mezelf gaan kijken wat in het algemeen lager is, de divjes aan rechterzijde of de ingevulde content in de content box.
  • Ook hier ziet het er in Firefox compleet anders uit dan in IE. IE drukt de movie en content naar beneden omdat het niet naast de rest past, waardoor de footer er ook onder staat. In firefox staat het wel naast mekaar maar loopt de footer achter de reacties langs.

    En das IE6 en firefox 1.8
  • Ok, dank voor jullie reacties.

    In IE6 klopt er dus zowieso heel veel niet van.
    In mozilla klopt alleen die ene footer balk niet.

    Hmm, dan moet ik eens gaan onderzoeken waar het aan ligt. Ik dwing wel de standard compliance mode af in IE dmv juist doctype.
  • even logisch nadenken..

    De footer komt niet onder de sideboxes te staan maar onder de main content div… eigenlijk logisch, want de sideboxes hebben een float left.. dus ze worden uit de document flow gehaald. Maar hoe moet ik het anders doen? Die boxes absoluut positioneren? (zou kunnen, want de afmetingen zijn fixed)

    De verschuiving tussen ie6 en de rest komt door het boxmodel. In IE6 is de container breedte van 750 te weinig om alles er tussen te krijgen. Maar hoe kan ik hier op een goeie manier een compromis tussen bereiken?
  • Met conditionele comments IE6 een andere CSS voorschotelen…

    En de footer krijg je onderaan door in de CSS de eigenschap "clear:both;" (zonder "";) toe te kennen aan #footer.
  • Thanks drewster, hier kan ik iets mee.
  • My pleasure :)

    [size=9:d03b07c70c][i:d03b07c70c]IE6 op zich is genoeg reden om een eeuwig durende haat aan MS te hebben…heel het IE6 ontwikkel team mag hangen aan de hoogste boom, de hoeveelheid tijd, geld en irritatie die IE6 heeft gekost en waarschijnlijk de komende 5 jaar nog gaat kosten is echt astronomisch…[/i:d03b07c70c][/size:d03b07c70c]
  • [quote:53912bab2c="Drewster"]
    [size=9:53912bab2c][i:53912bab2c]IE6 op zich is genoeg reden om een eeuwig durende haat aan MS te hebben…heel het IE6 ontwikkel team mag hangen aan de hoogste boom, de hoeveelheid tijd, geld en irritatie die IE6 heeft gekost en waarschijnlijk de komende 5 jaar nog gaat kosten is echt astronomisch…[/i:53912bab2c][/size:53912bab2c][/quote:53912bab2c]

    Hier ben ik het volkomen mee eens…. :evil:
  • Hoe kan ik eigenlijk bepaalde divs én laten floaten aan de rechterkant… én toch mee laten gaan in de flow..

    Wat ik wil is het volgende:
    http://www.planetdust.nl/kpptest/

    Je ziet hier dat de holder/container div in IE meerekt met de gefloate divs (de rechter hokjes)

    echter in mozilla loopt de holder/container tot en met de content div.

    moet dit opgelost worden via die conditionele comments? Of is er iets anders aan de hand?
  • Ja dat kan wel, dat heet faux columns. Daar doe je net alsof de container wel mee scaled door handig gebruik van achtergrond plaatjes.

    Een mooiere oplossing is de container een minimale hoogte van 100% (min-height: 100%;) mee te geven en een negatieve bottom-margin ter hoogte van je footer. Voor IE6 heb je dan een CSS hack nodig omdat die geen idee heeft wat min-height betekent (het gedrocht). Dus, net zoals ze bij de jostiband gebruik maken van kleuren in plaats van noten zetten we voor IE6 iets anders neer dan het hoort te zijn; _height: 100%; onder je min-height. Een underscore in je CSS is natuurlijk onzin en daarom negeren alle browsers met een beetje zelfrespect die declaratie, gelukkig weet IE6 ook niet wat zelfrespect is en interpreteert die de foutieve CSS op een manier die ons goed uit komt. En eigenlijk het belangrijkste, je moet zorgen dat je container float…. Nu heb je een container ter grote van je browser venster (of groter, afhankelijk van de content die erin staat) met een footer eronder…

    Als je een uitgebreidere uitleg wilt kan je hier even kijken:
    http://www.sceneone.nl/tips_tricks/3_kolommen_layout.php


    [i:342e2f1146]Maar ja, als ik er zo over nadenk, denk ik eigenlijk dat faux columns de beste en makkelijkste oplossing is voor jouw site, die andere oplossing houd nog al wat 'redesign' werk in en dat doen we natuurlijk liever niet… Met faux columns geen aanpassingen in de code alleen een paar achtergrond plaatjes maken en toevoegen aan je CSS… easy as pie[/i:342e2f1146]
  • Ik was zelf al op de hoogte van faux columns. Maar ik zag dat altijd als een soort workaround ipv dé oplossing. Maar als ik je goed begrijp bestaat er geen "dé oplossing".

    Het is gewoon een keuze maken tussen meerdere workarounds. En ja inderdaad, dan vind ik faux columns een heel wat meer toegankelijke optie dan die ene met de css hacks.

    Dus, faux column, that is :)

    Maar ben jij het ook met me eens dat dat de beste oplossing is? Of zijn er nog andere manieren die ongeveer hetgeen doen wat ik wil bereiken?

    Dit is mijn doel: www.planetdust.nl/concept.png

    Nu ik dit type…. wat als ik nu gewoon de site soort van fixed maak. Dus de totale hoogte van alle boxes aan de rechterzijde is dé fixed hoogte van de holder. En de hoogte van mijn content div is dus ook fixed (logischerwijs, dus met een overflow-y)

    Nadeel lijkt me 2 scrollbalken (1tje voor de echte website en eentje binnen het content vlak (indien de content te lang wordt voor deze div)

    Hoe denk jij erover?
  • [quote:e0fd2b3ec3="D'acide"]Dus, faux column, that is :)

    Maar ben jij het ook met me eens dat dat de beste oplossing is? Of zijn er nog andere manieren die ongeveer hetgeen doen wat ik wil bereiken?
    [/quote:e0fd2b3ec3]Ja, ik vindt faux columns eigenlijk best een elegante en vooral eenvoudige oplossing voor dit probleem. Als je bij voorbeeld ook de container float (waardoor die wel mee scaled) krijg je weer het probleem dat ie niet centreert. Wat dan wel weer zou werken is een div plaatsen om je Bestellen/Aanbieding/Nieuwproduct/Reacties/Intro movie/Main content en die div floaten. Die wordt dan zo groot als het grootste elemente wat erin zit, en die kan je dan de achtergrond geven die je eigenlijk aan je "main content" zou geven. Hier door lijkt het dat je main content altijd minstens zo hoog is als de sidebar.

    [quote:e0fd2b3ec3="D'acide"]
    Nu ik dit type…. wat als ik nu gewoon de site soort van fixed maak. Dus de totale hoogte van alle boxes aan de rechterzijde is dé fixed hoogte van de holder. En de hoogte van mijn content div is dus ook fixed (logischerwijs, dus met een overflow-y)

    Nadeel lijkt me 2 scrollbalken (1tje voor de echte website en eentje binnen het content vlak (indien de content te lang wordt voor deze div)

    Hoe denk jij erover?[/quote:e0fd2b3ec3]Fixed grotes zijn altijd makkelijker, maar dat betekend niet dat het mooier of handiger is. 2 scrol bars zou ik zelf niet zo snel doen, ik vind het redelijk lelijk…
  • Dit lijkt mij iets voor faux columns. En nogmaals (als in een ander topic), een container met floats erin zó maken dat hij de floats ook echt containt, doe je door overflow:hidden op de container, niet door de container te floaten.

    Zou geen extra scrollbars forceren. Een scrollbar is al niet leuk, eentje extra vinden bezoekers al helemaal niet handig.
  • [quote:b3836931d0="boelieboelie"]En nogmaals, een container met floats erin zó maken dat hij de floats ook echt containt, doe je door overflow:hidden op de container, niet door de container te floaten.[/quote:b3836931d0]Oh ja, daar kan ik me nog iets van herinneren, toch maar eens onthouden en uitproberen… :) (maar het is ook niet een echt voor de hand liggende eigenschap…)
  • bedankt voor jullie reacties. Het ziet er nu al een stuk beter uit.

    Kunnen jullie eens met jullie browsers het volgende checken:

    hxxp://www.planetdust.nl/kpptest

    Volgens mij ziet ie er nu in alle browsers hetzelfde uit. Als dit zo is dan heb ik tenminste een stabiele fundering.
  • Afgezien van dit:

    [img:cacc478fe5]http://www.millar.nl/bla/message.jpg[/img:cacc478fe5] :D

    Ziet het er goed uit in IE7/IE6/Opera/Firefox…

    [i:cacc478fe5]Oeps: je bent alleen <html> vergeten…[/i:cacc478fe5]
  • hehe die hxxp gebruik ik zodat google deze link niet indexeert ;)
    moet dus vervangen worden door http.

    Ow. stom van me.. de html tag vergeten… Heb hem er direct bijgezet.

    thanks

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.