Gå til innhold

CSS: Problemer med footer

Kenny Bones

Anbefalte innlegg

Kenny Bones

Kenny Bones

Skrevet
Skrevet (endret)

Hei! Sitter og styrer med html og css og blir ganske så gal av å få til denne footeren hovedsaklig.

Selve layouten ser nogenlunde slik ut:

 

 

layoutrb2.jpg

 

 

Problemet nå er hvordan footeren oppfører seg. Har lest en del på nettet inkludert denne siden og støter stadig på problemer. Dersom jeg setter footeren til "position: fixed" så ser alt egentlig korrekt ut bortsett fra at den ligger nederst på samme sted uansett hvor mye innhold det er i .mainrightcontainer.

På hjelpesiden står det at "position" skal være "absolute" og da ligger den korrekt nederst, men når innholdet i .mainrightcontainer blir større så blir footeren lagt over innholdet!

 

Prøvde ut denne siden og her er det akkurat sånn som jeg vil ha det. Men jeg får det ikke til, trolig fordi layouten av DIVs er annerledes. Så spørsmålet er da, må jeg endre hele layouten?

 

Alt sammen er wrappet av en DIV for å holde alt på plass. Poenget er at dersom selve innholdet er mindre enn viewport så skal footeren ligge nederst. Men dersom innholdet blir større så skal footeren følge etter DIVen som innholdet ligger i. Savvy? Så hvorfor er dette så vanskelig?? :cry:

 

Koden kan forsåvidt ses her:

 

***HTML***

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Velkommen til Kundeservice Bruekerstøtte</title>
<link href="style_new.css" rel="stylesheet" type="text/css" /></head>

<body class ="body">

<!-- Kode for wrap **[START]**-->

<div class="mainwrap" id="mainwrap">
 <div class="mainleftcontainer" id="mainleftcontainer">

<!-- Kode for venstremeny **[START]**-->
<div class="leftmenuwrap" id="leftmenuwrap">	<!-- Wrapper hele menyen-->


  <div class="leftmen_sec_a" id="leftmen_sec_a">
	   <img src="Html/Img/site/leftmenu_01.gif" alt="leftmenu_01"/><img src="Html/Img/site/leftmenu_02.gif" align="top" alt="leftmenu_02"/></div>  <!-- Første seksjon (hjelp & støtte) -->
	   <div class="leftmen_content" id="leftmen_content">
				  <p class="Leftmenutext_normal">Teksten som står her i denne boksen gjør til at DIVene på siden flytter seg nedover automatisk ut fra hvor mye innhold som er i menyen. Ser ut til å fungere bra uten at jeg trenger å lage breaks eller noe. Dette var litt merkelig fordi av og til fungerer det og av og til fungerer det ikke. Litt rart egentlig. </p>
  </div>

			  <div class="leftmen_sec_bottom" id="leftmen_sec_bottom"><img src="Html/Img/site/middle_05.gif" alt="middle_05"/></div>
			   <div class="leftmen_sec_b" id="leftmen_sec_b"><img src="Html/Img/site/annet_top_01.gif" alt="annet_top_01"/></div>
  <div class="leftmen_content" id="leftmen_content_b">
					   <p class="Leftmenutext_normal">Det samme gjelder egentlig teksten som står her også. Alt ser ut til å fungere som det skal nå. Hurra! Trallala, trallala, trallalalalala. Hoppsansei, hoppsansei, men jeg lurer på om det er noe slags problemer her også mon tro? Fordi i sted så ble det overflow i massevis her. Altså at skriften kommer bak en DIV her. Noe som selvfølgelig ikke skal skje! Hmm, litt merkelig men dette får da bli en vanlig test det vil jeg tro. Når prøver jeg enda en test og denne gangen virker det også som om at det fungerer helt fint! Hurra! Men jeg sliter fortsatt med at top-padding er doblet i Firefox. Kanskje det bare er Firefox som viser det riktig men at det er noe feil i IE7 mon tro?</p>
					   </div>
					 <div class="leftmen_sec_end" id="leftmen_sec_end"><img src="Html/Img/site/leftmenubottom.gif" alt="leftmenubottom"/></div>
