✔ CSS ohne Tabelle, probleme mit externem CSS

irena · 23. März 2007

Ich habe eine Website kreiert ohne Tabellen, alles funktioniert. Sobald ich aber ein externes CSS (Aufklappmenu mit classen) einbinde, funktioniert die <ul> nicht mehr. im IE 6 kommen die square nicht und in anderen Browsern an falschen Positionen. Wenn ich das externe Stylesheet rausnehme, stimmt alles. Was muss ich also am externen Stylesheet ändern? Ich glaube, ich muss diese umschreiben.

-- hier das externe Stylesheet Aufklappmenu ---

Code:

html, body, ul {
    margin: 0;
    padding: 0;
}
/*
body {
    background-color: green; }*/

#nav {
      width: 12em;
height: 5em;
    margin: 1px;
}

#nav a {
    width: 100%;
    display: block;
}

ul {

    list-style-type: none;
}

ul.liste li {
    margin: 1px 0;
}

ul.sub li {
    margin-right: 12px;
}

ul.liste a {
    padding: 10px 0 10px 16px;
    background-color: #336699;
    border-left: 1px solid #000080;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
      font-size: 80%;
    text-decoration: none;
}

ul.sub a {
    padding-left: 28px;
    background-color: #CCCCFF;
    border-left: 1px solid #000080;
    color: #000;
    font-style: italic;
}

ul.liste a:hover {
    background-color: #CCCCFF;
    text-decoration: underline;
}

ul.sub a:hover {
    background-color: #CCCCFF;
}

ul.liste a.hier {
    background-color: #336699;
    border-left: 1px solid #ff0000;
    color: #fff;
}

ul.sub a.hier {
    background-color: #CCCCFF;
}

ul.liste a:hover.hier {
    text-decoration: none;
}

ul.liste a.hier2 {
    background-color: #336699;
    border-left: 1px solid #000080;
    color: #fff;
}

a#skiplink { 
    position: absolute; 
    left: 0px; 
    top: -500px; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
}

So habe ich das tabellenlose CSS aufgebaut: Das Menu ist verschachtelt in einer Div-Box. In einer anderen Div-Box ist dann die Aufzählung die nicht funktioniert.

so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="menue/nav.css">

<style type="text/css">
<!--
body {
    text-align: left;
    margin: 0;
    padding: 0;
    background: aliceblue;
    }
#container {
background: white url(images/bggreen.gif) center top repeat; 
width: 1051px;
}
.......
#wechsel h1 {
   margin: 0;
   color: #6B6645;
    font-size: 20px;
    font-family: Arial, Helvetica;
    letter-spacing: 0.2em;
}
#wechsel p {
   font-family: Arial, Helvetica;
    font-size: 80%;
    color: #333333; 
    }
#wechsel ul { 
   font-family: Arial, Helvetica;
    font-size: 80%;
    color: #333333;
    list-style-type:square;
    color:#666600; 
    }
    #wechsel ul li { 
    list-style=square;
    }

#fuss a {
    font-family: Arial, Helvetica;
    font-size:60%;
    text-decoration: none;
    color: #535039; 
    }
-->
</style>

Das funktioniert nicht:
#wechsel u.......

Kann mir jemand helfen? Ich glaube, es muss am externen stylesheet liegen, da dort auch ul definiert ist, irgendwie verträgt das sich nicht.

Danke im Voraus.

Maik · 23. März 2007

Hi,

eventuell könnte das hier weiterhelfen:

Code:

/* aus */
ul {

    list-style-type: none;
}

/* wird */
#nav ul.liste, #nav ul.sub {

    list-style-type: none;
}

Außerdem hast du hier anstelle des Doppelpunktes ein Gleichheitszeichen notiert:

Code:

#wechsel ul li { 
    list-style=square;
    }

irena · 23. März 2007

Danke für die Antwort. Habe es ausprobiert und funktioniert leider auch nicht.
Gruss

Maik · 23. März 2007

Kannst du bitte mal den vollständigen Quellcode (HTML + CSS) des Dokuments zeigen, oder einen Link zur Problemseite nennen?

muhkuh · 23. März 2007

CSS:

#wechsel ul li { 
    list-style=square;
}

Das ist 1. falsch (das schon erwähnte = an Stelle des : ) und 2. ist das Attribut list-style schlichtweg nicht auf das Element <li> anwendbar

Den Teil kannst Du also getrost entfernen (CSS-Style im Dokument).

Korrektur: selbstverständlich ist list-style-type auf li-Elemente anwendbar. Ich muss mich also für diese Fehlinformation entschuldigen.

Änder deine externe CSS-Datei wie folgt um

CSS:

...
#nav a {
    width: 100%;
    display: block;
}

ul.liste, ul.sub {
    list-style-type: none;
}

ul.liste li {
    margin: 1px 0;
}

ul.sub li {
    margin-right: 12px;
}
...

Maik · 23. März 2007

muhkuh hat gesagt.:
ist das Attribut list-style schlichtweg nicht auf das Element <li> anwendbar

Seit wann denn das?

Bei mir funktionieren diese Regeln in allen mir zur Verfügung stehenden Browsern einwandfrei:

Code:

li.style1 { list-style: square; }
li.style2 { list-style: disc; }

Code:

<ul>
    <li class="style1">item 1</li>
    <li class="style2">item 2</li>
</ul>

Und den Lösungsweg über

Code:

ul.liste, ul.sub {

    list-style-type: none;

}

hatte ich (abgesehen vom vorangestellten ID-Namen #nav) schon vor ca. einer Stunde vorgeschlagen, was aber keine Besserung hervorbrachte.

irena · 24. März 2007

Das ist der Link zur HTML-Seite. Das CSS will ich später auch extern auslagern. Die Seite ist noch nicht online.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="menue/nav.css">

<style type="text/css">
<!--
body {
    text-align: left;
    margin: 0;
    padding: 0;
    background: aliceblue;
    }
#container {
background: white url(images/bggreen.gif) center top repeat; 
width: 1051px;
}
#navi{
background-color: #666666; 
height: 24px;
text-align: right;
margin: 0px;
}
#header {
background: #FFFFFF url(images/header.jpg); 
width: 1050px;
height: 157px;
float: left;
}
#wo {
background-color:#339966; 
height: 24px;
clear: both;
}
#subnavi {
background-color: #669999;
width: 13em;
height: 500px;
float: left;
}
#wechsel {
   float: right;
    width: 470px;
    background-color: #FFFFFF;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-right: 30px;
    display: inline;
    }
div#wechsel { 
    min-height: 400px;
    height: expression(this.scrollHeight > 400 ? "auto":"400px");
}
#bild {
background-color: #CCCCCC; 
width: 270px;
height: 500px;
float: right;
}
#fuss {
background-color:#339966; 
height: 24px;
clear: both;
text-align: center;
}
#navi ul {
    margin: 0;
    padding-top: 2px;
    list-style-type: none;
    font-family: Arial, Helvetica;
    font-size: 80%;
     }
#navi ul li { 
    display: inline; 
    }
#navi ul li a {
    text-decoration: none;
    padding: .2em 0.5em;
    color: #ffffff; 
    }
#navi ul li a:hover { 
   color: #CCCCCC;
    }
#wechsel h1 {
   margin: 0;
   color: #6B6645;
    font-size: 20px;
    font-family: Arial, Helvetica;
    letter-spacing: 0.2em;
}
#wechsel p {
   font-family: Arial, Helvetica;
    font-size: 80%;
    color: #333333; 
    }
#wechsel ul { 
   font-family: Arial, Helvetica;
    font-size: 80%;
    color: #333333;
    list-style-type:square;
    color:#666600; 
    }
    #wechsel ul li { 
    list-style: square;
    }

#fuss a {
    font-family: Arial, Helvetica;
    font-size:60%;
    text-decoration: none;
    color: #535039; 
    }
