Horizontale leiste mit fester Breite in 3 Teilen

J0hn B0y

J0hn B0y

Mitglied
Hallo Ostereier Suchende ;)
Ich möchte gerne eine horizontale, barierefreie Leiste mit 3 Überschriften erstellen. Jede Überschrift soll eine feste Breite von 33% haben
Leider schlagen alle meine Versuche fehl. Ich bekomme es nicht hin das alles hintereinander steht.

Hier mal ein Bild wie es aussehen soll. Vielleicht kann mir jemand dabei helfen. Danke
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    17,5 KB · Aufrufe: 29
Zuletzt bearbeitet:
Ich nehme mal an, die beiden schwarzen Striche sind nur zum Verdeutlichen.
Bitte sehr

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Drei</title>
	
	<style type="text/css">
	/* <![CDATA[ */
	.trio {
		width:33%;
		float:left;
	}
	
	.heading_left, .heading_center, .heading_right {
		display:block;
		color:#fff;
		background:#3E48CC;
		border:4px solid #F18044;
		text-align:center;
		padding:0.25em;
		margin:0px;
	}
	
	.heading_left {border-right-width:0px;}
	.heading_center {border-width:4px 0px;}
	.heading_right {border-left-width:0px;}
	/* ]]> */
	</style>
</head>

<body>
	<div>
		<div class="trio">
			<h2 class="heading_left">Überschrift 1</h2>
		</div>
		<div class="trio">
			<h2 class="heading_center">Überschrift 2</h2>
		</div>
		<div class="trio">
			<h2 class="heading_right">Überschrift 3</h2>
		</div>
	</div>
</body>

</html>
 
Edit: Ich hab mal versucht das ganze auf meine "Bedürfnisse" anzupassen
Leider will mir das nicht so gelingen.
Ich möchte gerne noch eine Border um es am gesamt Design anzupassen.
Wie man aber hier sehen kann ist die Border auf der rechten Seite zu gross und ich weiss icht warum

CSS:
Code: 
.borderwrapper {
   width:100%;
   overflow:hidden;
   display: block;
   border: 1px solid @secondaryLight;
   border-radius: 10px;
   padding: 5px;  
}
.stats_cell1 { border-top-left-radius: 5px;}
.stats_cell3 { border-top-right-radius: 5px; }
.stats_cell1, .stats_cell2, .stats_cell3 {
   background: url("http://vb.brainlag.eu/images/buttons/newbtn_middle.png") repeat-x #707070;
   display:block;
   color:#fff;
   text-align:center;
   padding:0.25em;
   margin:0px;
   width: 33%;
   float: left;
}
 
Weil du eine Breite von 100% angegeben hast zu der dann noch padding addiert wird. Lass width:100% weg.
 
Jetzt muss ich nochmal nerven. Ich dachte das geht einfacher.. aber wie bekomme ich diesen Code
Code: 
		<div class="pairsJustified">
                    <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                        <dd>{xen:number $boardTotals.discussions}</dd></dl>
                    <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                        <dd>{xen:number $boardTotals.messages}</dd></dl>
                    <dl class="memberCount"><dt>{xen:phrase members}:</dt>
                        <dd>{xen:number $boardTotals.users}</dd></dl>
                    <dl><dt>{xen:phrase latest_member}:</dt>
                        <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
                    <!-- slot: forum_stats_extra -->
</div>
unter heading_left?

Ähnliches habe ich auch bei heading_center und heading_right vor . Sorry nochmals und Danke
 
Hi. Ich hab gestern noch n bisschen rumprobiert und das ist jetzt die CSS, die ich nutze. Vielleicht verbesserungswürdig?
Code: 
.borderwrapper {
   overflow:hidden;
   display: block;
   border: 1px solid @secondaryLight;
   border-radius: 10px;
   padding: 5px;  
}
.stats_body {
   width: 33%;
   float: left;
}
#stats_content {
   font-size:11px;
   padding: 5px 15px;
}
.stats_title_left { border-top-left-radius: 5px;}
.stats_title_right { border-top-right-radius: 5px; }
.stats_title_left, .stats_title_center, .stats_title_right{
   background: url("http://vb.brainlag.eu/images/buttons/newbtn_middle.png") repeat-x #707070;
   color: #fff;
   text-align:center;
   padding: 0.25em;
   margin: 0px;
}
 
Zuletzt bearbeitet:
Ohne den entsprechenden HTML Teil kann man das schlecht sagen ;)

Eine Sache:
Du könntest neben border-radius auch noch alle proprietären Eigenschaften nehmen, um außer dem IE < 9 alle Browser abzudecken.

CSS: 
border-radius
-moz-border-radius
-webkit-border-radius
-khtml-border-radius
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück