HTML <hr> Problem beim ausrichten

  • tach,


    Bin kein fachmann was html angeht.
    brauche 5 einfache grüne linien, vertikal, unten bündig in verschiedenen längen, selber abstand.
    Mein Problem ist das die linien immer oben bündig sind und ich sie mit keinem parameter unten bündig bekomme.
    egal in welcher Form ich align:bottom anwende, kein resultat.


    So sollte es aussehen (halt nur unten Bündig)



    In diesem google finde ich immer nur die selben erklärungen das ich mit align, text-align und bottom arbeiten soll... funzt nicht.


    Ich habe es schon aus einem Pixel gebaut, da geht es:
    allerdings brauch ich die datei offline und kann nicht immer auf die datei verweisen. es muss hart ins html....


    HTML
    1. <img src="file:///PIXEL.JPG" width="3" height="17" align="bottom">
    2. <img src="file:///PIXEL.JPG" width="3" height="45" align="bottom">
    3. <img src="file:///PIXEL.JPG" width="3" height="27" align="bottom">
    4. <img src="file:///PIXEL.JPG" width="3" height="35" align="bottom">
    5. <img src="file:///PIXEL.JPG" width="3" height="20" align="bottom">


    vermute ja das es sich mit dem css irgendwie beißt, aber wie schon gesagt, bin kein fachmann
    Jemand einen Ratschlag bitte?

  • du kannst doch div's einen border-bottom: 1px solid #000000; geben.
    die kann man prima ausrichten, etc :)
    da brauchste keine hr, keine img oder so.


    kannst auch das div mit line-height, height, width entsprechend anpassen, dass es nur so hoch und breit ist, wie du es brauchst

  • Hallo,


    ja, auch bei nem div ist es das selbe problem:

    HTML
    1. <div style= "border-bottom: 17px solid #008000; align:bottom; margin: 2.5; width:3; float:left">
    2. </div>
    3. <div style= "border-bottom: 45px solid #008000; align:bottom; margin: 2.5; width:3; float:left">
    4. </div>
    5. <div style= "border-bottom: 27px solid #008000; align:bottom; margin: 2.5; width:3; float:left">
    6. </div>


    Die linien wollen einfach nicht von unten nach oben gehen...

  • Ein Border bottom kann auch nicht von oben nach unten gehen, das kann nur der linke oder rechte Rahmen. Align:bottom gibt es nicht und Ausrichtungen haben bei Blockelementen keine Auswirkung.


    margin: 2.5 hat keine Einheit(em, %, px), ebenso width.


    Lösung: Lerne HTML und CSS


    hier ein funktionierendes Beispiel: