mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 12:13 Benutzername: Passwort: Auto-Login

Thema: Hilfe! Probleme mit <li> listen-Menü vom 24.04.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Hilfe! Probleme mit <li> listen-Menü
Seite: 1, 2, 3  Weiter
Autor Nachricht
made
Threadersteller

Dabei seit: 24.04.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 24.04.2006 14:34
Titel

Hilfe! Probleme mit <li> listen-Menü

Antworten mit Zitat Zum Seitenanfang

Hallo,

normalerweise google ich so lange bis ich die Lösung für das Problem habe, aber ich komplett am verzweifeln, weil ich den Fehler einfach nicht finde:

Ich habe ein CSS menü mit einer Liste gestaltet:





die aktive/geladene Seite (in diesem fall Home) wird anders formatiert und durch
Code:
<body id="home">
wird die aktive seite erkannt. das funkst alles und ist schön.

ABER: komischerweise rückt das Aktive Listenelement immer ein, ohne dass ich es ihm sage (siehe bild: home"button" überlappt nach rechts, bzw. ist verschoben)

Kann mir bitte jemand helfen, ich finde das Problem einfach nicht!


hier das css-stylesheet:

Code:
/* Die Navigation */

#navigation{
position:absolute;
text-align: left;
top:180px;
height:100%;
float:left;
background: blue;
width:170px;
padding: 0px 0px 0px 0px;
margin-left:0px;
border-left:3px double #fc0;
border-right:3px double #fc0;
border-bottom:3px double #fc0;
border-top:0px double #fc0;
color:#eee;
}


#navi {
display: block;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: left;
background-color:#22f;
width:99%;
}

html>body #navi {width:auto;}

#navi ul, li {
display: block;
width:99%;
border:0em solid #17a;
padding:0px;
margin:0px;
list-style: none;
}

html>body #navi ul,
html>body #navi li {width:auto;}



#navi a {
display: block;
list-style-type: none;
color: #fff;
background-color:transparent;
text-decoration: none;
font: bold 0.8em verdana, sans-serif;

border-width:1px;
border-style:solid;
border-color:#5bd #035 #068 #6cf;
border-left:1em solid #fc0;
padding:0.1em 0.1em 0.1em 0.9em;

margin: 0px;
width:99%;
}
html>body #navi a {width:auto;}

#navi a:hover {
display: block;
color: #ddd;
background-color:transparent;
text-decoration: none;
font: bold 0.8em;
margin: 0px;

border-color:#069 #6cf #5bd red;
padding:0.1em 0.1em 0.1em 0.9em;

width:99%;
}
html>body #navi a:hover {width:auto;}


/* Die aktiven Menüpunkte */

body#home li#homenavi a,
body#chapter1 li#chapter1navi a,
body#chapter2 li#chapter2navi a,
body#chapter3 li#chapter3navi a,
body#chapter4 li#chapter4navi a,
body#chapter5 li#chapter5navi a,
body#chapter6 li#chapter6navi a,
body#kontakt li#kontaktnavi a,
body#impressum li#impressumnavi a {
position:relative;
display: block;
list-style-type: none;
font: bold 0.8em;
margin: 0px;
background-color:#44a;
text-decoration:none;
border-color:#069 #6cf #5bd white;
padding:0.1em 0.1em 0.1em 0.9em;
width:99%;
color: #fff;
}



body#home li#homenavi,
body#chapter1 li#chapter1navi,
body#chapter2 li#chapter2navi,
body#chapter3 li#chapter3navi,
body#chapter4 li#chapter4navi,
body#chapter5 li#chapter5navi,
body#chapter6 li#chapter6navi,
body#kontakt li#kontaktnavi,
body#impressum li#impressumnavi {
display: block;
list-style-type: none;
margin: 0px;
background-color:transparent;
text-decoration:none;

border-color:#069 #6cf #5bd white;
padding:0.1em 0.1em 0.1em 0.9em;

color: #226;
width:99%;
}



