Forum Mjukvara Programmering och digitalt skapande Tråd

En footer som täcker 100% bredd och en div ovanför som har negativ marginal neråt ?

1
Skriv svar
Permalänk
Medlem
●

En footer som täcker 100% bredd och en div ovanför som har negativ marginal neråt ?

Godkväll.

Har googlat problemet, och vet inte om det är jag som suger på att googla eller om det bara är svårt att hitta, men iaf.

Jag håller på med en design nu, ett slutarbete i kursen Multimedia B på gymnasiet, och jag har en header som täcker 100% av bredden på sidan. I den (eller egentligen under) ligger det tre divar, en med loggan till sidan, och på vardera sidan om den två stycken divar. Dessa har en negativ marginal uppåt, så de ligger där de ska.

Mitt problem är iallafall att jag vill ha exakt samma sak på nederdelen av sidan, men om jag lägger en div innan footern med negativ marginal neråt så fuckar hela layouten ur om textinnehållet på sidan överstiger "mitten-divens" min-height. Footern ligger kvar där den ligger, men divarna flyttas neråt. Det jag vill uppnå är ju att de tre divarna ska ligga ovanpå footern hela tiden, oavsett textinnehåll.

Någon som har en ide ? Säg till ifall ni vill ha en mer utförlig beskrivning av problemet så kan jag bifoga bilder osv också.

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Du har möjligvis inte lite nuvarande kod att visa? Det blir alltid lättare att se problemet och finna en lösning då.

Visa signatur

Är du lycklig nu?

Frågor och funderingar angående modereringen tas med mail, inte genom forumet. dennizpop@sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag tror att du vill använda en lite annan teknik för att lösa problemet. Negativa marginaler är inte det optimala sättet för att lösa problemet. Det du vill använda är elementet "float: left". Här är ett litet exempel:

<div id="wrapper" style="width: 100%;">
	<div id="header" style="width: 100%; height: 100px; float:left; background-color: green;">
		<div class="placeholder" style="width: 30%; height: 100%; float: left; background-color: red">
		 
		</div>
		<div id="logo" style="width: 40%; height: 100%;float: left; background-color: white;">
			<h1>Logo</h1>
		</div>
		<div class="placeholder" style="width: 30%; height: 100%; float: lefth; background-color: red">
		 
		</div>
	</div>
	<div id="content" style="width: 100%; height: 300px; float: left; background-color: blue;">
		<h1>Content</h1>
	</div>
	<div id="footer" style="width: 100%; height: 100px; float:left; background-color: green;">
		<div class="placeholder" style="width: 30%; height: 100%; float: left; background-color: red">
		 
		</div>
		<div id="footer_logo" style="width: 40%; height: 100%;float: left; background-color: white;">
			<h1>Logo</h1>
		</div>
		<div class="placeholder" style="width: 30%; height: 100%; float: lefth; background-color: red">
		 
		</div>
	</div>
</div>
Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara