CSS - Position relative?

[Lotus]

Hi, ich hab erneut eine Frage:



Die ersten beiden Navigationselemente passen sich optimal zusammen an, aber zwischen dem 3.ten und 2.ten ist immer wieder ca 2-3px Platz und ich weiß nicht wie ich das wegbekomme...

In der HTML steht folgendes:

<img src="Bilder/navi_anfang.jpg" id="img_navi" /><br />
<img src="Bilder/navi_b.jpg" id="img_navi_a" /><br />
<img src="Bilder/navi_b.jpg" id="img_navi_a" />

und in der CSS

        #img_navi {
        border:0;
        margin-left:10px;
        position:absolute;
        }
        
        #img_navi_a {
        border:0;
        width:204;
        height:22;
        margin-left:10px;
        position:relative;         
        }

Wisst ihr was ich falsch mache?

[Blaxxun]

Auch wenn es sich dumm anhört. Manche Browser machen Problem, wenn Tabs oder Zeilenumbrüche im Quelltext sind.

Teste mal

<img src="Bilder/navi_anfang.jpg" id="img_navi" /><br /><img src="Bilder/navi_b.jpg" id="img_navi_a" /><br /><img src="Bilder/navi_b.jpg" id="img_navi_a" />

Mit Leerzeichen auch am Zeilenende besonders aufpassen.

[Lotus]

Danke für deine Hilfe, aber leider ist das Ergebnis gleich dem obigen.

Ps.:
Du hast recht, der IE zeigt das schon deutlich besser an als Firefox, aber selbst dort liegt noch 1 PX zu viel Abstand!

[Blaxxun]

Warum überhaupt ne relative Poistion vergeben? Fällt mir jetzt erst auf, vergib einfach mal ein display: block; dann werden die Elemente wie DIVs interpretiert. Die Bilder werden dann automatisch untereinander angezeigt.
Am optimalsten und besten ist übrigens die Lösung über Unsortierte Listen.

[Lotus]

Jetzt wird es besser ausgerichtet, nur nun kommt das Problem hinzu, durch die block eigenschaft ist die gesamte Zeile als Link quasi anklickbar.. kann man das nicht noch irgendwie unterbinden, bzw angeben wie weit diese zeile sein soll? quasi die zeile mit width auf die größe des buttons begrenzen..(ist halt der nachteil bei fauxcolumns xD)

Das mit den Listen probier ich nacher auch nochmal!

[Blaxxun]

Liste
li -> Block | a in li -> Inline

Versuchs mal mit Hintergrundbildern
Und natürlich kannst du Block Elementen eine width und height zuweisen, das bleibt nur bei inline Elementen wirkungslos.

[Lotus]

Hey erstmal vielen dank für deine Hilfe, klappt alles super

Gibt es eventuell eine Möglichkeit ein Objekt relativ zu einem ganz bestimmten Objekt x zu positionieren?

Also z.B. ich hab folgende Elemente
Header-Bereich
Navi-Bereich
Main-Bereich
Hier möchte ich ein Objekt positionieren, aber welches vom HEADER aus positioniert ist und nicht absolute oder relative von dem relativen Objekt davor!
Footer-Bereich

[Blaxxun]

Soweit mir bekannt nicht ohne Umstände. Ein bisschen rumprobieren hilft. Ich würde das Element im Header platzieren und ein bisschen mit dem z-index und verschiedenen positions probieren, eventuell hilft auch ein negatives padding. Solltest du aber in allen wichtigen Browsern testen.
Je nach deinen JS Kenntnissen ist das auch relativ leicht über Frameworks realisierbar, z.B. jQuery oder Prototype.

[Lotus]

JS kenntnisse besitze ich eigentlich gar nicht, aber eventuell kann man sich diese ja noch aneignen

bisher ist das ganze echt umstaendlich mit den ganzen includes etc.. ich vermisse die gute alte zeit wo das ganze noch easy mit frames gestaltet wurde

[Blaxxun]

Zieh dir keine zwei paar Schuhe an und Frag dich warum du in dem einen gut läufst und in dem anderen nicht.

Packs an Es gibt auch CSS Frameworks, die dir weiterhelfen könnten z.B. Blueprint: A CSS Framework | Spend your time innovating, not replicating