</div>
<!-- Kode for venstremeny **[END]**-->
 </div>

<!-- Kode for innhold **[START]**-->

<div class="mainrightcontainer" id="mainrightcontainer"></div>
</div>
<div class="footer" id="footer"></div>

<!-- Kode for innhold **[END]**-->		

</div>  
<!-- Kode for wrap **[END]**-->



</body>
</html>

 

 

**CSS**

 

/*
*************************************************
** Kode som er gjeldende for hele siden [START]  **
*************************************************
*/
body {
background-color: #f3f6fa;
margin: 0px
}

p { margin: 0px;}

/*
*******************************************
** Kode som gjeldende for hele siden [END] **
*******************************************

***************************
** Hovedinnhold ** [START] **
***************************
*/
.mainwrap {
width: 100%;
position:relative; /* trengs for footer posisjonering*/
margin:0 auto; /* sentrerer, ikke i IE5 */
height:100% !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */

}

.mainleftcontainer {
float: left;
width: 255px;
height: 100%;
margin-bottom: 38px
}

.mainrightcontainer {
float: left;
width: 800px;
padding-top: 34px;
padding-right: 29px;
padding-bottom: 29px;
padding-left: 30px;
height: 100%;
margin: 0

}

.footer {
height: 37px;
clear: both;
background-image: url(Html/Img/site/footer.gif);
background-repeat: repeat-x;
position:relative;
width:100%;
bottom:0; /* stick to bottom */
float: left;

}

/*
************************
** Hovedinnhold [END]   **
************************


*****************************
** Venstremeny [START]	   **
*****************************
*/
.leftmenuwrap {
background-image: url(Html/Img/site/leftmenuspacer.gif);
background-repeat: repeat-y;
height: 1%;
}

.leftmen_sec_a {
height: 100%;
width: 255px;
float: left;
}

.leftmen_sec_b {
height: 100%;
width: 255px;
float: left
}

.leftmen_sec_bottom {
height: 3px;
width: 255px;
clear: both;
position: static;
}

.leftmen_sec_end {
height: 21px;
width: 255px;
clear: both;
position: static;
}

.leftmen_content{
float: left;
width: 184px;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-left: 30px;
}

.Leftmenutext_normal {
font-size: 10pt;
font-family: Arial, Helvetica, Verdana, sans-serif;
text-align: left;
line-height: normal;
font-weight: normal;
color: #467ddf;
font-style: normal;
text-decoration: none;
}

.Leftmenutext_normal_link {
font-size: 10pt;
font-family: Arial, Helvetica, Verdana, sans-serif;
text-align: left;
line-height: normal;
font-weight: normal;
color: #467ddf;
font-style: normal;
text-decoration: none;
}
.Leftmenutext_normal_link:hover {
text-decoration: underline
}
/*
*****************************
** Venstremeny [END]		 **
*****************************
*/

 

 

Det ser jo ut som at footeren legger seg nedenfor mainleftcontainer, altså menyen. Finnes det noen måte å kanskje få denne DIVen til å bli 100% height i størrelse sånn at denne DIVen automatisk er like stor som høyden i browservinduet? Da kan jeg isåfall legge til en -37px i margin på denne for å få footeren til å være nederst. Men jeg får det ikke til å funke. Tips mottas med enorm takknemlighet!

Endret av Kenny Bones
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
JohndoeMAKT

JohndoeMAKT

Skrevet
Skrevet (endret)

Det var ikke noe vanskelig å modifisere den siden til å passe eksempelet ditt som jeg har gjort under. Men jeg syntes eksempelet rett og slett er hårete med masser av negative margins og eksakte verdier som må brukes. Googler du omkring finner du nok bedre mer "korrekte" måter å få til en slik bunnfooter. Har du f.eks sett på alistapart?

 

Ellers kan jeg kommentere at du i din kode ikke avslutter head at du har "ø" og "å" i et UTF-8 dokument. ( ø skrives ø og å å )

 

