• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Unterschied zwischen class und id und ihre Kombination/Verschachtelung

ArturoBenedetti

Neues Mitglied
Hallo,

ich interessiere mich für html, weil ich eine Vereinswebsite übernehmen soll.
Vor Jahren habe ich mal in der Schule ein wenig gelernt. Allerdings ist das alles nicht mehr aktuell, so wie es aussieht.
Nach allem was ich gelesen habe (selfhtml -das soll ja gar nicht so gut sein- und einige gegoogelte Seiten), ist mir völlig unklar, was der Unterschied zwischen Klassen (class) und IDs (id) seien soll.


Kann man ferner IDs und Klassen ineinander verschachteln, sowohl in CSS als auch in HTML selber (dann ja wohl über z.B. 2 divs oder 2 span, was wahrscheinlich als schlechter Stil angekreidet werden würde, oder?)?

Vielen Dank für eure Antworten!
 
Werbung:
Gibt es in HTML nicht.
class und id sind in diesem Zusammenhang Begriffe aus CSS.

selfhtml ist immernoch das Standardnachschlagewerk, das ich jedem ans Herz legen würde.

Nils aka XraYSoLo
 
Werbung:
Danke, verstehe, dann hab ich das jetzt "falsch" gemacht. Aber das ist dann ja kein gravierender Fehler, wenn das der Unterschied ist. Und wie siehts mit kombinieren aus? Ich hab mir zum Beispiel eine (jetzt nocj id) Klasse erstellt "kleiner" für kleinere Schrift, und dann eine Standardformatierung für eine box, wie kombiniere ich das? zwei boxen ineinander?

Lg Arturo
 
SelfHTML ist doch sehr stark veraltet ;)
MDN sollte sowohl für HTML, CSS und JS als Referenz benutzt werden ;)
 
Werbung:
Für den Einstieg reichts allemal (und das Wiki macht ja schonmal einen guten Anfang), solange man sich von Tag-Attributen fernhält.

Nils aka XraYSoLo
 
Als Index hätte ich aktuell:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
    <meta name="author" content="AB">
    <meta name="description" content="Starseite des Projekts Gerust">
    <meta name="date" content="2013-03-21T13:35:00+01:00">
    <meta name="robots" content="noindex">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Schauspielgruppe </title>
    <link rel="stylesheet" type="text/css" href="file.css"/>
</head>
<frameset rows="18.5%,90%" frameborder="0" framespacing="0" border="0">
    <frame src="frames/menu.html" name="menuleiste" scrolling="no">
    <frame src="homepage.htm" name="fenster">
</frameset>
</html>
Die refernezierte Seite hompage wäre:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta name="author" content="AB">
    <meta name="description" content="Startseite Theater ">
    <meta name="date" content="2013-03-21T13:35:00+01:00">
    <meta name="robots" content="noindex">             <!-- Achtung für Theater später ändern!!! -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />


<title>Startseite Theater </title> <!-- Achtung hier muss der Umlaut eingefügt werden-->

    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="css/design00.css"/>
    <link rel="stylesheet" type="text/css" href="css/elements.css"/>

</head>
    <body>



<div style="margin-top:20pt;float:left;width:400px;height:300px;background-color:white;"><div style="margin-left:40px;"> <img src="bilder/logo_animation.gif" alt="" width="202" height="172" style="padding:40px"></div></div>
<div style="margin-top:20px;margin-left:420px;padding:15px;text-align:left;">
<h1>Herzlich Willkommen bei der Schauspielgruppe </h1><br>
In der Saison 2013 bringen wir<br>
"DIE DEUTSCHEN KLEINSTÄDTER" von August von Kotzebue
auf die Bühne.<br>
<br>
Die Aufführungstermine finden Sie wie gewohnt unter <a href="aktuelles_stück.htm">"Aktuelles Stück"</a>,<br>
zusätzliche Informationen folgen ...<br>
<br>
Vielen Dank für Ihre Treue und Unterstützung im Jahr 2012 <br>
und wir freuen uns, Sie auch im Jahr 2013 wieder unterhalten zu dürfen! <br>
<br>
<span id="kleiner"> Wir bekommen gerne E-mails an <a href="mailto:[email protected]">[email protected]</a></span>
</div>

<div id="kleiner" align="center" style="margin-top:40px;">
    &copy; 
    Schauspielgruppe <br>
    last update:21.03.2013    
</div>

<div style="margin-top:10px;" align="center">
    Die Schauspielgruppe  ist Mitglied im <br>
    <a href="www.amateurtheater-bayern.de"><img src="bilder/vbat_banner_white.gif" alt="Banner Amateurtheater Bayern"></a>
