Margin-top probleem

Door Robert Arissen op 13-03-2013 23:02

2.120 views

Hallo,

Ik ben bezig met een layout te coderen maar ik loopt momenteel vast.

Maar loop vast, ik heb momenteel dit:


#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;

	}


<div id="slider">
        	<div class="zoek_balk"></div>
        </div>

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

Tim S

14-03-2013 02:05

Probeer eens position relative in .zoek_balk.

Robert Arissen

14-03-2013 07:29

Tim Slootweg op 14/03/2013 02:05:04

Probeer eens position relative in .zoek_balk.

Veranderd helaas niks aan?

Willem vp

14-03-2013 08:13 gewijzigd op 14-03-2013 08:26

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.

Robert Arissen

14-03-2013 08:52

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.

Ik heb   toegevoegd, maar nu reageer die nog niet op margin-top? (zie site).

P-ter AA

14-03-2013 09:27

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)

Willem vp

14-03-2013 09:53

float:left heft ook de margin collapse op, maar heeft weer andere bij-effecten die display:inline-block niet heeft.

Robert Arissen

14-03-2013 09:55

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)

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 ...

Willem vp

14-03-2013 09:57

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)

[size=xsmall]Toevoeging op 14/03/2013 09:58:53:[/size]

O ja, die auto-margin werkt niet in combinatie met float:left. Dat is een van die bij-effecten waar ik het over had. ;-)

Robert Arissen

14-03-2013 10:37 gewijzigd op 14-03-2013 10:41

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)

[size=xsmall]Toevoeging op 14/03/2013 09:58:53:[/size]

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

Willem vp

14-03-2013 13:57

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. ;-)

Reageren

Inloggen om te reageren