** HTML **

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Velkommen til Kundeservice Brukerstøtte</title>
	<link rel="stylesheet" type="text/css" href="css.css" />
	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css_ie6.css" /><![endif]-->
</head>
<body>
	<div id="outerwrapper">
		<div id="innerwrapper">
			<div id="center">
				Center
			</div>
			<div id="left">
				Left
			</div>
			<br style="clear: both;"/>
		</div>
	</div>
	<div id="footer">
		Footer
	</div>
</body>
</html>

 

** css.css **

Klikk for å se/fjerne innholdet nedenfor

body, html {
height: 100%;
margin:0;
padding:0;
background-color: green;
}

#outerwrapper {
min-height: 100%;
margin-left: 250px;
}

#innerwrapper {
width: 100%;
float:left;
}

#left {
float:left;
width: 250px;
background-color: yellow;
margin-left: -250px;
padding-bottom: 50px;
}

#center {
float:right;
height: 100%;
width: 100%;
padding-bottom: 50px;
background-color:red;
}

#footer {
clear:both;
height: 50px;
width: 100%;
margin-top: -50px;
background-color: blue;
}

 

** css_ie6.css **

Klikk for å se/fjerne innholdet nedenfor

body div {
position: relative;
}

#outerwrapper {
height: 100%;
}

Endret av JohndoeMAKT
Lenke til kommentar
JohndoeMAKT

JohndoeMAKT

Skrevet
Skrevet

http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Det er for at det siste stilsettet bare skal leses av IE versjoner lavere enn 7.

 

IE6 støtter ikke "min-height" mens "height" oppfører seg på akkurat samme måte som standardkompatible med med "min-height", så for IE6 settes height.

 

For at du skal bruke float korrekt i IE6 må du til tider bruke "position:relative" av for meg ukjente grunner.

Lenke til kommentar
Kenny Bones

Kenny Bones

Skrevet
  • Forfatter
Skrevet

Hei, takk for alle svar! Ja, jeg vet det er en del kluss. Derfor skal jeg bruke denne malen istedet:

http://matthewjamestaylor.com/blog/perfect...n-left-menu.htm

 

Veldig smart måte å trikse seg til et godt resultat fordi han kun bruker % på alle margins osv. Samtidig er det wrappet opp ganske smart sånn at vinduet kan strekkes og gjøres mindre i hytt og pine uten at noe faller på feil plass! :)

 

Men footeren legger seg bare under de andre DIVene utfra hvor mye innhold som ligger i dem. Er det mulig å legge på en min-height på de DIVene slik at dersom det nesten ikke er innhold på siden så ligger footeren nederst i viewport, men om det blir mer innhold så legger den seg under slik som den allerede gjør? Har testet ut litt av hvert, men jeg får det slettes ikke til!

Lenke til kommentar
Kenny Bones

Kenny Bones

Skrevet
  • Forfatter
Skrevet

Har nå begynt å bruke den nye koden. Men har også litt problemer med overflow her.

I det originale stilsettet som blir brukt i lenken ovenfor ser jeg at det tydeligvis kun er beregnet for tekst.

Derfor blir det litt rart når jeg legger til bilder for menyen. Har prøvd med Overflow: Hidden og Visible uten at noen av disse blir riktig.

 

 

overflowww0.jpg

 

 

Som dere ser så blir selve menyen kuttet når jeg bruker Overflow: hidden. Og når jeg bruker Overflow: Visible så flytter innholdet seg bak menyen på en måte.

 

Den nye koden ser slik ut:

 

**HTML**

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<title>The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible.</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible." />
<meta name="keywords" content="The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<link href="new_test.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="colmask leftmenu">

<div class="colleft">
  <div class="col1">
		<!-- HOVEDINNHOLD START -->
	  <p>Her skal det ligge innhold</p>
		<p>InnholdInnholdInnholdInnholdInnholdInnhold</p>
		<p>InnholdInnholdInnholdInnholdInnholdInnholdInnhold</p>
		<p>InnholdInnholdInnholdInnholdInnholdInnhold</p>
		<p>InnholdInnholdInnholdInnholdInnholdInnholdInnholdInnholdInnholdInnholdInnholdInnholdIn
