Gå til innhold

[Løst]Hvordan få innholdet til å sitte fast i bunn?

Pludderhose

Anbefalte innlegg

Pludderhose

Pludderhose

Skrevet
Skrevet

Hei! Jeg holder på å lage en portfolio der jeg bruker CSS til til å lage layouten. Det meste har gått greit, men nå har jeg støtt på et problem. Jeg skulle gjerne hatt innholdet til å 'henge fast' i bunnen av siden slik at bakgrunnen på innholdet vil være like lang uansett hvor mye innhold som faktisk er på siden. Jeg har googlet og vært gjennom utallige tutorials uten å bli noe særlig klokere, og jeg lurer på om problemet er at layouten består av to kolonner, og det bare er den ene som skal gå helt ned. Er det noen måte å fikse dette på?

 

Jeg beklager om jeg forklarer dårlig, men her er linken til hjemmesiden min. Jeg vil altså gjerne at innholdet (det sorte) skal strekke seg helt ned til bunnen av browservinduet.

 

Jeg regner med at det er i CSSen noe er galt, så jeg slenger med linken til stilarket mitt også.

 

Takk for eventuelt svar! :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
jtfidje

jtfidje

Skrevet
Skrevet (endret)

Litt vanskelig når jeg ikkje kan sitte å dille med det selv, men hvis du sier at alle de div'ene som "content" er i også har height: 100%;. Prøv det og se hva som skjer?

 

Viktig at <body> også har en height på 100%. Ville satt den også i CSS'en.

 

Edit:

 

Ser jo du allerede har det slik :p Skal finne en løsning til deg ;)

Endret av The Covenant
Lenke til kommentar
jtfidje

jtfidje

Skrevet
Skrevet

Da har jeg forslag til løsning: P.S. du må endre URL'ene :p

 

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>Hovedsiden</title>

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

</head>

 

<body>

 

<table id="wrapper">

<tr>

<td colspan="2">

<img src="http://www.medialinjen.no/mupe1604/Portfolio/header.jpg" />

</td>

<tr>

<td valign="top">

<ul>

<li><a href="index.html">Hjem</a></li>

<li><a href="foto.html">Foto</a></li>

<li><a href="design.html">Design</a></li>

<li><a href="film.html">Film</a></li>

<li><a href="kontakt.html">Kontakt</a></li>

</ul>

</td>

<td id="content">

<p>Velkommen til Pernilles portfolio.</p>

</td>

</tr>

</table>

</body>

</html>

 

CSS:

 

@charset "UTF-8";

/* CSS Document */

 

html, body {

font-family:Georgia, "Times New Roman", Times, serif;

color:#FFFFFF;

background-image:url(http://www.medialinjen.no/mupe1604/Portfolio/background-stars-and-nebula.jpg);

margin:0px;

padding:0px;

height:100%;

}

 

h1 {

font-size:20px;

}

 

ul

{

list-style-type:none;

padding:0px;

margin:0px;

}

 

li

{

background-image:url(http://www.medialinjen.no/mupe1604/Portfolio/menubackground.png);

background-position:left;

background-repeat:no-repeat;

padding:6px;

margin-bottom:1px;

}

 

#wrapper {

height:100%;

position:relative;

text-decoration:none;

width:500x;

margin-left: 100px;

padding:0px;

}

 

#content {

height:100%;

position:relative;

background-color:#000000;

margin:0px;

padding:5px;

width: 400px;

}

 

/* +++++ LINKER +++++ */

 

a:link {

color:#993366;

text-decoration:none;

}

 

a:visited {

color:#993366;

text-decoration:none;

}

 

a:hover {

color:#006666;

text-decoration:none;

}

 

a:active {

color:#993366;

text-decoration:none;

}

Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet (endret)

Problemet var at du hadde satt min-height på #content til 100% og ikke en bestemt høyde.

 

Har fikset litt andre ting for deg, så hvis du vil må du gjerne bruke det jeg har skrevet til deg :) Hvis ikke er det bare å endre min-height til en eller annen høyde som passer deg ;)

 

Edit: Clearfixen som jeg har satt inn er bare nødvendig om du har skal ha enda en div under #left og #right :)

 

<!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>Hovedsiden</title>
<style type="text/css">

div, a, ul, li, img, p {
	margin:0;
	padding:0;
	outline:none;
	border:none;
}

body {
	background:#FFFFFF url("img/background-stars-and-nebula.jpg") no-repeat;
}

.clearfix {
	clear:both;
}

#wrapper {
	width:610px;
	margin:0 auto;
	padding:0;
}

#left {
	float:left;
	width:110px;
	margin-top:100px;
}

	#left ul {
		width:110px;
		overflow:hidden;
		list-style:none;
		padding:0;
	}

		#left ul li {
			background:#000000;
			width:100px;
			text-align:right;
			padding:5px 10px 5px 0;
			margin:0 0 1px 0;
			-moz-border-radius-topleft:5px;
			-moz-border-radius-bottomleft:5px;
			-webkit-border-top-left-radius:5px;
			-webkit-border-bottom-left-radius:5px;
		}

			#left ul li a {
				text-decoration:none;
				color:#993366;
			}

				#left ul li a:hover {
					color:#006666;
				}

#right {
	float:right;
	width:500px;
}
	#right #header {
		width:500px;
		background:#000000 url("img/header.jpg") no-repeat;
	}

	#right #content {
		padding:20px;
		color:white;
		background:#000000;
		min-height:110px;
	}



</style>
</head> 

<body> 

<div id="wrapper"> 
<div id="left"> 
 <ul> 
  <li><a href="index.html">Hjem</a></li> 
  <li><a href="foto.html">Foto</a></li> 
  <li><a href="design.html">Design</a></li> 
  <li><a href="film.html">Film</a></li> 
  <li><a href="kontakt.html">Kontakt</a></li> 
 </ul> 
</div> 
<div id="right"> 
 <div id="header"><img src="img/header.jpg" /></div> 
 <div id="content"> 
   <p>Velkommen til Pernilles portfolio.</p> 
 </div> 
</div>
<div class="clearfix"></div>
</div> 

</body> 
</html>

Endret av Lek1
Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet
Problemet med å endre min-height til en konkret høyde er at bakgrunnen vil se forskjellig ut i forhold til hvilken oppløsning man har. Har man lav oppløsning må man scrolle ned til ingenting, har man høy blir den for kort, etc.

 

Nå vil jo #content være like høy som menyen uansett hvilken oppløsning man bruker. Forsto det slik at det var noe sånt TS ville ha.

 

Tror ikke 110px gjør at du må scrolle så mye..

Lenke til kommentar
Pludderhose

Pludderhose

Skrevet
  • Forfatter
Skrevet (endret)

Jeg tror ikke jeg forklarte bra nok. :p

 

Jeg vil ikke at content skal være like lang som menyen, men at den skal strekke seg helt ned til bunnen av browservinduet uavhengig av hvor mye innhold det er på siden. Altså at det sorte går helt ned.

Endret av Pludderhose
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...