Få footer til å ligge under Innhold ved heigth:auto

[raider000]

Nå har jeg pirket altfor lenge med dette:

 

Jeg har en enkel side.

 

I css har jeg satt #Innhold til å ha heigth:auto og min-heigth:600px.

 

Når jeg dermed fyller ut tekst i innhold, vil denne naturligvis bli lengre. Men hvordan hva må jeg skrive for at footer skal følge etter og være på slutten.

 

Samme med en #Midtstilt som ligger over hele siden. De holder seg på samme høyde.

 

Takk for svar.

[cronbach alpha]

Vet ikke heilt hvordan du har laget det ettersom du ikke har postet noen kode å se på. Men om du lager en Template.xhtml som du bruker som mal kan du for eksempel bruke en kodebit som ligner den under.

 

			<div id="test" class="left_test">
			<ui:insert name="test">Test</ui:insert>
		</div>

 

I CSS må du lage noe classen test kan forholde seg til, et eksempel på dette er postet under.

 

.center_test{
position: relative;
background-color: #dddddd;
padding: 5px;
}
.left_test{
background-color: #dddddd;
padding: 5px;
margin-left: 170px;
}
.right_test{
background-color: #dddddd;
padding: 5px;
margin: 0px 170px 0px 170px;
}

 

Denne vil utvide seg etterhvert som innhold blir lagt til!

Endret 9. april 2013 av cronbach alpha

[raider000]

Dette er en del av HTML-koden.

 

<div id="Center">
<div id="Innhold">
	<asp:ContentPlaceHolder ID="Content" runat="server"></asp:ContentPlaceHolder>
</div>
<footer>tekst</footer>
</div>

 

Center: Er bare en div jeg har laget for å sentrere siden i nettleseren + en skygge og rund border.

Innhold: Inneholder Contenplaceholder og det er kun denne som trenger å bli høyere ettersom innholdet blir større.

 

Når innholdet blir lengre enn 600 px får jeg ikke footer til å ligge under Innhold og heller ikke Center til å bli like lang slik at skygge og border kommer over hele siden.

 

CSS:

#Center {
position:relative;
width:601px;
height:auto;
min-height:900px;
margin-right:auto;
margin-left:auto;
border:1px solid #808080;
border-radius:20px;
box-shadow: 5px 5px 50px black;
}
#Innhold {
position:absolute;
width:600px;
height:auto;
min-height:600px;
top:244px;
left:0px;
background-color:#d0d0d0;
border-bottom:1px solid black;
}
footer {
color:grey;
font-size:9px;
position:absolute;
width:600px;
height:40px;
bottom:0px;
left:0px;
text-align:center;
vertical-align:middle;
padding:0px 0px 0px 0px;
}

 

Takk for svar!

[cronbach alpha]

Du kan ta en titt på denne http://jsfiddle.net/HjpAZ/2/

 

Har bare laget noe i farten, men som du ser har du min-height: 600px; som virker som den skal og når jeg passerer denne grensen utvider feltet seg og "bottom" følger med.

Endret 10. april 2013 av cronbach alpha

[Feh]

Annen løsning som fungerer om du ikke er avhengig av position:

 

#Center {
 width:600px;
 min-height:900px;
 margin:0 auto;
 border:1px solid #808080;
 border-radius:20px;
 box-shadow: 5px 5px 50px black;
 overflow:auto;
}
#Innhold {
 float:left;
 width:600px;
 margin-top:244px;
 background-color:#d0d0d0;
 border-bottom:1px solid black;
}
footer {
 float:left;
 clear:both;
 color:grey;
 font-size:9px;
 width:600px;
 height:40px;
 text-align:center;
 line-height:40px;
 padding:0;
}

 

http://jsfiddle.net/qNp8K/

Endret 10. april 2013 av Feh

[raider000]

@Feh: Fungerte ikke.

 

@cronbach alpha: Brukte noe av ditt til å lage noe.

 

Har nå fått:

 

#Center {
position:relative;
width:601px;
height:inherit;
min-height:900px;
margin-right:auto;
margin-left:auto;
border:1px solid #808080;
border-radius:20px;
box-shadow: 5px 5px 50px black;
}
#Innhold {
position:relative;
width:600px;
height:auto;
min-height:600px;
/*top:244px;
left:0px;*/
background-color:#d0d0d0;
border-bottom:1px solid black;
}
footer {
color:grey;
font-size:9px;
position:relative;
width:600px;
height:40px;
/*bottom:0px;
left:0px;*/
text-align:center;
vertical-align:middle;
padding:0px 0px 0px 0px;
}

 

Dette fungerer delvis, når jeg får lagt til noen margin, slik at det ser bedre ut.

 

Men når jeg gjør dette må min horisontale meny ligger før Innhold i HTML-koden (hvis ikke kommer den under Innhold på siden). Så er problemet at jeg har "dropdown" meny på et par av dem. De blir dermed skjult av Innhold.

 

Hvordan løser jeg det?

[Feh]

Bruk z-index.

[raider000]

Bruk z-index.

 

Takk!

[raider000]

Jeg får forresten hulrom mellom Header og Meny og Meny og innhold, men ikke mellom Innhold og footer.

 

Har prøvd å justere med margin, men det fungerer ikke. Hva kan det skyldes?

[raider000]

Bruk z-index.

 

Når jeg setter Innhold til å ha z-index:-1 fungerer menyen, men kan ikke bruke form som ligger i innholdsdel.

[Feh]

z-index angir jo i hvilke "layers" elementene skal ligge, så du må jo bare bruke hensiktsmessige tall slik at ting ikke blir borte for deg. Anbefaler deg å ta en titt her: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index

[raider000]

Det viser seg at det må være en feil i Meny-diven min. Det kommer altså et hvitt område over og under den, uansett hvor jeg plasserer den på siden.

 

Er det noen feil her?

 

<div id="Menu">	
	<ul id="trans-nav">
		<li><a href="#">Forside</a></li>
		<li class="bilde"><img src="#" alt="-" height="20px" ></li>
		<li><a href="#">Side 1</a></li>
		<li class="bilde"><img src="#" alt="-" height="20px" ></li>
		<li><a href="#">Side 2</a>
			<ul><li><a href="#">2a</a></li>
				<li><a href="#">2b</a></li>
				<li><a href="#">2c</a></li>
			</ul>
		</li>
		<li class="bilde"><img src="#" alt="-" height="20px" ></li>
		<li><a href="#">Side 3</a>
			<ul><li><a href="#">3a</a></li>
				<li><a href="#">3b</a></li>
			</ul>
		</li>
		<li class="bilde"><img src="#" alt="-" height="20px" ></li>
		<li><a href="#">Side 4</a></li>
	</ul>
	</div>

 

Jeg satt en stor rød strek langs det hele for å finne ut av det. Den kommer bare på høyresiden.

#Menu {
position:relative;
width:600px;
height:30px;
border:3px solid red;
display:inline;
text-align:center;
}

[radivx]

Hei,

Prøv å bytt ut

display: inline;

med

display: inline-block;

.

Inline elementer liker ikke å bli fortalt om høyde.

[raider000]

Hei,

Prøv å bytt ut

display: inline;

med

display: inline-block;

.

Inline elementer liker ikke å bli fortalt om høyde.

 

Det fungerte for det hvite området over Meny hvert fall.

 

Men ikke under. En annen litt pussig ting er:

- Når jeg har skrevet noe i Innhold blir området større enn om jeg ikke har gjort det (da er det bare 2-3px mellomrom).