hold</p>
		<p>InnholdInnholdInnholdInnholdInnholdInnholdInnhold</p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
  </div>
		  <div class="col2">
		<!-- Venstremeny START -->

	 <div class="leftmen_sec_a" id="leftmen_sec_a">
	   <img src="Html/Img/site/leftmenu_01.gif" alt="leftmenu_01"/><img src="Html/Img/site/leftmenu_02.gif" align="top" alt="leftmenu_02"/></div>  <!-- Første seksjon (hjelp & støtte) -->
	   <div class="leftmen_content" id="leftmen_content">
				  <p class="Leftmenutext_normal">Teksten som står her i denne boksen gjør til at DIVene på siden flytter seg nedover automatisk ut fra hvor mye innhold som er i menyen. Ser ut til å fungere bra uten at jeg trenger å lage breaks eller noe. Dette var litt merkelig fordi av og til fungerer det og av og til fungerer det ikke. Litt rart egentlig. </p>
  </div>

			  <div class="leftmen_sec_bottom" id="leftmen_sec_bottom"><img src="Html/Img/site/middle_05.gif" alt="middle_05"/></div>
			   <div class="leftmen_sec_b" id="leftmen_sec_b"><img src="Html/Img/site/annet_top_01.gif" alt="annet_top_01"/></div>
  <div class="leftmen_content" id="leftmen_content_b">
					   <p class="Leftmenutext_normal">Det samme gjelder egentlig teksten som står her også. Alt ser ut til å fungere som det skal nå. Hurra! Trallala, trallala, trallalalalala. Hoppsansei, hoppsansei, men jeg lurer på om det er noe slags problemer her også mon tro? Fordi i sted så ble det overflow i massevis her. Altså at skriften kommer bak en DIV her. Noe som selvfølgelig ikke skal skje! Hmm, litt merkelig men dette får da bli en vanlig test det vil jeg tro. Når prøver jeg enda en test og denne gangen virker det også som om at det fungerer helt fint! Hurra! Men jeg sliter fortsatt med at top-padding er doblet i Firefox. Kanskje det bare er Firefox som viser det riktig men at det er noe feil i IE7 mon tro?</p>
		  </div>
					 <div class="leftmen_sec_end" id="leftmen_sec_end"><img src="Html/Img/site/leftmenubottom.gif" alt="leftmenubottom"/></div>

					 <div class="mainleftcontainer_bottomspacer" id="mainleftcontainer_bottomspacer"></div>
</div>
<!-- Kode for venstremeny **[END]**-->   
 </div>
</div>

</div>
<div id="footer">
This is supposed to be a footer</div>
</body>
</html>

 

 

**CSS**

 

/*  */
body {
margin:0;
padding:0;
font-size:90%;
background-color: #f3f6fa;		
}

p {margin: 0px;}

/* column container */
.colmask {
clear:both;
float:left;
width:100%;
overflow:hidden;

}
/* common column settings */
.colright,
.colleft {
float:left;
width:100%;
position:relative;
height:100%;

}
.col1,
.col3 {
float:left;
position:relative;
overflow:hidden;
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 1em;
padding-left: 0;

}

.col2 {
position:relative;
overflow: hidden;
margin: 0px;
float: left;
}
/* 2 Column (VENSTREMENY) settings */
.leftmenu {
width: 85%;

			/* right column background colour */
}
.leftmenu .colleft {
right:75%;


}
.leftmenu .col1 {
width:71%;				/* right column content width */
left:102%;


}
.leftmenu .col2 {
width:21%;				/* (Hovedmeny venstre width (kolonne width minus left og right padding) */
left:4%;				/* (right column left and right padding) plus (left column left padding) */
background-image: url(Html/Img/site/leftmenuspacer.gif);
background-repeat: repeat-y;
float: left;

}

