CSS Uit padding breken
Een beginners vraag: Ik heb een vierkant element van 200 bij 200px. Hier staat een padding op van 'padding: 30px 10px;' dus 30 in de hoogte en 10 in de breedte. In dit element heb ik nog een element van 20px hoog en 200px breed alleen door de padding is de breedte maar 180px.
Kan dat kleine element de padding omzeilen op een manier?
Bedankt alvast!
Wat wil je precies bereiken uiteindelijk? Wat je nu vraagt is niet mogelijk, je kan niet even de padding negeren.
In die DIV wilde ik nog een DIV. Deze 2e DIV moet een balk voorstellen maar moet wel de volledige breedte hebben.
<div id="ELEMENT_BINNENIN">
bla
</div>
#ELEMENT_BINNENIN {
height:20px;
margin-left:-10px;
margin-right:-10px;
}
Gewijzigd op 24/01/2012 14:43:29 door Ozzie PHP
Duidelijk?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#winkelmand {
background: #e5e6e6;
z-index: 1000;
position: absolute;
text-align: left;
display: none;
color: #000;
padding: 30px 10px;
top:52px;
right: -16px;
width: 200px;
height: 200px;
}
.sluiten {
background-color: #000;
position: inherit;
border-top: solid 1px #fff;
z-index: 1001;
text-align: center;
color: #fff;
font-weight: bold;
height: 10px;
width: 200px;
}
background: #e5e6e6;
z-index: 1000;
position: absolute;
text-align: left;
display: none;
color: #000;
padding: 30px 10px;
top:52px;
right: -16px;
width: 200px;
height: 200px;
}
.sluiten {
background-color: #000;
position: inherit;
border-top: solid 1px #fff;
z-index: 1001;
text-align: center;
color: #fff;
font-weight: bold;
height: 10px;
width: 200px;
}
Toevoeging op 24/01/2012 15:12:07:
.sluiten is dus het 'balkje'
Daarmee komt dan je sluiten balk helemaal links bovenin te zitten, als het goed is ongeacht je padding.
-edit: Dit is inderdaad wel de correcte manier aangezien er uiteraard een padding in de #winkelmand css staat. Thanks
ps. Ik zou het balkje graag altijd onderaan willen hebben. Ik zou eventueel top: kunnen aanpassen maar mijn winkelmand hoogte is niet altijd 200px. As a matter of fact, ik verwijder de height: 200px nu ook uit het CSS.
Gewijzigd op 24/01/2012 15:34:36 door Danny Spinhuis
Ik kan me herinneren hier wel eens ruzie mee te hebben gehad, maar het "zou" moeten werken.
De padding links en rechts is nu weg, alleen zit er nog wel padding van boven en onder. Aangezien het sluiten balkje nu onderaan staat sluit het nog niet helemaal aan de onderkant.
Heb nu:
Code (php)
1
2
2
left: 0px;
bottom: 0px;
bottom: 0px;
Gewijzigd op 24/01/2012 15:44:59 door Danny Spinhuis
http://imageshack.us/f/268/79520753.jpg/
Het sluiten balkje wilt dus niet helemaal onderaan komen te staan vanwege de padding van de buitenste DIV
Toevoeging op 24/01/2012 16:51:41:
Dit was de oplossing, heel simpel eigenlijk.
Ik heb simpelweg nog een DIVje toegevoegd. Dus een div voor de border, daarin de 2 andere DIV's. Alles ziet er nu uit zoals het er uit hoort te zien. Bedankt voor alle hulp!
Gewijzigd op 24/01/2012 16:16:48 door Danny Spinhuis