Sidebar/Navi Textpositionierung

[Rozz_By]

Hallo,

ich bin gerade am coden meiner Website und habe da ein Problem bei der Sidebar die gleichzeitig als Navi dient. Und zwar habe ich die Hintergrundgrafik definiert und dann nur noch die inaktiven Buttonzustände drübergelegt und den entsprechenden Text zu den einzelnen Bereichen. Nur habe ich irgendwie das Problem das der Text nicht genau dort ist wo ich ihn haben will. Und im Browser werden auch so komische schwarze Punkte davor angezeigt.
Im Prinzip liegt das Problem nur bei dem oberen Text die anderen könnte ich entsprechend ausrichten aber den ersten Textblock bekomme ich nicht nach oben, er sollte 80px vom oberen Rand entfernt sein nur ist er bei 85px oder in der Richtung und das passt zur Ausrichtung der restlichen Bereiche der Seite nicht.
Ich habe mal ein Bild der Navi angehangen und wie es im Browser dargestellt wird.

Grafik:


Als Code habe ich in der Css-Datei folgendes angegeben:

div#navi { width:305px; height:615px; background:url(../Bilder/bg-navi.jpg) no-repeat; float:right; position:relative; right:8px; top:208px; list-style:none; color:#3e3e3e; }
div#navi ul#navi-links li a { width:123px; height:26px; background:url(../Bilder/bg-navi-links.jpg) 0 0 no-repeat; position:relative; left:36px; display:block; }
div#navi ul#navi-links li a#überuns { background-position:0 0; top:147px; }
div#navi ul#navi-links li a#leistung {     background-position:0 -26px;top:318px; }
div#navi ul#navi-links li a#galerie { background-position:0 -52px; top:489px; }
div#navi ul#navi-links li a:hover,
div#navi ul#navi-links li a.active { background:none; }
div#navi ul#navi-text1 li {    width:235px; height:61px; padding: 0 0 119px 36px; }
div#navi ul#navi-text2 li { width:235px; height:61px; padding: 17px 0 0 36px;}

Und in der HTML Datei:

 <div id="navi">
            <ul id="navi-links">
            <li><a href="#" id="überuns" class="noText">Über Uns</a>
            <li><a href="#" id="leistung" class="noText">Leistung</a>
            <li><a href="#" id="galerie" class="noText">Galerie</a>
            </ul>
            <ul id="navi-text1">
            <li>Sie wollen mehr erfahren über unser Unternehmen? Dann sehen Sie sich unsere Firmenbeschreibung an.</li>
            <li>Sie benötigen eine Leistungs- beschreibung? Dann machen Sie sich auf der folgenden Seite ein Bild von unserem breiten Leistungsspektrum.</li>
            </ul>
            <ul id="navi-text2">
            <li>Überzeugen Sie sich von unserer Qualität und unseren Produkten. Auf der folgenden Seite finden Sie unsere Referenzobjekte.</li>
             </ul>  
       </div> <!--Navi Ende-->

Ich hoffe ihr könnt mir helfen, bitte nicht wundern wenn irgendwo ein paar Anfängerfehler drin sind. Ich bemühe mich aber so gut es geht.

 

[oliver82]

AW: Sidebar/Navi Textpositionierung

hi,
mit den Punkten meinst du glaub die Listenpunkte die als Standard gesetzt sind bei Listen.
Bekommst du einfach weg mit css Anweisung list-style:none;

bei li oder ul musst das angeben..probiers aus. Bei Fragen..ich helfe gerne.
Da die Listenpunkte natürlich auch Raum für sich beanspruchen ist das wohl auch der Grund für die Verschiebung.
Nur kurz drübergelesen..


Gruß

 

[sokie]

AW: Sidebar/Navi Textpositionierung

setz am besten erstmal die margins und Paddings für alle Element auf 0, dann bekommst du die einheitlichere Darstellung in unterschiedlichen Browsern.

* {
  margin: 0;
  padding: 0;
}

und dann wie vorgeschlagen, die list-styles entfernen:

#navi-links {
  list-style:none;
}