zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text mittig einer Zeile

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2008, 18:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2008
Beiträge: 10
Sihtam befindet sich auf einem aufstrebenden Ast
Standard Text mittig einer Zeile

Hallo,
Ich bastel mir gerade eine Webseite und irgendwie harperters bei der Navigation!
Dort will ich den Text vertikal mittig einer Div Box haben, leider nimmt der weder der IE noch Moz "vertical-align: middle;" an.
Beim IE steht am oberen Rand und beim Moz am unteren!
Jemand eine Ahnung?

CSS Code der NaviBox
PHP-Code:
div#navi {
    
height:22px;
    
background-color:#fdb913;
    
border-top:1px solid #000000;
    
border-bottom:1px solid #000000;
    
padding-left:10px;
    
padding-right:10px;
    
vertical-alignmiddle;
    } 
Hier wirds gezeigt: MathisWienand.de/index1.htm

Ach ja und weiß jemand wie ich nur "Kontakt" rechtsbündig bekomme!

Gruss Mathis

Geändert von Sihtam (22.04.2008 um 18:35 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.04.2008, 18:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

vertical-align funktioniert nur bei inline-Elementen. Versuch es mal mit line-height. Ich sehe ja gerade, du hast ein h2-Tag genommen? Warum das denn? Sowas macht man über eine Liste (ul li...)

Ansonsten, auf die Schnelle:

h2.navi
{
line-height:22px;
margin:0;
padding:0;
word-spacing:20px;
}

Geändert von cgdesign (22.04.2008 um 18:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.04.2008, 19:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2008
Beiträge: 10
Sihtam befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cgdesign Beitrag anzeigen
vertical-align funktioniert nur bei inline-Elementen. Versuch es mal mit line-height. Ich sehe ja gerade, du hast ein h2-Tag genommen? Warum das denn? Sowas macht man über eine Liste (ul li...)
also der IE (6/7) hats nun mittig, der Moz nur nicht, der hat jetzt die Baseline am unteren Rand!


Ah okay ich les gerade valgin läßt sich nur bei inline elementen anwenden!
http://www.css4you.de/Texteigenschaf...cal-align.html

Wenn ich ul, li an wende ensteht aber doch ein liste und ich will die navigations nebeneinander haben!
Mit Zitat antworten
  #4 (permalink)  
Alt 22.04.2008, 19:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Geht ganz simpel....

Code:
<ul id="navlist">
	<li><a href="#">Vita</a></li>
	<li><a href="#">Referenzen</a></li>
	<li><a href="#">Kontakt</a></li>
</ul>

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 22.04.2008, 19:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2008
Beiträge: 10
Sihtam befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cgdesign Beitrag anzeigen
h2.navi
{
line-height:22px;
margin:0;
padding:0;
word-spacing:20px;
}
habs nun auch mal direkt ins h2.navi eingetragen, da klappts nun!
kann man das h2 also quasi auch als box sehen?!
Mit Zitat antworten
  #6 (permalink)  
Alt 22.04.2008, 19:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Na ja, ein Menü gehört semantisch eigentlich nicht in eine Überschrift.
Mit Zitat antworten
  #7 (permalink)  
Alt 22.04.2008, 19:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2008
Beiträge: 10
Sihtam befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cgdesign Beitrag anzeigen
vertical-align funktioniert nur bei inline-Elementen. Versuch es mal mit line-height. Ich sehe ja gerade, du hast ein h2-Tag genommen? Warum das denn? Sowas macht man über eine Liste (ul li...)

Ansonsten, auf die Schnelle:

h2.navi
{
line-height:22px;
margin:0;
padding:0;
word-spacing:20px;
}
Zitat:
Zitat von cgdesign Beitrag anzeigen
Geht ganz simpel....

Code:
<ul id="navlist">
	<li><a href="#">Vita</a></li>
	<li><a href="#">Referenzen</a></li>
	<li><a href="#">Kontakt</a></li>
</ul>

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
wie kann ich das denn machen das nur das Kontakt ganz rechts steht. Ist das ohne weiteres überhaupt möglich?
Mit Zitat antworten
  #8 (permalink)  
Alt 22.04.2008, 19:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Das geht ähnlich einfach, mit einer Liste:

Code:
<ul id="navlist">
	<li><a href="#">Vita</a></li>
	<li><a href="#">Referenzen</a></li>
	<li class="rechts"><a href="#">Kontakt</a></li>
</ul>

CSS:
<style type="text/css">
#navlist li
{
	float: left;
	list-style-type: none;
	padding-right: 20px;
}
#navlist li.rechts
{
	text-align: right;
	float: none;
}
</style>
Mit Zitat antworten
  #9 (permalink)  
Alt 22.04.2008, 19:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2008
Beiträge: 10
Sihtam befindet sich auf einem aufstrebenden Ast
Standard

Okay, sieht plausiebel aus werd ich mal direkt Testen!

Die | am besten nun einfach mit als extra listen element aufführen oder?
Mit list-style-type gehts ja nicht und wenn ja würde dann ja auch beim ersten Punkt ein aufzählungszeichen vor stehen!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.04.2008, 20:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Im Übrigen:

Code:
#navlist
{
	margin: 0;
	padding: 0;
}
Und dem #navlist li kein display: inline mitgeben, sondern float: left;

Dann sieht es auch im FF genauso aus.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:28 Uhr.