Archief - Floating elements

Xiao · 18 apr 2009

Ik probeer een layout in CSS te maken, maar 'floats' lukken me nog niet zo goed :crazy:

Wat ik probeer te bereiken: Afbeelding

- Header en footer hebben vaste hoogte en een breedte van 100% (dit lukt me nog

)
- De blokjes van 50x50px zijn div-elementen met een achtergrondafbeelding. Dit zijn er nu 12, maar dit kunnen er 50 of 123 of ...
zijn. Maar telkens 4 per rij.
- De 'right' en 'left' kolommen kleven tegen de container met blokjes, en vullen verticaal gewoon de ruimte tussen header en footer.

Hopelijk heb ik het goed uitgelegd.

DeGeestJ · 25 apr 2009

en wat wil je dan weten? alles eigenlijk? of hoe je eraan begint? Of gewoon het positioneren van elementen met float en clear?

Wat ik ook als tip kan meegeven is een boek: Bulletproof Webdesign (engels) maar een superboek...

Vraag er maar op los, ik zal je zoveel mogelijk proberen helpen

UnD3RD0G · 26 apr 2009

hoe doe je dit imo het beste :

een div voor je header,
een div voor je content
en een div voor je footer.

Over header en footer breidt ik niet uit, ik ga ervanuit dat je dit begrijpt.

Wat de content betreft :

in je div content zet je 3 divs :
left / middle / right, deze float je alle3 left.
je geef ze ook allen hun breedte mee, bv links en right 250px, middle 750px.

enigste dat dan nog moet is de 4 thumbnails, je zegt dat je dit in divs wilt, ik stel voor dat je her een UL voor gebruikt, waar die na 4 items zelf breaked
je zet je UL op 750 px breed, en de LI's op 175px, mat een margin left van 12px.
oja, op je LI's zet je ook een float left. Je zal zien dat deze allen naast elkaar komen, maar als je er meer als 4 naast elkaar hebt, deze zal verschuiven naar de rij eronder.

laat me weten hoe het ging.

mpolo · 27 apr 2009

Hier is de code die je nodig hebt

Er zitten nog fouten/slechte code? in:

ik gebruik div's voor de items ipv ul
IE geeft geen bottom spacing aan de items
FF heraald de linker en rechter sitebar's niet na 500px (fix dit met java normaal)

Iemand een oplossing voor IE/FF spacing en heights?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test by Mpolo</title>
    <link href="HTMLPage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="header"></div>
    <div id="middle">
        <div id="holder">
            <div id="left"></div>
            <div id="center">
                <div id="menu">
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
            </div>
            <div id="right"></div>
        </div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

Code:

body 
{
	padding:0;
	margin:0;
}

#container 
{
	width:100%;
	height:100%;
	}

#container #header
{
	background-color:#2E2E2E;
	height:100px;
	}
	
#container #middle
{	
	width:100%;
	}
#container #middle #holder
{
	margin:0 auto;
	width:700px;
	background-color:#515151;
	height:auto;
	}
#container #middle #holder #left
{
	width:100px;
	float:left;
	background-color:#515151;
	width:100px;
	min-height:500px;
	}
#container #middle #holder #right
{
	background-color:#515151;
	width:100px;
	min-height:500px;
	}
#container #middle #holder #center
{
	width:500px;
	float:left;
	background-color:#B8B8B8;
	min-height:500px;
	padding:0;
	}
#container #middle #holder #center #menu
{
	margin-top:20px;
	}
#menu .item
{
	width:100px;
	height:100px;
	background-color:#515151;
	margin:0 0 20px 20px;
	float:left;
	}

#container #footer
{
	clear:left;
	background-color:#2E2E2E;
	height:75px;
	}

Ik behoud me de gebruiksrechten op deze code

Archief - Floating elements

Xiao

Legacy Member

DeGeestJ

Legacy Member

UnD3RD0G

Legacy Member

mpolo

Legacy Member