CSS + XHTML - Trenger hjelp med høyde på div

prfssrhlm · 25. april 2009

Ok, jeg har et relativt komplisert problem og enhver hjelp jeg kan få vil bli satt stor pris på.

Websiden i seg selv skal ha et relativt enkelt design. Det som kompliserer det hele er at jeg

ønsker/er nødt til å ha div'er med semitransparent bakgrunn hvor innholdet skal være over et bakgrunnsbilde i body.

Det hele begynte ganske enkelt, jeg tok rett og slett å lagde et bilde på 1x1 px med alpha på 40% i PS og satt det som bakgrunnsbilde i div'en med repeat på. Dette funket selvfølgelig helt fint. Det vil si det funket helt fint i Firefox, mens i IE tok det en evighet å tegne alle pixelene.

Så jeg var nødt til å finne en annen løsning. Etter litt søking så fant jeg en smart løsning. Jeg kunne rett og slett sette inn et img i hmtl-koden og skalere dette til 100% og sette z-index på bildet til -1. Genialt.

For å få teksten i div'en til å vises over bildet, så var jeg nødt til å sette position relative på div'en og position absolute på teksten. Sånn. Da hadde jeg tekst over mitt halvgjennomsiktige bakgrunnsbilde som funket flott i alle nettlesere jeg har prøvd det i.

Men så var det nok et problem. I og med at tekst div'en er posisjonert absolute, så vil ikke bakgrunnsbildet strekke seg i forhold til innholdet i text div'en. Hadde dette vært en side med innhold som ville vært mer eller mindre fast ville det ikke vært noe stress, men innholdet kommer til å være høyst dynamisk er dette key.

For dere som fortsatt leser og muligens har hatt samme problem dere gjerne ville sett løst, her er koden:

CSS:

html{background: #000;}
body
{
background: red;
color: #FFF;
font-family: Trebuchet MS;
}
#wrap
{
width: 62.5em;
margin: 0 auto;
}
#header_menu 
{
background: #000;
border: 1px solid #820000;
margin: 1em 0;
-moz-border-radius-topleft: 0.44em;
-webkit-border-top-left-radius: 0.44em;
-moz-border-radius-topright: 0.44em;
-webkit-border-top-right-radius: 0.44em;
-moz-border-radius-bottomleft: 0.44em;
-webkit-border-bottom-left-radius: 0.44em;
-moz-border-radius-bottomright: 0.44em;
-webkit-border-bottom-right-radius: 0.44em;
}
#header_menu li 
{
display: inline;
margin: 0 .1em;
padding: .3em .3em;
}
#header_menu a
{
font-size: 1em;
}
#header
{
padding: 3em 0 0 .7em;
}
#header h1
{
letter-spacing: -4px;
font-weight: bold;
font-size: 380%;
line-height: 90%;
}
#header li:hover
{
background-color: #820000;
}
#leftCol
{
border: 1px solid #820000;
-moz-border-radius-topleft: 0.44em;
-webkit-border-top-left-radius: 0.44em;
-moz-border-radius-topright: 0.44em;
-webkit-border-top-right-radius: 0.44em;
-moz-border-radius-bottomleft: 0.44em;
-webkit-border-bottom-left-radius: 0.44em;
-moz-border-radius-bottomright: 0.44em;
-webkit-border-bottom-right-radius: 0.44em;
float: left;
}
#rightCol
{
position: relative;
border: 1px solid #820000;
-moz-border-radius-topleft: 0.44em;
-webkit-border-top-left-radius: 0.44em;
-moz-border-radius-topright: 0.44em;
-webkit-border-top-right-radius: 0.44em;
-moz-border-radius-bottomleft: 0.44em;
-webkit-border-bottom-left-radius: 0.44em;
-moz-border-radius-bottomright: 0.44em;
-webkit-border-bottom-right-radius: 0.44em;
overflow: hidden;
width: 300px;
float: right;

}
#footer
{
clear: both;
}
.dialog
{
position: relative;
float: left;
top: 0px;
left: 0px;	
width: 40em;
}
.txtDiv
{
position: absolute;
top: 0;
left: 0;
z-index: 3;

}
.dialog h2
{
font-size: 300%;
margin: .4em 0 .4em 0;
line-height: 0;
}
.dialog hr
{
width: 100%;
color: #820000;
}
.dialog h3
{
font-size: 70%;
margin: 0 0 2em 0;
line-height: 0
}
.trans_bg
{
z-index: 0;
}
a{
color: #DDD;
text-decoration: none;
border-bottom: 1px dotted #820000;
}
a:hover
{
color: #820000;
}
p
{
font-weight: 300;
line-height: 110%;
letter-spacing: 0.005em;
word-spacing: 0.03em;
}

HTML:

<!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>
	<title>Hjeeeelp!</title>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
	<link rel="Stylesheet" type="text/css" href="../system/style.css" />
	<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
	<link rel="icon" type="image/png" href="/somepath/image.png" />
</head>
<body>
	<div id="wrap">
		<div id="header">
			<h1>Lorem Ipsum</h1>
		</div>
		<div id="header_menu">
			<ul>
				<li><a href="#">A link</a></li>
				<li><a href="#">Loooooong link</a></li>
				<li><a href="#">?</a></li>
			</ul>
		</div>
		<div id="leftCol">
			<div class="dialog">
			<img class="trans_bg" src="../gfx/Tile30.png" width="100%" height="100%" alt="image for transparent background" />
				<div class="txtDiv">
					<h2>Lorem Ipsum</h2>
					<br />
					<h3>2009.24.06 - 12:02:85</h3>
					<hr />
					<p>
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
						text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
						It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
						It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 

					</p>
				</div>
			</div>
			<div class="dialog">
			<img class="trans_bg" src="../gfx/Tile30.png" width="100%" height="100%" alt="image for transparent background" />
				<div class="txtDiv">
					<h2>Lorem Ipsum</h2>
					<br />
					<h3>2009.24.06 - 12:02:85</h3>
					<hr />
					<p>
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
						text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
						It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
						It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
						with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
						It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
						The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 
						'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors 
						now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their 
						infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and 
						the like).
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
						text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
						It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
						It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
						with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
						It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
						The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 
						'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors 
						now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their 
						infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and 
						the like).
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
						text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
						It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
						It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
						with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
						It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
						The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 
						'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors 
						now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their 
						infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and 
						the like).
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
						text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
						It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
						It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
						with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
						It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
						The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 
						'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors 
						now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their 
						infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and 
						the like).
					</p>
				</div>
			</div>

		</div>
		<!--
		<div id="rightCol">
			<img class="trans_bg" src="../gfx/Tile30.png" width="100%" height="100%" alt="image for transparent background" />
			<div class="dialog">
				<p>
					Right Col Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
					text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
					It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
					It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
					with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
		</div>
		-->
		<div id="footer">
			<!--<p>
				<a href="http://validator.w3.org/check?uri=referer"><img
					src="http://www.w3.org/Icons/valid-xhtml10-blue"
					alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
				<a href="http://jigsaw.w3.org/css-validator/check/referer">
					<img style="border:0;width:88px;height:31px"
					src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
					alt="Valid CSS!" />
				</a>
			</p>-->
		</div>
	</div>
</body>
</html>

En del kode der som er helt irrelevant ift problemet, men jeg tok en enkel copypasta.

Hvis det er noen som har noen idéer, så hadde det vært fett

arthoz · 25. april 2009

Løsningen er ...brace for it -> lag bakgrunnsbildet større, 10x10px f.eks. så blir IE blidere, så slipper du tullet med <img /> =)

(Husk også å teste ting i Opera!)

Endret 25. april 2009 av arthoz

prfssrhlm · 26. april 2009

OMFG!

Jeg visste det kom til å være noe latterlig enkelt.

Jeg tenkte at det kom til å klusse med størrelsen på div'ene mine, men det kommer de jo naturligvis ikke til å gjøre. Hmm. Vi får se hvordan IE klarer litt større bilder

Takk for input i hvert fall.

Logg inn

CSS + XHTML - Trenger hjelp med høyde på div

Anbefalte innlegg

prfssrhlm

Lenke til kommentar

Videoannonse

arthoz

Lenke til kommentar

prfssrhlm

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer