Farbige Balken?

[below]

Hallo,

wie kann ich "farbige Balken" erzeugen, also Elemente ohne Text, die einfach nur eine bestimmte Farbe haben?

<p> Tut das nur dann, wenn ich auch einen Text reinsetze, mit <div> und <span> hatte ich keinen Erfolg.

Um es anders auszudrücken: Ich will das hier, ohne Text

<p style="background-color:#808040; color:#E0E0E0" width=100%>Text</p>

Danke

Alex

 

[msslovi0]

Farbige Balken, IOW eine horizontale Linie:

[...]
<style type="text/css">
hr {
	background-color: #808040;
	height: 10px;
	border: none;
}
</style>
[...]
<hr />
[...]

Matt

 

[wegus]

Entweder verwendest Du ein 1-Punkt.GIF der Farbe und streckst es passend oder Du verwendest einen <div> und gibtst dem z.B. eine konkrete Breite in Pixeln an

width="100px"

gute Beispiele und Erläuterungen findest Du auch hier: http://de.selfhtml.org/css/eigenschaften/index.htm

 

[msslovi0]

Es gibt eine semantisch saubere Lösung, die in allen gängigen Browsern funktioniert. Ich wüsste nicht, wieso man da in die Trickkiste greifen müsste.

 

[below]

Danke, das mit dem <hr> sieht gut aus, muss ich heute abend mal probieren

Alex

 

[secretchord]

Es gibt eine semantisch saubere Lösung, die in allen gängigen Browsern funktioniert. Ich wüsste nicht, wieso man da in die Trickkiste greifen müsste.

ich fuer meinen Teil waere diesbezueglich gespannt wie ein Flitzbogen

 

[TerminalX]

ich fuer meinen Teil waere diesbezueglich gespannt wie ein Flitzbogen

Er hat die Lösung ja schon gepostet. Siehe Beitrag Nummer #2.

 

[wegus]

Danke, das mit dem <hr> sieht gut aus, muss ich heute abend mal probieren

Alex

Nicht jeder Browser stellt das <hr> darauf hin farbig da. Man kann IMHO aber auch ein IMG dafür als Quelle angeben. Infos: http://www.css4you.de/trickkiste/tr00007.html

 

[dms]

Einfarbig geht mit Hintergrundfarbe soweit ich mich erinnere Browserübergreifend. Problematisch wirds erst bei z.B. gepunkteten Linien. Das geht im alten IE nicht.

Ich machs immer so:

<div class="hr">
   <hr />
</div>

.hr hr {
   display:none;
}

.hr {
   height:1px;
   margin-top:10px;
   margin-bottom:10px;
   background:...;
}

Wenn das nicht möglich ist weil der Content z.B. von einem CMS generiert wird kann man auch sowas per onload machen:

function hr2div() {
   if(document.attachEvent && !window.opera) { //only the bad one
      for(i=document.getElementsByTagName('hr').length-1;i>=0;i--) {
         var hrdiv = document.createElement("div");
         hrdiv.className='hr';
         document.getElementsByTagName('hr')[i].parentNode.replaceChild(hrdiv, document.getElementsByTagName('hr')[i]);
      }
   }
}