transparant vraagje

Status
Niet open voor verdere reacties.
B

Byakuya

Gebruiker
Lid geworden
3 feb 2010
Berichten
17
Hey ik ben nieuw in css en html ben nog lerende en had een vraag over transparant.

Ik heb een witte menu link gemaakt met roze achtergrond maar wnr ik iets wil selecteren is de witte deel ook getransparanteerd en da wil ik niet .
Kan iemand me helpen??

Alvast bedankt.

HTML: 
<html>
	<head>
		<title>Home</title>
		<link href="sean.css" rel="stylesheet" type="text/css" />
	</head>
	
	
<body>
	<div class="wrapper">
		<div class="logo"> </div>
		<div class="menu">
			<ul>
				
				<li class="home"><a href="Home.html">Home </a></li>
				<li class="overons"><a href="Home.html">Over ons </a></li>
				<li class="diensten"><a href="Home.html">Diensten </a></li>
				<li class="dagactiviteiten"><a href="Home.html">Dagactiviteiten </a></li>
				<li class="scholing"><a href="Home.html">Scholing </a></li>
				<li class="fotoboek"><a href="Home.html">Fotoboek </a></li>
				<li class="vacatures"><a href="Home.html">Vacatures </a></li>
				<li class="contact"><a href="Home.html">Contact </a></li>
				<li class="link"><a href="Home.html">Link </a></li>
				
			</ul>
		</div>
		
		<div class="contentleft">
			<div class="contentleft1"> </div>
			<div class="contentleft2" > 
				<div class="contentmain">
					<div class="contentmainleft">
						<div class="titel"> <b>Welkom bij Sean Pro</b></div>
						<div class="divider"> </div> 
						<img src="foto1.png"/>
						<p>
							Lorem ipsum dolor sit amet, consectetuer adipiscing 
							elit, sed diam nonummy nibh euismod tincidunt ut 
							laoreet dolore magna aliquam erat volutpat. Ut wisi 
							enim ad minim veniam, quis nostrud exerci tation 
							ullamcorper suscipit lobortis nisl ut aliquip ex ea
							, sed diam nonummy nibh euismod tincidunt ut 
							laoreet dolore magna aliquam erat volutpat. Ut wisi 
							enim ad minim veniam, quis nostrud exerci tation 
							ullamcorper suscipit lobortis nisl ut aliquip ex ea
						</p>
							<ul>
								<li>Ja</li>
								<li>Yes</li>
								<li>Evet</li>
								<li>Qui</li>
							</ul>
						<p>
						consequat. Duis autem vel eum iriure dolor in 
							hendrerit in vulputate vecommodolit esse molestie consequat,
							vel illum dolore eu feugiat nulla facilisis at vero 
							eros et accumsan et iusto odio dignissim qui blandit
							praesent luptatum zzril delenit augue duis dolore te
							feugait nulla facilisi.Lorem ipsum dolor sit amet,
							consectetuerLorem ipsum adipiscing elit, sed diam 
							eros et accumsan et iusto odio dignissim qui blandit
							praesent luptatum zzril delenit augue duis dolore te
							feugait nulla facilisi.Lorem ipsum dolor sit amet,
							consectetuerLorem ipsum adipiscing elit, sed diam 
							
						</p>
						
			
			
					</div>
				</div>
				<div class="contentmain2">
					<div class="divider3"> </div>
					<div class="contentmainright"> 
					
						<div class="titel2"> <b>Reclame</b> </div>
						<img src="divider2.png" />
						<div class="recimg"></div>
							
						
					</div>
				</div>
					
					
				
			

					
					
					
			</div>
			<div class="contentleft3"></div>
			
			
			<div class="footer"> <a href="http://dall.nl" target="_blank">Copyright 2009. Website made by Selim Oruc</a> </div>
					
		</div>		
		
		
		<div class="contentrigth"> <img src="fotos.png"/> </div>
		
	</div>
</body>
</html>

CSS

*

{
margin:0px;
padding:0px;
}

body

{
background-color:#f4f4f4;
}

.wrapper

{
width:1010px;

}


.logo

{
background-image:url(logo.png);
width:457px;
height:145px;
float:right;
margin-right:145px;
}


.menu
{
background-image:url(menu.bg.png);
width:875px;
height:50px;
}

.menu ul li

{
float:left;
height:50px;

}

.menu ul li a
{
color:white;
margin-top:10px;
text-decoration:none;
font-family:"Century Gothic";
font-weight:bold;
height:32px;
padding-top:6px;
text-align:center;
}

.menu ul li a:hover
{
background-color:#000;
color:#fff;
filter:alpha(opacity=50);
opacity:50;
-moz-opacity:50;
height:32px;
}


.home a
{
width:75px;
}

.overons a
{
width:100px;
}

.diensten a
{
width:95px;
}

.dagactiviteiten a
{
width:145px;
}

.scholing a
{
width:95px;
}

.fotoboek a
{
width:95px;
}

