Horizontale leiste mit fester Breite in 3 Teilen @ tutorials.de: Tutorials, Forum & Hilfe

J0hn B0y · 23.04.11 15:11

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

***CPoly*** · 23.04.11 18:52

Ich nehme mal an, die beiden schwarzen Striche sind nur zum Verdeutlichen.
Bitte sehr

HTML-Code:

<!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>

J0hn B0y · 23.04.11 19:22

Genau, die waren nur zur Erklärung. Ich danke Dir, das klappt bestens

J0hn B0y · 23.04.11 19:47

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;
}

***CPoly*** · 23.04.11 19:52

Weil du eine Breite von 100% angegeben hast zu der dann noch padding addiert wird. Lass width:100% weg.

J0hn B0y · 23.04.11 19:57

Danke Dir

J0hn B0y · 23.04.11 20:16

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

***CPoly*** · 24.04.11 09:37

Wenn ich das online richtig sehe, hat es funktioniert. oder?

J0hn B0y · 24.04.11 12:16

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;
}

***CPoly*** · 24.04.11 13:31

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.

Code css:

border-radius
-moz-border-radius
-webkit-border-radius
-khtml-border-radius

J0hn B0y · 24.04.11 14:38

Danke Dir, implementiert die Forensoftware aber automatisch.

das ist das PHP Template, keine Ahnung ob das iwie hilft. Wobei ich mir sicher bin das ich da nicht gut gearbeitet habe

PHP-Code:


<xen:require css="forum_stats.css" />



<div class="borderwrapper">

    <div class="stats_body">

        <h3 class="stats_title_left">{xen:phrase forum_statistics}</h3>

        <div class="pairsJustified" id="stats_content">

           <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> 

    </div>

<xen:if hascontent="true">    

    <div class="stats_body">

        <h3 class="stats_title_center">{xen:phrase staff_online_now}</h3>

            <div class="staff_on">

            <ul>

                <xen:contentcheck>

                    <xen:foreach loop="$onlineUsers.records" value="$user">

                        <xen:if is="{$user.is_moderator} OR {$user.is_admin}">

                        <li>

                            <xen:avatar user="$user" size="s" text="{$user.username} ({xen:helper userTitle, $user})" class="Tooltip" title="{$user.username}, {xen:helper userTitle, $user}" />

                        </li>

                        </xen:if>

                    </xen:foreach>

                </xen:contentcheck>

            </ul>

            </div>

        <div style="clear:both;"></div>

    </div>

</xen:if>



<div class="stats_body">

    <h3 class="stats_title_right">{xen:phrase members_online_now}</h3>    

        <div id="stats_content">

            <xen:if is="{$onlineUsers.records}">

                <xen:if is="{$visitor.user_id}">

                    <xen:if hascontent="true">

                    <h4 class="minorHeading"><a href="{xen:link account/following}">{xen:phrase people_you_follow}:</a></h4>

                        <ul class="followedOnline">

                        <xen:contentcheck>

                            <xen:foreach loop="$onlineUsers.records" value="$user">

                                <xen:if is="{$user.followed}">

                                    <li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>

                                </xen:if>

                            </xen:foreach>

                        </xen:contentcheck>

                        </ul>

                    <h4 class="minorHeading"><a href="{xen:link members}">{xen:phrase members}:</a></h4>

                    </xen:if>

                </xen:if>

            <ol class="listInline">

            <xen:foreach loop="$onlineUsers.records" value="$user" i="$i">

                <xen:if is="{$i} <= {$onlineUsers.limit}">

                    <li>

                        <xen:if is="{$user.user_id}">

                            <a href="{xen:link members, $user}"

                                class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>

                        <xen:else />

                            {xen:phrase guest}<xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>

                        </xen:if>

                    </li>

                </xen:if>

            </xen:foreach>

            <xen:if is="{$onlineUsers.recordsUnseen}">

                <li class="moreLink">... <a href="{xen:link online}" title="{xen:phrase see_all_visitors}">{xen:phrase and_x_more, 'count={xen:number $onlineUsers.recordsUnseen}'}</a></li>

            </xen:if>

            </ol>

            </xen:if>

        <div class="footnote">

            {xen:phrase online_now_x_members_y_guests_z, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}'}

        </div>

            <h3><a href="{xen:link online}" title="{xen:phrase see_all_online_users}">{xen:phrase current_visitors}</a></h3>

        </div>

    </div>

</div>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Grafik mit fester und flexibler Breite erstellen

Selectfeld mit fester Breite im IE abgeschnitten

Horizontale Navigation: Feste Breite

Horizontale Liste mit fester Elementbreite zentrieren

div mit fester und variabler Breite

E-Mail:

Abonnieren Abbestellen