-->
</style>
<title>musterseite</title>
</head>

<body>
<div ID="container">
<div ID="navi">
<ul>
<li><a href="#">Deutsch</a></li>
<li><a href="#">Français</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Español</a></li>
<li><a href="#">Italiano&nbsp;</a></li>
</ul>
</div>
<div ID="header"></div>
<div ID="wo">wo</div>
<div ID="bild"><img src="http://www.tutorials.de/forum/images/leutetisch270.jpg" width="270" height="174"><img src="http://www.tutorials.de/forum/images/leutetisch270.jpg" width="270" height="174"></div>
<div ID="subnavi">
<div ID="nav">
        <ul class="liste">
          <li><a href="menue/nav-2.html">Home</a></li>
          <li><a href="menue/nav-2.html">Portrait</a></li>
          <li><a href="menue/nav-3.html">Vermögensverwaltung</a></li>
          <li><a href="menue/nav-4.html">Depotanalysen</a></li>
          <li><a href="menue/nav-4.html">Hypotheken</a></li>
          <li><a href="menue/nav-4.html">Service Package</a></li>
          <li><a href="menue/nav-4.html">Networking Club</a></li>
          <li><a href="menue/nav-4.html">Beratung</a></li>
          <li><a href="menue/nav-4.html">Partner</a></li>
          <li><a href="menue/nav-4.html">Kontakt</a></li>
          <li><a href="menue/nav-4.html">Links</a></li>
        </ul>
              </div>
      </div>
<div ID="wechsel"><h1>Textbereich</h1>
 <p> <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus  porttitor sollicitudin ligula. </i></p>
 <p>Integer cursus viverra enim.  Pellentesque euismod, velit ac nonummy tincidunt, dolor enim  sollicitudin leo, a congue mauris purus eget purus. Phasellus a pede.  Cras volutpat semper tortor. Nulla non lacus in nulla mollis tincidunt.  Ut placerat egestas velit. Class aptent taciti sociosqu ad litora  torquent per conubia nostra, per inceptos hymenaeos.</p>
  <ul>
    <li> Mauris est lorem,  eleifend at, euismod sed, egestas nec, quam. Cras tincidunt sapien id  lacus. Praesent feugiat accumsan nunc. Class aptent taciti sociosqu ad  litora torquent per conubia nostra, per inceptos hymenaeos. Nulla ac  ipsum. Maecenas vitae dui nec diam luctus molestie.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Mauris sit amet elit eget eros sodales molestie.</li>
    <li>Nunc luctus urna at velit.</li>
  </ul>
</div>
<div ID="fuss"><a>
©
Swiss Golf Asset Management</a></div></div>

</body>

</html>

____

Das ust das extnere CSS für die Navigation "nav" im "Subnav" (vverschachtelt).

Gruss

Maik · 24. März 2007

Hi,

dieser Regelblock für das ul-Element in der nav.css sorgt dafür, dass die Listenpunkte im IE nicht angezeigt werden, und in den "nicht-IE-Browsern" an der falschen Stelle sitzen:

Code:

html, body, ul {
    margin: 0;
    padding: 0;
}

irena · 24. März 2007

Vielen herzlichen Dank, jetzt habe ich es geschafft, dass alles stimmt. Ich habe das ul im nav.css oben rausgenommen. Danach stimmte die Position der Navigationsliste nicht mehr. Das habe ich dann gelöst indem ich margin und padding hier eingefügt habe.

----

#nav ul.liste, #nav ul.sub {

list-style-type: none;
margin: 0;
padding: 0;
}
---

Jetzt ist endlich nach langem Probieren alles wie ich es wollte.

✔ CSS ohne Tabelle, probleme mit externem CSS

irena

Mitglied

Maik

irena

Mitglied

Maik

muhkuh

Erfahrenes Mitglied

Maik

irena

Mitglied

Maik

irena

Mitglied

Neue Beiträge