Text am Oberen Rand des DIV ausrichten

[CaptNick]

Wie schaffe ich es das der Text (siehe Bild) nicht wie jetzt mittig sondern oben am Rand ausgerichtet ist das er bündig ist mit den andern elementen?

<div id="box">
<div class="centerdiv">
<div class="cap_left_login">
</div><div class="blacktrim_login"></div>
<div class="login_top"></div>
<div class="blacktrim_login"></div>
<div class="subttl">Login</div>
<div class="blacktrim_login"></div>
<div class="cap_right_login"></div>
</div></div>

und hier noch die styles

<style>
	.cap_left_login {
	color: #00000;
	height: 24px;
	width: 25px;
	font-family: lcars;
	border-width: 0px;
	float: left;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	-moz-border-top-left-radius: 32px; /* Firefox */
	-moz-border-bottom-left-radius: 32px; /* Firefox */
	-webkit-border-top-left-radius: 32px; /* Safari and Chrome */
	-webkit-border-bottom-left-radius: 32px; /* Safari and Chrome */
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
	background-color: #9999CC;	
	 }	 
	 
.cap_right_login {
	color: #00000;
	height: 24px;
	width: 25px;
	font-family: lcars;
	border-width: 0px;
	float: left;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	-moz-border-top-right-radius: 32px; /* Firefox */
	-moz-border-bottom-right-radius: 32px; /* Firefox */
	-webkit-border-top-right-radius: 32px; /* Safari and Chrome */
	-webkit-border-bottom-right-radius: 32px; /* Safari and Chrome */
	border-top-right-radius: 32px;
	border-bottom-right-radius: 32px;
	background-color: #9999CC;	
	 }	 
	 
	  .login_top {
	color: #00000;
	height: 24px;
	width: 150px;
	font-family: lcars;
	font-weight: 400;
	background-color: #FF9966;
	border-width: 0px;
	border-style: solid;
	font-size: 24px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 0px;
	text-align: right;
	float: left;
	font-style: normal;
	font-weight: normal;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-decoration: blink;
	 }

.blacktrim_login {
	color: #00000;
	height: 24px;
	width: 4px;
	font-family: lcars;
	background-color: #00000
	border-width: 0px;
	float: left;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	 }	 
#box
{
width:100%;

}	 
.centerdiv {
    float:left;
    left:50%;
    position: relative;
}

.centerdiv div {
    float:left;
    right:50%;
    position: relative;
</style>

 

[Mario097]

mach doch bitte border: 0px (solid wenn du einen border hast 1px oder so) und dann die Farbe also border: 1px solid black ersparrt einige Zeilen und ist auch sicherlich übersichtlicher

 

[CaptNick]

und was hat die Border mit meinem eigentlichen Problem der Textausrichtung zu tun?

 

[hela]

und was hat die Border mit meinem eigentlichen Problem der Textausrichtung zu tun?

... das frage ich mich auch. Deine CSS-Selektoren sind voll davon.

 

[Jan-Frederik Stieler]

Hi,
und du hast nen Schreibfehler drinnen. Die letzte Klasse wird nicht geschlossen.
Hier eine aufgeräumte Version: http://jsbin.com/acukow/1/edit

Viele Grüße

 

[CaptNick]

Danke für deine Mühe Jan, einziges Manko dieses "Login" soll kein Link sein.
Sondern nur als reiner Text, da ich nicht mit Grafiken arbeiten will!

 

[Jan-Frederik Stieler]

Hallo,
grundsätzlich kannst du das Element ja ändern.
Aber ein Login ist doch ein Link mit dem man eine Anmeldeseite aufruft, oder?
Denn ist es semantisch auch richtig ein link einzufügen.

Sondern nur als reiner Text, da ich nicht mit Grafiken arbeiten will!

In A-Elementen darf man auch Text verwenden, nicht nur Grafiken.

Grüße

 

[CaptNick]

Ich habe mal Screenshot gemacht damit du weißt in welchem Kontext es sein soll.
Es geht hier alleine um nen Designelemente der Text soll keine direkte Funktion haben! Deswegen will ich diesen Ja auch so platziere das er am oberen Rand bündig mit dem kasten abschließt!

 

[Jan-Frederik Stieler]

Hi,
aschso das ist der Titel. Na dann ersetze das doch einfach durch ein h1 oder ähnliches.
Schau mal ob du es mit margin-top und einem Minuswert hinbekommst oder je nachdem welches Konstrukt du nun hast auch per Schriftgröße bzw. Line-height.

Grüße