mcmicha: Links und postion:relative

Beitrag lesen

SELF-Forum

Links und postion:relative

mcmicha
– Informationen zu den Bewertungsregeln

So, ich habe jetzt des Rätzels Lösung...

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Beschreibung der Seite</title>  
<style type="text/css">  
<!--  
body { margin: 0; padding: 0; }  
#tisch { width:100%; background-color: #dddddd; margin: 0; padding: 0; text-align:center; border:2px solid black; }  
#buch { position:relative; text-align: left; vertical-align: middle; margin: 0 auto;  padding: 0; background-color:#FFEC45; border:2px solid red; width:800px; height:600px; }  
  
#buch ul { list-style-type:none; }  
#buch a { border:2px solid black; height: 50px;  width: 90px;  text-decoration: none; }  
#buch a i { visibility: hidden; }  
  
a#home {position:absolute; left:80px; top:385px; background-color:green; z-index:2; }  
a#camera {position:absolute; left:90px; top:191px; background-color:red; z-index:2; }  
a#me {position:absolute; left:620px; top:201px; background-color:purple; z-index:2; }  
a#dates {position:absolute; left:635px; top:401px; background-color:blue; z-index:2; }  
  
a#home:hover { background-color:red; }  
a#camera:hover { background-color:green; }  
a#me:hover { background-color:blue; }  
a#dates:hover { background-color:purple; }  
  
#buchlinks {position:absolute; top:145px; left:155px; width:190px; height:240px;}  
#buchrechts {position:absolute; top:150px; left:390px; width:250px; height:240px;}  
-->  
</style>  
</head>  
<body>  
  
<div id="tisch">  
    <div id="buch">  
        <ul>  
            <li><a href="farbpigmente.php?class=home" id="home"><i>Home</i></a></li>  
            <li><a href="farbpigmente.php?class=camera" id="camera"><i>Camera</i></a></li>  
            <li><a href="farbpigmente.php?class=dates" id="dates"><i>Dates</i></a></li>  
            <li><a href="farbpigmente.php?class=me" id="me"><i>Me</i></a></li>  
        </ul>  
        <p id="buchlinks">  
            Text der auf der linken Seite des Buches stehen soll.  
        </p>  
        <p id="buchrechts">  
            Hier erscheint der Text der auf der rechten Seite des Buches stehen soll.  
        </p>  
    </div>  
</div>  
  
</body>  
</html>

Danke für die vielen Denkanstöße...

Beitrag melden
–
Informationen zu den Bewertungsregeln