html>body body#home ul#homenavi,
html>body body#home li#homenavi a,
html>body body#chapter1 li#chapter1navi a,
html>body body#chapter2 li#chapter2navi a,
html>body body#chapter3 li#chapter3navi a,
html>body body#chapter4 li#chapter4navi a,
html>body body#chapter5 li#chapter5navi a,
html>body body#chapter6 li#chapter6navi a,
html>body body#kontakt li#kontaktnavi a,
html>body body#impressum li#impressumnavi a,
html>body body#home li#homenavi,
html>body body#chapter1 li#chapter1navi,
html>body body#chapter2 li#chapter2navi,
html>body body#chapter3 li#chapter3navi,
html>body body#chapter4 li#chapter4navi,
html>body body#chapter5 li#chapter5navi,
html>body body#chapter6 li#chapter6navi,
html>body body#kontakt li#kontaktnavi,
html>body body#impressum li#impressumnavi
{
width:auto;
}






und noch das html:

Code:


[...]
<div id="navigation">
      
      <ul id="navi">
      <li id="homenavi"><a href="index.html">HOME</a></li>
      <li id="chapter1navi"><a href="chapter1/index.html">MENÜ #1</a></li>
      <li id="chapter2navi"><a href="chapter2/">MENÜ #2</a></li>
      <li id="chapter3navi"><a href="chapter3/">MENÜ #3</a></li>
      <li id="chapter4navi"><a href="chapter4/">MENÜ #4</a></li>
      <li id="chapter5navi"><a href="chapter5/">MENÜ #5</a></li>
      <li id="chapter6navi"><a href="chapter6/">MENÜ #6</a></li>
      <li id="kontaktnavi"><a href="contact/">CONTACT</a></li>
      <li id="impressumnavi"><a href="imprint/">IMPRINT</a></li>
      </ul>
   
   </div> [...]




Vielen Dank schon mal!

made
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Mo 24.04.2006 18:21
Titel

Antworten mit Zitat Zum Seitenanfang

Hi Lächel
du vergibst dem Listenpunkt ja auch ein padding-left von 0.9em. Somit verschiebt sich der Inhalt in dem Listenpunkt um diesen Wert nach links *zwinker*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
njow

Dabei seit: 23.04.2006
Ort: Löhne
Alter: 38
Geschlecht: Männlich
Verfasst Mo 24.04.2006 18:43
Titel

Antworten mit Zitat Zum Seitenanfang

ehhm ... nach rechts Lächel
  View user's profile Private Nachricht senden
made
Threadersteller

Dabei seit: 24.04.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 24.04.2006 18:50
Titel

Antworten mit Zitat Zum Seitenanfang

aber das steht in allen drin....dann müssten ja alle verrutschen - ausserdem ist padding doch für den innen-abstand (zwischen border und (Text-)Inhalt),oder? *Whaazzzz uppp?*
best made
  View user's profile Private Nachricht senden
njow

Dabei seit: 23.04.2006
Ort: Löhne
Alter: 38
Geschlecht: Männlich
Verfasst Mo 24.04.2006 18:56
Titel

Antworten mit Zitat Zum Seitenanfang

beim padding kommt es ganz drauf an wo du es einsezt. in 'div', 'span' etc ist es der abstand von der outline zum content.
auf den layern direkt ist es natürlich der abstand zu anderen layern bzw anderem content.

zum problem:

falls du firefox benuzt, dann würde ich dir web-developer als plugin empfehlen. damit ist es möglich die seite zu inspizieren, und online z.b. css eigenschaften zu bearbeiten.

bei den links würde ich a:visited auch definieren
stelle sicher, dass alle links kein padding bzw margin-left besitzen.

lg barry


Zuletzt bearbeitet von njow am Mo 24.04.2006 18:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
made
Threadersteller

Dabei seit: 24.04.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 24.04.2006 19:07
Titel

Antworten mit Zitat Zum Seitenanfang

ich schreibe den kram nur im editor....sonst nischt. aber das Plugin guck ich mir mal an ...

Wenn das normale Menü (nicht aktuelle Seiten) die gleichen Eigenschaften (padding/margin) wie die aktuelle Seite hat, sollte es doch eigentlich kein problem sein?

viel mehr vermute ich, dass es vielleicht mit <ul> zu tun hat. Weil ich <ul> für nicht aktuelle Menüpunkte definiert habe, aber ich hab langsam das gefühl es liegt daran, dass <ul> für den aktuellen Menüpunkt nicht definiert ist. hab nur keine ahnung wie....?

guck mal: padding hat die gleichen werte, dann kann es doch nicht wg. padding unterschiedlich aussehen?

nicht aktuelle Menüpunkte:

Code:
#navi {
display: block;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: left;
background-color:#22f;
width:99%;
}

html>body #navi {width:auto;}

#navi ul, li {
display: block;
width:99%;
border:0em solid #17a;
padding:0px;
margin:0px;
list-style: none;
}

