Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

volgorde wijzigen

W0etah - 16/06/2007 14:15

PHP beginner

hallo, ik was om te oefenen nog is een site aan het maken met css, maar ik oop tegen een probleem.

Ik wil een balk over mijn scherm krijgen van 150px hoog, 100% breedt, dat lukt allemaal goed.
Ik heb hem gepositioneerd met position: absolute.

Maar nu komt hij boven alle andere elementen van de site, dat zou niet mogen hij moet eronder staan.

Dit is mijn html

php code - Bekijk de code zonder highlighting - Klap code in

                <!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>Untitled Document</title>
<link href="stijl.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="longLine"></div>
<div id="wrapper">
	<div id="header"></div>
	<div id="menu">
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</div>
	<div id="foto"></div>
	<div id="content">
		Facilisis nostrud facilisi quarta et nonummy. Decima tempor soluta consequat sollemnes nam. Iriure laoreet nunc euismod tempor accumsan. In quinta option dolore typi sed. Processus qui gothica ut dolor demonstraverunt. Litterarum est saepius ii futurum per. Consequat esse nulla soluta possim putamus. Dignissim nunc dolor qui congue te. In tation veniam mazim est consectetuer.
	</div>
</div>
</body>
</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>Untitled Document</title>
<link href="stijl.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="longLine"></div>
<div id="wrapper">
	<div id="header"></div>
	<div id="menu">
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</div>
	<div id="foto"></div>
	<div id="content">
		Facilisis nostrud facilisi quarta et nonummy. Decima tempor soluta consequat sollemnes nam. Iriure laoreet nunc euismod tempor accumsan. In quinta option dolore typi sed. Processus qui gothica ut dolor demonstraverunt. Litterarum est saepius ii futurum per. Consequat esse nulla soluta possim putamus. Dignissim nunc dolor qui congue te. In tation veniam mazim est consectetuer.
	</div>
</div>
</body>
</html>
 

de rechthoek heet: longLine

dit is de css

php code - Bekijk de code zonder highlighting - Klap code in

                #longLine {
	background: #00FF00;
	height: 144px;
	width: 100%;
	position: absolute;
	left: 0px;
	clip: rect(auto,auto,auto,0px);
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	top: 199px;
	filter: alpha(opacity=45);
	-moz-opacity: .45;
	opacity: .45;
}
            
#longLine {
	background: #00FF00;
	height: 144px;
	width: 100%;
	position: absolute;
	left: 0px;
	clip: rect(auto,auto,auto,0px);
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	top: 199px;
	filter: alpha(opacity=45);
	-moz-opacity: .45;
	opacity: .45;
}
 

weet iemand wat ik zou moeten veranderne om het op te lossen?

6 antwoorden

Gesponsorde links

Tienizz - 16/06/2007 14:19
Nieuw lid		z-index:0; geven in de css en de rest z-index:1;

vinTage - 16/06/2007 14:20 (laatste wijziging 16/06/2007 14:21)
Nieuw lid		z-index meegeven in de css ? te laat

W0etah - 16/06/2007 14:22 (laatste wijziging 16/06/2007 14:23)
PHP beginner		nope, werkt ook niet z-index had ik al geprobeert

vinTage - 16/06/2007 14:29 (laatste wijziging 16/06/2007 14:42)

Nieuw lid

Geef de css eens van de wrapper header en menu.

najah, ik ben naar gent nu

Dit werkt wel in ie, maar niet in ff...

php code - Bekijk de code zonder highlighting - Klap code in

                <!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>Untitled Document</title>

<style type="text/css">
#wrapper{
  margin:auto;
	width:500px;
	background-color:#FFFF00;
	height:800px;
}

#longLine {
  background: #000000;
  height: 144px;
  width: 100%;
  position: absolute;
  left: 0px;
  clip: rect(auto,auto,auto,0px);
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  top: 199px;
  filter: alpha(opacity=45);
  -moz-opacity: .45;
  opacity: .45;
	z-index:-1;
}
</style>
</head>

<body>

<div id="wrapper">hoi</div>

<div id="longLine"></div>
</body>
</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>Untitled Document</title>
 
<style type="text/css">
#wrapper{
  margin:auto;
	width:500px;
	background-color:#FFFF00;
	height:800px;
}
 
#longLine {
  background: #000000;
  height: 144px;
  width: 100%;
  position: absolute;
  left: 0px;
  clip: rect(auto,auto,auto,0px);
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  top: 199px;
  filter: alpha(opacity=45);
  -moz-opacity: .45;
  opacity: .45;
	z-index:-1;
}
</style>
</head>
 
<body>
 
<div id="wrapper">hoi</div>
 
<div id="longLine"></div>
</body>
</html>
 

W0etah - 16/06/2007 15:38
PHP beginner		sry voor late reactie, hier mijn css en html pagina css: http://www.plaatscode.be/5656/ html: http://www.plaatscode.be/5657/

W0etah - 16/06/2007 16:57 (laatste wijziging 16/06/2007 21:01)
PHP beginner		@nvleeuwen88, clear: both is om een float te stoppen. Ik wil dat die longLine onder alle andere element staat edit: of heeft iemand een ander idee? Ik wil zo'n effect als hier bereiken. http://www.shootnshop.nl/upload/sitedeals_1.jpg zodat er zo'n vlak over het hele scherm komt edit: na ff knoeien ben ik erop gekomen op de position van mijn wrapper op relative te zetten, toen werkte het

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten