CSS nur für bestimmten Bereich

G

goflo

0
Hallo HaBoLer!

Ich bin gerade dabei für meinen Onkel eine kleine einfache Website zu entwerfen!
Nun habe ich mittels Menü Generator ein Menü generiert, das auch super funktioniert!
Der Generator hat mir eine .html und ein dazugehöriges .css Sheet generiert!

Nun habe ich die .html bearbeitet und ein bisschen umgestaltet!
Das Problem ist nun, dass das Style Sheet auf jeden Link auf der html Seite angewandt wird! Ich möchte nun, dass das CSS nur auf das Navi Menü angewandt wird.

Das wird doch über class=Beispiel in der html bzw .Beispiel { } in der css gemacht!

Doch das will nicht funktionieren.

So nun hier einmal den Inhalt der "v1.css":


Code: 
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(_images/h.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit
	
}
.Menue {
UNKNOWN {
	FONT-SIZE: small
}
#header {
	FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#header UL {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#header LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header A {
	PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#header A {
	FLOAT: none
}
#header A:hover {
	COLOR: #333
}
#header #current {
	BACKGROUND-IMAGE: url(left_on.gif)
}
#header #current A {
	BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333
}
}

So und hier noch die html:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
        <head>
<title>E & H Kaufmann</title>
<link rel="shortcut icon" href="_images/favicon.ico" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="v1.css" />
<script language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>

        <body>
                
<div id="header"> 
  <ul>
    <div align="left">
      <div id="Layer1" style="position:absolute; width:799px; height:42px; z-index:0; left: 0px; top: 2px"><img src="_images/_banner_right.gif" width="799" height="42"></div>
      <!-- CSS Tabs -->
	<p> </p>
    </div>
    <li id="current"><span><a class="Menue" href="Start.html">Start</a></span></li>
    <li><span><a href="Wir.html">Wer sind Wir</a> 
      </span>
    <li><span><a class="Menue" href="Angebot.html">Angebot</a> </span>
    <li><span><a class="Menue" href="Zimmer.html">Zimmer</a></span></li>
    <li><span><a class="Menue" target="popup" onClick="window.open('', 'popup', 'width=860,height=840,scrollbars=yes, toolbar=no,status=no, resizable=no,menubar=no,location=no,directories=no,top=20,left=20') "href="Album/index.html">Galerie</a></span></li>
    <li><span><a class="Menue" href="Anreise.html">Anreise</a></span></li>
    <li><span><a class="Menue" href="Wetter.html">Wetter Infos</a></span></li>
    <li><span><a class="Menue" href="Region.html">Region</a></span></li>
    <li><span><a class="Menue" href="Gastebuch.html">Gästebuch</a> </span>
      <div id="Kontakt" style="position:absolute; width:25px; height:466px; z-index:5; left: 811px; top: 90px; background-image: url(_images/Right_Leiste_Blank.gif); layer-background-image: url(_images/Right_Leiste_Blank.gif); border: 1px none #000000"> 
        <p class="wetter"><span class="Menue"><a href="Kontakt.htm"><img src="_images/Kontakt.gif" width="25" height="80" border="0"></a><img src="_images/K_I.gif" width="25" height="20"><a href="Impressum.htm"><img src="_images/Impressum.gif" width="25" height="96" border="0"></a></span></p>
      </div>
    </li>
  </ul>
            
  <div id="Main" style="position:absolute; width:802px; height:465px; z-index:4; left: 2px; top: 90px; background-color: #66FF99; layer-background-color: #66FF99; border: 1px none #000000"> 
    <div align="center"> 
    </div>
  </div>
</div>
        </body>
</html>

Ich hoffe ich langweile euch nicht mit diesem für euch sicher simplen Problem!

Danke
GoFlo
 
Du kannst CSS-Angaben nicht schachteln.

Code: 
.hallo {
  .welt {
     blubb;
  }
  .oderso {
     blah;
  }
}
Sowas geht nicht. Korrekt wäre jeweils

Code: 
.hallo .welt {
  blubb;
}

.hallo .oderso {
  blah;
}
 
Hi LX!

Danke für deine AW!

Ich werde das Morgen noch einmal anschauen!

GoFlo

Edit_1: Kann mir das jemand anhand von meinem Beispiel Code zeigen!
Oder den Code ganz abändern!

Ich hab wirklich keine Ahnung von css!

Danke GoFlo
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben