Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

eigene klasse in css





Frage

Hallo. Also in css muss man, um einen eigene Klasse zu definieren, erstmal ein Tag haben, also als bsp: <p class="neu">hier text</p> und dann bei css: p.neu{}. Meine Frage: kann man nicht sowas machen, oder ähnliches? <class="neu">hier text</class> und css: neu{} Geht das? mfg TByte

Antwort 1 von Helfer1

Hi,
du kannst .neu {} schreiben, dann werden alle mit "neu" klassifiziertenTags berücksichtigt, wobei mit p.neu {} werden nur alle Tags mit p und der Klassifizierung "neu" berücksichtigt. Es kommt also ganz daruf an, was du mit der Klassifizierung erreichen willst.

Antwort 2 von katy

Hallo TByte,

was Helfer1 hier ganz richtig beschrieben hat kannst du bei SelfHTML auch ganz ausführlich mit Beispielen nachlesen.

katy

Antwort 3 von TByte

1. Hab ich nicht ganz verstanden.
2. Andere Frage: Gibs in css denn keine Fettschrift?

Antwort 4 von Supermax

Fettschrift erreichst du mit dem CSS-Attribut
font-weight: bold;


Du kannst eine CSS-Klasse auch ohne Tag definieren, dann kannst du diese Klasse jedem beliebigen Tag zuweisen, z.B.

.fettUndRot { color:red; font-weight:bold; }


Dann kannst du schreiben
der folgende Text ist <span class="fettUndRot">Fett und Rot</span>

oder auch
<h1 class="fettUndRot">Dies ist eine Überschrift, die ebenfalls Fett und Rot dargestellt wird</h1>


Darüber hinaus solltest du dir wirklich SelfHTML durchlesen.

Antwort 5 von katy

Hallo TByte,

ein bisschen Selbständigkeit können wir schon erwarten oder?
Also bitte beschreibe etwas genauer, was du unter dem von mir angegebenen Link nicht ganz verstanden hast.

Deine andere Frage lässt sich leicht beantworten:
klar gibt es das, du findest fett bzw. das Englische bold unter der CSS-Eigenschaft font-weight

katy

Antwort 6 von TByte

naja, also ich dachte immer:
font-style: bold;

Also mit bol hatte ich es ja auch schon versucht, aber eben wie oben, naja, danke. Aber selfHTML ist so viel, da kann man leicht die Übersicht verlieren!

Antwort 7 von TByte

und wie kann man einstellen, dass bei einem Klick ein anderes CSS benutzt ird? also als bsp.:
blauschema.css
rotschema.css
seite.html
jetzt will ich, das Schema von blauschema.css in rotschema.css ändern. Wie mach das?

Antwort 8 von katy

Hallo TByte,

das Klassenproblem ist also gelöst?

Um so etwas zu ändern benötigst du JavaScript.

Angenommen du hättest dein CSS so eingebunden:

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


dann benötigst du so eine JavaScript

function neuesCSS (welches) {
 var link=document.getElementsByTagName("link");
 for (var j=0; j<link.length; j++) {
  if (link[j].rel=="stylesheet") link[j].href=welches;
 }
}


Aufrufen kannst du das über
<a href="javascript:neuesCSS('rotschema.css')">ROT</a>
<a href="javascript:neuesCSS('blauschema.css')">BLAU</a>


katy

Antwort 9 von TByte

Hab mir schon sowas gedacht, danke ;-)
Noch eine:
warum funktioniert mein z-index nicht?


p.ueschr{font-family: Arial, Comic Sans MS;font-size: 1cm;font-weight: bold;z-index: 2;}
p.ueschr1{font-family: Arial, Comic Sans MS;font-size: 1cm;font-weight: bold;z-index: 1;color: silver;position: absolute; top:10px;left:327px;}


Antwort 10 von katy

Hallo TByte,

das lässt sich ohne Kenntnis des Kontext und vor allem ohne einer besseren Fehlerbeschreibung als "funktioniert nicht" nicht sagen!

katy

Antwort 11 von TByte

sorry nee hat doch geklappt, hatte es 2mal eingegeben...

