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

<li> positionieren

Status
Für weitere Antworten geschlossen.
Loon3y

Loon3y

Neues Mitglied
Hallo,

folgendes Problem:

ich habe eine Chronik. Diese steht in einen Div-Fenster welches 1000px breit ist.

In dieser Div ist links das textliche (75%) und rechts (25%) soll ein Zeitstrahl erscheinen wo durch anklicken verschiedene .htms scih links davon öffnen.

so der code sieht folgendermaßen aus:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
<title>SKC 2007 - Die Kugel rollt</title>

<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="wrapper">

        <h2> <img src="header.jpg" alt="header" /> </h2>

    <ul id="navi">
       ->menu entfernt <-
    </ul>


        <div id="content">

        <h2 style="text-align:right; width:75%;">Chronik</h2>
        
        <div style="background-image:url(graphics/chronik_zeitstrahl.jpg); background-repeat:no-repeat; height:500px; width:75px; margin-left:600px;">
        <ul style="list-style:none">

        <li style="margin-bottom: 20px; margin-left: 10px;"><a href="chronik_01062007.htm"><img alt="01.06.2007" src="graphics/chronik_01062007.jpg" style="border: 0px;" /></a></li>
         
        <li style="margin-left: 10px;"><a href="chronik_19052007.htm"><img alt="19.05.2007" src="graphics/chronik_19052007.jpg" style="border: 0px;" /></a></li>

        </ul>

        </div>


        </div>
    </div>

</body>
</html>
nunja.....jetzt ist das problem das diese <li> am ende (unten) des divs erscheinen sollen und nicht ganz oben.

Anbei mal ein screeny...

ImageShack - Hosting :: testrn0.png


Grüße
Loon3y
 
Zuletzt bearbeitet:
Eine statische Lösung wäre, wenn du dem ersten li einen margin-top-Wert zuweist.
Der ändert sich dann aber immer, wenn neue Links hinzu kommen.

Andere Möglichkeit: Die Reihenfolge der li's umkehren, den ersten mit einem margin-top-Wert unten positionieren und den anderen einen negativen margin-top-Wert zuweisen, z.B. so:

Code: 
   <li style="margin-left: 10px; margin-top: 300px;"><a href="chronik_19052007.htm"><img alt="19.05.2007" src="graphics/chronik_19052007.jpg" style="border: 0px;" /></a></li>
  <li style="margin-top: -70px; margin-left: 10px;"><a href="chronik_01062007.htm"><img alt="01.06.2007" src="graphics/chronik_01062007.jpg" style="border: 0px;" /></a></li>
  <li style="margin-top: -70px; margin-left: 10px;"><a href="chronik_01062007.htm"><img alt="01.07.2007" src="graphics/chronik_01062007.jpg" style="border: 0px;" /></a></li>
 
Na die Lösung funktioniert doch wunderbärchen..habe lediglich margin-left auf 11px gesetzt und margin-top auf -100px...damit es auch abgestimmta uf die grafik ist.

Vielen lieben dank für die hilfe.
 
endschuldigt den doppelpost...aber wie bekomme ich die auflistung vertikal hin? irgendwie mag er nicht...

habe 6 wörter normal doch mit display:block; float:left; width:600px; und dann jedes <li> 100px width oder nicht..?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben