zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden li-Elemente: oberen Abstand definieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.03.2007, 21:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2004
Beiträge: 10
rob-master befindet sich auf einem aufstrebenden Ast
Standard li-Elemente: oberen Abstand definieren

Moin Männer,
ich habe eine Problem bei dem ich nicht weiter komme...
Ich habe ein horizontales Menü gebastelt, mit einem schicken Rollover und einem flyout Effekt für die Unterpunkte.
Alles funktioniert...nur an der Optik haperts noch...siehe Anhang dieses threads.
Ich möchte den Abstand der li-Elemente zum oberen Rand (im Bildbeispiel ist das Kontakt und das abgehackte Wort Firmenprofil) justieren....Leider klappt das net

Mein CSS:

PHP-Code:
#nav, #nav ul {
    
padding:0;
    
margin:0;
    list-
style:none;


}
#nav a {
    
display:block;
    
height:100%;
    
overflow:hidden;
    
font:13px ArialVerdenaTimesserif;
    
color:white;
    
padding:17px 0 0 10px;
    
display:inline;
    
}

#nav li {
    
float:left;
    
padding:0;
    
margin:0;
    
width:113px;
    
height:27px;
    
background:url'../images/menuitem.jpg' top left no-repeat;
    
}

 
#nav li ul {
    
position:absolute;
    
width:113px;
    
left:-999em;
    
padding:12px 0 0 0;
}
 
#navi li:hover, #navi li.sfhover {
    
background:url'../images/menuitem.jpg' -27px no-repeat;
}

#navi li:hover ul, #navi li.sfhover ul {
    
left:auto;

Vielen Dank schon mal fürs rüberschauen im voraus

Grüsse
Rob
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.03.2007, 21:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2004
Beiträge: 10
rob-master befindet sich auf einem aufstrebenden Ast
Standard

den Ahnang hat er wohl verschluckt
Angehängte Grafiken
Dateityp: jpg navi.jpg (5,1 KB, 19x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.03.2007, 22:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2004
Beiträge: 10
rob-master befindet sich auf einem aufstrebenden Ast
Standard

juhu,
ich hab mir mal selber geholfen.

Ich habe einfach die Padding Angaben für #nav a folgdermaßen geändert:
PHP-Code:
padding:0 0 0 10px
Und für #nav li ebenfalls:
PHP-Code:
padding:5px 0 0 0
Und siehe da....es funktioniert

Trotzdem danke...
Mit Zitat antworten
  #4 (permalink)  
Alt 08.03.2007, 02:33
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Weißt du denn, wieso es funktioniert, bzw. was du da geändert hast?
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #5 (permalink)  
Alt 08.03.2007, 18:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2004
Beiträge: 10
rob-master befindet sich auf einem aufstrebenden Ast
Standard

öhm...."wer lesen kann ist klar im Vorteil"....steht doch im nächsten Post
Mit Zitat antworten
  #6 (permalink)  
Alt 18.03.2007, 23:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

hi,

ich bin nur grad mal über den thread hier gestolpert und gebe einfach mal ne antwort :

also ich denke, dass dein problem in der line-height liegt. gib dem betreffenden <li> einfach mal folgendes:

PHP-Code:
#nav li {
    
float:left;
    
padding:0;
    
margin:0;
    
width:113px;
    
height:27px;
    
background:url'../images/menuitem.jpg' top left no-repeat;

   
line-height27px;
   
text-aligncenter;
    

is vielleicht sauberer, als mit den paddings zu experimentieren

mfg

holger
Mit Zitat antworten
  #7 (permalink)  
Alt 18.03.2007, 23:35
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

line-height ist nicht wirklich geeignet, zumindest nicht, wenn Zeilenumbruch möglich ist, denn dann entsteht ein übergroßer vertikaler Abstand zwischen Wörtern. Ebenfalls nicht geeignet ist height (wegen Textvergrößerung).

Die sauberste Lösung ist: normale line-height, keine height-Angabe, sondern Erzeugung der Höhe und vertikalen Textausrichtung durch padding-top/-bottom.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.03.2007, 13:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Aber wenn es sich z.b. um einfach nur einen Menüpunkt handelt, werden dort doch eh keine Zeilenumbrüche drin sein. Und ich finde es persönlich unsauberer, wenn ich mit padding rumexperimentieren muss, denn ich bin der Meinung, dass ich genau wissen muss, was ich tue und rumexperimentieren find ich doof

Richtig ist aber auch, dass bei mehrzeiligem Text die ganze Sache schon wieder nicht klappt. Aber dabei wird ja meist so viel reingeschrieben in den Textbereich, dass die Zeilenumbrüche automatisch gemacht werden und bei "normalem" Text ist ja sowieso seltener eine vertikale Zentrierung notwendig.

Nuja - Ich weiß immer noch nicht so recht, was ich von meinen Methoden halten soll Es funktioniert, aber ist dann doch wieder unsauber. Aber ich denke, die Zeit wird den Fortschritt bringen

mfg

Holger
Mit Zitat antworten
  #9 (permalink)  
Alt 19.03.2007, 19:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Man vergibt eine normale line-height und padding-top/-bottom statt height - ich weiß nicht, was Du daran unsauber findest.

Unsauber ist in jedem Falle line-height = height, denn height sollte man nie für textenthaltende Elemente vergeben. Diese brauchen überhaupt keine Höhe, da man diese auf ganz natürliche Weise erzeugt; eben durch ihren Inhalt sowie padding.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.03.2007, 10:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.07.2004
Beiträge: 10
rob-master befindet sich auf einem aufstrebenden Ast
Standard

Danke danke Jungs, aber das Problem ist doch gelöst: Siehe Post vom "06.03.2007 21:33"
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
[Formular] Semantisch richtige Elemente verwenden Zeussi (X)HTML 9 07.09.2010 01:02
Elemente unbrauchbar bei absolute Bara CSS 0 28.07.2010 07:18
Mehr (unnötige) Elemente oder weniger Flexibilität? Pleex CSS 3 13.05.2009 23:17
Welche Positionierung für elemente eines Formulas? bastien CSS 3 01.01.2007 23:31
footer elemente richtig im ie-mac? CYBERSTYLE Site- und Layoutcheck 0 04.03.2006 13:52


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