Margin-top probleem
Hallo,
Ik ben bezig met een layout te coderen maar ik loopt momenteel vast.
Maar loop vast, ik heb momenteel dit:
http://upcraft.nl/newproject/
Maar me zoek balk wilt niet naar beneden ... wat doe ik hier fout?
Wat hij doet is: Hij maakt 75px verschil tussen zwarte balk en zoekbalk+slider maar de slider moet op zijn plaats blijven. zoek balk moet 75px naar beneden in de slider zelf
Mvg
Ik ben bezig met een layout te coderen maar ik loopt momenteel vast.
Maar loop vast, ik heb momenteel dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#slider {
background: url(images/slider.png) center no-repeat #03090e;
height: 242px;
width: 100%;
}
#slider .zoek_balk {
background:url(images/zoek_content.png);
height: 74px;
width: 1000px;
margin-top: 75px;
}
background: url(images/slider.png) center no-repeat #03090e;
height: 242px;
width: 100%;
}
#slider .zoek_balk {
background:url(images/zoek_content.png);
height: 74px;
width: 1000px;
margin-top: 75px;
}
http://upcraft.nl/newproject/
Maar me zoek balk wilt niet naar beneden ... wat doe ik hier fout?
Wat hij doet is: Hij maakt 75px verschil tussen zwarte balk en zoekbalk+slider maar de slider moet op zijn plaats blijven. zoek balk moet 75px naar beneden in de slider zelf
Mvg
Probeer eens position relative in .zoek_balk.
Tim Slootweg op 14/03/2013 02:05:04:
Probeer eens position relative in .zoek_balk.
Veranderd helaas niks aan?
Dit is een feature van CSS die "margin collapsing" heet. Omdat er geen tekst in je slider-box staat, neemt hij de top margin samen met de top margin van zijn eerste child box.
Als je iets van content in de slider box zet (desnoods een ) is het probleem verholpen.
Een nettere manier is om je zoek-box de property display:inline-block te geven. Of position:absolute, maar ik denk niet dat je dat wilt.
Als je iets van content in de slider box zet (desnoods een ) is het probleem verholpen.
Een nettere manier is om je zoek-box de property display:inline-block te geven. Of position:absolute, maar ik denk niet dat je dat wilt.
Gewijzigd op 14/03/2013 08:26:06 door Willem vp
Willem vp op 14/03/2013 08:13:48:
Dit is een feature van CSS die "margin collapsing" heet. Omdat er geen tekst in je slider-box staat, neemt hij de top margin samen met de top margin van zijn eerste child box.
Als je iets van content in de slider box zet (desnoods een ) is het probleem verholpen.
Een nettere manier is om je zoek-box de property display:inline-block te geven. Of position:absolute, maar ik denk niet dat je dat wilt.
Als je iets van content in de slider box zet (desnoods een ) is het probleem verholpen.
Een nettere manier is om je zoek-box de property display:inline-block te geven. Of position:absolute, maar ik denk niet dat je dat wilt.
Ik heb toegevoegd, maar nu reageer die nog niet op margin-top? (zie site).
Tip: gebruik http://jsfiddle.net/, dan is het makkelijk om je te helpen =)
Is dit wat je bedoeld?
http://jsfiddle.net/nqLaW/
(float: left toegevoegd aan .zoekbalk)
Is dit wat je bedoeld?
http://jsfiddle.net/nqLaW/
(float: left toegevoegd aan .zoekbalk)
float:left heft ook de margin collapse op, maar heeft weer andere bij-effecten die display:inline-block niet heeft.
Maurice vB op 14/03/2013 09:27:58:
Tip: gebruik http://jsfiddle.net/, dan is het makkelijk om je te helpen =)
Is dit wat je bedoeld?
http://jsfiddle.net/nqLaW/
(float: left toegevoegd aan .zoekbalk)
Is dit wat je bedoeld?
http://jsfiddle.net/nqLaW/
(float: left toegevoegd aan .zoekbalk)
Haha dat werkt aardig, alleen als nu margin: 0 auto; toevoeg dan gaat die weer omhoog? Ik ben nog niet helemaal een held in css ...
Die margin: 0 auto staat onder de margin-top; de waarde van margin-top wordt dus overschreven.
Waarschijnlijk wil je iets als margin: 75px auto 0 (en dan de margin-top weghalen)
Toevoeging op 14/03/2013 09:58:53:
O ja, die auto-margin werkt niet in combinatie met float:left. Dat is een van die bij-effecten waar ik het over had. ;-)
Waarschijnlijk wil je iets als margin: 75px auto 0 (en dan de margin-top weghalen)
Toevoeging op 14/03/2013 09:58:53:
O ja, die auto-margin werkt niet in combinatie met float:left. Dat is een van die bij-effecten waar ik het over had. ;-)
Willem vp op 14/03/2013 09:57:06:
Die margin: 0 auto staat onder de margin-top; de waarde van margin-top wordt dus overschreven.
Waarschijnlijk wil je iets als margin: 75px auto 0 (en dan de margin-top weghalen)
Toevoeging op 14/03/2013 09:58:53:
O ja, die auto-margin werkt niet in combinatie met float:left. Dat is een van die bij-effecten waar ik het over had. ;-)
Waarschijnlijk wil je iets als margin: 75px auto 0 (en dan de margin-top weghalen)
Toevoeging op 14/03/2013 09:58:53:
O ja, die auto-margin werkt niet in combinatie met float:left. Dat is een van die bij-effecten waar ik het over had. ;-)
Heb float: left; toegevoegd aan slider nu werkt het wel, bedankt voor jullie hulp! :D
Gewijzigd op 14/03/2013 10:41:52 door Robert Arissen
Robert Arissen op 14/03/2013 10:37:50:
Heb float: left; toegevoegd aan slider nu werkt het wel, bedankt voor jullie hulp! :D
Maar die float:left combineer je met een width van 100%, dat vind ik dan ook weer een rare constructie. ;-)




