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

Verschiedene Stylesheets?

Status
Für weitere Antworten geschlossen.
A

Andreas84

Neues Mitglied
Hi,

ich möchte gerne meinen Shop etwas optimieren. Nun gibt es dort eine sogenannte main.hmtl, über die Navigation, Header und Footer definiert werden. Mittels Container werden dann die Inhalte auf verschiedenen Seiten zugezogen.

Nun möchte ich allerdings in den Kategorien und auf einer Produktseite verschiedenen Wörter mit einem h1-Tag hinterlegen. In der style.css ist es mir ja dann möglich, den h1-tag zu definieren und anzupassen. Allerdings sollte der Text, der in der Kategorie mit h1 hinterlegt ist, anders aussehen, als der, der auf der Detailseite mit h1 hinterlegt ist.

Der Shop greift jedoch nur auf die style.css zu, die in der main.html angegeben wurde. Wie kann ich es nun machen, dass zwei unterschiedliche h1-Tags angezeigt werden?

Ih dachte mir, ich lege jeweils für die Kategorie und die Detailseite eine eigene style.css an. Wie mache ich das, dass diese dann auch aufgerufen wird. Ist es überhaupt möglich, dass der Explorer auf zwei stlye-sheets zugreift und wie bekomme ich die in die zwei unterschiedlichen Seiten rein? Den <body> kann ich ja nur über die main.html ändern, aber dort sollten ja auf beiden Seiten unterschiedliche stlye-sheets zusätzlich stehen. Kann man eine style.css auch mitten in einer php Datei ohne Probleme einbinden?

Danke schon mal :)

Gruß,
Andi
 
Code: 
h1 {
    /* standart style */
}

#navi h1 {
    /* alle h1`s in dem element mit der id "navi" z.b. navigations überschriften */
}

#produkt h1 {
    /* alle h1 die z.b. in einem produkt container stehen :P */
}
 
@Frank: Hä???

Ich wollte nur wissen, was ich beispielsweise in der Kategorieseite einfügen muss, dass der entsprechende h1-tag dann angezeigt wird?
 
ja und woher sollen wir das wissen?

Können wir deinen Quelltext per Telikenese zu uns zaubern um dann darin zu schauen wie du was ändern musst?

Also ich kann das nicht, sorry.
 
Er wollte damit nur ausdrücken, dass uns hier dein HTML-Code fehlt um deine Frage beantworten zu können. Prinzipiell müsstest Du jedoch (um beim Beispiel von ihm oben zu bleiben) nur bei den umgebenden HTML-Elementen die IDs entsprechend festlegen.

Code: 
 id="navi"

etc. Wo das genau passieren muss kannst nur Du wissen und sagen da nur Du deinen Quellcode kennst.
 
Das wurde dann falsch verstanden. ich wollte nicht wissen, wo ich das einbauen muss, sondern was ich einbauen muss?

<h1>bla</h1> wird nicht funktionieren, da ich ja irgendwo die id unterbringen muss. Jetzt weiß ich leider nicht, wo?
 
also ums genau zu sagen... dein html code sollte so aufgebaut sein

Code: 
<div id="bla1">irgendwas</div>

<div id="bla2">
    <div id="bla2.1">nochwas</div>
</div>

<div id="bla3">
    <div id="bla3.1">nochmehr</div>
    <div id="bla3.2">
        <div id="bla3.2.1">und noch was</div>
    </div>
</div>

und wenn du jetzt willst das aller text der in einem div ist schwarz ist schreibt man

Code: 
div { color: #000000; }

wenn nun aller text in einem DIV im div mit der id bla3 rot sein soll schreibst du

Code: 
#bla3 div { color: #FF0000; }

nu klar?
 
Daran ist nicht zu mäkeln da es ursprünglich in den PHP Bereich gehören sollte, wir es aber zu CSS gemacht haben ;)
 
Slibbo schrieb:
also ums genau zu sagen... dein html code sollte so aufgebaut sein
Zum Vergrößern anklicken....
UUuuaaaahhh...wieder hochgerollte Zehnägel!
Aus HTML-Sicht ist dieser Code, auch als Beispiel, grottenschlecht.
Dein Einwand: "Es war ja nur ein Beispiel für die Anwendung von IDs"
Meine Antwort: Ja, aber jemand, der zufällig mitliest, findet Deine Struktur ganz toll und macht jetzt immer "alles mit div". *Harrr*gnnngng*

Gruß,
-Efchen
 
Es war ja kein beispiel zur anwendung von IDs sondern zur anwendung von CSS ^^

Auch wenn ich nicht hoffen will, das du das wegen den IDs sagst denn wenn jemand sowas sieht und es nach macht... selber schuld... man kanns auch zu genau nehmen mit den "Copy&Paste" leuten...
 
Slibbo schrieb:
Es war ja kein beispiel zur anwendung von IDs sondern zur anwendung von CSS
Zum Vergrößern anklicken....
Deswegen hast Du ja auch geschrieben "dein html code sollte so aufgebaut sein".

Auch wenn ich nicht hoffen will, das du das wegen den IDs sagst denn wenn jemand sowas sieht und es nach macht... selber schuld... man kanns auch zu genau nehmen mit den "Copy&Paste" leuten...
Zum Vergrößern anklicken....
Nein, das sehe ich nicht. In Foren laufen Anfänger aller Art rum, und Antworten sollten schon richtig sein. Und aus HTML-Sicht ist dieser Code nunmal grottenschlecht. Und ein schlechtes Beispiel dafür, wie man es nicht machen sollte, und ein super Beispiel dafür, warum immer noch Leute rumlaufen, die sagen "Mach Dein Layout mit divs". Kein Wunder, dass es die noch gibt.

Deswegen habe ich mir erlaubt, diesen Fehler zu kommentieren.

Gruß,
-Efchen
 
Nix gegen Divs nur meine anordnung das in dem beispiel jeder Div eine eigenne ID hatte, sowas regelt man mit Klassen die man weiter gibt damit man für eine Navigation z.b. nicht immer wieder eine neue ID in seinem CSS dokument erwähnen muss und an sich um alles schön klein und übersichtlich zu halten...

und gleich noch das was der Efchen sagt der weiß das eh besser ^^
 
elektrowolf schrieb:
Öhm.. mal nebenbei... wieso ist sein HTML-Code so schlecht? Was gegen divs?
Zum Vergrößern anklicken....

eher weniger gegen div´s, die braucht man schon, um zum Beispiel etwas zu gruppieren, aber was so viele ausschließlich mit div´s machen, kann/sollte man besser mit semantisch richtigen tags machen.

aber das wurde hier schon so oft diskutiert das es bald müssig wird... aber da ständig neue Leute hier eintrudeln wirds wohl immer wieder erwähnt werden müssen, erstmal sauberes Html schreiben und dann gedanken um div´s machen
 
elektrowolf schrieb:
Öhm.. mal nebenbei... wieso ist sein HTML-Code so schlecht? Was gegen divs?
Zum Vergrößern anklicken....
Der ist schlecht, weil die Semantik zu kurz kommt und der Eindruck entsteht, man bräuche heutzutage das <div>-Element, um eine Website zu erstellen. Das ist leider weit verbreitet, aber horrender Unsinn.

Heutzutage zeichnet man seinen Inhalt semantisch korrekt aus, man gibt seinem Inhalt eine Bedeutung. Packt man jeglichen Inhalt in <div>s, hat man das Ziel vollkommen verfehlt. Note 6. Leider machen das viele, die von Tabellenlayouts zu CSS umsteigen wollen. Da hat ihnen jemand einen Floh ins Ohr gesetzt, der völlig falsch und sinnlos ist, und trotzdem hören sie darauf. Den Code so wie in diesem Beispiel mit nur <div>s auszuzeichnen steht im Sinne von HTML auf der selben Stufe wie Tabellenlayouts. Beides führt zum gewünschten visuellen Effekt, die Semantik ist aber völlig daneben.

Ich weiß, dass viele Umsteiger zu CSS unter anderem an diesem Problem scheitern, den Sinn von CSS wirklich zu verstehen. Wendet man HTML+CSS richtig an, wird es total easy. Kann man Frames und Tabellenlayouts nicht gedanklich hinter sich lassen und schafft man es nicht, eine Website in anderer Reihenfolge aufzubauen, erst Inhalt, dann Layout, dann Design, sondern macht weiterhin zuerst Layout und Design bevor der Inhalt kommt, erscheint HTML+CSS auch nicht leichter als Tabellenlayouts. Erst, wenn es richtig *klick* gemacht hat, ist modernes HTML mit CSS eine Erleichterung. Leider scheint es nicht allzu oft *klick* zu machen. Bei csstester habe ich glaube ich vor kurzem ein leises *klick* gehört :-)

Dieses Beispiel hätte man besser aufbauen können, indem man eine Überschrift vergibt, einige Textabsätze, Adressen, eine Liste (fürs Menü) usw. Dann erkennt man auf den ersten Blick, dass die Auszeichnung mit den richtigen Tags ein wesentlicher Bestandteil von leichtem Arbeiten mit HTML+CSS ist. So sieht ein Anfänger/Umsteiger nur wieder <div>s und denkt, man macht heute "Layout mit div". Denkt man aber an "Trennung von Inhalt und Layout", ist "Layout mit div" allein schon ein Widerspruch. Denn Layout macht man mit CSS, <div> ist aber HTML.

Ach Leute, es ist alles so einfach, nachdem es *klick* gemacht hat, aber vorher erschließt sich einem der Sinn manchmal gar nicht. Und dass diese gute Arbeitsweise ganz automatisch auch noch 100%ige Nutzbarkeit und Barrierefreiheit mit sich bringt, ohne viel mehr dafür tun zu müssen, ist doch Grund genug, sich reinzuknien!

Viel Erfolg und Spaß :-)
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben