mcmicha: Links und postion:relative

Beitrag lesen

SELF-Forum

Links und postion:relative

mcmicha
– Informationen zu den Bewertungsregeln

Danke schon mal für die bisherigen Antworten.

Ich habe mal mein Design vereinfacht so das Ihr euch das mal anschauen könnt was ich mir vorstelle.

  
<!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 { background-color: #dddddd; margin: 0; padding: 0; text-align:center; }  
#buch { text-align: left; vertical-align: middle; margin: 0 auto;  padding: 0; background-color:#FFEC45; border:2px solid red; width:800px; height:600px; }  
#buchlabel {background-color:#FFEC45; border:2px solid green; width:800px; height:600px;}  
  
#buchlabel a { border:2px solid black; height: 50px;  width: 90px;  text-decoration: none; }  
#buchlabel a i { visibility: hidden; }  
  
a#home {position:relative; left:80px; top:385px; z-index:5; }  
a#camera {position:relative; left:90px; top:191px; z-index:5; }  
a#me {position:relative; left:620px; top:201px; z-index:5; }  
a#dates {position:relative; left:635px; top:401px; z-index:5 }  
  
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:relative; top:140px; left:155px; width:190px; height:240px;}  
#buchrechts {position:relative; top:-100px; left:390px; width:250px; height:240px;}  
-->  
</style>  
</head>  
<body>  
  
<div id="buch">  
    <div id="buchlabel">  
        <a href="farbpigmente.php?class=home" id="home"><i>Home</i></a>  
        <a href="farbpigmente.php?class=camera" id="camera"><i>Camera</i></a>  
        <a href="farbpigmente.php?class=dates" id="dates"><i>Dates</i></a>  
        <a href="farbpigmente.php?class=me" id="me"><i>Me</i></a>  
  
        <div id="buchlinks">  
            Text de rauf der linken Seite des Buches stehen soll.  
        </div>  
        <div id="buchrechts">  
            Hier erscheint der Text der auf der rechten Seite des Buches stehen soll.  
        </div>  
    </div>  
</div>  
  
  
</body>  
</html>

Wenn ich nun "#buchlabel a" auf "display:block" setzen würde, verschiebt er das ganze Layout.

Beitrag melden
–
Informationen zu den Bewertungsregeln