html/Css - Einfaches Problem?!

damomo3392 · 3. Februar 2013

Ich beschäftige mich noch nicht lange mit html/css und hänge wieder fest. Das Problem ist relativ einfach, denke ich, aber lösen kann ich es irgendwie nicht.

Ich habe eine Tabelle in Html in der zB in jeder Zelle Rohstoffe 1-4 aufgezählt werden - Jetzt will ich, dass zB Rohstoff 1 einen weißen Rahmen bekommt, und Rohstoff 2 einen gelben Rahmen

HTML:

<table>
	<tr>
			<td class="Rohstoffe1">Rohstoff 1</td>
			<td>Wert 1</td>
			<td>Rohstoff 2</td>
			<td>Wert 2</td>
        </tr>
	
</table>

Hierzu habe ich im html-code für Rohstoff 1 die Klasse "Rohstoffe1" erstellt.
In CSS möchteich ich jetzt die Eigenschaften zuweisen, indem ich:

Code:

td.Rohstoffe1 {
   border: 1px solid white;

Im Ergebnis ändert sich aber nichts.. ? Wo ist mein Denkfehler?

flugser · 3. Februar 2013

Einfach die Klasse in die Tabellenspalte reinschreiben ...

HTML:

<table>
    <tr>
    <td class="Rohstoffe1">Rohstoff 1</td>
    <td>Wert 1</td>
    <td class="Rohstoffe2">Rohstoff 2</td>
    <td>Wert 2</td>
    </tr>
    </table>

... und per CSS zuweisen.

HTML:

td.Rohstoffe2 {
border: 1px solid yellow;
}

damomo3392 · 3. Februar 2013

Is das nich genau das was ich oben geschriebn habe?Was ja nicht funktioniert hat..

Kausalat · 3. Februar 2013

Achte darauf, dass keine andere Formatierung deine Rahmenfarbe überschreibt. Welche Angabe Vorrang hat, kannst du mit den in den gängigen Browsern integrierten Debugging-Werkzeugen feststellen.

Cool Master · 3. Februar 2013

@flugser

da du eh eine Klasse zuweist musst du das td nicht im CSS erwähnen. Spart Schreibezeit und Ladezeit beim CSS, vorallem auf Mobilen Platformen dazu kommt noch der Traffic der nicht verbraucht wird durch eine kleinere CSS Datei.

Phantro · 3. Februar 2013

Bei deinem CSS Code oben hast du eine abschließende } vergessen. Zumindest nicht mit gepostet.

Kausalat · 3. Februar 2013

@ Cool Master

Es kommt auf den Einzelfall an. Es kann durchaus sinnvoll sein, td.sonstwas explizit so zu benennen, um nur bestimmte Formatierungen nur für einen Elementtyp vorzunehmen. Wenn du beispielsweise eine Grafik mit der Klasse "sonstwas" versiehst, würde sie einen möglicherweise unerwünschten Rahmen erhalten, mit td.sonstwas nicht.

Dorian · 3. Februar 2013

Hallo,

erstens hat Phantro recht

und zweitens hast du bestimmt deinen Hintergrund noch nicht definiert und er ist eventuell standardmäßig weiß...

Das hier funktioniert 100%ig und hilft dir eventuell es zu verstehen:

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>Unbenanntes Dokument</title>

<style type="text/css">
    td.Rohstoffe1 {
    	border: 1px solid grey;
	}
	td.Rohstoffe2 {
	border: 1px solid red
	}
</style>

</head>
<body>

    <table>
    <tr>
    <td class="Rohstoffe1">Rohstoff 1</td>
    <td>Wert 1</td>
    <td class="Rohstoffe2">Rohstoff 2</td>
    <td>Wert 2</td>
    </tr>
    </table>

</body>
</html>

lbm1305AtWork · 4. Februar 2013

Wenn der Codesnippet von Dorian funktioniert, kann es bloss noch an der Einbindung der Stylesheets liegen, falls diese in einer externen Datei geführt werden. Funktionieren andere Styles?

damomo3392 · 4. Februar 2013

Ja, andere Styles funktionieren aus dem gleichen Stylesheet
@Dorian: Hintergrundfarbe, etc ist definiert und nicht weiß, hatte ich nur nicht mit eingefügt, kann ich aber gleich mal komplett machen wenn zuhause am pc bin

Phantro · 4. Februar 2013

Wenn andere Styles funktionieren, dann prüfe wirklich mal, ob dir nicht eine abschließende } fehlt :-)
Hatte das anfangs auch des öfteren vergessen und mich gewundert. Kann dir übrigens Notepad++ hierfür empfehlen: Hast deine HTML Datei und das CSS im Splitscreen. Außerdem werden die Tags farblich markiert :-) Hilft mir persönlich als Laie recht viel ;-)

damomo3392 · 4. Februar 2013

Habe den Fehler gefunden, es war nicht die Schleife, sondern wirklich nur ein vergessenes Anführungszeichen.. Dennoch danke, geholfen hat es trotzdem.

Wie gesagt beschäftige ich mich noch nicht lange damit - Habe nur Tutorials gelesen. Im Code von Dorian (Seite 1) findet man diesen Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Wofür ist er zuständig? Davon stand bislang in keinem Tutorial etwas..

Cool Master · 4. Februar 2013

Das ist die Codierung. Damit kannst du Ö,Ü,Ä,ß ohne Probleme schreiben. Einfach immer utf-8 nehmen ist das sicherste und beste was man machen kann

Spike S. · 5. Februar 2013

Etwas unpräzise...da man die Kodierung der Dateien nicht sicher ermitteln kann/konnte, wird damit die Kodierung der vorliegenden Seite für den Browser deklariert. Sollte also auch zur tatsächlichen Kodierung der Datei passen, was man mit jedem halbwegs brauchbaren Editor einsehen und ändern kann. Wie schon gesagt wurde, mit utf-8 braucht man sich in der Regel keine Gedanken machen.

Im Zusammenhang mit Webseiten ist das ein sich wiederholendes Thema...

Suche

html/Css - Einfaches Problem?!

damomo3392

Cadet 4th Year

flugser

Cadet 4th Year

damomo3392

Cadet 4th Year

Kausalat

Gast

Cool Master

Fleet Admiral

Phantro

Lt. Junior Grade

Kausalat

Gast

Dorian

Cadet 1st Year

lbm1305AtWork

Cadet 2nd Year

damomo3392

Cadet 4th Year

Phantro

Lt. Junior Grade

damomo3392

Cadet 4th Year

Cool Master

Fleet Admiral

Spike S.

Lt. Commander

Ähnliche Themen