zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden menü-elemente horizontal+vertical ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.12.2006, 20:08
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.09.2006
Beiträge: 249
bastien befindet sich auf einem aufstrebenden Ast
Standard menü-elemente horizontal+vertical ausrichten

menueoben.php:

Code:
<span><a href="index.php?section=welcome">Home</a></span>
<span><a href="index.php?section=tutorials">Tutorials</a></span>
<span><a href="index.php?section=contact">Contact</a></span>
<span><a href="index.php?section=sitemap">Sitemap</a></span>
<span><a href="index.php?section=disclaimer">Disclaimer</a></span>
<span><a href="index.php?section=links">Links</a></span>
index.css:

Code:
#menueoben a{color:#990033;
text-decoration:none;
font-weight:700;}

#menueoben span{
vertical-align:middle;
}


so sieht menü aus: link

wie erreiche ich, dass alle elemente wie "Home" vertical zentriert sind in der menüleiste? Im Moment ist ja unten mehr platz als oben trotz der vertical-alingn formatierung! Zudem sollen die elemente wie "Home" usw. auch horizontal ausgerichtet werden, doch horizontal-align gibt es net?

link

ok hab mal code aus dem www kopiert und ein css menue eingebaut usw. doch nur das menü selber ist horizontal aber es gibt keine ausrichtung der einzelnen elemente zueinander die horizontal ist?

Geändert von bastien (12.12.2006 um 20:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.12.2006, 20:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.856
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Mache eine Liste aus dem Menü (so wie in Deinem von maxdesign kopierten Code) und bestimme die Höhe der Links sowie die vertikale Ausrichtung des Textes durch padding-top/-bottom. Alle weiteren Details in meinem FAQ-Beitrag.

Für horizontale Zentrierung text-align: center; (dafür braucht li display: inline; und darf nicht floaten).

Geändert von heiko_rs (12.12.2006 um 20:53 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.12.2006, 21:16
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.09.2006
Beiträge: 249
bastien befindet sich auf einem aufstrebenden Ast
Standard

ich schussel habe sogar text-align:center im vorherigen menü benutzt
Mit Zitat antworten
  #4 (permalink)  
Alt 12.12.2006, 22:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.09.2006
Beiträge: 249
bastien befindet sich auf einem aufstrebenden Ast
Standard

sitelink

mittig ist das ganze nur warum sind die li höher als das ul bzw. der div "navcontainer" wie bekomme ich die orangen blöcke genau so hoch wie die blaue leiste?
Mit Zitat antworten
  #5 (permalink)  
Alt 12.12.2006, 22:31
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.856
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von bastien Beitrag anzeigen
warum sind die li höher als das ul bzw. der div "navcontainer" wie bekomme ich die orangen blöcke genau so hoch wie die blaue leiste?
Das ist eines der Probleme, die sich bei inline-Darstellung von li ergeben. Du kannst allenfalls mit padding-top/-bottom für ul herumprobieren, ob Du's passend kriegst.

Ansonsten: li floaten, mit width in em. ul bekommt ebenfalls width in em (die Summe von li) sowie margin: 0 auto;. Zum Einschließen der floatenden li wendest Du "Easy Clearing" auf ul an (siehe FAQ Punkt 2).
Mit Zitat antworten
  #6 (permalink)  
Alt 12.12.2006, 23:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.09.2006
Beiträge: 249
bastien befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Das ist eines der Probleme, die sich bei inline-Darstellung von li ergeben. Du kannst allenfalls mit padding-top/-bottom für ul herumprobieren, ob Du's passend kriegst.

Ansonsten: li floaten, mit width in em. ul bekommt ebenfalls width in em (die Summe von li) sowie margin: 0 auto;. Zum Einschließen der floatenden li wendest Du "Easy Clearing" auf ul an (siehe FAQ Punkt 2).
yo die inline von li brauch ich ja wegen horizontal hast du gesagt... aber ich kann ja auch von hand über padding:left/right das ganze halbwegs anordnen dann habe ich da li problem net mal schauen wie ichs mache...

ok habe rumgespielt mit padding und height der ul usw

warum zieht es das komplette menü zusammen wenn ich auf einen a link klicke? und warum ist dieser hässliche Rahmen um den link? zudem wird die dick-weiße schrift beim draufklicken dünn-weiß??

Geändert von bastien (13.12.2006 um 00:06 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 13.12.2006, 00:09
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.856
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von bastien Beitrag anzeigen
die inline von li brauch ich ja wegen horizontal hast du gesagt
Es wird damit leichter, aber es geht auch per float (siehe voriges Posting). Und wenn es überall pixelgenau passen bzw. aneinander anschließen soll, ist float sogar die einzige Möglichkeit. Und das würde ich auch Dir raten, denn momentan paßt das alles nicht so toll (und viel besser wird man's mit inline auch nicht hinkriegen).

Zitat:
Zitat von bastien Beitrag anzeigen
warum zieht es das komplette menü zusammen wenn ich auf einen a link klicke?
In welchem Browser? In FX passiert das nicht.

Zitat:
Zitat von bastien Beitrag anzeigen
und warum ist dieser hässliche Rahmen um den link?
Fokusumrandung, ist normal, hat nix mit CSS zu tun
Mit Zitat antworten
  #8 (permalink)  
Alt 13.12.2006, 00:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.09.2006
Beiträge: 249
bastien befindet sich auf einem aufstrebenden Ast
Standard

benutze den FF 2.0

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Ansonsten: li floaten, mit width in em. ul bekommt ebenfalls width in em (die Summe von li) sowie margin: 0 auto;. Zum Einschließen der floatenden li wendest Du "Easy Clearing" auf ul an (siehe FAQ Punkt 2).
gibts dazu ein komplettes Tutorial, ich blick da nicht mehr durch das tut zu "Easy Clearing" kann ich ja schon mal studieren...

wenn du li floaten meintst mit width in em heißt das dann:

#navcontainer ul li { display: inline;
float:"was kommt hier rein";
width:"was kommt hier rein";
}

Geändert von bastien (13.12.2006 um 00:58 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 13.12.2006, 00:59
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.856
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von bastien Beitrag anzeigen
benutze den FF 2.0
Ich auch, und bei mir war nix (zumindest vorhin nicht).

Und was bitte soll das?

Code:
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
padding-top:2px;
background-color: #036;
height:23px;
color: White;
float: left;
width: 898em;
font-family: arial, helvetica, sans-serif;
text-align:center;
vertical-align:middle;
}
Zitat:
Zitat von bastien Beitrag anzeigen
und wegen der Umrandung gabs da nicht mal so einen rahmen scrubber für
Gibt's, aber fange mit solch einem Müll gar nicht erst an.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.12.2006, 01:23
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.09.2006
Beiträge: 249
bastien befindet sich auf einem aufstrebenden Ast
Standard

das mit den 898em war ein verschreiber... den du angeschaut hattest als ich es schon geändert habe, überschneidung also...

Stichpunkt CSS: Experimente mit Menüs

habe gutes tut gefunden wage mich da mal ran... wie bekomme ich diese hässliche Umrandung dann weg?
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
Horizontales Menü mit 3 Ebenen (alle horizontal) im IE Lezlie CSS 1 21.01.2010 15:16
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
horizontal zentriertes Menü CodeWriter CSS 9 05.06.2007 21:34
Listen symbol als Menü horizontal ausrichten dirty south CSS 1 27.04.2007 13:06
Horizontal Menü mit Popdown Pseudo CSS 12 26.06.2006 11:04


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