Verschachteln von Containern

[SNMP]

Hallo,
ich habe folgenden Code:

 <div style="position:absolute; left:0px; top:0px;   width:300px;height:70px;background:fuchsia">
<span style="position:relative; left:0px; top:0px;  background:aqua">
          Standort:
     </span>
     <span style="position:relative; left:90px; top:0px; background:lime">
          ABC AG<br />Freiligrathstraße 20 <br /> 18055 Rostock
     </span>
</div>

Ich möchte damit bezwecken, dass ich den äußeren div-Container beliebig verschieben kann und die beiden inneren span-Container dabei immer die gleiche Position zueinander haben.
Mein Problem ist, das die erste Zeile des 2. span-Containers (ABC AG) nicht gleichmäßig links ausgerichtet ist wie die weiteren Zeilen.
Kann mir jemand sagen woran das liegt und wie ich es korrigieren kann?
Wäre sehr dankbar.
Gruß SNMP

 

[koslowski]

Hi,

wenn du Container verschachtelst brauchst du mit Sicherheit kein <span>, und position absolute und relative können da auch sehr kontraproduktiv sein.

position:absolute; heißt ja, das du das Element aus dem Fluß nimmst und die anderen Elemente tuen so als wäre es nicht da.

position:relative; heißt, du verschiebst das Element relativ zu seiner alten Position aus dem Fluß, die alte Position wird aber nach wie vor von ihm besetzt auch wenn es verschoben worden ist.

<span> ist zudem noch semantisch falsch.

Mach dir drei div-Container und laß die beiden inneren floaten.
Die Abstände zueinander dann mit padding/margin regeln.

 

[sysop]

... <span> ist zudem noch semantisch falsch.

wieso ist <span> zudem noch semantisch falsch ?

zitat von mediaevent.de:
Das <span>-Tag kennzeichnet eine ausgewählte Menge von Elementen als span-Elemente und wendet Kernattribute auf diese Menge an.

ich sehe da so keinen fehler.

wenn du noch weitere container hinzufügen möchtest solltest du ausserdem darauf achten, dass css keine auszeichnungssprache ist. man vefällt da recht schnell der divmania, weil man so IMMER w3c konformen code zustande bringt.

ich persönlich halte das für schlechte programmierung und ein sicheres zeichen dafür, dass man nicht mal simpelstes html beherrscht. css soll im zusammenhang MIT html verwendet werden nicht anstelle.

 

[koslowski]

Hi,

wieso ist <span> zudem noch semantisch falsch ?

Weil <span> ein Inline-element und kein Boxelement ist.
Er schrieb ja im Titel "container verschachteln" und ein Container beeinhaltet ja andere Elemente Grafiken, Listen <p> usw.

Zitat:
zitat von mediaevent.de:
Das <span>-Tag kennzeichnet eine ausgewählte Menge von Elementen als span-Elemente und wendet Kernattribute auf diese Menge an.

was will uns das denn sagen, bzw. in welchem Zusammenhang?

ich sehe da so keinen fehler.

Vielleicht lassen die Erklärungen des Frederöffners einfach nur reichlich Raum für Interpretationen.

wenn du noch weitere container hinzufügen möchtest solltest du ausserdem darauf achten, dass css keine auszeichnungssprache ist. man vefällt da recht schnell der divmania, weil man so IMMER w3c konformen code zustande bringt.

Versteh ich auch nicht, Was meinst du damit?

In der CSS stehen die Formatierungsanweisungen fürs Markup.

Viele div-container kannste auch schnell haben, wenn du z.B. runde Ecken willst (für vier runde Ecken brauchst gleich mal 5 divs), aber runde Ecken ist natürlich Geschmackssache.

Immer W3C konformen Code zustandebringen ist eine Selbstverständlichkeit.

ich persönlich halte das für schlechte programmierung und ein sicheres zeichen dafür, dass man nicht mal simpelstes html beherrscht. css soll im zusammenhang MIT html verwendet werden nicht anstelle.

Wen oder was meinste denn damit??

Rätsel über Rätsel?