.vacatures a
{
width:110px;
}

.contact a
{
width:90px;
}

.link a
{
width:50px;
}

.contentleft

{
float:left;
}

.contentleft1
{
background-image:url(content1.png);
width:875px;
height:20px;
}

.contentleft2
{
background-image:url(content2.png);
background-repeat:repeat-y;
width:875px;
height:5px;
}

.contentleft3
{
background-image:url(content3.png);
width:875px;
height:20px;
background-repeat:no-repeat;
}
.contentmain
{
float:left;
}
.contentmain2
{
float:left;
}
.contentmainleft
{
width:600px;
height:644px;
}

.titel
{
font-size: small;


}


.divider
{
background-image:url(divider1.png);
width:595px;
height:20px;


}


.contentmainleft img
{
float:left;
}


.contentmainright

{
width:200px;
float:left;

}

.divider3

{
background-image:url(divider3.png);
width:20px;
height:400px;
float:left;
margin-top:40px;
}


.titel2
{
font-size: small;
margin-left:15px;
}


.recimg

{
background-image:url(foto2.png);
width:187px;
height:235px;
}



.contentrigth

{

}

.footer

{
background-image:url(footer.bg.png);
width:875px;
height:50px;
padding-left:250px;
padding-top:15px;
}

.footer a

{
color:black;
}

.footer a:hover
{
color:white;
text-decoration:none;
}
 
Laatst bewerkt:
Als je de tekst van je link solid wit wil houden en niet transparant moet je het volgende stukje vanuit je CSS aanpassen
Code: 
.menu ul li a:hover
{
background-color:#000;
color:#fff;
filter:alpha(opacity=50);
opacity:50;
-moz-opacity:50;
height:32px;
}

Zoals je ziet heb je de hover van je link op transparant gezet wat je tekst is.
Zorg ervoor dat de achtergrond alleen transparant wordt door bijvoorbeeld de achtergrond van het list-item op transparant te zetten, en niet die van je link.

groeten vreugde
 
uhm als je bedoeld dat ik alleen de lijst gedeeldte trasnparant moet doen lukt het niet

ik heb die a:hover weggehaadld (als je dat bedoeld) en het lukt niet

of moet ik iets anders veranderen
 
Wat jij wilt is tamelijk ingewikkeld.
Als je opacity (doorzichtigheid) opgeeft, wordt álles wat binnen het element staat wat je doorzichtig maakt doorzichtig. Dus als je de inhoud van 'n <a> bij hoveren doorzichtig maakt, wordt ook de tekst daarin doorzichtig. Daar is niets aan te doen, zo hoort het gewoon te werken.

Eerst even: bovenaan je code moet een doctype staan. Dat vertelt de browser om wat voor html en zo het gaat. Zonder doctype krijg je gegarandeerd (grote) weergaveverschillen tussen browsers. Zet helemaal bovenaan (er mag zelfs geen spatie of lege regel boven staan):
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Dan moet je ook nog toevoegen als eerste regel onder <head>
HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Dit vertelt de browser zeg maar welke tekenset hij moet gebruiken, zodat je geen vraagtekens of zo krijgt in plaats van accenten.
doctype en charset moeten altijd bovenaan elke pagina staan.

En ik zou Home.html veranderen in home.html. Op Windows is er geen verschil tussen hoofd- en kleine letters, op de meeste servers wel.

Terug naar de doorzichtigheid. Er is geen simpele manier om alleen de achtergrond doorzichtig te maken en de tekst niet. Het zou kunnen door van buiten de <a> 'n achtergrond achter de <a> neer te zetten, maar dat is wel wat ingewikkeld. Omdat die achtergrond dan niet binnen de <a> staat, heeft de doorzichtigheid van de <a> daar geen invloed op.
'n Andere manier is om voor Internet Explorer 'n filter te gebruiken en voor alle andere browsers iets uit css3: rgba(). Dan kun je alleen de achtergrond laten vervagen en de rest niet. Maar dit werkt alleen bij egale kleuren, niet bij afbeeldingen, en is ook nogal ingewikkeld. En het heeft het risico dat je tekst volledig onzichtbaar kan worden, als je niet bepaalde voorzorgen treft.

Ik zou, als je net begint, dat doorzichtige bij hoveren even vergeten. Je kunt bijvoorbeeld wel de achtergrondkleur veranderen als je hovert over de <a>, dat is vrij simpel.
 
Laatst bewerkt:
Vast en zeker. En op zich is het ook niet zo moeilijk te gebruiken, maar wel als je 'n stukje niet (de tekst) en 'n stukje wel (de achtergrond) doorzichtig wilt maken.
Je hebt je code trouwens heel overzichtelijk geschreven. Door dat soort dingen kun je op 'n gegeven moment ook veel beter wat ingewikkelder dingen gaan doen.
En ik zou dat doctype en charset nog even veranderen, dat is echt belangrijk.
Succes!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan