Wombi Wompatz
Neues Mitglied
HTML:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
Büro
</title>
<link rel="stylesheet" href="root.css" />
</head>
<body>
<div id=logo>
</br>
<a class="head2" href="Logo.htm"><u>Büro</u></br>Name</a>
</div>
<div id=Kopfzeile>
<p>
</br>
<a class="head1" href="veröffentlichungen.htm">VERÖFFENTLICHT</a></br>
<a class="head1" href="projekte.htm">PROJEKTE</a></br>
<a class="head1" href="Büro.htm">BÜRO</a></br>
<a class="head1" href="Impressum.htm">KONTAKT</a>
</p>
</div>
<div id=Seitenzeile>
<pre class="head3">
<p<img title="Bild1"><div>hier stehen alle Infos</div></p>
</pre>
</div>
<div id=Körper>
<!--<a href="Bild2"><img src="Testbilder/Blume.jpg"/></a>-->
<!--<a href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'" /></a-->
<!--img title="Bild1" src="Testbilder/Blume3.jpg" ><div>hier stehen alle Infos</div></a-->
<a class="Bild1" href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>
<a class="Bild1" href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>
<a class="Bild1" href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>
</div>
</body>
</html>
CSS:
body {
background-color: white;
}
.head1{
color: B1AAAA;
font-size: 10pt;
font-family: Century Gothic;
text-decoration: none;
}
.head2{
color: black;
font-size: 10pt;
font-family: Century Gothic;
}
.head3{
color: black;
font-size: 10pt;
font-family: Century Gothic;
}
a:hover{
color: black;
}
a.Bild1:link, a.Bild1:visited {
font-family:Century Gothic;
font-size: 10px;
color:transparent;
text-decoration: none;
}
a.Bild1:hover {
color:black;
text-decoration: none;
}
#logo{
background-color: green;
opacity: 3;
height: 120px;
width: 200px;
float: left;
}
#Kopfzeile{
background-color: red;
opacity: 3;
height: 120px;
}
#Seitenzeile{
background-color: yellow;
opacity: 3;
width: 200px;
height: 1000px;
float: left;
}
#Körper {
background-color: none;
margin-left: 200px;
margin-right: 140px;
}
ich versucht gerade über HTML und CSS eine Homepage für unser Büro zu erstellen:
Dabei hänge ich gerade an folgendem Problem und hoffe ihr könnt mir weiterhelfen:
und zwar habe ich meine Webseite in 4 Bereiche eingeteilt (siehe Bild).
Und zwar im 4 Bereich (#Körper) kommt eine Zusammenfassung von Projekten.
Jetz habe ich es schon hingebekommen das wenn ich über das Bild fahre, es ein anderes Bild ( Photoshop nur leicht die Transparenz geändert) anzeigt.
Ich möchte aber gerne das ich, wenn über die jeweiligen Projekte fahre (hovere^^) im Bereich "Seitenzeile" Infos über das Projekt angezeigt werden.
Wie mache ich das am einfachsten?
Vielen lieben Dank schonmal im voraus für folgende Antworten
PS:
Unten sind Meine HTML und CSS Datei zu finden
Anhänge
Zuletzt bearbeitet: