[HTML] div id= CSS

Dieses Thema im Forum "Webdesign" wurde erstellt von Firefox User, 23. Dezember 2009 .

Schlagworte:
  1. 23. Dezember 2009
    div id= CSS

    Hallo,


    Wie muss ich das machen, das ich bei meiner Navigation nicht jedesmal den gesamten CSS Code hinschreiben muss?

    Andere Seiten haben das mit div id Tags gelöst, aber da kenne ich mich (leider) nicht aus.

    Kann mir das wer erklären?
     
  2. 23. Dezember 2009
    AW: div id=""

    HTML:
    HTML:
    <p id="1">1</p>
    <p id="2">2</p>
    <p id="1">3</p>
    
    CSS:
    Code:
    #1 {
    background-color:red;
    }
    #2 {
    background-color:green;
    }
    
    Dadurch ist der Text von 1 immer mit rot und der mit der ID 2 mit grün hinterlegt..

    Les nen bissl bei Selfhtml zum Thema bevor du hier postest..
    => SELFHTML: Stylesheets (CSS)
     
  3. 23. Dezember 2009
    AW: div id=""

    kannst aber auch im css code es so schreiben
    Code:
    .bla { background-color: #00FF00; }
    und es dann so einbinden
    HTML:
     <div class="bla">123456</div>
    dann wird die 123456 grün hinterlegt.
     
  4. 23. Dezember 2009
    AW: div id=""

    Du gibts deinen Divisons immer ein id tag, so kannst du dein quelltext recht sauber halten und Sachen wie Hinterground und Schriftgröße- Farbe etc. in eine Cascading Style Sheet Datei auslagern
    Wenn du dich mal auf den Seiten von selfhtml.net umschaust wirst du das auch lernen
     
  5. 23. Dezember 2009
    AW: div id=""

    "Der Name für alle Selektoren darf nur aus Groß- oder Kleinbuchstaben (a-z, A-Z), Ziffern (0-9) und dem Bindestrich (-) bestehen und müssen mit einem Buchstaben anfangen."

    css4you.de
     
  6. 23. Dezember 2009
    AW: div id=""

    Aber wie haben die das gemacht?

    Da stehen auch überrall div id`s.
     
  7. 23. Dezember 2009
    AW: div id=""

    ja gut..
    war ja auch nur schnell hingeschrieben um es darzustellen^^

    es wird durch das hier:

    <link href="http://static.gulli.com/layout/css/board.css" media="screen" rel="stylesheet" type="text/css" />

    Eine .css datei eingebunden, wo die IDs bezeichnet werden!
     
  8. 23. Dezember 2009
    AW: div id=""

    Wenn ich aber mit <link href="navi.css" media="screen" rel="stylesheet" type="text/css"> meine stylesheet einbinde und <div id="navi"> unten hinscheibe wo ich das haben will, passiert nichts und es ist alles unformatiert!

    In meiner navi.css steht das:
    .navi {

    body, a {
    font: normal 100% Helvetica, Arial, sans-serif;
    color: black;
    }

    }

    (Da habe ich natürlich jetz was weggelassen!)
     
  9. 23. Dezember 2009
    AW: div id=""

    .name = class(kann man mehrmals verwenden)
    #name = id(nur ein mal)

    ersetze <div id="navi"> durch <div class="navi">

    und so muss deine css aussehen:
    Code:
    body, a{
    font: normal 100% Helvetica, Arial, sans-serif;
    color: black;
    }
    
    .navi {
    color: red;
    }
    
     
  10. 23. Dezember 2009
    AW: div id=""

    Du darfst nicht mehrere CSS Klassen ineinander verschachteln.
    Wenn du einen bestimmten Pfad ansprechen willst geht das so:

    .navi a

    Spricht jetzt alle Links in der Navi an.
    Lies dir am besten den Workshop auf css4you.de durch.
     
  11. 23. Dezember 2009
    AW: div id=""

    Das geht nicht, denn das gehört alles zu meiner Navigation.


    Welchen?
     
  12. 23. Dezember 2009
    AW: div id=""

    es geht! du musst es auch mal ausprobieren oder du postest ganzen code von der html und css datei.
     
  13. 23. Dezember 2009
    AW: div id=""

    Direkt wenn du auf die Seite kommst ist ein Link im Content platziert (nicht im Menü links!):
    Hier ein Link direkt zum Workshop: http://www.css4you.de/wscss/index.html
    Der ist echt Top, damit hab ich angefangen und eigentlich mit der Zeit alles verstanden.
     
  14. 23. Dezember 2009
    AW: div id=""

    Ok:


    HTML:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
     
     <link href="navi.css" media="screen" rel="stylesheet" type="text/css">
    </head>
    <body bgcolor="#FFFFFF" link="#8A2BE2" vlink="#8A2BE2" alink="#8A2BE2" text="#000000">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#1E90FF">
     <colgroup>
     <col width="200">
     <col>
     </colgroup>
     <tr>
     <td colspan="2">
     <table border="0" cellpadding="10" cellspacing="0" width="1149">
     <tr>
     <td width="1129"><h1 style="color:#FFFFFF; margin-top:0; margin-bottom:20">
     <font size="7">Überschrift</font></h1></td>
     </tr>
     </table>
     </td>
     </tr>
     <tr>
     <td valign="top" width="200">
     <table border="0" cellpadding="10" cellspacing="0">
     <tr>
     <td>
     <h3 style="color:#FFFFFF"><font size="5">Navigation</font></h3>
     <style typ="text/css">
     body, a {
     font: normal 100% Helvetica, Arial, sans-serif;
     color: black;
     }
    
     ul#Navigation {
     margin: 0; padding: 0;
     }
     ul#Navigation li {
     list-style: none;
     margin: 0; padding: 0;
     }
     ul#Navigation {
     width: 10em;
     margin: 0; padding: 0em;
     }
     * html ul#Navigation { /* Korrekturen fuer IE 5.x */
     width: 11.6em;
     w\idth: 10em;
     padding-left: 0;
     padd\ing-left: 0em;
     }
     ul#Navigation li {
     list-style: none;
     margin: 0.1em; padding: 0;
     }
     ul#Navigation a {
     display:block;
     padding: 0.1em;
     text-decoration: none; font-weight: bold;
     border: 0px solid black;
     border-left-color: white; border-top-color: white;
     color: white; background-color: #1E90FF;
     }
     * html ul#Navigation a { /* Breitenangaben nur fuer IE */
     width: 100%;
     w\idth: 8.8em;
     }
     ul#Navigation a:hover {
     border-color: white;
     border-left-color: black; border-top-color: black;
     color: #F5F5F5; background-color: #4169E1;
     } 
     ul#Navigation #aktuell a {
    background-color: #f60;
     }
     </style>
    
     <ul id="Navigation">
     <li id="aktuell"><a href="index.html">Home</a></li>
     <li><a href="uebermich.html">Über mich</a></li>
     <li><a href="wohnort.html">Mein Wohnort</a></li>
     <li><a href="bilder.html">Bilder</a></li>
     <li><a href="spiele.html">Spiele</a></li>
     <li><a href="links.html">Links</a></li>
     <li> &nbsp;</li>
     <li><a href="gaestebuch.php">Gästebuch</a></li>
     <li><a href="kontakt.html">Kontakt</a></li>
     <li><a href="impressum.html">Impressum</a></li>
     </ul>
     </div>
     </td>
     </tr>
     </table>
     </td>
     <td valign="top" bgcolor="#FFFFFF">
     <table border="0" cellpadding="10" cellspacing="0">
     <tr>
     <td>
    INHALT
     </tr>
     </table>
     </td>
     </tr>
    </table>
    </body>
    </html>
    
    Der CSS Code:

    .navi {
    body, a {
    font: normal 100% Helvetica, Arial, sans-serif;
    color: black;
    }

    ul#Navigation {
    margin: 0; padding: 0;
    }
    ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0;
    }
    ul#Navigation {
    width: 10em;
    margin: 0; padding: 0em;
    }
    * html ul#Navigation { /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0em;
    }
    ul#Navigation li {
    list-style: none;
    margin: 0.1em; padding: 0;
    }
    ul#Navigation a {
    display:block;
    padding: 0.1em;
    text-decoration: none; font-weight: bold;
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white; background-color: #1E90FF;
    }
    * html ul#Navigation a { /* Breitenangaben nur fuer IE */
    width: 100%;
    w\idth: 8.8em;
    }
    ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: #F5F5F5; background-color: #4169E1;
    }
    ul#Navigation #aktuell a {
    background-color: #f60;
    }
    }
     
  15. 23. Dezember 2009
    AW: div id=""

    mein vorschlag: richtig html und css lernen.

    so müsste alles funktionieren:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
     <title>Meine Seite</title>
     <style type="text/css">
     body, a {
     font: normal 100% Helvetica, Arial, sans-serif;
     color: black;
     }
    
     ul#Navigation {
     margin: 0; padding: 0;
     }
     ul#Navigation li {
     list-style: none;
     margin: 0; padding: 0;
     }
     ul#Navigation {
     width: 10em;
     margin: 0; padding: 0em;
     }
     * html ul#Navigation { /* Korrekturen fuer IE 5.x */
     width: 11.6em;
     w\idth: 10em;
     padding-left: 0;
     padd\ing-left: 0em;
     }
     ul#Navigation li {
     list-style: none;
     margin: 0.1em; padding: 0;
     }
     ul#Navigation a {
     display:block;
     padding: 0.1em;
     text-decoration: none; font-weight: bold;
     border: 0px solid black;
     border-left-color: white; border-top-color: white;
     color: white; background-color: #1E90FF;
     }
     * html ul#Navigation a { /* Breitenangaben nur fuer IE */
     width: 100%;
     w\idth: 8.8em;
     }
     ul#Navigation a:hover {
     border-color: white;
     border-left-color: black; border-top-color: black;
     color: #F5F5F5; background-color: #4169E1;
     } 
     ul#Navigation #aktuell a {
    background-color: #f60;
     }
    </style>
    </head>
    <body bgcolor="#FFFFFF" link="#8A2BE2" vlink="#8A2BE2" alink="#8A2BE2" text="#000000">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#1E90FF">
     <colgroup>
     <col width="200">
     <col>
     </colgroup>
     <tr>
     <td colspan="2">
     <table border="0" cellpadding="10" cellspacing="0" width="1149">
     <tr>
     <td width="1129"><h1 style="color:#FFFFFF; margin-top:0; margin-bottom:20">
     <font size="7">Überschrift</font></h1></td>
     </tr>
     </table>
     </td>
     </tr>
     <tr>
     <td valign="top" width="200">
     <table border="0" cellpadding="10" cellspacing="0">
     <tr>
     <td>
     <h3 style="color:#FFFFFF"><font size="5">Navigation</font></h3>
    
     <ul id="Navigation">
     <li id="aktuell"><a href="index.html">Home</a></li>
     <li><a href="uebermich.html">Über mich</a></li>
     <li><a href="wohnort.html">Mein Wohnort</a></li>
     <li><a href="bilder.html">Bilder</a></li>
     <li><a href="spiele.html">Spiele</a></li>
     <li><a href="links.html">Links</a></li>
     <li> &nbsp;</li>
     <li><a href="gaestebuch.php">Gästebuch</a></li>
     <li><a href="kontakt.html">Kontakt</a></li>
     <li><a href="impressum.html">Impressum</a></li>
     </ul>
     </div>
     </td>
     </tr>
     </table>
     </td>
     <td valign="top" bgcolor="#FFFFFF">
     <table border="0" cellpadding="10" cellspacing="0">
     <tr>
     <td>
    INHALT
     </tr>
     </table>
     </td>
     </tr>
    </table>
    </body>
    </html>
    
     
  16. 23. Dezember 2009
    AW: div id=""

    gehts oder nicht? du kannst es überall hinschreiben, doch übersichtlicher wäre wenn du css in externe datei speicherst und diese einbindest mit
    Code:
    <link rel="stylesheet" type="text/css" href="css.css" />
     
  17. 23. Dezember 2009
    AW: div id=""

    Das Thema ist ja bereits ausreichend behandlet worden. Ich wollte aber noch hinzufügen dass ID's im Dokument eindeutig sein müssen.. In dem Beispiel von oben sind also Klassen angebracht.

    <p class="one">Text</p>
    <p class="two">Text</p>
    <p class="one">Text</p>

    und

    p.one { background-color:#F00; }
    p.two { background-color:#080; }
     
  18. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.