html>body #navi ul,
html>body #navi li {width:auto;}



#navi a {
display: block;
list-style-type: none;
color: #fff;
background-color:transparent;
text-decoration: none;
font: bold 0.8em verdana, sans-serif;

border-width:1px;
border-style:solid;
border-color:#5bd #035 #068 #6cf;
border-left:1em solid #fc0;
padding:0.1em 0.1em 0.1em 0.9em;

margin: 0px;
width:99%;
}
html>body #navi a {width:auto;}

#navi a:hover {
display: block;
color: #ddd;
background-color:transparent;
text-decoration: none;
font: bold 0.8em;
margin: 0px;

border-color:#069 #6cf #5bd red;
padding:0.1em 0.1em 0.1em 0.9em;

width:99%;
}
html>body #navi a:hover {width:auto;}



Aktive Menüpunkte:
Code:


body#home li#homenavi a,
body#chapter1 li#chapter1navi a,
body#chapter2 li#chapter2navi a,
body#chapter3 li#chapter3navi a,
body#chapter4 li#chapter4navi a,
body#chapter5 li#chapter5navi a,
body#chapter6 li#chapter6navi a,
body#kontakt li#kontaktnavi a,
body#impressum li#impressumnavi a {
position:relative;
display: block;
list-style-type: none;
font: bold 0.8em;
margin: 0px;
background-color:#44a;
text-decoration:none;
border-color:#069 #6cf #5bd white;
padding:0.1em 0.1em 0.1em 0.9em;
width:99%;
color: #fff;
}



body#home li#homenavi,
body#chapter1 li#chapter1navi,
body#chapter2 li#chapter2navi,
body#chapter3 li#chapter3navi,
body#chapter4 li#chapter4navi,
body#chapter5 li#chapter5navi,
body#chapter6 li#chapter6navi,
body#kontakt li#kontaktnavi,
body#impressum li#impressumnavi {
display: block;
list-style-type: none;
margin: 0px;
background-color:transparent;
text-decoration:none;

border-color:#069 #6cf #5bd white;
padding:0.1em 0.1em 0.1em 0.9em;

color: #226;
width:99%;
}



html>body body#home ul#homenavi,
html>body body#home li#homenavi a,
html>body body#chapter1 li#chapter1navi a,
html>body body#chapter2 li#chapter2navi a,
html>body body#chapter3 li#chapter3navi a,
html>body body#chapter4 li#chapter4navi a,
html>body body#chapter5 li#chapter5navi a,
html>body body#chapter6 li#chapter6navi a,
html>body body#kontakt li#kontaktnavi a,
html>body body#impressum li#impressumnavi a,
html>body body#home li#homenavi,
html>body body#chapter1 li#chapter1navi,
html>body body#chapter2 li#chapter2navi,
html>body body#chapter3 li#chapter3navi,
html>body body#chapter4 li#chapter4navi,
html>body body#chapter5 li#chapter5navi,
html>body body#chapter6 li#chapter6navi,
html>body body#kontakt li#kontaktnavi,
html>body body#impressum li#impressumnavi
{
width:auto;
}


ps: also alle browser zeigen mir übrigens das padding als abstand vom rand zum text.
  View user's profile Private Nachricht senden
made
Threadersteller

Dabei seit: 24.04.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 24.04.2006 19:09
Titel

Antworten mit Zitat Zum Seitenanfang

http://css4you.de/padding.html

best made * Ich geb auf... *
  View user's profile Private Nachricht senden
njow

Dabei seit: 23.04.2006
Ort: Löhne
Alter: 38
Geschlecht: Männlich
Verfasst Mo 24.04.2006 19:14
Titel

Antworten mit Zitat Zum Seitenanfang

eben kurz zum firefox-pugin:

es ist nicht möglich es im nachhinein zu installieren.
du musst also firefox installieren ( bzw vorher deinstallieren ), und dann unter art oder so 'benutzerdefiniert' klicken.
erst da kommt die auswahl für das plugin.

hmm bin gerade auch nen bisl verwirrt. vielleicht schickst du uns mal den link der seite, damit man sich ein besseres bild machen kann.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Problem mit Listen-Menü (horizontal)
CSS Listen Menü - komisches Margin
Probleme mit Menü
CSS Menü - Probleme mit IE
Probleme mit DHTML-Menü
Probleme mit Dropdown-Menü (Javascript)
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.