jetzt mal eine frage zu formularen:
man sieht doch oft, dass man wenn man aus einer liste etwas wählt, ein anderes gefüllt werden kann. ich möchte folgendes:
erstmal soll einer aus einer Liste sein bundessland wählen, wo er wohnt. Dann soll jenachdem, was er gewählt hat, eine zweite Liste erscheinen, wo er die Stadt wählen kann, ohne die Seite neu zu laden. Natürlich soll die zweite Liste nur die Städte beinhalten, die im jeweiligem Bundesland vorhanden ist. wie mach ich das?

Antwort 12 von katy

Antwort 13 von TByte

jetzt wollt ich sowas machen, was ich auch geschafft hab: (Just for fun)



<html>
<head>
<title>Mitglied werden</title>
<style type="text/css">
p.theme{font-family: Arial, Comic Sans MS;font-size: 6mm;font-weight: bold;color: #090953;}
p.uesch{font-family: Arial, Comic Sans MS;font-size: 1cm;font-weight: bold;color: #090953;position: absolute; top:10px;left:327px;z-index: 2;}
p.uesch1{font-family: Arial, Comic Sans MS;font-size: 1cm;font-weight: bold;color: #B7B3FF;position: absolute; top:15px;left:335px;z-index: 1;}
p.eilei{font-family: Comic Sans MS;background: #655CFE;border: 8px;border-style: solid;border-color: #090B51;}
p.musssein{font-size: 0mm; margin-top: 100px;}
body{background: #D0F7FD;color: #090953;}
</style>
</head>
<body>
<form action="mailto:Alireza.s@gmx.de" method="post" enctype="text/plain">
<p class="uesch" align="center">Werden sie Mitglied</p>
<p class="uesch1" align="center">Werden sie Mitglied</p>
<p class="musssein">s</p><br>
<p class="eilei" align="center">Sie <b>m&uuml;ssen</b> einfach nur <br>das folgende Formular ausf&uuml;llen!<br>
Die mit einem * gekennzeichneten <br>Felder <b>d&uuml;rfen</b> ausgef&uuml;llt werden.</p>

<br>
<br>
<br>
<p class="theme" align="left">Allgemein</p>
<hr color="#655CFE">
<p class="vor">Vorname <br>
<input type="text" name="vorname" size="25">
</p>
<p class="nach">Nachname <br>
<input type="text" name="nachname" size="25">
</p>
<p class="gew">Gewicht <br>
<input type="text" name="gewicht" size="5" maxlength="3">kg
</p>
<p class="gr">Größe <br>
<input type="text" name="größe" maxlength="6">cm
</p>
<p class="theme" align="left">Anschrift</p>
<hr color="#655CFE">
<p class="str">Strasse <br>
<input type="text" name="strasse">
</p>
<p class="hn">Hausnummer <br>
<input type="text" name="hausnummer" maxlength="3">
</p>
<p class="plz">Postleitzahl <br>
<input type="text" name="plz" maxlength="5" size="10">
</p>
<p class="bland">Bundesland <br>
<select name="bland" size="1">
<option>Bitte w&auml;hlen</option>
<option>Baden-W&uuml;rttemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg-Vorpommern</option>
<option>Niedersachsen</option>
<option>Nordrhein-Westfalen</option>
<option>Rheinland-Pfalz</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Th&uuml;ringen</option>
</select>
</p>
<p class="tel">Telefonnummer <br>
<input type="text" name="telefon" maxlength="35">
</p>
<p class="e-mail">E-mail <br>
<input type="text" name="e-mail">
</p>
<br>
<p class="theme" align="left">Spenden*</p>
<hr color="#655CFE">
<p class="spe">
<input type="checkbox" name="einzahlen" value="ja">Spenden? W&auml;hlen sie dieses Feld, um zu spenden. Per Lastschrifteinzug. 
<br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wenn ja, am wievieltem? <input type="text" name="wann spenden" value="05.06.2008"> 
<br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wie viel? <input type="text" name="wieviel spenden" value="10€">
<br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="Einverst&aumlndnisserkl&aumlrung" value="ja"> Mit einem Klick bestätigen sie rechtlich, dass ich das Geld abheben darf.                                   
</p>
<br>
<p class="theme" align="left">Bankverbindung</p>
<hr color="#655CFE">
<p class="verb">
Inhaber: Name, Vorname <br>
<input type="text" name="Inhaber" size="100"><br><br>
Kontonummer <br>
<input type="text" name="knnr" size="50"><br><br>
Banknamem, als Beispiel Postbank <br>
<input type="text" name="Bank">
</p>
<br>
<p class="theme" align="left">Best&auml;tigung</p>
<hr color="#655CFE">
<input type="submit" value="&Uuml;bermitteln!!!!!!!"
</form>
</body>
</html>


Wenn ich die Style sheets jetzt als blauschema.css extern auslagere, und mit
<link rel="stylesheet" type="text/css" href="blauschema.css">

hinzufüge, dann kommt einfach nix! woran liegt das???

Antwort 14 von TByte

hat sich erledigt, war nur was falsch getippt!!
*sorry*

Antwort 15 von katy

Hallo TByte,

an dem Formular sind aber noch ein paar (Tipp-)Fehler mehr. Glücklicherweise willst du das ja nicht ernsthaft ins Netz stellen, oder? Die ersten Abmahnungen dürften daraufhin nämlich bald anflattern (keine Datenschutzerklärung).
Aber mit mailto: funktioniert ein Formular sowieso allenfalls bei günstigen Konstellationen auf dem jeweiligen Rechner.

Zurück zum Thema CSS:
Wenn du eine bestimmte Formatierung nur einmal nutzen willst ist eine Klasse dafür fehl am Platz. Dafür ist eine ID sinnvoller.

Du solltest also sowas wie
<p class="gew">
umändern in
<p id="gew">


Im Stylesheet wird diese ID so referenziert:
p#gew { ... }


Um auf deine Frage woran liegt das? zurückzukommen: du bist doch lange genug hier im Supportnet mit dabei, um selbst wissen zu können, dass deine Fehlerbeschreibung dann kommt einfach nix! völlig nix-sagend ist. Das hätte auch niemand außer dir beantworten können.

Einen schönen Tag wünscht

katy

Antwort 16 von TByte

ja, ich weiß, ich hab das nur flüchtig geantwortet, weil ich ne alternativlösung gefunden hatte.
Zum Formular: Danke, ich wllt sowiso mit JavaScript nochmal auf leere felder überprüfen lassen und der ganze spass...
mfg
TByte

Antwort 17 von TByte

Da wir schon bei JavaScript sind:
Kennt jemand eine Liste aller Objekte (inkl ihrer Funtionen) und eine Liste aller eventhandler (inkl ihrer Funktionen)?

Antwort 18 von TByte

noch ne frage(habs eilig):
was ist hierran falsch?:

hr{color: #655CFE;}


Antwort 19 von katy

Hallo TByte,

nehmen wir mal Frage 17: SelfHTML hält solche Listen bereit.

und nun Frage 18: nix (außer der obligatorischen fehlenden Problembeschreibung. Lernst du das noch mal?)

katy

Antwort 20 von TByte

#18:
wenn ich das bei css eingebe, dann macht der nix!

p.theme{font-family: Arial, Comic Sans MS;font-size: 6mm;font-weight: bold;color: #090953;}
p.uesch{font-family: Arial, Comic Sans MS;font-size: 1cm;font-weight: bold;color: #090953;position: absolute; top:10px;left:327px;z-index: 2;}
p.uesch1{font-family: Arial, Comic Sans MS;font-size: 1cm;font-weight: bold;color: #B7B3FF;position: absolute; top:15px;left:335px;z-index: 1;}
p.eilei{font-family: Comic Sans MS;background: #655CFE;border: 8px;border-style: solid;border-color: #090B51;}
p.musssein{font-size: 0mm; margin-top: 100px;}
body{background: #D0F7FD;color: #090953;}
hr{color:: #655CFE;}


Antwort 21 von TByte

sorry ein : zuviel

Antwort 22 von Supermax

"color" bezieht sich soweit ich weiss nur auf die Textfarbe; das <hr>-Element müßtest du mit den "border"-Angaben gestalten können.

Antwort 23 von katy

Hallo TByte,

habe ich mich unverständlich ausgedrückt?
"macht der nix" ist keine sinnvolle Fehlerbeschreibung. Ich kann damit einfach nichts anfangen.
Wer ist der, was sollte er machen deiner Meinung nach?

Aber ich gebe dir mal einen Tipp: Die Firefox-Fehlerkonsole gibt auch CSS-Fehler aus. Du kannst sie sogar so einstellen, dass auch die Warnungen angezeigt werden.

katy

Antwort 24 von TByte

Also ich glaub jeder weiß, was mit der gemeint ist: Der Browser (firefox)!
Aber wie deinstallier ich xampp? Da bleiben noch ein paar dateien!

Antwort 25 von katy

Hallo TByte

tschüss, dieser Thread erscheint mir unergiebig, daher verabschiede ich mich daraus.
Wenn du nicht in der Lage bist, auf Nachfragen sinnvoll zu antworten sehe ich mich nicht in der Lage dir zu helfen.

katy

Antwort 26 von TByte

warum funktioniert das hier nicht?:

function blaucss() {
document.link.setAttribute("href", "blauschema.css");
}

und dann natürlich:

<a href="javascript:blaucss()">blaues Schema<a>

mfg
TByte

PS.: Och Katy, wer wird denn gleich schmolln?

Antwort 27 von guest42

Funktioniert problemlos! Allerdings nur wenn es ein Objekt link in document gibt, dieses ein Attribut href besitzt und der Browser überhaupt die Methode setAttribute fehlerfrei unterstützt (sprich: wenn er nicht IE heißt). Kapiert?

Antwort 28 von TByte

<head>
<title>Mitglied werden</title>
<link rel="stylesheet" type="text/css" href="blauschema.css">
<script language="javascript">
function rotcss()
{
document.link.setAttribute("href", "rotschema.css");
}

function blaucss() {
document.link.setAttribute("href", "blauschema.css");
}
</script>

</head>

Ich habs so, und es klappt nicht!
Mozzilla firefox

Antwort 29 von Supermax

Lies bitte mal in SelfHTML oder einer anderen DOM/JavaScript Dokumentation nach.

"document.link" gibt es nicht; du kannst dem "link"-Element aber eine ID geben und dann mit document.getElementById() darauf zugreifen; oder du kannst dir mit document.getElementsByTagName('link') alle "link"-Elemente zurückgeben lassen und dann nach denen suchen, deren "rel"-Eigenschaft gleich "stylesheet" ist.

hier findest du einige Beispiele.

Antwort 30 von TByte

noch ne frage:
ich hab xampp deinstalliert um noch einen anderen server zu installieren. bei der deins. hat der gesagt: nicht alles konnte vernichtet werden.
Als ich nachgeguckt hab, waren wirklich ein paar Ordner noch da. Die lassen sie aber nicht löschen, was mach ich jetzt wie?

Antwort 31 von katy

Hallo Supermax,

TByte müsste nicht so weit nach Beispielen suchen, wenn er Antwort 8 je gelesen hätte. So wenig wie er Nachfragen beachtet achtet er scheinbar auch die Antworten.

katy

Antwort 32 von TByte

Ich hab ja #8 gelesen, aber ich wollt einen andere (scheinbar) einfachere Methode wählen, wie bei SELFhtml.
Zur aktuellen Frage:
Was ist da unverständlich?

Antwort 33 von TByte

Zitat:
noch ne frage:
ich hab xampp deinstalliert um noch einen anderen server zu installieren. bei der deins. hat der gesagt: nicht alles konnte vernichtet werden.
Als ich nachgeguckt hab, waren wirklich ein paar Ordner noch da. Die lassen sie aber nicht löschen, was mach ich jetzt wie?

weiß jetzt jemand eine Antowrt oder nicht?

Antwort 34 von TByte

ach ja, die guten alten Batch dateien:
@echo off
echo Loeschvorgang...
del xampp /F /S
cls
echo Geloescht!
pause>nul

mfg
TByte

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: