Probleme mit Horizontallinien

Computer: Software & Programmierung HTML & CSS
#1

Ich habe auf meiner Seite drei Linien. Diese sollen OHNE trennung direkt an einander liegen. Wie muss ich das programieren?

       
       

hab es schon mit margin und padding versucht, da rührt sich nix.

Ich hoffe mir kann jemand helfen, seh den wald vor lauter Bäumen grad nicht.

www.feuerspiele.net

Schon mal besten dank

#2

Also ich habe mir die Seite angesehen und über die Entwicklerwerkzeuge (im Internet-Explorer mit F12 aufrufen) die margin für alle drei Linien auf 0 gesetzt, und sie pappen aneinander. Wenn Du eine CSS-Datei hast, die vielleicht noch ein CSS-Framework einbindet, musst Du vielleicht noch diese margin-Anweisung mit hoher Prio versehen:

hr { margin:0!important; }

#3

Hallo

. Wie muss ich das
programieren?

keine Ahnung mit JavaScript vielleicht ?

HTML und CSS ist kein Programmieren , sondern eine Beschreibung wie was ist.

       
       

ich hoffe das ist nicht dein selbstgemachter code .
was sollen die ganzen hardcodierten informationen zum aussehen ?

CSS
.rot {color:#FF0000; background-color:#FF0000} // hr in verschiedenen browsern
.gruen {color:#00FF00; background-color:#00FF00} // hr in verschiedenen browsern
.balken { border:none; width:100% ; font-size:xx-small }

HTML

oder

CSS
hr { border:none; width:100% ; font-size:xx-small }
.rot {color:#FF0000; background-color:#FF0000} // hr in verschiedenen browsern
.gruen {color:#00FF00; background-color:#00FF00} // hr in verschiedenen browsern

HTML

auch in programmen kann man einstellen ob die ausgabe via CSS erfolgt oder hardcodiert im HTML tag rumsaust.

#4

Hallo,

ich würde das ganz anders lösen, nämlich so (weil flexibler im HTML):

\<!--
body { background: #000; }
div.hr3 {
 background-color: red;
 border-top: 1px solid yellow;
 border-bottom: 1px solid yellow;
 clear: both;
 align: center;
 /\* folgende 2 Einträge, um sicher zu gehen, 
 \* dass "hr3" als Block-Element erscheint
 \*/
 display: block;
 height: 1px;
}
//--\>

div.hr3 { height: 1px; }
 


So! Das ist der Code, der für den gewünschten Zweck funktioniert.

Ich versuche stets das HTML zu minimieren und den HTML-Code ausreichend allgemein zu halten. So hat man mit CSS (ausgelagert in eine Stylesheet-Datei) bessere Möglichkeiten, auf das gewünschte Aussehen der Website Einfluss zu nehmen (zentrale Änderung/en in der Stylesheet-Datei).

HTH & CU
DF
#5

…natürlich sollten die Farben Gelb und Rot im Code getauscht werden! :wink:

#6

Hallo,

das hat aber nix mit hr zu tun , also ganz schlechtes design
ein div block als gruppe ohne inhalt , ja sauber, da kannst du auch gleich hr formatieren zum gleichen div standard.

was ein unsinn

#7

Ich habe auch mit margin und padding Erfolg (Firefox): style=„padding:0px; margin:0px;“

#8

Hallo zurück,

na das musst Du aber auch dem Frager posten: Warum drei HR-Tags direkt aufeinanderfolgen? (Das geht durch keinen Validation Service und kein HTML-Tidy durch!)

Ich jedenfalls sehe keine Bruch mit der HTML-Konformität, einen DIV-Block zum Trenner umzufunktionieren. Andererseits lässt sich der von mir gepostete Code auch auf das HR umschreiben. (Hmm. Eigentlich ein guter Gedanke.)

Nun ja, der Frager sollte ^das bewerkstelligen können.

CU, DF

#9

Hi,

lässt sich der von mir gepostete Code auch auf das HR
umschreiben. (Hmm. Eigentlich ein guter Gedanke.)

hr sind allerdings etwas komplizierter browserübergreifend zu formatieren:
hr {height:3px; color:#ff0; background:#ff0;
border-width:1px 0; border-color:#f00; border-style:solid}

Gruß
Ingo

1 Like