✔ Text in einer Zeile, ein Teil links, ein Teil rechts?!

Status
Nicht offen für weitere Antworten.
oONeo2kOo

oONeo2kOo

Grünschnabel
Hallo, ich möchte gerne Text in eine Zeile schreiben, wobei ein Teil links und ein Teil rechts stehen soll.

wie mache ich das am bessten?!

hier noch ein Bild, wie das Ergebniss aussehen soll
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    6,6 KB · Aufrufe: 165
Kanns ja damit mal ein bisschen rumwerkeln:
HTML: 
<style type="text/css">
.left
{
	float : left;
}
.right
{
	float : right;
}
</style>
<div class="left">
	Links
</div>
<div class="right">
	Das andere Links :P
</div>
 
Hi,

ZodiacXPs Vorschlag enthält aber nur die halbe Wahrheit, denn ein anschliessendes Aufheben der Floatumgebung mittels der clear-Eigenschaft gehört selbstverständlich genauso dazu, wie die Errrichtung selbiger, um im Dokument wieder den normalen Textfluß herzustellen.

Siehe hierzu meinen Webmaster-FAQ-Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?, was ansonsten die Folgen in den standardkonformen Browsern sein können, die hier im CSS-Board schon sooo oft in vielen Variationen erörtert wurden, dass ich daraufhin diesen Artikel verfasst habe.

mfg Maik
 
HTML: 
<body>
	<div id="wrapper">
    	<div id="navi">  
      	<div class="float_right">
            bla bla
        </div>
        <div class="float_right">
           bla bla
        </div>
      	<div class="float_right">
         	Farbschema:
         </div>
         <div class="float_clear">         
         	<div class="float_left">	
            	<a href="index.php"><span class="lila">n</span>ews</a> 
               <a href="about_me.php"><span class="lila">a</span>bout me</a> 
               <a href="videos.php"><span class="lila">v</span>ideos</a> 
               <a href="links.php"><span class="lila">l</span>inks</a> 
               <a href="impressum.php"><span class="lila">i</span>mpressum</a>   
          	</div>
            <div class="floar_right">         
            	sebastian<span class="lila">-</span>stiemer<span class="lila">.de</span>   
            </div>           
         </div>
      </div> <!--#navi-->
      <div id="header_linie_oben" class="float_clear">
&nbsp;      </div> <!---#header_linie_oben-->
      <div id="header">
&nbsp;      </div> <!---#header-->
      <div id="header_linie_unten">
&nbsp;      </div> <!---#header_linie_unten-->
      <div id="content">
      </div><!---#content-->
    </div> 
<!--#wrapper-->
</body>


HTML: 
* { padding: 0; margin: 0; } 

html, body { 	
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: 100%; /* Mindesthöhe in IE (<7) */

}

.float_right{
	float:right;
}

.float_left{
	float:left;
}

.float_clear{
	clear:both;
}

#wrapper {
	margin:auto;
	width:903px;
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: 100%; /* Mindesthöhe in IE (<7) */

}
	#navi{
		padding:0px 60px;
	}		
	
		#navi div{
			margin:1px;
			margin-top:10px;
		}
	
	#header_linie_oben{
		height:20px;
		background:url(layout/header_linie_oben_orange.png);
	}
	
	#header{
		height:243px;
		background:url(layout/header.png);
	}
	
	#header_linie_unten{
		background:url(layout/header_linie_unten_orange.png);
	}
	
	#content{		
		padding:0px 60px;
		background:url(layout/bg.png);
	}
 
Kleiner Schreibfehler mit großer Wirkung:

Code: 
<div class="floar_right">
      sebastian<span class="lila">-</span>stiemer<span class="lila">.de</span>
</div>
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück