Hover aber wie?

Zahnfee89 · 3. Dezember 2006

Schönen Abend allerseits,

vor kurzem habe ich wieder damit angefangen meine Homepage wieder auszubauen.
Nun wollte ich gerne die Links ändern:

-> Wie kann ich die Farbe der Links ändern?
-> Wie kann ich Bilder durch Bilder ersetzen, wenn man mit dem Muaszeiger drübergeht?
-> Wo kann ich einstellen wie sich der Link ändert (von normal zu unterstrichen, durchgestrichen, etc.)?

Des Weiteren habe ih den Seitennamen von creativeLAB zu 4creation umgeändert aber jetzt siht die Seite echt komisch aus.

Code:

<!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=iso-8859-1" />
<title>4creation - Digital Artwork Resource</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body id="4creation">

	<div id="container1">
		<div id="box2">
		<div id="box2a">
			<div class="sub2">
			<b>LOGIN &amp; SEARCH</b>
			</div>
			<div id="sub2a">
			Text
			</div>
		</div>
		<div id="box2b">
			<div class="sub2">
			<b>LATEST NEWS</b>
			</div>
			<div id="sub2a">
			Text
			</div>
		</div>
		<div id="box2c">
			<div class="sub2">
			<b>POLL</b>
			</div>
			<div id="sub2a">
			Text
			</div>
		</div>
	</div>
		
		<div id="box1">
			<div id="pageHeader">
				<img src="Files/Pictures/logo1.jpg" />
				<a href="index.php"><img src="Files/Pictures/logo2.jpg" alt="ENGLISH" border="0" title="ENGLISH"/></a>
				<a href="index_de.php"><img src="Files/Pictures/logo3_german.jpg" alt="GERMAN" border="0" title="GERMAN"/></a>
				<a href="index_fr.php"><img src="Files/Pictures/logo4_french.jpg" alt="FRENCH" border="0" title="FRENCH"/></a>
			</div>
			<div id="box1a">
			<a href="radio_en.php"><img src="Files/Pictures/button.jpg" alt=".radio" border="0" title=".radio"/></a>   |   <a href="panorama_en.php"><img src="Files/Pictures/button.jpg" alt=".panorama" border="0" title=".panorama"/></a>   |   <a href="waves_en.php"><img src="Files/Pictures/button.jpg" alt=".waves" border="0" title=".waves"/></a>   |   <a href="about_us_en.php"><img src="Files/Pictures/button.jpg" alt=".about us" border="0" title=".about us"/></a>
			</div>
			<div id="box1b">
				.radio &gt; Information
			</div>
			<div id="box1c">
				<div class="sub1">
				<b>INFORMATION</b>
				</div>
				<div id="sub2">
				  <p>Welcome</p>
				  <p>At 4<b>creation</b> you will find a wide selection of images (<a href="panorama_en.php">.panorama</a>) available for use free of charge providing you credit the 4<b>creation</b> website.The images are submitted by members of the public who are dedicated to providing free images for all on the internet.<br />
				    <br />

Full size images can be viewed in the download section and if you would like to contribute to the project, click on the contact link and you will be sent a detailed list of the contribution requirements.<br /><br /></p>
				</div>
			</div>
			<div id="box1d" align="center">
			<script type="text/javascript"><!--
google_ad_client = "pub-2926233266278310";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "578A24";
google_color_bg = "CCFF99";
google_color_link = "00008B";
google_color_url = "00008B";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
			</div>
			<div id="box1c">
				<div class="sub1">
				<b>NEWS - 02.12.2006</b>
				</div>
				<div id="sub2">
				  <p>Work on <b>4creation</b> has continued</p>
				  <p>After having received my new laptop I am able to continue to develop this homepage. Unfortunately there are now loads of other comminities and people have taken the name I first made up for my own page:( But my this news was not that bad and I soon found a new name &quot;<b>4creation</b>&quot;, which is quite similar to creativeLAB.</p>

<p>During the time between September and now I have taken some fairly interesting photos with my new digital camera Fujufilm FinePix S9500 and right now I try to integrate these pictures into the topic <a href="http://www.ohost.de/panorama_en.php"> .panorama</a>. Further I will look for some people to help me building this internet page.
</p>
<p>[Harald Brauer]</p>
				</div>
			</div>
  	  	</div>
	</div>

</body>
</html>

Hier ist der CSS Code:

Code:

body {
	background-color: #333333;
	color: #FFFFFF;
	margin: 10px;
	padding: 0px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;

}

#4creation #container1 #box1 #box1d {
}

#4creation #container1 {
	width: 950px;
	margin: 0px auto 0px auto;
	padding: 10px;
	border: 4px double #CCCCCC;
	color: #0066CC;
	background-color: #999999;
	text-align: left;
	height: auto;
}
#4creation #container1 #box1 #pageHeader {
	width: 730px;
	height: 129px;
	background-color: #FFFFFF;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	border: 1px solid #CCCCCC;
}
#4creation #container1 #box1 #box1c .sub1 {
	padding-top: 5px;
	padding-left: 10px;
}


#4creation #container1 #box1 {
	width: 730px;
	background-color: #999999;
	height: 900px;
}
#4creation #container1 #box2 {
	width: 200px;
	float: right;
	margin: 0px;
	margin-left: 10px;
	height: 900px;
	background-color: #999999;
}

#4creation #container1 #box2 #box2a {
	width: 200px;
	height: auto;
	background-color: #FFFFFF;
	background-image: url(Files/Pictures/line_left.jpg);
	background-repeat: repeat-x;
	margin-bottom: 10px;
}
#4creation #container1 #box2 #box2b .sub2 {
	padding-left: 10px;
	padding-top: 5px;
}
#4creation #container1 #box2 #box2a .sub2 {
	padding-left: 10px;
	padding-top: 5px;
}
#4creation #container1 #box2 #box2c .sub2 {
	padding-left: 10px;
	padding-top: 5px;
}



#4creation #container1 #box2 #box2b {
	background-color: #FFFFFF;
	width: 200px;
	height: auto;
	background-repeat: repeat-x;
	background-image: url(Files/Pictures/line_left.jpg);
	margin-bottom: 10px;
}
#4creation #container1 #box2 #box2c {
	background-image: url(Files/Pictures/line_left.jpg);
	background-repeat: repeat-x;
	width: 200px;
	height: auto;
	background-color: #FFFFFF;
}
#4creation #container1 #box1 #box1a {
	width: 695px;
	height: 25px;
	background-color: #EEEEEE;
	margin-top: 5px;
	border: 1px solid #CCCCCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-large;
	font-style: normal;
	color: #0066CC;
	padding-top: 10px;
	padding-left: 35px;
	padding-bottom: 10px;
	text-decoration: none;
}
#4creation #container1 #box1 #box1c {
	width: 730px;
	height: auto;
	background-color: #FFFFFF;
	background-image: url(Files/Pictures/line_left.jpg);
	background-repeat: repeat-x;
	margin-bottom: 10px;
}

#4creation #container1 #box1 #box1b {
	width: 700px;
	height: 20px;
	background-color: #FFFFFF;
	margin-bottom: 10px;
	border: 1px solid #CCCCCC;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 4px;
	padding-top: 4px;
}
#4creation #container1 #box1 #box1d {
	width: 730px;
	height: auto;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	margin-bottom: 10px;
}
#4creation #container1 #box1 #box1c #sub2 {
	width: 700px;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	background-color: #EEEEEE;
	border: 1px solid #CCCCCC;
}
#4creation #container1 #box2 #box2b #sub2a {
	background-color: #EEEEEE;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	width: 180px;
	height: 400px;
	border: 1px solid #CCCCCC;
}
#4creation #container1 #box2 #box2a #sub2a {
	background-color: #EEEEEE;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	width: 180px;
	height: 170px;
	border: 1px solid #CCCCCC;
}
#4creation #container1 #box2 #box2c #sub2a {
	background-color: #EEEEEE;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	width: 180px;
	height: 160px;
	border: 1px solid #CCCCCC;
}

Die Seite sollte so aussehen KLICK.
Momentan sieht sie so aus KLICK aber ich kann den Fehler nicht finden oder macht Firefox was falsch?

Grüße an alle

Harry

Zweipunktnull · 3. Dezember 2006

Dirty Harry schrieb:
-> Wie kann ich die Farbe der Links ändern?
-> Wie kann ich Bilder durch Bilder ersetzen, wenn man mit dem Muaszeiger drübergeht?
-> Wo kann ich einstellen wie sich der Link ändert (von normal zu unterstrichen, durchgestrichen, etc.)?

Ich habe mir jetzt nicht den ganzen Quellcode angetan, aber die Darstellung von Verweisen kann man wie folgt definieren:

Code:

a:link, a:visited {
  text-decoration: none;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

(Also das ist jetzt nur mal ein einfaches Beispiel, kannst du dann ja beliebig bearbeiten und/oder ließt dir mal den entsprechenden Teil in selfHTML durch...)

Suche

Hover aber wie?

Zahnfee89

Gast

Zweipunktnull

Commander

Ähnliche Themen