horizontale Navigation

Mario348 · 6 Januar 2008

Eben, wie schreibe ich die Schriftformatierung in die .css Datei?

Maxi · 6 Januar 2008

Schrifteigenschaften: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Mario348 · 6 Januar 2008

Code:

<style>
.style00 {
   font-family: UniversalMath1 BT, Helvetica, sans-serif;
   font-size: 16pt;
   font-color:#ffa500;
   text-align:center;
}

So, nun sollten alle Formatierungen ziemlich 1:1 übernommen worden sein, oder?

Maxi · 6 Januar 2008

Wenn dus in ne CSS-Datei schreibst kommt der Style-Tag weg.

Mario348 · 6 Januar 2008

Ah, doch...
Hab ich gelesen :-)

Und nun habe ich wirklich alles 1:1 übernommen?
Muss ich jetzt nur noch die Formatierungen aus dem .html Dokument löschen?

Maxi · 6 Januar 2008

Wenns in der CSS-Datei so steht wie du es haben möchtest kannst dus aus der HTML-Datei löschen.

Mario348 · 6 Januar 2008

Nun ist aber alles weiss.
Kein Titel, nur der blaue Counter und der blaue Werbebanner sind zu sehen.

Meine aktuelle .css Datei für das Frame sieht momentan so aus:

Code:

.style00 {
   font-family: UniversalMath1 BT, Helvetica, sans-serif;
   font-size: 16pt;
   font-color:#ffa500;
   text-align:center;
} 

<h2>Tab Menu H</h2>
<div id="tabsH">
  <ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
  </ul>

</div>
<br>

Maxi · 6 Januar 2008

Code:

<h2>Tab Menu H</h2>
<div id="tabsH">
  <ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
  </ul>

</div>
<br>

Und was sucht das bitte in ner CSS-Datei?

Mario348 · 6 Januar 2008

Es war gestanden, dass dies eine .css Navigation sei.
Wobei ich mir auch nicht sicher war, ob hier Listenelemente vorkommen...
Was muss ich nun tun?

Maxi · 6 Januar 2008

Der HTML-Teil, das was ich zitiert hab kommt in die HTML-Datei rein, der CSS-Code in die CSS-Datei.

Ein wenig selbst recherchieren (selfhtml, css4you) könnte dir auch nicht schaden...

Mario348 · 6 Januar 2008

Nichts ist so wie's sein sollte:
Die Formatierungen der .css Datei werden nicht übernommen,die Navigation wird nicht richtig angezeigt und das mit dem Farbverlauf als Hintergrundbild klappt auch nicht!

Der Farbverlauf im .jpg Format sollte sich nicht ständig wiederholen, sondern sich unbegrenzt über den ganzen Bildschirm fortsetzen.
Die CSS Navigation (Tab Menu H) habe ich von hier: Free CSS Navigation Menu Designs at exploding-boy.com
.css:

Code:

.style00 {
   font-family: UniversalMath1 BT, Helvetica, sans-serif;
   font-size: 16pt;
   font-color:#ffa500;
   text-align:center;
} 


.style00 {
   font-family: UniversalMath1 BT, Helvetica, sans-serif;
   font-size: 16pt;
   font-color:#ffa500;
   text-align:center;
} 


#tabsH {
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }
    #tabsH ul {
      margin:0;
      padding:10px 10px 0 50px;
      list-style:none;
      }
    #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsH a {
      float:left;
      background:url("tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a span {
      float:left;
      display:block;
      background:url("tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }

.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>oben.html</title><oben>
<link rel="stylesheet" type="text/css" href="oben.css">
<link rel="shortcut icon" href="http://www.arudc.ch/favicon.ico">
<meta name="keywords" content="Downloads, Tips, neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, Gästebuch, Maps, Remote">
<meta name="description" content="Kostenlose Downloads und Tips f&uuml;r den PC. Rubriken: neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, G&auml;stebuch, Maps, Remote ">
<meta name="DC.Description" content="Kostenlose Downloads und Tips f&uuml;r den PC. ">
<meta name="title" content="Alles rund um den Computer">
<meta name="language" content="German, de, deutsch">
<meta name="author" content="Mario Bienz">
<meta name="publisher" content="arudc.ch">
<meta name="copyright" content="arudc.ch">
<meta name="revisit-after" content="after 20 days">
<meta name="page-topic" content="Kostenlose Downloads und Tips f&uuml;r den PC">
<meta name="page-type" content="Gratisdownloads & Tips">
<meta name="audience" content="alle">
<meta name="robots" content="index,follow">
<meta name="generator" content="http://www.arudc.ch">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



</head>
<body>


<h2>Tab Menu H</h2>
<div id="tabsH">
  <ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
  </ul>

</div>
<br>


<div id="box1">
<iframe name="I1" marginwidth="1" marginheight="1"  scrolling="no" border="0" frameborder="0" width="135" height="55"src="http://www.adm24.de/hp_counter/counter.php?counter_nummer=2453&type=1">
</iframe>
</div>

<div id="box2">
<!-- Beginn Bannercode submitter.de -->
<CENTER><A HREF="http://www.submitter.de" target="new">
<IMG SRC="http://www.submitter.de/banner/banner1.gif" NOSAVE BORDER=0 HEIGHT=50 WIDTH=200 ALT="submitter.de - Kostenloser Eintrag in &uuml;ber 1111 Suchmaschinen!"></A> </CENTER>
<!-- Ende Bannercode submitter.de -->
</div>


<!-- Counter von http://fc.webmasterpro.de : dieser Code zeigt ihre Besucherzahl an und zählt mit -->
<script type="text/javascript" src="http://fc.webmasterpro.de/counter.php?name=mario348&amp;style=none" id="fcScriptmario348"></script>
<noscript><div><img src="http://fc.webmasterpro.de/as_noscript.php?name=mario348" alt="" /></div></noscript>


</body>
</html>

koslowski · 11 Januar 2008

Hi,

äh, wozu hast innerhalb der ganzen Listenlinks noch definiert?

Hinter font-size und font-family hast du zwei Leerstellen, macht das nix aus?

Soweit ich weiß ist die Einheit pt für die Schriftgröße eine typische Angabe nur für die druck-css.

In der normalen CSS nimmt man doch px, % oder em, d.h. eine relative Größeneinheit.
Am besten sogar em damit die Schriftgröße auch im IE skalierbar ist.

Code:

<link rel="stylesheet" type="text/css" href="oben.css">

muss da nicht auch der medientyp rein??

<link rel="stylesheet" type="text/css" href="oben.css" media="screen">

so zum Beispiel

Sonst fällt mir gerade nichts auf

Mario348 · 11 Januar 2008

Wie müsste der Code dann ohne diese aussehen?
Wie kann ich die Schriftgrösse 14 pt in em darstellen?

Wozu dieses "media="screen""?

Der Rest kommt mir vom Recherchieren bekannt vor, ich hab's angepasst.

koslowski · 11 Januar 2008

Hi,

 ist ein inline-Element.
Das macht nur Sinn wenn du spezielle Formatierungen damit vornehmen willst.

Code:

<div><p>Das ist <span class="strong">ein</span> Wort.</p></div>

Die css dazu:
         .strong  { font-weight:bold; }

oder über Nachfahrenselektoren (Klasse dann weglassen)
      div p span { font-weight:bold; }

kannst du die spans nicht einfach rauslöschen (Css evtl. anpassen!).
Die blähen deinen Code unnötig auf.

14pt sind glaube ich ca 1em. Probiers einfach mal wies ausschaut.

media zeigt an für was die CSS gilt.
screen für Bildschirm
print für den Druck
all für alles

es gibt aber glaube ich noch mehr Möglichkeiten

Mario348 · 11 Januar 2008

Dann kann ich hier
html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>oben.html</title><oben>
<link rel="stylesheet" type="text/css" href="oben.css" media="screen">
<link rel="shortcut icon" href="http://www.arudc.ch/favicon.ico">
<meta name="keywords" content="Downloads, Tips, neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, Gästebuch, Maps, Remote">
<meta name="description" content="Kostenlose Downloads und Tips f&uuml;r den PC. Rubriken: neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, G&auml;stebuch, Maps, Remote ">
<meta name="DC.Description" content="Kostenlose Downloads und Tips f&uuml;r den PC. ">
<meta name="title" content="Alles rund um den Computer">
<meta name="language" content="German, de, deutsch">
<meta name="author" content="Mario Bienz">
<meta name="publisher" content="arudc.ch">
<meta name="copyright" content="arudc.ch">
<meta name="revisit-after" content="after 20 days">
<meta name="page-topic" content="Kostenlose Downloads und Tips f&uuml;r den PC">
<meta name="page-type" content="Gratisdownloads & Tips">
<meta name="audience" content="alle">
<meta name="robots" content="index,follow">
<meta name="generator" content="http://www.arudc.ch">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



</head>
<body>

.css:

Code:

.style00 {
   font-family:UniversalMath1 BT, Helvetica, sans-serif;
   font-size:1em;
   font-color:#ffa500;
   text-align:center;
} 


#tabsH {
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }
    #tabsH ul {
      margin:0;
      padding:10px 10px 0 50px;
      list-style:none;
      }
    #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsH a {
      float:left;
      background:url("tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a span {
      float:left;
      display:block;
      background:url("tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }

Einfach die rauslöschen oder was muss ich in der .css Datei noch anpassen?

koslowski · 11 Januar 2008

Hi,

nur noch kurz, weil ich weg muß:

am besten erstmal die entsprechenden Dateien sichern.

Dann aus dem Markup und aus der CSS die spans raus,
sonst stimmen z.B. bei der CSS die Formatierungen über Nachfahrenselektoren nicht mehr ( #tabH a span z.B.).
Wenn du die Formatierungen aus den spans noch benötigen solltest, müssen sie anders zugewiesen werden, d.h. anderen Elementen oder klassen, id's um,- oder neubilden.

Mario348 · 12 Januar 2008

Habe nun alle entfernt:

Code:

.style00 {
   font-family:UniversalMath1 BT, Helvetica, sans-serif;
   font-size:1em;
   font-color:#ffa500;
   text-align:center;
} 


#tabsH {
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }
    #tabsH ul {
      margin:0;
      padding:10px 10px 0 50px;
      list-style:none;
      }
    #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsH a {
      float:left;
      background:url("tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a {
      float:left;
      display:block;
      background:url("tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover s{
      background-position:100% -42px;
      }

Nun ist alles untereinander!!!

koslowski · 12 Januar 2008

sollten die nebeneinander sein??

das funktioniert doch entweder indem du der liste display:inline; gibst
(#element li { display:inline; } )
oder indem du sie floatest (benötigt extraregeln für den IE! ).

Einen guten Artikel zu Navigationen findest du:
hier

Einfach bis zu Heikos Beitrag über Navigationen runterscrollen.

Mario348 · 12 Januar 2008

Ich habe den Code nun mit dem auf der Homepage verglichen, ich stelle keine Unterschiede fest...

koslowski · 12 Januar 2008

Dann sollte es doch zu deiner Zufriedenheit funktionieren, oder?

Wenn nicht validier doch mal Deinen Code
und deine CSS,
vielleicht hast du an anderer Stelle was übersehen.

horizontale Navigation

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied