slicing en coderen xhtml-valid

Huh wtf?

Nu heb ik opeens 2 logos in beeld
HTML:

Spoiler tonen

Titel van je site

.css:

Spoiler tonen

/* CSS Document */
/* Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#191919 repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:1200px; margin:0 auto;}
#logo {background: url(Logo.png); width: 166px; height: 81px; margin: 0;}

EDIT:

En nu voeg ik de menu balk in en dan staan er 2 naast elkaar en de ene staat er voor de helft op -.-

maak dit er eens van.

/* CSS Document */
/* Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#191919 repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:1200px; margin:0 auto;}
#logo {background: url(Logo.png)no-repeat; width: 166px; height: 81px; margin: 0;}

Omdat je container 120px is en je gaat dan afbeeldingen erin plaatsen die kleiner van formaat zijn dan moet je wat kleine dingen aanpassen.
Waarschijnlijk zul je ook de margin dan wat aan moeten passen, probeer zelf te ontdekken met de getallen te wijzigen hoe je afbeelding het beste staat.
margin:0; > alles is dan 0 pixels.
margin: 0 5px 10px 15px; (uitleg:: 0=0 pixels vanaf de top, 5px = 5 pixels vanaf rechts, 10px=10pixels vanaf de onderkant en 15px= 15 pixels vanaf links.

Thanks man het werkt

Edit:

Ik heb nu de volgende code voor menu maar hij komt niet in beeld te staan?

Html:

Spoiler tonen

Creative Studio

.ccs:

Spoiler tonen

/* CSS Document */
/* Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#191919 repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:1200px; margin:0 auto;}
#logo {background: url(Logo.png)no-repeat; width: 166px; height: 81px; margin: 0;}
#menu {background: url(Menu.png)no-repeat width: 664px; height: 41px; margin 0;}

Sorry dat ik zoveel vraag, maar ik wil dit graag leren!

#menu {background: url(Menu.png)no-repeat; width: 664px; height: 41px; margin 0;}

achter no-repeat hoort nog een ;
dit is om het background gedeelte af te sluiten.

Marjolein schreef:

#menu {background: url(Menu.png)no-repeat; width: 664px; height: 41px; margin 0;}

achter no-repeat hoort nog een ;
dit is om het background gedeelte af te sluiten.

Klein foutje dus, dank U

//Maar waarom kan ik nu de margin niet meer veranderen van mijn menu? Tenminste je ziet dan niets veranderen.

En als ik de margin van het logo veranderen en verchuift de menu balk mee

//edit 2 berichten samengevoegd

Maar waarom kan ik nu de margin niet meer veranderen van mijn menu? Tenminste je ziet dan niets veranderen.

En als ik de margin van het logo veranderen en verchuift de menu balk mee

ik denk dat je beter even een topic kan openen in webwereld (plaatst dan nog een keer je html+css die je nu heb).
Eigenlijk is dit topic om uit te leggen, niet om problemen op te lossen

Inderdaad
Maar bedankt Marjolein!
Ik kreeg een mooie site hierdoor

Ik heb een vraagje:

Ik volg even de tutorial met de layout die je als voorbeeld gebruikt,maar ik heb even een vraagje
Je voegt die background in he, maar welke code heb je gebruikt om hem bovenin te krijgen?

Hij doet het wel perfect hoor, maar ik zou graag even de reden hierachter willen weten ^^

een background begint automatisch bovenaan.
Maar je zou ook background: url(images/background.png) repeat-x top; kunnen gebruiken, dus met top geef je aan dat hij bovenaan moet staan.

oo ok bedankt! en repeat-x staat voor het herhalen over de hele breedte?

EDIT:

Nog een vraagje: in de css zet je achter bijna alles margin: 0
Maar dan horen ze toch allemaal op dezelfde plek te staat? immers ze hebben allemaal dezelfde margin.

Basdost schreef:

oo ok bedankt! en repeat-x staat voor het herhalen over de hele breedte?

EDIT:

Nog een vraagje: in de css zet je achter bijna alles margin: 0
Maar dan horen ze toch allemaal op dezelfde plek te staat? immers ze hebben allemaal dezelfde margin.

of denk ik nou heel erg raar?

repeat-x is voor herhalen over de breedte (horizontaal)
repeat-y is voor herhalen over de lengte (verticaal)

Margin :0; betekend dat de div 0 pixels vanaf de top ten opzichte van vorige div geplaatst wordt en ook 0 pixels vanaf links. Als je dit niet doet wil het nog wel eens gebeuren dat IE een tussenruimte tussen de divs zet als je bv ook een padding gebruikt.

en vanwaar die
tekens na de content in je html?

Bedankt trouwens voor alle uitleg echt top

= break: breekt de zin af en gaat dan naar de volgende regel

En ik heb ze ook gebruikt om dus steeds een lege regel neer te zetten zodat het content gedeelte "meerekt".