CSS nur für bestimmte Bereiche einbinden!

Pharlap

Hallo zusammen,

ich habe mal eine sehr wichtige Frage für mich.

Wie kann ich ein Stylesheet einem Textbereich zuordnen (im Head oder am liebsten ausgelagert), so dass dieser CSS nur eine Auswirkung auf den bestimmten Textbereich hat und nicht noch zusätzlich auf andere Dinge - z. ein JavaScriptmenü, welches ebenfalls in die Seite eingebunden wurde?

Brauche dringend eine Antwort.
Danke!!!

Viele Grüße Pharlap

Noob

wenn ich mich nicht täusche, kannst du den bereich welchen du mit css formatieren willst mit:

und die css müsste dann glaubich so aussehen:

Code

#bereich{
    width: 30%;
    float: left;
usw.......
}

hoffe hab dich richtig verstanden!

Pharlap

Bis dato habe ich es immer so gemacht:

Im Head ist ein Verweis ...
<link href="../../css/farbe.css" rel="stylesheet" type="text/css">
...auf eine ausgelagerte CSS-Datei

Die ausgelagerte CSS-Datei beinhaltet dann z. B. ...

A:link {font: 10pt 'Arial' ; color: #0000FF; text-decoration: none}
A:visited {font: 10pt 'Arial' bold; color: #0000FF; text-decoration: none}
A:active {font: 10pt 'Arial' bold; color: #0000FF; text-decoration: underlined}
A:hover {font: 10pt 'Arial' bold; color: #FF0000; text-decoration: underline; background: #CBCBCB

... diesen Inhalt.

Nur, wenn ich das über diese Methide mache, dann wirkt sich der ausgelagerte Verweis auf alles aus.

Können Sie mir vielleicht anhand dieses Beispieles noch einmal kurz erklären, wie Sie das eben gemeint haben.

Herzlichen Dank!!!

Gruß Pharlap

Noob

Das stimmt auch.

Aber mit

Code

<div id="bereich"
dein text
</div>

gibst du der css einen bereich vor welcher formatiert wird.
also nicht direkt die ganze seite!

Code

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

das gibst du wieder ganz normal im head bereich an.

nur das du in der css die bereiche dann so machst wie ich es oben vorgeben habe!

Code

#bereich{ 
    width: 30%; 
    float: left; 
usw....... 
}

bin jetzt nit so der css experte aber so müsste es eigentlich klappen

Pharlap

Hallo nochmal,

da ich sowieso alles immer in DIV-Container ablege, ist dass mit der id-Angabe kein Problem.

Wenn ich jetzt die ausgelagerte CSS-Datei folgendermaßen ...

#bereich{
A:link {font: 10pt 'Arial' ; color: #C0C0C0; text-decoration: none}
A:visited {font: 10pt 'Arial' bold; color: #C0C0C0; text-decoration: none}
A:active {font: 10pt 'Arial' bold; color: #C0C0C0; text-decoration: underlined}
A:hover {font: 10pt 'Arial' bold; color: #FF0000; text-decoration: underline; background: #CBCBCB
}

... benenne, dann tut sich leider nix.
Man sieht auch in der CSS-Datei anhand der Farbe, dass da etwas nicht stimmt.

Habe ich da noch was falsch in der CSS-Datei angegeben?

Gruß Pharlap

Noob

hab hier mal ein beispiel von http://de.selfhtml.org/css/formate/zentrale.htm

HTML

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
#roterBereich {
   position:absolute;
   top:130px;
   left:30px;
   width:320px;
   padding:10px;
   margin:0px;
   border:4px solid #EE0000;
}
#blauerBereich {
   position:absolute;
   top:130px;
   left:400px;
   width:320px;
   padding:10px;
   margin:0px;
   border:4px solid #0000EE;
}
h1#Titel {
   font-family:Arial,sans-serif;
   font-size:2em;
   font-weight:normal;
   color:green;
}
</style>
</head>
<body>
<h1 id="Titel">Diese &Uuml;berschrift und zwei positionierte Bereiche</h1>
<div id="roterBereich"><h1>Der rote Bereich</h1></div>
<div id="blauerBereich"><h1>Der blaue Bereich</h1></div>
</body>
</html>

Alles anzeigen

nur das hier der css teil nicht extern ausgelagert ist, aber das kann man ja machen.

Pharlap

Herzlichen Dank,

der folgende ausgelagerte Script:

#bereich{
A:link {font: 10pt 'Arial' ; color: #C0C0C0; text-decoration: none}
A:visited {font: 10pt 'Arial' bold; color: #C0C0C0; text-decoration: none}
A:active {font: 10pt 'Arial' bold; color: #C0C0C0; text-decoration: underlined}
A:hover {font: 10pt 'Arial' bold; color: #FF0000; text-decoration: underline; background: #CBCBCB
}

inklusive ...

... funktioniert leider nicht.
Habe bestimmt noch einen Fehkler drinne.

Hmm, dann muss ich sehen, wie ich das rausbekomme!!!

Trotzdem vielen Dank für den Versuch.

Viele Grüße Pharlap

Noob

nimm mal hier:

Code

#bereich{ 
A:link {font: 10pt 'Arial' ; color: #C0C0C0; text-decoration: none} 
A:visited {font: 10pt 'Arial' bold; color: #C0C0C0; text-decoration: none} 
A:active {font: 10pt 'Arial' bold; color: #C0C0C0; text-decoration: underlined} 
A:hover {font: 10pt 'Arial' bold; color: #FF0000; text-decoration: underline; background: #CBCBCB 
}

die { } weg. also so:

Code

#bereich{ 
A:link font: 10pt 'Arial' ; color: #C0C0C0; text-decoration: none
A:visited font: 10pt 'Arial' bold; color: #C0C0C0; text-decoration: none
A:active font: 10pt 'Arial' bold; color: #C0C0C0; text-decoration: underlined 
A:hover font: 10pt 'Arial' bold; color: #FF0000; text-decoration: underline; background: #CBCBCB 
}

mr_jingles

@nooon, sicher dass das geht?

eigentlich eher
#bereich a:link{}
#breich a:hover{]
.
.
.

Noob

das ist auch möglich.
wie gesagt bin nicht so der css experte!

Pharlap

Zitat von mr_jingles

@nooon, sicher dass das geht?

eigentlich eher
#bereich a:link{}
#breich a:hover{]
.
.
.

SUPER Mr. jingles, es funktioniert hetzt.
HERZLICHEN DANK - natürlich auch an „Noob“ für die Mühe!!!

Viele Grüße Pharlap[/b]

Tags