</div>

    </body>
</html>

Und das Menü:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta name="author" content="AB">
    <meta name="description" content="Startseite Theater ">
    <meta name="date" content="2013-03-21T13:35:00+01:00">
    <meta name="robots" content="noindex">             <!-- Achtung für Theater später ändern!!! -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />


<title>Startseite Theater </title> <!-- Achtung hier muss der Umlaut eingefügt werden-->

    <link rel="stylesheet" type="text/css" href="../css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="../css/design00.css"/>
    <link rel="stylesheet" type="text/css" href="../css/elements.css"/>

</head>
    <body>

<div >
<table width="90%" id="unsichtbar" style="background:url(bilder/bar.jpg)" >



<tr>
    <td width="2%"> &nbsp;</td>    
    <td> <div><a href="http://www.google.de"><img src="../bilder/logo_gelb.jpg" alt="Logo"></a><span id="grosser">                 Schauspielgruppe  e.V. </span></div> </td>
    <td>&nbsp; </td>
</tr>

</table>
</div>

<div style="margin-top:20px;">
<table width="90%" id="unsichtbar">
<tr>
    <td width="2%">&nbsp;</td>    
        <td id="menukasten"> <a href="../pages/aktuelles.htm" target="fenster">Aktuelles St&uuml;ck</a>  </td>
        <td id="menukasten"><a href="../pages/karten.htm" target="fenster">Karten</a>  </td>
        <td id="menukasten"><a href="../pages/spieler.htm" target="fenster"> Spieler</a> </td>
        <td id="menukasten"><a href="../pages/fotoalbum.htm" target="fenster">Fotoalbum</a> </td>
        <td id="menukasten"><a href="../pages/auffuhrungen.htm" target="fenster">Auff&uuml;hrungen</a></td>
        <td id="menukasten"> <a href="../pages/wiruberuns.htm" target="fenster">Wir &uuml;ber uns</a></td>
        <td id="menukasten"><a href="../pages/mitgliedschaft.htm" target="fenster">Mitgliedschaft</a></td>
    <td id="menukasten"> <a href="../pages/presse.htm" target="fenster">Presse</a></td>

</tr>
</table>
    <hr id="menustrich" style="">
</div>
            
        </body>
</html>

Die CSS (mal untereinander kopiert, sind bei mir getrennte dateien):
Code:
 /*layout.css:*/
body    {
    background-color:#99CCCC; 
    background-image:url(../bilder/bgr01.png);
    /*background-position:left;*/
    color:#000000;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:100,01%;
    } 
/*elements.css*/

#menuleiste
    {
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:80%
    }
hr#menustrich
{
color:#006666;
background-color:#006666;
margin-top:10px;
text-align:left;
height: 8px;
}
#kleiner 
    {
    font-size:0.8em;
    }
#grosser 
    {
    font-size:150%;
    }
table#unsichtbar
    {
    border:0;
    border-spacing:0;
    }

td#menukasten
    {
    width:100px;
    height:10px;
    }
h1    {
    font-size:150%;
    }
#hervorgehoben
    {
    color:#006666;
    font-size:180%;
    font-weight:bold;
    }
table#excel    
    {
    border-spacing:3px;
    border-style:none;
    /*background-color:white;*/
    }
tr#excel
    {
    background-color:white; 
    }
tr#spieler
    {background-color:white;
    border-style:dashed;}
    td#spieler {
        border-style:double;
    }
#textblock
        {margin-top:50px;
         font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:100,01%;
        }
#greatbox
        {
         margin-top:50px;
         margin-left:320px; 
}

/* design00.css*/
a:link    {
    color:#006666;
    }

a:visited
    {
    color:blueviolet;
    }

a:active
    {
    color:#006666;
    }

Ich hoffe, dass ist nicht zu viel Text und verstößt nicht gegen irgendwelche Forenregeln oder stille Vereinabrungen :wink:

Wenn mal jemand drüber schauen könnte und frisch und frei kommentiert, wär das super...
Lg Arturo

P.S.: Ich habe auch schon drei Unterseiten, aber die wären jetzt echt zu viel und ich will ja jetzt auch nicht das ganze semi-private Material veröffentlichen!
 
Werbung:
Um mal auf deine eigentliche Frage zu antworten, du kannst einem Element auch mehrere Klassen zuteilen:

HTML:
<div class="box kleiner rot">
    <p>Roter Text</p>
    <p class="gruen gross">Grüner Text</p>
</div>

Code:
.box {    width:500px;
    height:auto;
    padding:20px;
    background-color:#EEE;
}
.kleiner {
    font-size:.6em;
}
.gross {
    font-size:1.4em;
}
.gruen {
    color:#0F0;   
}
.rot {
    color:#F00;   
}

In Aktion: Edit this Fiddle - jsFiddle

ID's brauchst du meiner Meinung nach ganz selten im CSS. Insbesondere wenn du 'modular' arbeiten möchtest (und um spätere Probleme zu vermeiden, solltest du das auch). Sie dienen mir ausgenommen dazu, ein ganz bestimmtes Element zu 'markieren'. Angenommen ich habe mehrere Tooltips die logischerweise die gleiche Klasse besitzen:

HTML:
<div class="tooltip" id="Tip1"></div>
<div class="tooltip" id="Tip2"></div>
 
Zuletzt bearbeitet:
ID's brauchst du meiner Meinung nach ganz selten im CSS. Insbesondere wenn du 'modular' arbeiten möchtest (und um spätere Probleme zu vermeiden, solltest du das auch). Sie dienen mir ausgenommen dazu, ein ganz bestimmtes Element zu 'markieren'. Angenommen ich habe mehrere Tooltips die logischerweise die gleiche Klasse besitzen:

Vielen Dank, also nimmst du die eher als Erkennungskennzeichen (Personal ID :roll: ) und kannst dann aber im Zweifelsfall eine individuelle Formatierung vornehmen, verstehe ich das richtig? Definierst du die dann überhaupt in deinen CSS Dateien?

Lg Arturo
 
Werbung:
Na ja, Frames, weil ich es noch von früher her kannte, hab ein altes Buch mit einer Erstauflage von 1998 ausgegraben.
Da dachte ich - denken ist ja immer schlecht ;-) -, dass ich eine Menüleiste, die immer erscheinen soll, gut einbinden kann.
(Die wollte ich später dann mal mit Java verbessern, dass man sehen kann, wo man sich gerade befindet, wie bei einem Reiter)
Und wegen der Umlaute und Sonderzeichen, wie ß, da weiß ich gar nicht, dass das anders geht. Wie eigentlich?

Aber mal ehrlich, gibt es an den Boxen, wie ich das gemacht habe nichts auszusetzen?
Ich hab mir gestern, mal die Einführung durchgelesen auf Webdesign mit (X)HTML und CSS | Ein Kurs für Einsteiger und dannach soll man eher gar nicht <br> verwenden und <p> Absatz marken allerdings schon. Ganz anders als es bei mir bis jetzt rübergekommen ist.

Lg Arturo
 
Vielen Dank, also nimmst du die eher als Erkennungskennzeichen (Personal ID :roll: ) und kannst dann aber im Zweifelsfall eine individuelle Formatierung vornehmen, verstehe ich das richtig? Definierst du die dann überhaupt in deinen CSS Dateien?

Solange du keine weiteren Formatierungen benötigst, musst du auch im CSS nichts definieren. Im Regelfall kommt in meinen CSS-Files keine einzige ID vor.

Und genau, die ID kannst du als Erkennungszeichen sehen. Unter jeder ID findest du ein bestimmtes Objekt. Deshalb darf auch nicht die selbe ID mehrfach verteilt werden.

Das ist insbesondere für JavaScript-Anwendung brauchbar.

Aber auch folgendes benötigt eine ID, um die Beziehung zu einander zu erkennen:
HTML:
<input type="text" id="input_ID"><label for="input_ID">Beschreibungstext</label>

Damit könntest du jetzt beliebig viel Code dazwischen schreiben, und <label> weiß immer noch dass es zum <input> mit der ID 'input_ID' gehört:
HTML:
<input type="text" id="input_ID"><input type="hidden"><label for="input_ID">Beschreibungstext</label>

PS: Wenn du weißt, dass ein Element keine individuelle Formatierung benötigt und auch sonst kein Grund für eine ID besteht, gibst du ihm natürlich auch keine.
 
Zuletzt bearbeitet:
Ja danke, also werd ich mal versuchen das Ganze nochmal sinnvoller mit Klassen aufzuziehen! IDs kann ich ja dann später nochmal einbauen, falls ich Java wirklich hier brauche, so wie es aussieht, habe ich gerade eine ziemlich gute Alternative für meine Navigationsleiste/Menüleiste gefunden, um die Reiter zu markieren.

Lg Arturo
 
Werbung:
Werbung:
Um genauer zu sein, solltest du das Encoding der Datei als UTF-8 abspeichern. Es reicht nämlich nicht, das Meta-Tag auf UTF-8 zu stellen.
Sogar der Windows-Notepad kann das (allerdings mit der Einschränkung, dass er ein BOM setzt).
 
Zurück
Oben