mcmicha: Links und postion:relative

SELF-Forum

Links und postion:relative

mcmicha
– Informationen zu den Bewertungsregeln

Hallo Leute,

mir ist aufgefallen das wenn ich einem Link per position:relative, top und left vorgebe wo er erscheinen soll, die Angaben zu width und height ignoriert werden. dies passiert im aktuellen FF, im FF 1.5, im IE8 und im Chrome.

Kann mir vielleicht jemand einen Tipp geben wie ich das bewergstelligen kann das ich einen Link per position, top und left vorgeben kann wo er erscheint und das ich im trotzdem seine Größe vorgeben kann.

Danke schonmal im vorraus...

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Links und postion:relative

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Aufgrund deiner unzureichenden Fehlerbeschreibung kann ich leider keine zureichende Lösung anbieten - aber ich würde mit der display-Eigenschaft des betreffenden a-Elements beginnen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Links und postion:relative

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    mir ist aufgefallen das wenn ich einem Link per position:relative, top und left vorgebe wo er erscheinen soll, die Angaben zu width und height ignoriert werden. dies passiert im aktuellen FF, im FF 1.5, im IE8 und im Chrome.

    position:relative ändert nichts an der Berechnung der Breite einer Box. Vermutlich täuscht du dich. Ansonsten: Bitte den relevanten Quellcode zeigen.

    Wenn du eine width und height angibst, sollte das auch beachtet werden - allerdings muss der Link (ich rede vom a-Element) dafür display:block haben, ansonsten werden width und height für das Inline-Element ignoriert.

    Mathias

    --
    JavaScript-Erweiterung für das SELFHTML-Forum
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. 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

    1. Links und postion:relative

      ChrisB
      – Informationen zu den Bewertungsregeln

      Hi,

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

      <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</

      Sinnvoll wäre es, das als Liste von Links auszuzeichnen.

      Und wofür du jetzt überhaupt die Links relativ positionieren willst, ist mir noch nicht klar.
      Was willst du *erreichen*?

      MfG ChrisB

      --
      Light travels faster than sound - that's why most people appear bright until you hear them speak.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Links und postion:relative

        mcmicha
        – Informationen zu den Bewertungsregeln

        Hi,

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

        »»     <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</

        Sinnvoll wäre es, das als Liste von Links auszuzeichnen.

        Und wofür du jetzt überhaupt die Links relativ positionieren willst, ist mir noch nicht klar.
        Was willst du *erreichen*?

        MfG ChrisB

        Das ganze soll ähnlich dieser Seite werden http://www.alistapart.com/d/imagemap/example2.html
        Aber das Buch soll mittig im Browser angezeigt werden.
        Deswegen sind die Links auch relative positioniert zu dem zentriert gesetzte Elternelement.
        Das ganze ist dann voll gespickt mit Grafiken (die Links auch) und die Links sollen als Klebezettel irgendwo am Buchrand liegen.

        Das mit der Liste von Links würde für mich keinen Sinn ergeben.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Links und postion:relative

          ChrisB
          – Informationen zu den Bewertungsregeln

          Hi,

          bitte zitiere sinnvoll, und nicht einfach alles.

          Das ganze soll ähnlich dieser Seite werden http://www.alistapart.com/d/imagemap/example2.html
          Aber das Buch soll mittig im Browser angezeigt werden.
          Deswegen sind die Links auch relative positioniert zu dem zentriert gesetzte Elternelement.

          Dann würde ich vielleicht eher "alles" in ein Element packen, über das die Zentrierung realisiert wird - und Elemente dann ggf. daran ausrichten.

          Das mit der Liste von Links würde für mich keinen Sinn ergeben.

          Doch, würde es - weil HTML in allererster Linie mal dazu dient, die Inhalte gemäß ihrer Struktur sinnvoll auszuzeichnen.
          Eine Navigation ist eine Auflistung von Links, und für Listen gibt es spezielle Elemente in HTML.

          Div und Span sind bedeutungslose Elemente - also sollten sie auch so wenig wie möglich verwendet werden, und wenn ein Element existiert, dass die Struktur des jeweiligen Teilinhalts besser ausdrückt, sollte dieses verwendet werden.

          MfG ChrisB

          --
          Light travels faster than sound - that's why most people appear bright until you hear them speak.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. 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