• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Class: 2 getrennte Wörter

sarcon

New member
Hallo,

ich habe einen CSS-Datei und dort muss ich eine Class definieren. z.B:

.controlBar { display: none;}

Frage

wenn ich 2 getrennte Wörter habe, muss ich etwas bei der "Rechtschreibung" berücksichtigen?
Damit meine ich statt "controlBar" "control Bar". Also eine Leerzeile zwischen den Wörtern "control" und "Bar"
Danke im voraus.
 
CSS2 ist case-insensitive, trotzdem gibt es Unterschiede je nach Browser und Du solltest besser die Klassennamen klein schreiben. Bei Deinem Beispiel gibt es zusätzlich zu bedenken, dass Du bei Getrenntschreibung der beiden Wörter nicht die Klasse .controlBar verwendest, sondern zwei neue Klassen .control und .Bar ansprichst.
 
ja, das Problem ist, dass die HTML-Datei nicht zugänglich ist und wenn ich den Quelltext anschaue, dann sehe ich, dass bei Class des Elements zwei getrennte Wörter verwendet wurden.
Das Element möchte ich ausblenden, wenn es möglich ist.
 
Na ja, wenn Du auf das Stylesheet Zugriff hast, könntest Du in die Klasse .control z.B. display:none; einfügen. Wenn die Wörter im HTML wirklich getrennt stehen, dürfte das Element nicht mehr sichtbar sein.
 
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Schweiz</title>
<![if ! lte IE 6]><style type="text/css"> @import "http://www.fastmail.fm/css/photogallery/dark.css?13"; </style> <![endif]>
<!--[if lte IE 6]><style type="text/css" media="screen"> @import "http://www.fastmail.fm/css/photogallery/light.css?13"; @import "http://www.fastmail.fm/css/photogallery/ie6.css?13"; </style> <![endif]-->
<!--[if IE 7]> <style type="text/css" media="screen"> @import "http://www.fastmail.fm/css/photogallery/ie7.css?13"; </style> <![endif]-->
<link rel="stylesheet" type="text/css" href="photogallery.css" />

<script type="text/javascript" src="http://www.fastmail.fm/js/mootools-1.11.js?13"></script>
<script type="text/javascript" src="http://www.fastmail.fm/js/preloader.js?13"></script>
<script type="text/javascript" src="http://www.fastmail.fm/js/historymanager.js?13"></script>

<script type="text/javascript" src="http://www.fastmail.fm/js/photogallery-1.05.js?13"></script>

</head>
<body class="Grid noJS">
<div id="heightWrapper">

<div id="header">
  <h1 id="photoTitle">Schweiz</h1>
</div>

<div id="controlBar">
  <span id="backToParent" title=" "><a href="..">« Zurück</a></span>


  <a class="modeSelector modeGrid" title="View image thumbnails" href="#"><span>Grid</span></a>
  <a class="modeSelector modeFilmstrip" title="View image with filmstrip" href="#"><span>Filmstrip</span></span>
  <a class="modeSelector modeSingle" title="View image fullscreen" href="#"><span>Single</span></a>
  <a class="modeSelector modeSlideshow" title="View slideshow (keyboard shortcut: space)" href="#"><span>Slideshow</span></a>

  <div id="thumbsSize" class="grid">

    <div id="smallThumbnails"></div>
    <div id="largeThumbnails"></div>

    <div id="resizeSlider">
      <div id="resizeHandle"></div>
    </div>
  </div>
  <div id="download" class="filmstrip single" href="#">Download <span></span></div>
</div>

<div id="loading">Loading...</div>

<div id="albums" class="grid">
  <h2>Albums</h2>
<a class="album" href="z%C3%BCrich/">
  <div class="albumImage" style="background-image: url(z%C3%BCrich/1.jpg?variant=thumb);"></div>
  <div class="albumMask"></div>
  <div class="albumInfo">
    <div class="albumName">Zürich</div>

    <div class="albumPhotoNumber">21 photos</div>
  </div>
</a>
</div>


<div id="photos" class="grid">
  <h2>Photos</h2>
<div class="thumbnail">
  <div class="horizontalWrapper">
  <a class="shadow" href="?imagepage=Schweiz.png">

    <img alt=" " title=" " src="Schweiz.png?variant=thumb" originalwidth="30" originalheight="28" />
    <span class="topleft"></span>
    <span class="topright"></span>
    <span class="bottomleft"></span>
    <span class="bottomright"></span>
  </a>
  </div>
  <div class="phototxt">Schweiz</div>

</div>
</div>


<div id="displayPhoto" class="horizontalWrapper filmstrip single slideshow">
  <div class="shadow">
    <div id="controls">
      <span href="#" id="stopSlideshow" class="slideshow modeSingle" href="#">Stop slideshow</span>
      <img src="" alt="" title="" />
    </div>
    <span class="topleft"></span>

    <span class="topright"></span>
    <span class="bottomleft"></span>
    <span class="bottomright"></span>
  </div>

</div>

<div id="photoExtras" class="filmstrip single slideshow">
  <a href="#" id="previous" title="View previous image (keyboard shortcut: j/←/↑)" class="filmstrip single" href="#">Previous</a>
  <a href="#" id="next" title="View next image (keyboard shortcut: k/→/↓)" class="filmstrip single" href="#">Next</a>

  <div id="photoDescription"></div>
  <div id="strip" class="filmstrip">
<a href="#"><img alt=" " title=" " src="Schweiz.png?variant=thumb" /></a>

  </div>
</div>

</div> <!-- End of #heightWrapper -->

<div id="poweredBy" class="grid">Powered by <a href="http://www.fastmail.fm">FastMail</a></div>

</body>
</html>

Danke aber es bewirkt nichts. Nur wenn ich in der CSS-Datei

Code:
#controlBar { display: none;}

schreibe, dann wird der Steuerungsbalken komplett ausgeblendet. Einzelne Elemente wie "Grid", "Slideshow" werden mit Class nicht ausgeblendet. Ich denke eben, weil es 2 Wörter gibt.
 
Es gibt einen Unterschied zwischen den Attributen id und class. Du sprichst mit controlBar die div id an und keine Klasse. Die Klassennamen musst Du gezielt und eventuell einzeln ansprechen.
 
Als Ergänzung:
Die Klasse Grid existiert mit Groß- und mit Kleinschreibung. Groß ist sie dem body-Tag zugeordnet. Wenn Du schreibst
PHP:
.Grid{
display:none;
}
dann ist schon mal gar nichts mehr zu sehen.
 
Anna, es funktioniert so gut, dass ich eine weisse Seite bekomme. Im Ernst, es ist die richtige Richtung aber ich möchte nur , dass das Label "Grid", "Filmstrip", etc verschwindet.

20080531120734552x83scrlt6.png
 
Zurück
Oben