CSS ohne Tabelle, probleme mit externem CSS @ tutorials.de: Tutorials, Forum & Hilfe

irena · 23.03.07 22:53

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.03.07 22:59

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 :

1
2
3

#wechsel ul li { 
    list-style[color=red]=[/color]square;
    }

irena · 23.03.07 23:33

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

Maik · 23.03.07 23:35

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

muhkuh · 23.03.07 23:51

Code css:

1
2
3

#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

Code 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.03.07 23:56

Zitat von muhkuh

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 :

1 2	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.03.07 00:41

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.03.07 08:44

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, [b][color=red]ul[/color][/b] {
    margin: 0;
    padding: 0;
}

irena · 24.03.07 11:15

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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Thumbs ohne Tabelle zentrieren

Tabelle ohne Tabellenköpfe

PHP DB-Abfrage ohne angabe der Tabelle

Probleme mit externem Programm

1px Tabelle ohne oberen Rand

E-Mail:

Abonnieren Abbestellen