.leftmen_sec_a {
height: 100%;
width: 255px;
float: left;

}	

 .leftmen_sec_b {
	 height: 100%;
	 width: 255px;
	 float: left
}

 .leftmen_sec_bottom {
	 height: 3px;
	 width: 255px;
	 clear: both;
	 position: static;
}

 .leftmen_sec_end {
height: 80px;
width: 255px;
clear: both;
position: static;
background-color: #F3F6FA;
}

 .leftmen_content{
float: left;
width: 184px;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-left: 30px;
 }

 .Leftmenutext_normal {
	 font-size: 10pt;
	 font-family: Arial, Helvetica, Verdana, sans-serif;
	 text-align: left;
	 line-height: normal;
	 font-weight: normal;
	 color: #467ddf;
	 font-style: normal;
	 text-decoration: none;
}

 .Leftmenutext_normal_link {
	 font-size: 10pt;
	 font-family: Arial, Helvetica, Verdana, sans-serif;
	 text-align: left;
	 line-height: normal;
	 font-weight: normal;
	 color: #467ddf;
	 font-style: normal;
	 text-decoration: none;

}


 .Leftmenutext_normal_link:hover {
	 text-decoration: underline

}



/* Footer styles */
#footer {
clear:both;
position:relative;
bottom: 0px;
background-image: url(Html/Img/site/footer.gif);
background-repeat: repeat-x;
height: 57px;
width: 100%;
}

 

 

Det er forøvrig akkurat det samme som skjer her i originalsettet til Mathew James Taylor.

Lenke til kommentar
FrodeNilsen

FrodeNilsen

Skrevet
Skrevet
Hei! Sitter og styrer med html og css og blir ganske så gal av å få til denne footeren hovedsaklig.

Selve layouten ser nogenlunde slik ut:

 

 

layoutrb2.jpg

 

 

Problemet nå er hvordan footeren oppfører seg. Har lest en del på nettet inkludert denne siden og støter stadig på problemer. Dersom jeg setter footeren til "position: fixed" så ser alt egentlig korrekt ut bortsett fra at den ligger nederst på samme sted uansett hvor mye innhold det er i .mainrightcontainer.

På hjelpesiden står det at "position" skal være "absolute" og da ligger den korrekt nederst, men når innholdet i .mainrightcontainer blir større så blir footeren lagt over innholdet!

 

Prøvde ut denne siden og her er det akkurat sånn som jeg vil ha det. Men jeg får det ikke til, trolig fordi layouten av DIVs er annerledes. Så spørsmålet er da, må jeg endre hele layouten?

 

Alt sammen er wrappet av en DIV for å holde alt på plass. Poenget er at dersom selve innholdet er mindre enn viewport så skal footeren ligge nederst. Men dersom innholdet blir større så skal footeren følge etter DIVen som innholdet ligger i. Savvy? Så hvorfor er dette så vanskelig?? :cry:

 

Koden kan forsåvidt ses her:

 

***HTML***

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Velkommen til Kundeservice Bruekerstøtte</title>
<link href="style_new.css" rel="stylesheet" type="text/css" /></head>

<body class ="body">

<!-- Kode for wrap **[START]**-->

<div class="mainwrap" id="mainwrap">
 <div class="mainleftcontainer" id="mainleftcontainer">

<!-- Kode for venstremeny **[START]**-->
<div class="leftmenuwrap" id="leftmenuwrap">	<!-- Wrapper hele menyen-->


  <div class="leftmen_sec_a" id="leftmen_sec_a">
	   <img src="Html/Img/site/leftmenu_01.gif" alt="leftmenu_01"/><img src="Html/Img/site/leftmenu_02.gif" align="top" alt="leftmenu_02"/></div>  <!-- Første seksjon (hjelp & støtte) -->
	   <div class="leftmen_content" id="leftmen_content">
				  <p class="Leftmenutext_normal">Teksten som står her i denne boksen gjør til at DIVene på siden flytter seg nedover automatisk ut fra hvor mye innhold som er i menyen. Ser ut til å fungere bra uten at jeg trenger å lage breaks eller noe. Dette var litt merkelig fordi av og til fungerer det og av og til fungerer det ikke. Litt rart egentlig. </p>
  </div>

			  <div class="leftmen_sec_bottom" id="leftmen_sec_bottom"><img src="Html/Img/site/middle_05.gif" alt="middle_05"/></div>
			   <div class="leftmen_sec_b" id="leftmen_sec_b"><img src="Html/Img/site/annet_top_01.gif" alt="annet_top_01"/></div>
  <div class="leftmen_content" id="leftmen_content_b">
					   <p class="Leftmenutext_normal">Det samme gjelder egentlig teksten som står her også. Alt ser ut til å fungere som det skal nå. Hurra! Trallala, trallala, trallalalalala. Hoppsansei, hoppsansei, men jeg lurer på om det er noe slags problemer her også mon tro? Fordi i sted så ble det overflow i massevis her. Altså at skriften kommer bak en DIV her. Noe som selvfølgelig ikke skal skje! Hmm, litt merkelig men dette får da bli en vanlig test det vil jeg tro. Når prøver jeg enda en test og denne gangen virker det også som om at det fungerer helt fint! Hurra! Men jeg sliter fortsatt med at top-padding er doblet i Firefox. Kanskje det bare er Firefox som viser det riktig men at det er noe feil i IE7 mon tro?</p>
					   </div>
					 <div class="leftmen_sec_end" id="leftmen_sec_end"><img src="Html/Img/site/leftmenubottom.gif" alt="leftmenubottom"/></div>
</div>
<!-- Kode for venstremeny **[END]**-->
 </div>

<!-- Kode for innhold **[START]**-->

<div class="mainrightcontainer" id="mainrightcontainer"></div>
</div>
<div class="footer" id="footer"></div>

<!-- Kode for innhold **[END]**-->		

</div>  
<!-- Kode for wrap **[END]**-->



</body>
</html>

 

 

**CSS**

 

/*
*************************************************
** Kode som er gjeldende for hele siden [START]  **
*************************************************
*/
body {
background-color: #f3f6fa;
margin: 0px
}

p { margin: 0px;}

/*
*******************************************
** Kode som gjeldende for hele siden [END] **
*******************************************

***************************
** Hovedinnhold ** [START] **
***************************
*/
.mainwrap {
width: 100%;
position:relative; /* trengs for footer posisjonering*/
margin:0 auto; /* sentrerer, ikke i IE5 */
height:100% !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */

}

.mainleftcontainer {
float: left;
width: 255px;
height: 100%;
margin-bottom: 38px
}

.mainrightcontainer {
float: left;
width: 800px;
padding-top: 34px;
padding-right: 29px;
padding-bottom: 29px;
padding-left: 30px;
height: 100%;
margin: 0

}

.footer {
height: 37px;
clear: both;
background-image: url(Html/Img/site/footer.gif);
background-repeat: repeat-x;
position:relative;
width:100%;
bottom:0; /* stick to bottom */
float: left;

}

/*
************************
** Hovedinnhold [END]   **
************************


*****************************
** Venstremeny [START]	   **
*****************************
*/
.leftmenuwrap {
background-image: url(Html/Img/site/leftmenuspacer.gif);
background-repeat: repeat-y;
height: 1%;
}

.leftmen_sec_a {
height: 100%;
width: 255px;
float: left;
}

.leftmen_sec_b {
height: 100%;
width: 255px;
float: left
}

.leftmen_sec_bottom {
height: 3px;
width: 255px;
clear: both;
position: static;
}

.leftmen_sec_end {
height: 21px;
width: 255px;
clear: both;
position: static;
}

.leftmen_content{
float: left;
width: 184px;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-left: 30px;
}

.Leftmenutext_normal {
font-size: 10pt;
font-family: Arial, Helvetica, Verdana, sans-serif;
text-align: left;
line-height: normal;
font-weight: normal;
color: #467ddf;
font-style: normal;
text-decoration: none;
}

.Leftmenutext_normal_link {
font-size: 10pt;
font-family: Arial, Helvetica, Verdana, sans-serif;
text-align: left;
line-height: normal;
font-weight: normal;
color: #467ddf;
font-style: normal;
text-decoration: none;
}
.Leftmenutext_normal_link:hover {
text-decoration: underline
}
/*
*****************************
** Venstremeny [END]		 **
*****************************
*/

 

 

Det ser jo ut som at footeren legger seg nedenfor mainleftcontainer, altså menyen. Finnes det noen måte å kanskje få denne DIVen til å bli 100% height i størrelse sånn at denne DIVen automatisk er like stor som høyden i browservinduet? Da kan jeg isåfall legge til en -37px i margin på denne for å få footeren til å være nederst. Men jeg får det ikke til å funke. Tips mottas med enorm takknemlighet!

 

Det er klokt i å ta utgangspunkt i hva som burde funke i de fleste nettlesere, for så å lage ett design utifra dette. Hvis du ikke gjør dette, må du lage workarounds for hver nettleser som har særegenheter, noe andre i denne tråden har vist eksempler på. Slike workarounds vil kun funke for enkelte nettlesere men ikke alle. Mange ender med å skrive tonnevis av kode for alle mulige eventualiteter eller får en side som mange ikke kan lese.

 

Problemet er at attributtet min height eller prosent skalering ikke støttes skikkelig eller likt av alle nettlesere. Du kan lese mer om min-height her:

http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height

 

Hvis du foretrekker en enkel løsning vil det være å lage en boks til venstre og en tilhøyre. Ved å plassere disse i naturlig rekkefølge vil alle, uansett nettleser, kunne lese siden din.

 

Begge plasseres absolutt, med fast bredde på den til venstre. Ved å sette footer som ett block element nederst i den høyre blokken vil footer se naturlig ut, på nesten alle nettlesere, men plassering vil variere.

 

Hele poenget med markup er at det ikke er ett språk for formatering, men ett språk for å markere betydning og relasjon mellom elementene. CSS brukes til formatering, men du kan ikke vite om de som leser siden er blinde, bruker egen CSS, eller bruker digre fonter da de er svaksynte, etc.

 

Jeg har ett ekselmpel du kan ta en titt på her:

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Liten mal</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

</head>

<body>

<div style="position: absolute; top: 0px; left: 0px; width: 190px;background-color: red; height: 100%;"><p>Venstre meny</p></div>

<div style="position: absolute; top: 0px; left: 200px; background-color: green; height: 100%;">

<div style="background-color: blue; min-height:80%;"><p>Hovedboksen, bla bla bla bla bla</p></div>

<div style="background-color: yellow;"><p>footer</p></div>

</div>

</body>

</html>

 

 

 

Har kun brukt inline CSS kun for å illustrere hvilken style elementer som er brukt hvor.

 

Noen gamle nettlesere støtter ikke CSS i det hele tatt, da kommer div elementene fortløpende under hverandre, men siden er fult ut leslig.

 

Noen støtter deler av CSS. De støtter da normalt absolute position. De vil lage en venstre og en høyre boks.

 

Noen støtter height, noe som vil skalere vertikalt til 100%. Ikke alle støtter min-height, noe som vil føre til at footer kommer rett under hovedboksen.

 

De som leser siden din på en mobiltelefon vil typisk bruke en nettleser som ikke tar hensyn til absolute position, men de kan ta hensyn til bakgrunnsfarge. De ignorer ofte marger. Du kan lage egen css for mobil lesning.

 

Blinde er ikke interessert i formateringen din, de vil typisk kun lese markup.

 

Det er bare å fjerne de forskjellige style elementene, så ser du hvordan ting endrer seg.

 

Jeg vet at dette ikke var det du var ute etter, men denne løsningen er mye mindre pes, og er i tråd med filosofien til html. Selv en nettleser med html 3.2 kan lese denne siden.

 

Du kan også med fordel validere kildekoden på w3c.org. Du burde også lære deg hvordan du skriver <>&"øæå etc. i html. Du finner hele listen her:

http://www.w3.org/TR/html401/sgml/entities.html

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...