[CSS] Site slicen

Door Martijn op 28-04-2008 19:12

1.295 views

Ik heb een ontwerp, maar weet niet echt goed hoe ik dit om kan zetten naar css (met divs). Ik heb in paint effen een grove schets gemaakt:

www.demaffia.nl/site.JPG

Toelichting:
1) header
2) komt plaatje in
3) menu
4) tekst content
5) afbeelding in de hoek

Hoop dat jullie mij verder kunnen helpen. Gelieve geen adviezen over hoe ik mijn layout beter kan doen, ik heb het zo in mijn hoofd en wil het graag op deze manier uitvoeren :)

Alvast bedankt,

Martijn

Jesper Diovo

28-04-2008 19:14

Grove schets, zeg dat wel...

Achtergrond
Div1 -> header
Div2 -> plaatje links (links floaten)
Div3 -> container
Div4 -> 'zwevend divje' links
Div5 -> 'zwevend divje' rechts

Niet zo moeilijk toch?

Martijn

28-04-2008 19:18

dus div 4 en 5 in de container laten zweven? En hoe positioneer je die dan?

Edit:
div2 is nr 5 in mn schets?

Jesper Diovo

28-04-2008 19:26

Div4 en -5 met negatieve margins positioneren.

Div2 is idd nr. 5, maar je kunt dat ook gewoon met de img-tag doen. 'k Snap daar even niet van wat je ermee wilt bereiken, maar oké.

Martijn

28-04-2008 19:30

Alleen negatieve margins worden volgens mij niet geaccepteerd in IE 6. En helaas wordt deze browaer nog n hoop gebruikt...
En hoe kan je dit dan het beste positioneren? Absolute of relative? De site moet er nog wel goed uit blijve zien ook al wordt IE / FF verkleind...
En in welke div komen div4 en 5? In de container of .. ?

Jesper Diovo

28-04-2008 19:32

Jawel hoor, IE6 accepteert gewoon negatieve margins. Geen position gebruiken, met die negatieve margins lukt het al. Ja, ze komen in de container.

Niek Weevers

28-04-2008 20:07

<div id="nummer5"></div>
<div id="container">
    <div id="nummer 1"></div>
    <div id="nummer 4">
        <div id="nummer 3"></div>
        <div id="nummer 2"></div>
    </div>
</div>

css:


#nummer5 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
#container {
position: relative;
margin: 0 auto;
width: 600px;
}
#nummer4 {
position: relative;
}
#nummer3 {
position: absolute;
left: -50px;
top: 50px;
width: 100px;
height: 100px;
}
#nummer2 {
position: absolute;
right: -50px;
top: 50px;
width: 100px;
height: 100px;
}

En dan aanpassen naar je eigen afmetingen en dergelijke.
Die nummer 2 en 3 geef je beide een position absolute in een div (nummer 4) met een position relative. Zo positioneer je deze 2 aan de hand van nummer 4.
Nummer 5 staat compleet buiten de rest.

Martijn

28-04-2008 20:33

Ben nu even aan de slag met de code van Niek.

Maar negatieve margins in IE6 werkt bij mij niet. Ik zal wel wat fout doen. DIt krijg ik te zien in IE6:

www.demaffia.nl/IE6.JPG

code:


<html>
<head>
<title> TEST </title>

<style rel="stylesheet" style="text/css">

*{
	margin:0px;
	padding: 0px;
}

body
{
	background-color: blue;
}

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

#left
{
	background-image: url('http://www.5minds.nl/graph/ballen.png');
	background-position: top left;
	background-repeat: no-repeat;
	height: 100%;
	width: 180px;
	float: left;
}

#site
{
	float: left;
	width: 800px;
	background-color: red;
	height: 100%;
}

#header
{
	background-color: yellow;
	height: 80px;
	width: 800px;
}

#menu
{
	float: left;
	margin-top: 130px;
	margin-left: -70px;
	width: 150px;
	height: 300px;
	background-color: #999;	
	border: 1px solid black;
}

#foto
{
	float: right;
	margin-top: 80px;
	margin-right: -100px;
	width: 200px;
	height: 180px;
	background-color: #999;
}
</style>

<body>

<div id="container">
	<div id="left"></div>
	<div id="site">
		<div id="header">
		</div>
		<div id="content">
			<div id="menu"></div>
			<div id="foto"></div>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
			<br/>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
			<br/>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
			<br/>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
			<br/>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
			<br/>

		</div>
	</div>
</div>

</body>
</html>

Wat doe ik fout? In IE7 en FF geeftie t gewenste resultaat...

Niek Weevers

28-04-2008 20:37

Negatieve margins moet het liefst niet gebruiken. Daar kan inderdaad niet elke browser even goed mee overweg.

Martijn

28-04-2008 20:42

Met de code van Niek kom ik tot dit resultaat in IE6:

www.demaffia.nl/IE6-2.JPG

Code:


<html>
<head>
<title> TEST </title>

<style rel="stylesheet" style="text/css">

body{
background-color: blue;
}

#nummer5 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: yellow;
}
#container {
position: relative;
margin: 0 auto;
width: 600px;
background-color: red;
}
#nummer4 {
position: relative;
height: 100%;
width: 800px;
background-color: black;
}
#nummer3 {
position: absolute;
left: -50px;
top: 50px;
width: 100px;
height: 100px;
background-color: red;
}
#nummer2 {
position: absolute;
right: -50px;
top: 50px;
width: 100px;
height: 100px;
background-color: red;
}
#nummer1{
	background-color: yellow;
	height: 80px;
	width: 800px;
}
</style>

<body>

<div id="nummer5"></div>
<div id="container">
    <div id="nummer1"></div>
    <div id="nummer4">
        <div id="nummer3"></div>
        <div id="nummer2"></div>
    </div>
</div>
</body>
</html>

In IE7 krijg ik ook di resultaat. In FF doet hij het wel goed.

Niek Weevers

28-04-2008 20:50

Je moet sowieso het volgende nog toevoegen.


body {
 margin: 0;
}

En je moet een doctype in je html bestand hebben. Ik zou het volgende toevoegen:


<!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">

in plaats van: <html>

ps je geeft nummer 1 en 4 een breedte van 800px mee terwijl de container, waar ze in zitten' een breedte heeft van 600px. Dit klopt niet.
Je mag de breedtes bij 1 en 4 wel helemaal weghalen. Deze divs passen zich automatisch aan aan de breedte van de container waar ze in zitten. In dit geval dus 600px.

Reageren

Inloggen om te reageren