✔ Seltsam, "margin" wirkt nur im Sternselektor.

  • Themenstarter Themenstarter Gast170816
  • Beginndatum Beginndatum
G

Gast170816

Hallo,
ich habe ein paar Boxen aus Bildern gebaut. Es sind aber leider ungewollte Abstände zwischen "Box-Deckel" und "-"Boden".

Ich habe "margin:0" in der CSS-Datei im Sternselektor * gemacht, dann sind die Abstände weg und alles ok. Allerdings muss ich diese Box auf einer Seite verwenden, wo ich nicht auch alles andere was bislang da ist, einfach mit "margin: 0" ansprechen darf/kann.

Die logische Konsequenz, "margin:0" einfach in alle Elemente der Box reinschreiben funktioniert seltsamerweise nicht.

Nachfolgend CSS und HTML dazu:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Untitled</title>
  </head>
<style>
  * {
      margin: 0;
  }  
  .boxes {
    display: inline;
    float: left;
    margin-right: 25px;
    width: 406px;
  }
  .box-top {
    background: url("big_box_top.jpg") no-repeat scroll left top transparent;
    padding: 10px 10px 0;
  }
  .box-content {
    background: url("big_box_mid.jpg") repeat-y scroll left top transparent;
    padding: 0 20px;
  }
  .box-bottom {
    background: url("big_box_bottom.jpg") no-repeat scroll left top transparent;
    height: 21px;
    padding: 0 10px 10px;
  }
  </style>
  
  <body>
        <div class="boxes">
        <div class="box-top">
        </div>
	  <div class="box-content">
          <h3>&Uuml;berschrift</h3>
	  <img src="img/MeinBild.jpg" alt="Bild"/>
	  <p>Hier ist Text, der in der Box steht.
	  Hier ist Text, der in der Box steht.
          </p>
        </div>
        <div class="box-bottom">
        </div>
  </div>
  </body>
</html>
Also der Code oben funktioniert, ich muss aber den *-Selektor wegbekommen und margin in die Elemente reinschreiben bewirkt plötzlich gar nix mehr.
 
Fantasmo hat gesagt.:
"margin:0" einfach in alle Elemente der Box reinschreiben funktioniert seltsamerweise nicht.

[...]

und margin in die Elemente reinschreiben bewirkt plötzlich gar nix mehr.
Zum Vergrößern anklicken....
Da hast du wohl etwas übersehen bzw. falsch gemacht, denn das kann ich nicht bestätigen.

HTML: 
  <body>
        <div class="boxes">
        <div class="box-top">
        </div>
      <div class="box-content">
          <h3 style="margin:0">&Uuml;berschrift</h3>
      <img src="img/MeinBild.jpg" alt="Bild"/>
      <p style="margin:0">Hier ist Text, der in der Box steht.
      Hier ist Text, der in der Box steht.
          </p>
        </div>
        <div class="box-bottom">
        </div>
  </div>
  </body>

Und anstelle der beiden style-Attribute im zentralen CSS deklariert:

CSS: 
h3, p { margin:0; }

Denn dies sind in deinem präsentierten HTML-Code die beiden "Block-Elemente", deren voreingestellter Außenabstand es zurückzusetzen gilt.

Alternativ folgt daraus:

CSS: 
.boxes * { margin:0; }

oder auch

CSS: 
.box-content * { margin:0; }

* wird nicht "Sternselektor", sondern "Universalselektor" bzw. "Universeller Selektor" (siehe http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html#heading-5.3 ) genannt, der alle enthaltenen HTML-Elemente einbezieht; in der von dir genutzten "Normalfassung" alle im HTML-Doc befindlichen, in den beiden von mir o.g. Versionen alle Elemente, die Nachfahren von ".boxes" oder ".box-content" sind.

Übrigens wird <style></style> innerhalb von <head></head> notiert, und nicht im Anschluß daran.
 
Zuletzt bearbeitet:
Oh, abgefahren...also waren es die Schriftelemente...da hab ich überhaupt nicht drauf geachtet.
Interessant auch, der Universal-Selektor auf ein spezielles Element angewendet..kannte ich vorher noch gar nicht, hab das bislang immer nur einzeln in CSS-Resets gesehen.

Vielen Dank!
 
Also jetzt hab ich doch nochmal eine Frage zum selben Thema.

Ich hab noch zwei Boxen gemacht, die heißen nur anders (basieren aber auf anderen Hintergrundbildchen...die man hier jetzt nun leider nicht sieht).

Jedenfalls in "top" und "bottom" ist eben das Hintergrundbildchen für die beiden Boxenenden, es ist je 7px hoch...aber trotz dass die Divs "top" und "bottom" auch 7px hoch sind, ist einfach innen noch ein Weißraum unterm Bildchen.
Selbst wenn ich diese beiden Divs sogar auf 1px Höhe setze, bleiben sie unverändert zu hoch.

Dieser Fehler tritt auch nur in IE auf, der Code selbst ist valide.
An sich ist doch alles das selbe, wie bei der ersten Box, ich hab die Klassen nur umbenannt :confused:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Untitled</title>
          <style type="text/css">
  .teaserboxes * { margin:0; padding:0;} 
  .teaserboxes {
  border:1px solid #000;
  display: inline;
  float: left;
  width: 182px
  }
  .teaserbox-top {
  background: url("paket_box_top.png") no-repeat scroll left top transparent;
  border:1px solid green;
  height: 7px;
  }
  .teaserbox-content {
  background: url("paket_box_bg.jpg") repeat-x scroll left top transparent;
  border:1px solid blue;
  padding: 13px 20px;
  overflow:hidden;
  height:235px;
  }
  .teaserbox-bottom {
  background: url("paket_box_bottom.png") no-repeat scroll left top transparent;
  border:1px solid green;
  height: 7px;
  }
  .teaserboxes .box-headline {
  border-bottom: 1px solid #aeaeae;
  padding-bottom:10px;
  }
  </style>
  </head> 
  <body>       
          <div class="teaserboxes">
            <div class="teaserbox-top">
            </div>
				    <div class="teaserbox-content">
				      <div class="box-headline">
                <h3>Kleine &Uuml;berschrift</h3>
                <h4>Und noch eine Zeile</h4>
              </div>
            <p>Text in der kleinen Box
            </p>
          </div>
          <div class="teaserbox-bottom">
          </div>
  		  </div>   
  </body>
</html>
 
Der Fehler tritt im IE auf?

Dann ergänze mal die Regeln der betroffenen <div>-Elemente mit overflow:hidden, damit IE darin keinen Platzhalter vorsieht, dessen Höhe sich an der globalen Schriftgröße orientiert, die deine height:7px-Regeln überschreitet.

Wenn du das Dokument zudem mit einem anderen Doctype im standardkonformen Modus bereitstellst, dürfte das Fehlverhalten nur noch im IE6 auftreten.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück