CSS vraagje
9 februari 2010 - 18:43   
geplaatst door: mt
Ik wil een vlak met ronde hoeken en slag schaduw. Onderstaand de CSS code
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
line-height: 18px;
color: #666;
background-color: #CCC;
text-align: center;
margin: 0px;
padding: 0px;
}
#container {
margin: 0px auto;
padding: 0px;
height: auto;
width: 955px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
#midden {
background-image: url(images/midden_slagschaduw.png);
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
vertical-align: top;
background-position: left top;
position: relative;
}
#header {
background-image: url(images/boven_slagschaduw.png);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 80px;
background-position: left top;
width: 955px;
position: relative;
}
#footer {
background-image: url(images/onder_slagschaduw.png);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 80px;
clear: both;
position: relative;
}

Het resultaat : drie vlakken met tussen ruimte. M.a.w. de div's staan niet tegel elkaar aan.
Wat zie ik over het hoofd??

(Bewerkt door mt om 18:44, 9-02-2010)

CSS vraagje
9 februari 2010 - 19:15    reactie #1
geplaatst door: Yurgen
Heb je dit ergens online staan?
I'm not completely worthless, I can be used as a bad example..
CSS vraagje
9 februari 2010 - 19:24    reactie #2
geplaatst door: mt
Net even online gezet

[http://members.casema.nl/endlessriver/]

(Bewerkt door mt om 19:25, 9-02-2010)

CSS vraagje
9 februari 2010 - 20:27    reactie #3
geplaatst door: Yurgen
Zet in je css aan het begin de volgende regel.
Zo worden alle paddings en marge's gereset tot 0.
En kan je deze waarden in de overige div's verwijderen.


*{
margin: 0;
padding: 0;
}

Zo zou je eigenlijk elk css-bestand moeten beginnen.

I'm not completely worthless, I can be used as a bad example..
CSS vraagje
9 februari 2010 - 20:31    reactie #4
geplaatst door: Eelco
Het zijn een paar dingetjes: ten eerste is de achtergrondafbeelding van #header geen 80px hoog, maar 72 px en ditzelfde geldt voor de footer.
Ook heb je nog geen stijl vastgelegd voor een paragraph: die krijgt dus de padding en margin mee van het stylesheet van je browser.

Kijk ook nog even goed naar je html: de tekst in de footer staat niet tussen tags.

CSS vraagje
9 februari 2010 - 20:32    reactie #5
geplaatst door: Eelco
O ja: je cleart je footer zonder dat hij float!
CSS vraagje
9 februari 2010 - 20:40    reactie #6
geplaatst door: mt
Alle opmerkingen gelezen en e.e.a. aangepast en..... het werkt!!!!
Hartelijk dank voor de reacties
CSS vraagje
9 februari 2010 - 20:49    reactie #7
geplaatst door: MacWim
Gefeliciteerd.
Mocht je nog eens problemen krijgen met formaten van afbeeldingen of zo - in dit geval hielp ook het paardenmiddel van een marge-top van -18px voor de footer. Maar da's niet elegant.
Mac mini M1, 16 GB 1TB | MBA 6.2 | iPhone 13 mini | iPad 2025 | iPod touch 2009 | Apple TV 3
Bouw websites; webteksten; beeldbewerking met Pixelmator Pro. interlijn.nl
CSS vraagje
9 februari 2010 - 20:53    reactie #8
geplaatst door: Yurgen
Zoals Eelco ook al opmerkt zitten er wel een aantal "foute" en dubbele waarden in je stylesheet.
Let hier goed op, scheelt een hoop geklooi later.
I'm not completely worthless, I can be used as a bad example..