• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Grafik positionierung

D

Dominic28

Mitglied
Hallo,
Ich habe eine Grafik welche in einer Liste als <li> angezeigt wird. Designtechnisch soll diese an der Seite der Contentbox überstehen. Kann ich das irgendwie ohne absolute positionierung lösen?
Weil jetzt habe ich sie erstmal absolute positioniert und dann liegt sie natürlich nicht mehr im fluss, was das ganze etwas umständlicher macht für mich.

Hier mal ein Bild:


Oben ist es richtig aber absolut positioniert und unten ist es ohne die absolute positionierung. Dann verschwindet leider der überstehende Teil der Grafik.

Wie kann ich das lösen?
 
Zuletzt bearbeitet:
Werbung:
Versuchs mal so
Code: 
<html>
<head>

<style type="text/css">
* {
 margin:0;
 padding:0;
}

ul {
 list-style:none;
 width:200px;
 margin:20px;
 padding:10px;
 background:#dee;
}

li {
 margin-bottom:15px;
}

li a {
 position:relative; /*muss bei die nicht sein*/
 display:block;
 text-decoration:none;
 color:#fff;
 background:#09c; /* Hier dein BG*/
 padding:5px 5px 5px 20px;
 margin-left:-20px;
}

/* Grafikersatz*/
li a:before {
 content:"";
 position:absolute;
 width:0;
 height:0;
 left:-0px;
 bottom:-18px;
 border:10px solid transparent;
 border-top-color:#aaa;z-index:-1;
}
li a:after {
 content:"";
 position:absolute;
 width:0;
 height:0;
 top:0;
 right:-0px;
 bottom:0px;
 border:14px solid #09c;
 border-right-color:#dee;
}
</style>
</head>
<body>
<div id="navi">  
 <ul>
  <li><a href="index.htm">Startseite </a></li>
  <li><a href="kontakt.htm">Kontakt </a></li>
  <li><a href="impressum.htm">Impressum </a></li>
 </ul>
</div>
</body>
</html>

Ggf. musst du das A-Element eine feste Höhe und Breite geben.
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben