MaxPlanck: Font Family CSS

Hallo liebe Community,

Vorweg, ich bin neu im Webdesign!

Ich habe eine Seite mithilfe von divs erstellt und eine kleine Navigation gebaut. Mein Problem ist, dass die "Fontfamily" nicht übernommen wird. Ich hab diese in jedem Div-Tag festgelegt. Sogar im head meiner HTML-Datei hab ich über "style" nocheinmal darauf verwiesen.

mein Code CSS:

* {
margin: 0;
padding: 0;
font:Arial, Helvetica, sans-serif;
}

.body {
margin:0px;
padding:0px;
height: 100%;
width: 100%;
font:Arial, Helvetica, sans-serif;
}
#maincontainer {
height:595px;
width:1100px;
background-color:#fff;
border-bottom: 1px solid;
border-top:1px solid;
border-color:#804000;
font:Arial, Helvetica, sans-serif;
}
#navicontainer {
float:left;
background-color: #fff;
height: 595px;
width: 164px;
text-align:left;
font-size:20px;
border-right:1px solid #804000;
font:Arial, Helvetica, sans-serif;
}
#main {
background-color: #fff;
height: 595px;
width: 935px;
float: left;
font:Arial, Helvetica, sans-serif;
}

#navi {
margin: 0;
padding: 0;
width: 163px;
border-bottom: 0px solid #000000;
font:Arial, Helvetica, sans-serif;
}
#navi ul, #navi li{
list-style-type: none;
border-top: 0px solid #000000;
padding: 5px 0px 5px 1px;
font-weight: bold;
font:Arial, Helvetica, sans-serif;
}
#navi li a {
display: block;
font:Arial, Helvetica, sans-serif;
}

a:link {
font:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#555;
}
a:visited {
font:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#555;
}
a:hover {
font:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#A37E4D;
}
a:active {
font:Arial, Helvetica, sans-serif;
text-decoration:none;
background-color:#fff;
}
a:focus {
font:Arial, Helvetica, sans-serif;
text-decoration:none;
background-color:#fff;
}

mein Code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Produkte</title>
<link href="produkte_style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="body">

<div id="maincontainer">
   <div id="navicontainer">
      <div id="navi">
       <ul id="navi">
         <li> <a href="vorteile/vorteile.html" target="iframe_unter">Vorteile</a> </li>
        <li> <a href="strukturfarben/strukturfarben.html" target="iframe_unter">Strukturfarben</a> </li>
         <li> <a href="technik/technik.html" target="iframe_unter">Technik</a> </li>
         <li> <a href="montage/montage.html" target="iframe_unter">Montage</a> </li>
         <li> <a href="preise/preise.html" target="iframe_unter">Preise</a> </li>
        </ul>
      </div>
    </div>
   <div id="main"><iframe name="iframe_unter" width="100%" height="100%" frameborder="0" scrolling="no" src="vorteile/vorteile.html"></iframe></div>
  </div>

</div>
</body>
</html>

Es geht um die UL-ID. Die Navigation soll serifenlos sein. leider wird das nicht übernommen.

Vielen Dank für eure Hilfe.

Dennis

  1. Hi!

    Lieber MaxPlanck,

    Dein webtechnisches Wirkungsquantum ist suboptimal;)

    Validiere bitte zunächst Deinen HTML- _und_ CSS-Code. Dann wirst Du zumindest die von Dir erwarteten Ergebnisse sehen.

    Danach solltest Du *dringend* die Struktur Deines HTML-Dokumentes überdenken:

    "DIV-Suppe" sagt nichts über den Inhalt aus - verwende lieber semantisches Markup. Du kannst CSS umfänglich für alle Elemente nutzen -  nicht nur für DIVs - diese Zeiten sind längst vorbei.

    Die Verwendung von(I-)Frames ist selten (bis nie) sinnvoll - das hiesige Archiv ist voll von Beiträgen zu dem Thema.

    off:PP

    --
    "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
  2. Hallo Dennis,

    ich finde dein HTML gar nicht so "unsemantisch" wie Peter Pan. Sieht okay aus, obwohl der Validator vielleicht schon ein paar Fehler finden wird.

    Die Lösung deines Problems ist einfach:

    nicht

    font:Arial, Helvetica, sans-serif;

    sondern

    font-family:Arial, Helvetica, sans-serif;

    Viele Grüße
    der minimalist

    1. Hi!

      ich finde dein HTML gar nicht so "unsemantisch" wie Peter Pan.

      Ich wollte doch auch nicht meckern, sondern einen Hinweis geben, aber:
      unnötige DIVs haben mit Semantik nichts zu tun, Klassennamen zu vergeben, welche mit den Namen von HTML-Elementen und CSS-Selektoren identisch sind, verwirren zumindest.

      Sieht okay aus,

      Wenn meine kleine Nichte ein Bild gemalt hat sage ich sogar: sieht toll aus.

      obwohl der Validator vielleicht schon ein paar Fehler finden wird.

      Ich habe das ganze getestet und siehe da: ist der (in diesem Falle: HTML- *und* CSS-) Code valide, dann "funzt" es -  im Sinne des Erfinders. Darauf wollte ich hinaus und nicht darüber hinweg;)

      off:PP

      --
      "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
      1. Hi Peter Pan,

        ja, klingt alles plausibel. ;)

        Gruß
        der minimalist

    2. @@minimalist:

      nuqneH

      ich finde dein HTML gar nicht so "unsemantisch" wie Peter Pan. Sieht okay aus

      Sieht nach 'div'-Suppe aus. Ich kann mir nicht vorstellen, warum so viele Container nötig sein sollten.

      (1) das allumfassende div[@class="body"]

      Mit 'html' und 'body' stehen bereits zwei Elemente zur freien Verfügung. [ZITAT1287]

      (2) div[@id="maincontainer"]

      ??

      (3) div[@id="navicontainer"]/div[@id="navi"]

      Wozu zwei zusätzliche Container um die Navigationsliste? Maximal einer sollte genug sein. Wenn überhaupt, schließich kann man ja auch die Liste selber formatieren.

      obwohl der Validator vielleicht schon ein paar Fehler finden wird.

      Der doppelt vergebene ID-Bezeichner "navi" springt schon ins Auge.

      Qapla'

      --
      Bildung lässt sich nicht downloaden. (Günther Jauch)
      1. Hi!

        Der doppelt vergebene ID-Bezeichner "navi" springt schon ins Auge.

        Das ist ein Tippfehler - da fehlt nur ein Vokal beim Namen der ID des ul-Elements, das sollte römisches Markup werden:

          
        <div id="navi">  
          <ul id="navii">  
            <li id="naviii">  
              <a id="naviv">  
                <span id="navv">  
                   <marquee id="navvi">foo::bar  
                   </marquee>  
                </span>  
              </a>  
            </li>  
          </ul>  
        </div>  
        
        

        off:PP

        --
        "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
        1. @@Peter Pan:

          nuqneH

          <div id="navi">
            <ul id="navii">
              <li id="naviii">
                <a id="naviv">
                  <span id="navv">

          Bis hierhin glaubte ich, du meinst es ernst!!1elf

          <marquee id="navvi">foo::bar
                     </marquee>

          Da hatte ich es aus den Augen verloren. Wie Schuppen fiel es.

          Ja ja, und nach etwa hundert Verschachtelungstiefen kommt
                                                                    <tv-series id="navicis">

          Qapla'

          --
          Bildung lässt sich nicht downloaden. (Günther Jauch)
          1. Hi Gunnar!

            »         <span id="navv">

            Bis hierhin glaubte ich, du meinst es ernst!!1elf

            Meine ich doch fast immer;)

            »            <marquee id="navvi">foo::bar
            »            </marquee>

            Na gut: dieses Element verwende ich nie und an dieser Stelle dürfte es auch IMHO - habe ich nicht geprüft, aber ich denke es ist ein Blockelement - nicht gültig aka valide sein.

            Da hatte ich es aus den Augen verloren. Wie Schuppen fiel es.

            Solange nicht die Augen fallen, oder die Schuppen auf den schwarzen Anzug geht es doch noch.

            Ja ja, und nach etwa hundert Verschachtelungstiefen kommt
                                                                      <tv-series id="navicis">

            Ja, genau! Das hat etwas!
            Wobei: den Römern dürfte die Ziffer 's' nicht landläufig bekannt gewesen sein - die kannten nur die Intellektüllen;)

            off:PP

            --
            "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
            1. @@Peter Pan:

              nuqneH

              Na gut: dieses Element ['marquee'] verwende ich nie und an dieser Stelle dürfte es auch IMHO - habe ich nicht geprüft, aber ich denke es ist ein Blockelement - nicht gültig aka valide sein.

              'marquee' ist in allen vergangenen und gegenwärtigen HTML-Versionen gar kein Element. Deshalb lagst du mit „nicht gültig aka valide“ richtig.

              Solange nicht die Augen fallen

              Sie fallen. Zu.

              […] oder die Schuppen auf den schwarzen Anzug

              Das ist der Grund, warum Fische keine schwarzen Anzüge tragen. Haie ausgenommen.

              Wobei: den Römern dürfte die Ziffer 's' nicht landläufig bekannt gewesen sein - die kannten nur die Intellektüllen;)

              Die Staatsschulden wurden damals noch nicht veröffentlicht, weshalb die Ziffer 's' fürs gemeine Volk noch nicht relevant war.

              Qapla'

              --
              Bildung lässt sich nicht downloaden. (Günther Jauch)
              1. Hi!

                » Na gut: dieses Element ['marquee'] verwende ich nie und an dieser Stelle dürfte es auch IMHO - habe ich nicht geprüft, aber ich denke es ist ein Blockelement - nicht gültig aka valide sein.

                'marquee' ist in allen vergangenen und gegenwärtigen HTML-Versionen gar kein Element. Deshalb lagst du mit „nicht gültig aka valide“ richtig.

                Yo. Ich habe das proprietäre M$-Element in meiner Erinnerung wohl mit dem frame-Element der Firma Netscape verwechselt, welches später sehr wohl in W3-Standards aufgenommen wurde - nicht hauen bitte! Ich bin ja schon 'ne Weile raus aus dem Geschäft, aber ein $brain->update() ist immer gut.

                » Solange nicht die Augen fallen

                Sie fallen. Zu.

                Mir so langsam auch - gute N8.

                » […] oder die Schuppen auf den schwarzen Anzug

                Das ist der Grund, warum Fische keine schwarzen Anzüge tragen. Haie ausgenommen.

                Stimmt beides - wobei ich nix gegen Anzugträger habe, bin selber meistens einer!

                » Wobei: den Römern dürfte die Ziffer 's' nicht landläufig bekannt gewesen sein - die kannten nur die Intellektüllen;)

                Die Staatsschulden wurden damals noch nicht veröffentlicht, weshalb die Ziffer 's' fürs gemeine Volk noch nicht relevant war.

                Das muß mir ebenso wie die marquee-Nummer irgendwann aus der Birne geflogen sein.

                off:PP

                --
                "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
  3. @@MaxPlanck:

    nuqneH

    Mein Problem ist, dass die "Fontfamily" nicht übernommen wird. […]
    font:Arial, Helvetica, sans-serif;

    Lies in der Spec [CSS2 §15.2.5] nach, welche Angaben bei der zusammenfassenden Eigenschaft 'font' zwingend erforderlich sind! Willst du nicht alle diese Angaben machen, benutze nicht die zusammenfassende Eigenschaft!

    Qapla'

    --
    Bildung lässt sich nicht downloaden. (Günther Jauch)