"Dreifache Trennlinie in CSS auslagern?"

lockee · 25.04.2013

Hallo Leute,

ich bin zur Zeit daran mir eine neue Seite zu basteln.
Ich habe in einer Box 3 <hr> untereinander. Wenn ich mit w3c drüber gehe, wird mir das als duplicate content angezeigt.

Gibt es hierfür eine elegantere Lösung, eventuell auch via CSS auslagerung?

Zur Veranschaulichung ist hier der Link zu der Seite:

Und hier mein Code:

<hr id="trlinieboxL" />
<hr id="trlinieboxM" />
<hr id="trlinieboxR" />

Und hierzu die CSS:

#trlinieboxL {
width: 80%;
height: 1px;
background-color: orange;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}
#trlinieboxM {
width: 80%;
height: 1px;
background-color: orange;
margin-left: 10%;
margin-right: 0;
margin-top: -28px;
}
#trlinieboxR {
width: 80%;
height: 1px;
background-color: orange;
margin-left: 20%;
margin-right: 0;
margin-top: -28px;
}

Kann mir da jemand weiterhelfen?

Viele Grüße

FloriBo · 25.04.2013

AW: "Dreifache Trennlinie in CSS auslagern?"

Hallo,
du könntest aus den drei Linien auch ein Bild machen in dieses als backgroundimage mit in die <h4> packen.

Grüße

lockee · 25.04.2013

AW: "Dreifache Trennlinie in CSS auslagern?"

Danke für die Antwort!!
mit dem Gedanken habe ich auch schon gespielt, aber
wirkt sich das nicht negaiv auf die Ladezeit aus, wenn ich dann 3 Bilder drin hab?

patrick_l · 25.04.2013

AW: "Dreifache Trennlinie in CSS auslagern?"

FloriBo schrieb:
Hallo,
du könntest aus den drei Linien auch ein Bild machen in dieses als backgroundimage mit in die <h4> packen.

Ich würde es auch so machen. Eine 1 Pixel breite Grafik als bg-image und mit CSS das ganze passend "repeaten".

Liebe Grüße, Patrick

Myhar · 26.04.2013

AW: "Dreifache Trennlinie in CSS auslagern?"

Wieso mit Grafiken arbeiten, wenn diese nicht benötigt werden? Trennlinien werden mit CSS realisiert und auch für 3 Linien braucht es nur 1 HR.
Es ist nicht einmal CSS3 nötig, CSS2.1 reicht dafür vollkommen aus.

Sansieju · 26.04.2013

AW: "Dreifache Trennlinie in CSS auslagern?"

@lockee:
Also ich find das mit den verschobenen Trennlinien sogar stylisch.

Myhar · 26.04.2013

AW: "Dreifache Trennlinie in CSS auslagern?"

Ok, ich gestehe, ich habe mir die Seite nicht angesehen und die verschobenen Linien deshalb nicht gesehen. Dachte, es wären einfach nur 3 Linien untereinander. Trotzdem denke ich, dass sich die Linien mit meiner Technik umsetzen lassen. Ich habe es nur noch nicht ausprobiert

Duddle · 26.04.2013

AW: "Dreifache Trennlinie in CSS auslagern?"

Folgendes ist nur in Chrome getestet. Die Farben der Linien sind nur zum Debuggen unterschiedlich, und wie der Validator darauf reagiert habe ich nicht geprüft:

Falls die Seite nicht geht:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
	<meta charset="utf-8">
	<title>Test</title>
	<style>
	    #trennlinie {
		width: 80%;
		height: 1px;
		background-color: orange;
		margin: 0;
		border: 0;
	    }
	    #trennlinie:before {
		content: '';
		position:relative;
		display:block;
		height: 1px;
		background-color: red;
		margin: 0;
		border: 0;
		top:2px;
		left:10%;
	    }
	    #trennlinie:after {
		content: '';
		position:relative;
		display:block;
		height: 1px;
		background-color: blue;
		margin: 0;
		border: 0;
		top:3px;
		left:20%;
	    }
	    #spalte {
		background-color:#F8F8F8;
		border:1px solid #DEDEDE;
		height:215px;
		float:left;
		margin:10px 10px 50px;
		padding:8px;
		width:28.83%;
	    }
	</style>

    </head>
    <body>
	<div id="spalte">
	    <h3> Hello, World </h3>
	    <hr id="trennlinie" />
	</div>
    </body>
</html>

Duddle

lockee · 03.05.2013

AW: "Dreifache Trennlinie in CSS auslagern?"

Hab alle Möglichkeiten mal durchprobiert. Das von Duddle klappt am besten!!
Vielen Dank, auch an die anderen

Grüße

locke