2 probleme zu position:absolute

[h2so4]

hy, auch wenn ich schätze das es eher css ist poste ich es mal hier.
folgends.

1. ich möchte eine durchgezogene linie an einer festen höhenposition haben
also wohl so
<div style="position:absolute; top:150px"><hr noshade, size="6", color="red"/></div>
klappt auch wunderbar im iexplorer jedoch wird mir in firefox der streifen verkürzt bis auf einem punkt angezeigt. Wie kann ich es so gestalten, das mir auch in firefox (und anderen browsern) die linie vollständig angezeigt wird.

2. ich möchte einen text ber über 2 zeilen geht an einer bestimmten höhenpostion positionieren (an sich ja kein problem) jedoch so, das er mittig (central) angezeigt wird. Bisher haben hier meine versuche nicht geklappt. Oder ist es besser dies in einer tabelle zu machen?

[Rafael]

Also deine hr-Linie sieht mir verdächtig aus. Ich weiß nicht, ob sie sich so formatieren lässt aber gesund ist das nicht. Außerdem haben hr-s komische angewohnheiten. Nimm lieber deine bereits vorhandene, sonst überflüssige div-Box. Setze width auf 100% und nimm eine backgroundcolor. height ist dann die jeweilige Linienfarbe.

[GodLike]

Also deine hr-Linie sieht mir verdächtig aus. Ich weiß nicht, ob sie sich so formatieren lässt aber gesund ist das nicht. Außerdem haben hr-s komische angewohnheiten. Nimm lieber deine bereits vorhandene, sonst überflüssige div-Box. Setze width auf 100% und nimm eine backgroundcolor. height ist dann die jeweilige Linienfarbe.

Wie bitte?

height ist dann die jeweilige Linienfarbe.

Doch wohl eher die Höhe nicht?!

background-color ist die Farbe.

GodLike

[Rafael]

jap, schneller geschrieben als gedacht: height bezeichnet die Dicke und background-color ist die Linienfarbe.

[H2SO4]

hat bisher gut geklappt, aber jetzt ist was passiert wofür ich keine erklärung finde.
in der zweiten ist aus irgendwelchen gründen das div nicht aktiv obwohl ich es ja in der zeile davor geschlossen habe. Dadurch ist die (test)höhenangabe von 5px des satzes auser kraft gesetzt und der text wird unter die linie gepackt. Dort soll er zwar sowieso hin aber dennoch will ich wissen wo der fehler liegt.

<div style="position:absolute; top:480px; left:0px; width:100%"><hr noshade="noshade" style="height:3px; background-color:black; color:black> </div>

<div style="position:absolute; top:5px"> <font size = "3"><div align="center"><b>Entfessle deine Phantasie und mach dir deinen eigenen individuellen Schmuck aus über <font color="red">1400</font> verschiedenen Perlen aus unterschiedlichen Materialien.</font></div>

[Rafael]

"Entfessle deine Fantasie" klingt toll mal vorab ;)

Der "Fehler" liegt an deinem Verständnis der absoluten Positioninierung. Auch bei dieser wird vom letzten absoluten Objekt weitergerechnet.

[Struppi]

<div style="position:absolute; top:480px; left:0px; width:100%"><hr noshade="noshade" style="height:3px; background-color:black; color:black> </div>

<div style="position:absolute; top:5px"> <font size = "3"><div align="center"><b>Entfessle deine Phantasie und mach dir deinen eigenen individuellen Schmuck aus über <font color="red">1400</font> verschiedenen Perlen aus unterschiedlichen Materialien.</font></div>

Es fehlt ein Anführungszeichen.

Aber willst du wirklich deinen Code so formatieren? position absolute ist ein eher selten gebrauchte Eigenschaft, mit der du sparsam umgehen solltest, da du dir damit viele Schwierigkeiten einhandeln kannst.

Struppi.

[H2SO4]

jo, das mit dem position:absolute ist mir durchaus bewusst das mir dies probleme bereiten kann bei verschiedenen monitorgrößen. Leider hatte ich bisher keine bessere idee wie ich es besser machen kann.
Währe super, wenn ihr mal einen blick auf den code werfen könntet. Wo ich zudem bisher noch probleme habe ist, das das dicke wort PerlenSpiele oben nicht wirkllich in der mitte steht und der satz am unterem ende nur die zweite zeile in der mitte steht.
Schätze auch mal das einiges nicht wirklich "schön" programiert ist. Für ratschläge wie ich meinen stil verbessern kann oder einfach besser programieren kann währe ich sehr dankbar :)
Habe die seite auf www.michaelmoebius.net/bilder/index.html gelegt

[Rafael]

Du hast ein oberes div, ein mittleres und ein unteres.
Das wäre wohl die einfachste Lösung.

[Detlef G.]

Hallo Schwefelsäure

<div style="position:absolute; top:480px; left:0px; width:100%"><hr noshade="noshade" style="height:3px; background-color:black; color:black> </div>

<div style="position:absolute; top:5px"> <font size = "3"><div align="center"><b>Entfessle deine Phantasie und mach dir deinen eigenen individuellen Schmuck aus über <font color="red">1400</font> verschiedenen Perlen aus unterschiedlichen Materialien.</font></div>

Du schachtelst ein Div in ein Font-Element (was unzulässig ist) und schließt das Div nicht wieder.
Wer will da nachvollziehen, was die Browser raten, was du gemeint haben könntest?

Auf Wiederlesen
Detlef

[H2SO4]

Bereits geändert, war nur zum probieren da, sollte eigentlich nicht hier stehen ;)

Hallo Schwefelsäure

<div style="position:absolute; top:480px; left:0px; width:100%"><hr noshade="noshade" style="height:3px; background-color:black; color:black> </div>

<div style="position:absolute; top:5px"> <font size = "3"><div align="center"><b>Entfessle deine Phantasie und mach dir deinen eigenen individuellen Schmuck aus über <font color="red">1400</font> verschiedenen Perlen aus unterschiedlichen Materialien.</font></div>

Du schachtelst ein Div in ein Font-Element (was unzulässig ist) und schließt das Div nicht wieder.
Wer will da nachvollziehen, was die Browser raten, was du gemeint haben könntest?

Auf Wiederlesen
Detlef

[Rafael]

Zu Problem 2:

Nimm eine div-box. Gibt ihr eine entsprechende Breite und setzte text-align: center;

Z-indizi ggf nicht vergessen. Auch beim anderen nicht.

[H2SO4]

mh, habe versucht deine vorschläge umzusetzen. Leider bin ich noch am anfang der html kunst.

habe es mal versucht zu schreiben. Aber etwas stimmt nicht. Kannst du mir sagen wo der fehler liegt.

<div align="center" style="position:absolute; top:290px" style="width:100%; heigth:10px" bgcolor="red">
jkjgfkjfgijfgiojgfiojgriojrg

</div>

[Der Martin]

Hallo,

mh, habe versucht deine vorschläge umzusetzen. Leider bin ich noch am anfang der html kunst.

... von CSS ganz zu schweigen. ;-)

Kannst du mir sagen wo der fehler liegt.

<div align="center" style="position:absolute; top:290px" style="width:100%; heigth:10px" bgcolor="red">
jkjgfkjfgijfgiojgfiojgriojrg
</div>

Es sind sogar drei Fehler: a) ein Denkfehler, b) ein Typo, und c) ein Schönheitsfehler.

a) Du hast zwei style-Attribute für das Element. Mit dem zweiten überschreibst du das erste wieder. Fasse die Eigenschaften ein _ein_ style-Attribut zusammen, oder noch besser, schreibe sie in ein zentrales Stylesheet und vermeide inline-styles.

b) Die Schreibweise von "height" solltest du dir nochmal genau ansehen.

c) Wenn du schon ansatzweise CSS verwendest, was haben dann die alten darstellungsbezogenen Attribute align="center" und bgcolor="red" noch hier zu suchen? Weg damit, solche Angaben gehören ins Stylesheet.

So long,
 Martin

[GodLike]

hy, auch wenn ich schätze das es eher css ist poste ich es mal hier.
folgends.

1. ich möchte eine durchgezogene linie an einer festen höhenposition haben
   also wohl so
   <div style="position:absolute; top:150px"><hr noshade, size="6", color="red"/></div>
   klappt auch wunderbar im iexplorer jedoch wird mir in firefox der streifen verkürzt bis auf einem punkt angezeigt. Wie kann ich es so gestalten, das mir auch in firefox (und anderen browsern) die linie vollständig angezeigt wird.

2. ich möchte einen text ber über 2 zeilen geht an einer bestimmten höhenpostion positionieren (an sich ja kein problem) jedoch so, das er mittig (central) angezeigt wird. Bisher haben hier meine versuche nicht geklappt. Oder ist es besser dies in einer tabelle zu machen?

Also dein <hr> Tag ist ja doch schon sehr unschön und absolut nicht valide.

  
<div style="position:absolute;top:150px;left:0;width:100%;"><hr noshade="noshade" style="height:6px;background-color:#F00;color:#F00;"></div>  

Also mit dem noshade bin ich mir jetzt nicht sicher, denke aber doch das man das so schreiben kann.

Ja, das ist CSS und so funktioniert es bei mir.
Es wird in SeaMonkey(Firefox) und IE dasselbe angezeigt.

GodLike

[H2SO4]

super hat geklappt. Wie gesagt bin noch am anfang und das "schöne" Programieren muss ich erst noch lernen :) Aber vielen dank an alle