Bilder als HR - aber ohne Rahmen

Status
Nicht offen für weitere Antworten.
G

Gizmolein

Grünschnabel
Hallo Gemeinde,

ich arbeite grade an einem XHTML 1.0 Document und habe ein kleines Prob mit einer CSS Zuweisung für <hr>.

Es soll ein Bild dem hr zugewiesen werden. (Height=25px) :

hr {
background-image: url(../images/style_default/hr1.jpg);
background-repeat: repeat-x;
height: 25px;
text-align: center;
}

Leider wird das Bild von einem Rahmen umgeben den ich auch nicht entfernt bekomme :-( . Zumindest habe ich versucht die Border Attribute explizit zu löschen - hat allerings nichts gebracht... Weiss jemand Rat?

Vielen Dank für eure Hilfe :)
Gizmolein
 
Original geschrieben von SilentWarrior
Schau mal hier. Dein Hintergrundbild darf es gar nicht geben, das ist weder HTML- noch XHTML-konform.
Zum Vergrößern anklicken....

Hallo SilentWarrior,

danke für die Message. Laut SELFHTML kann HR eines der Universalattribute zugewiesen werden, somit auch das Attrib STYLE. Welche Einschränkungen gibt es denn bei den Styles ? Ich ging davon aus, dass CSS mehr oder minder jedem Tag zugewiesen werden "dürfen" (konform sind). Irre ich mich hier?
Danke für die Hilfe.
Gruß
Gizmolein
 
Nein du irrst dich nicht. Solange deine HTML Datei logisch aufgebaut ist, also du nicht anfängst HTML Elemente für Sachen zu verwenden, für die sie nicht gedacht sind (zb Tabellen zum Layouten) darfst du dich mit CSS frei austoben.

Die Lösung für dein Problem ist als "noshade":
Code: 
<hr noshade="noshade" />
 
Ich hab gerade nochmal ein bisschen rumprobiert. Im IE (wo sonst), gibt es mit der noshade-variante probleme...

Um das zu umgehen legst du dein hr einfach in ein div, machst daran deine Formatierungen und versteckst das hr einfach mit CSS. Somit hast du die logische Inhaltstrennung vorgenommen und gleichzeitig das Aussehen angepasst.

Das CSS:
Code: 
<style type="text/css">
<!--
div.trennung { height: 25px; background: url(deinegrafik.gif); }
div.trennung hr { display: none; }
-->
</style>

... und das HTML:
Code: 
<div class="trennung"><hr /></div>

Das funktioniert jetzt... ;)

@Thomas:
Ich denke mal, um den Ansprüchen von XHTML gerecht zu werden. Spätestens wenn man sich die Seite in einem Textbrowser anschaut, erkennt man, wie angenehm logisch ausgezeichnete Trennlinien sind.
 
Zuletzt bearbeitet von einem Moderator:
@SQiShER:
Danke! Ja, hab's jetzt auf die Variante mit dem <div> gelöst. Klappt wunderbar!

@Thomsa Lindner:
Warum wird kein <IMG> eingebunden: 2 Gründe - zum einen die logische Trennung von (X)HTML und Style und zum anderen die dynamische Austauchschbarkeit der Styles! Einfach ein anderes CSS File linken und schon ist das Design komplett neu :)

Vielen Dank für Eure Hilfe
Gizmolein
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück