HTML <hr> Problem beim ausrichten

menetekel

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)

HTML

<html>
<body>
<style type="text/css">
hr {border:none; align:bottom; background-color:green; margin:2.5}
</style>


<hr style="width:3; height:17;float:left;align:bottom">
<hr style="width:3; height:45;float:left;align:bottom">
<hr style="width:3; height:27;float:left;align:bottom">
<hr style="width:3; height:35;float:left;align:bottom">
<hr style="width:3; height:20;float:left;align:bottom">


<br> <br> <br> <br>


<hr align="bottom"; width="3"; size="17" style="float: left">
<hr align="bottom"; width="3"; size="45" style="float: left">
<hr align="bottom"; width="3"; size="27" style="float: left">
<hr align="bottom"; width="3"; size="35" style="float: left">
<hr align="bottom"; width="3"; size="20" style="float: left">

Alles anzeigen

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

<img src="file:///PIXEL.JPG" width="3" height="17" align="bottom">
<img src="file:///PIXEL.JPG" width="3" height="45" align="bottom">
<img src="file:///PIXEL.JPG" width="3" height="27" align="bottom">
<img src="file:///PIXEL.JPG" width="3" height="35" align="bottom">
<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?

synaptic

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

menetekel

Hallo,

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

HTML

<div style= "border-bottom: 17px solid #008000; align:bottom; margin: 2.5; width:3; float:left">
</div>
<div style= "border-bottom: 45px solid #008000; align:bottom; margin: 2.5; width:3; float:left">
</div>
<div style= "border-bottom: 27px solid #008000; align:bottom; margin: 2.5; width:3; float:left">
</div>

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

explanator

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:

HTML

<!DOCTYPE HTML>
<html lang="de">
  <head>
  <meta charset="UTF-8">
  <title>vetikale Linien</title>
  <style>
    #paintbox{
        height: 500px;
        width: 500px;
        border: 1px solid silver;
        position: relative;
    }
    .bar{
        background-color: green;
        width: 3px;
        margin-left: 10px;
        position: absolute;
        bottom: 0px;
    }
  </style>
  </head>
  <body>
  <div id="paintbox">
        <div class="bar" style="height:35px;">
        <div>
        <div class="bar" style="height:135px;">
        <div> 
        <div class="bar" style="height:80px;">
        <div> 
        <div class="bar" style="height:60px;">
        <div> 
        <div class="bar" style="height:199px;">
        <div>      
  </div>
  </body>
</html>

Alles anzeigen

synaptic

sorry, hatte des falsch gelesen *schäm*

Tags