PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

css probleem

Door JanWillem BlaBla op 16-01-2009 09:40
517 views
ik ben een site aan het maken met css, nu wil ik dat de inhoud div links van the thumb div zoiets:
Header
menu
inhoud thumb
footer

Hier een voorbeeld van hoe ik het nu heb http://www.kleurrijkpalet.nl/goed/

dit is mijn css:

#header {
margin-left: 200px;
top:0px;
height: 150px;
width:800px;
background-image:url("images/header.png");
}

#menu {
margin-left: 200px;
width:800px;
height:40px;
background-image:url("images/achtergrond.png");
}

#inhoud {
margin-left:200px;
width:650px;
height:400px;
background-image:url("images/achtergrond.png");
top:190;
}

#thumbs {
margin-left:880px;
width:150px;
height:400px;
background-image:url("images/thumbs.png");
}


#footer {
background-image:url("images/footer.png");
width:800px;
height:50px;
margin-left:200px;
}


R
Robert Deiman
16-01-2009 09:49
@JanWillem

Je moet eens proberen om een #container div te gebruiken van 800px waarbinnen je de content zet.
Om te centreren kan je deze container div een margin:0px auto; meegeven, dat is beter dan met al die marges werken zoals jij nu probeert.

Daarnaast kan je binnen die container beter float:left; gebruiken voor je divs, dan komen ze wel naast elkaar te staan.

Je css zoals je die nu hebt (al die margins iig) kan je opnieuw opbouwen. Die marges verkl*ten de boel nogal.
D
Dennis Mertens
16-01-2009 10:24
@Robert:
Bij een waarde van 0 (geen waarde dus), geen eenheid mee geven.

@TS:
Als je toch al gebruik maakt van een stylesheet bestand, kun je daar net zo goed alles in zetten. En geen inline CSS-code meer gebruiken. Dat is voor jou zelf ook makkelijker en ook veel sneller.

En zo vaak een ' ' is nooit een mooie oplossing.
JanWillem BlaBla
16-01-2009 11:09
@Dennis
waarmee kan ik dit dan vervangen ' ?
D
Dennis Mertens
16-01-2009 11:10
Werken met margins en paddings. Mooi goed uitlijnen.

Correcte breedtes in voeren.
JanWillem BlaBla
16-01-2009 11:25
@robert
volgens mij heb ik gedaan wat je zei maar hij gaat nog steeds niet goed

Hier mijn css:

#header {
top:0px;
height: 150px;
width:800px;
background-image:url("images/header.png");
}

#menu {
width:800px;
height:40px;
background-image:url("images/achtergrond.png");
}

#inhoud {
width:650px;
height:400px;
background-image:url("images/achtergrond.png");
}

#thumbs {
width:150px;
height:400px;
background-image:url("images/thumbs.png");
float:right;
}


#footer {
background-image:url("images/footer.png");
width:800px;
height:50px;
}

#container {
width:800px;
margin:0px auto;
}

.style1 {
	font-family: "Lucida Handwriting";
	font-size: x-large;
}
.style2 {
	font-family: "Lucida Handwriting";
}
D
Dennis Mertens
16-01-2009 11:33
Ik zie 2 keer een eenheid bij een 0-waarde staan.

Zoals je in mijn vorige reactie kon lezen is dit niet goed.

Ook is het handig om de HTML te tonen die hoort bij de hier bovenstaande CSS-code.

Het is echter volgens mij wel van belang dat ook de HTML-code enig zins wordt aangepast. Al die spaties hebben geen enkele zin.
JanWillem BlaBla
16-01-2009 11:36
ik heb de o-waardes eruit gehaald, hier is mijn 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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Language" content="nl" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Suzan Van Der Sman - Kleurrijkpalet.nl</title>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
<script type="text/javascript" language="JavaScript1.2" src="images/um_menu.js"></script>
</head>

<body style="background-color: #E0E0E0">
<div id="container"><div id="header"></div><div id="menu"></div><div id="inhoud"></div><div id="thumbs"></div><div id="footer"></div></div>
</body>

</html>

N
Niek Weevers
16-01-2009 12:08
Dennis Mertens schreef op 16.01.2009 10:24
@Robert:
Bij een waarde van 0 (geen waarde dus), geen eenheid mee geven.

Dit maakt niet uit. Mag wel, hoeft niet. Als je geen eenheid mee geeft, dan zie je in firebug dat er automatisch de eenheid pt van wordt gemaakt.
JanWillem BlaBla
16-01-2009 15:06
ik heb ze nu naast elkaar maar nu is de footer verdwenen, hier de code
style.css

#header {
height: 150px;
width:800px;
background-image:url("images/header.png");
}

#menu {
width:800px;
height:28px;
background-image:url("images/menu.png");
}

#inhoud {
width:650px;
height:400px;
background-image:url("images/achtergrond.png");
float: left;
}

#thumbs {
width:150px;
height:400px;
background-image:url("images/thumbs.png");
float: left;
}


#footer {
background-image:url("images/footer.png");
width:800px;
height:50px;
}

#container {
width:800px;
margin:auto;
}

.style1 {
	font-family: "Lucida Handwriting";
	font-size: x-large;
}
.style2 {
	font-family: "Lucida Handwriting";
}


en de index.php


<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Language" content="nl" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Suzan Van Der Sman - Kleurrijkpalet.nl</title>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
<script type="text/javascript" language="JavaScript1.2" src="images/um_menu.js"></script>
</head>

<body style="background-color: #E0E0E0">
<div id="container"><div id="header"></div><div id="menu"><script type="text/javascript" language="JavaScript1.2" src="images/menu.js"></script></div><div id="inhoud"></div><div id="thumbs"></div><div id="footer"></div></div>
</body>

</html>

Reageren

Inloggen om te reageren