Wrapper toont niet

**Miichelle G** · 13-08-2013, 11:18

Beste Leden,

Ik heb de volgende code:

CSS

Code:

body { margin 0; background: url(../images/background.gif)}
.wrapper {
background: url(../images/bg_wrapper.gif)
margin:100px; 
}

#logo {
margin: 20px; 0px; 0px; 480px;
}

HTML:

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" dir="ltr" lang="en-gb" xml:lang="en-gb">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />    
<title>RacingIT.com | Racing is a way of life!</title>

<link rel="stylesheet" type="text/css" href="includes/css/main.css">
</head>

<body>
<div class="wrapper"> 

    <div class="head">
        <div id="logo">
            <img alt="logo" src="includes/images/logo.png"></img>
        </div>
        
        
        
        
        
    </div>
</div>    
</body>
</html>

Iemand enig idee waarom mijn wrapper image helemaal niet verschijnt?

**B. Brouwer** · 13-08-2013, 11:21

.wrapper {
background: url(../images/bg_wrapper.gif)
margin:100px;
}

Probeer hier eens float:left; of float:right; aan toe te voegen, of kies voor padding:0; en margin:0;

Even kijken wat dat doet.

**Miichelle G** · 13-08-2013, 11:25

Padding en of margin maakt geen verschil evenals de float.
Heb hem even online gezet: http://www.sneakerbattle.nl/sd/index.html

**B. Brouwer** · 13-08-2013, 11:40

.wrapper {
background: url(../images/bg_wrapper.gif)
margin:100px;
}

Je vergeet de background af te sluiten met ';'

**Miichelle G** · 13-08-2013, 12:04

Het is gelukt.

Ik heb een layout van 960 pixels, dit betekent dat zoveel de margin links als rechts 450px; bedraagt voor de wrapper.
Alleen klopt dit op mijn scherm niet.

**Marcel van Vrouwerf** · 13-08-2013, 12:18

width:960px;
margin: 0 auto;

EDIT:
Je lijkt wat veel overbodig te coderen:
Geef de background mee aan html, de body een width van 960px met margin: 0 auto;
» de hele pagina staat center.

**Miichelle G** · 13-08-2013, 12:24

Beste Marcel,

Ik moest wel de height erbij zetten, anders liet die niks zien. Super bedankt voor je hulp. Hoe kan het dat de margin die ik zelf instelde niet werkte?
Want ik wil graag de bg van de wrapper bijv nog iets omhoog?

**Marcel van Vrouwerf** · 13-08-2013, 12:28

een lege div is leeg, daarom laat ie hem niet zien (hij is er wel, maar met height:0)

Het coderen van margin was sowieso niet goed (er stond iets van margin: 0px; 450px; 0 px; » puntkomma sluit het deel margin, dus dat laatste pakte hij al niet)

Hoe bedoel je dat van de background?

**Miichelle G** · 13-08-2013, 13:12

Wat ik in eerste instantie wilde doen is de wrapper goed zetten. Dit betekent:

[code1]
margin-top:10px;
margin-right:450px;
margin-bottom:0px;
margin-left:450px;

Even snel afgekort: margin: 10px; 450px; 0px; [code2]

Nu heb ik de door jou de margin: 0 auto; ingevuld en nu klopt de 450px; precies hoe kan dat [code1] niet werkte en [code2] wel.

**Chiel Oude Breuil** · 13-08-2013, 13:16

Ik snap het niet helemaal bedoel je hoe het precies in het midden is?
Margin: 0 auto; centreerd de DIV dus hij neemt aan dat er een vlak is van 960 breed en die doet hij exact in het midden.
En als je werkt met margin-left:480px; dan is het op een heel groot scherm verkeerd aangezien er dan andere afmetingen zijn.

Mvg,

**Miichelle G** · 13-08-2013, 13:24

Nu snap ik het idd.

Ik ben al een stukje verder. Ik moet nu alleen een div naast een div krijgen. Dus het menu naast het logo.
Ik heb hiervoor de div .menu ul{

list-style-type: none;
position: relatief;
margin-left:700px; een relatieve positie gegeven, alleen als ik met float werk, werkt het helaas niet.

**Marcel van Vrouwerf** · 13-08-2013, 13:24

De wrapper centreren doe je door margin:0 auto; (niet iedereen heeft dezelfde resolutie als jij - resize je window maar eens bij absolute marges)

code 1 is correcte code;
de shorthand hiervoor is:
margin:10px 450px 0px 450px;
en niet de foutieve
margin: 10px; 450px; 0px; »» let op het gebruik van de puntkomma; je had hier een margin:10px voor alles.

**Marcel van Vrouwerf** · 13-08-2013, 13:28

Origineel gepost door Miichelle G

Nu snap ik het idd.

Ik ben al een stukje verder. Ik moet nu alleen een div naast een div krijgen. Dus het menu naast het logo.
Ik heb hiervoor de div .menu ul{

list-style-type: none;
position: relatief;
margin-left:700px; een relatieve positie gegeven, alleen als ik met float werk, werkt het helaas niet.

Het logo » float:left
Het menu: geen positie, margin o.i.d. ; alleen text-align:right

**Miichelle G** · 13-08-2013, 13:42

Gedaan,nu moet ik het menu naast elkaar.

Heb wel vaker een layout gebased, maar zo beroerd als vandaag :/

**Miichelle G** · 13-08-2013, 15:19

Iedereen bedankt voor de reacties. Ik had nog 1 vraagje. Ik heb 50 px verticale lijn in het ontwerp gebruiken jullie hiervoor gewoon <hr /> of echt het plaatje zelf?

Wrapper toont niet