Abstände zw. kleinen Grafiken weg bekommen?

marcee · #1 (**permalink**) 02.06.2006, 17:45

Und schon wieder habe ich eine Frage...

Bei kleinen Grafiken bleibt trotz margin:0 und padding:0 ein Rand, wenn die Schriftgröße größer ist, als die Grafik. Wenn Grafiken direkt anliegen sollen, dann ist das ziemlich unpraktisch. Und auch ein img{font-size:0;} funktioniert nicht.

Eine Möglichkeit wäre jetzt, mit font-size:0 die Schriftgröße zu verkleinern. Das könnte man entweder global machen oder z.B. für Bilder in der CSS extra ein eigenes Format definieren und diese Bilder dann per div einschließen. Aber das finde ich jetzt nicht so wirklich elegant, weil das wieder eine Lösung über Umwege ist.

Gibt es also z.B. eine Eigenschaft, die man allgemein auf alle Bilder anwenden kann (egal welche Größe) und die quasi "font-size" überschreibt, so dass egal ist, welche Schriftgröße (im aktuellen div-Block) eingestellt ist und wie klein die Grafik ist - Bilder haben dann nie einen Rand? Sinnvoll wäre das auch, wenn man z.B. viele kleine Buttons hat, die direkt aneinander anliegen und man darüber Schrift stellen will (so was ginge auch über background, glaube ich - aber vllt. gibt es ja noch eine andere Möglichkeit...?!).

Lloyd Larkin · #2 (**permalink**) 02.06.2006, 18:31

Hallo

Könnte es an deiner Zeilenhöhe liegen? Setz mal line-height auf 1.
Oder versuch mal img { vertical-align: bottom; }, wenn du einen Rand unter dem Bild hast.
Oder deine Bilder mittels display: block als Blockelement zu machen.

Grüsse
Lloyd

marcee · #3 (**permalink**) 02.06.2006, 20:57

Zitat:

line-height auf 1

Bringt leider noch weniger, als font-size. Das macht mir zwar den Abstand oben weg, allerdings bleibt dann immer noch der Abstand zwischen den einzelnen Grafiken.

Zitat:

display: block

Das macht mir zwar die Lücken weg...allerdings sind die Grafiken dann untereinander, statt nebeneinander, was ja für Blockelemente nichts ungewöhliches ist.

Ich hab mal einen kleinen Ausschnitt hier dran gehangen. Da sieht man die Lücken zw. den einzelnen Buttons und zw. dem Banner und den Buttons ganz gut. Beide Lücken werden größer, wenn man die Schrift vegrößert.

Lloyd Larkin · #4 (**permalink**) 02.06.2006, 22:43

Und wenn du die dann mittels float: left; floatest?

marcee · #5 (**permalink**) 03.06.2006, 10:32

Das war ein guter Tipp, danke! Jetzt muss ich allerdings 5x " " hinter dem letzten Button notieren. Denn sonst kuschelt sich der erste Text auch direkt an den letzten Button. Auch "clear:left" hat mich da leider nicht weiter gebracht.

Mal sehen, ob ich die Tage noch mal eine Lösung mit extra CSS-Boxen probiere. Allerdings wäre das auch nicht wirklich allgemein und würde das eigentliche Problem nicht lösen.

edit:
Hmm...ich muss mir noch was anderes einfallen lassen. Denn sonst muss ich bei >>jedem<< Bild x-Mal ein dahinter schreiben. Und je nachdem, wie groß das Bild ist, können das schnell 20, 30 und mehr davon sein (pro Bild!). Auch nicht so das wahre, würde ich sagen...

Lloyd Larkin · #6 (**permalink**) 03.06.2006, 11:22

Also das einzige Problem das ich mir unter deiner Beschreibung vorstellen kann, wäre mit clear: left beim darauf folgenden Element zu lösen. Kannst du das ganze kurz hochladen oder ein Screenshot mit dem Code dazu hier posten?
Ich bin sicher dein Problem ließe sich lösen

marcee · #7 (**permalink**) 03.06.2006, 12:31

Klar kann ich meinen Code posten...

Code:

Das CSS (der wichtigste Ausschnitt):

html, body
              {
               background-color:#99cc00;
               font-family:Verdana,Arial,sans-serif;
               color:#000000;
               font-size:100.01%;
               text-align:center; /* Wegen IE-Kompatibilität */
              }

#container
              {
               width:775px;
               margin: 0 auto;
               text-align:left; /* Wegen IE-Kompatibilität */
              }

img           {
               display:block;
               float:left;
              }

h1            {
               font-family:Verdana,Arial,sans-serif;
               font-size:20pt;
               line-height:20pt;
              }

h2            {
               font-family:Verdana,Arial,sans-serif;
               font-size:18pt;
               line-height:18pt;
              }

h3            {
               font-family:Verdana,Arial,sans-serif;
               font-size:16pt;
               line-height:16pt;
              }

h4            {
               font-family:Verdana,Arial,sans-serif;
               font-size:14pt;
               line-height:14pt;
              }

h5            {
               font-family:Verdana,Arial,sans-serif;
               font-size:12pt;
               line-height:12pt;
              }

h6            {
               font-family:Verdana,Arial,sans-serif;
               font-size:10pt;
               line-height:10pt;
              }

p             {
               font-family:Verdana,Arial,sans-serif;
               font-size:8pt;
               line-height:8pt;
              }

li            {
               font-family:Verdana,Arial,sans-serif;
               font-size:4pt;
               line-height:4pt;
              }

Code:

Und die html (auch nur das Wichtigste):

<?xml version="1.1" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title></title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

	<link rel="stylesheet" href="/A_M/templates/screen.css" type="text/css" media="screen"/>

<!--[if lte IE 6]>

  <style type="text/css" media="screen, tv, projection">
        body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */
        #content { margin-left: 22px; } /* to avoid the BMH */
        a,  a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */
  </style>

  <script type="text/javascript" src="assets/js/sleight.js"></script>

<![endif]-->

        <script src="manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
        <script src="manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>

</head>
<body>

<div id="container">

  <div id="site">

    <div id="header">
        <img src="/A_M/images/head_04_775.jpg" alt="Startseite"/>

    </div>
    <!-- close #header -->

    <div id="headmenu">

      <img id="image" src="/A_M/images/buttons/Startseite.gif" alt="Startseite"/>
      <img src="/A_M/images/buttons/AboutUs.gif" alt="AboutUs"/>

      <br/><br/><br/><br/><br/> <!-- HIER sind die Zeilenumbrüche, die ich einfügen muss, damit der Text (das, was gleich kommt) nicht direkt an den letzten Button ("AboutUs") andockt. Ohne das steht der erste Text direkt in der selben Zeile wie die Buttons. -->

    </div>
    <!-- close #headmenu -->

    <div id="content">

      <h3>Überschrift (erster Text nach dem letzten Button)</h3>
<h6>Text</h6>

    </div>
    <!-- close #content -->

<div id="footer">
	<p></p>
</div>
<!-- close #footer -->

</div>
<!-- close #site -->

</div>
<!-- close #container -->

</body>
</html>

Wie gesagt, mit clear:left hab ich es schon probiert. Weder direkt im html-Code, noch im CSS hat das eine Wirkung. Die verschiedenen Elemente hab ich auch ausprobiert. z.B. habe ich auch schon in der CSS bei "h3" ein "clear:left;" notiert, leider aber ohne jegliche Wirkung.

lona · #8 (**permalink**) 03.06.2006, 13:12

Zitat:

Denn sonst muss ich bei >>jedem<< Bild x-Mal ein dahinter schreiben.

reicht da nicht einfach ein ??

gruss lona

marcee · #9 (**permalink**) 03.06.2006, 13:35

Guck mal hier: Nicht erlaubt bei Strict. Von daher fällt das schon mal flach, da ich mich möglichst an die Spezifikationen halten will.

Lloyd Larkin · #10 (**permalink**) 03.06.2006, 13:58

Und mit clear: left beim div#content funktioniert es nicht? Kann ich mir kaum vorstellen.
Hast du das ganze auch online?
lona meinte wahrscheinlich auch

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Abstände gehen nicht weg...	Lilienfan	CSS	2	02.06.2009 15:25
Abstände zwischen img wollen nicht weg	Lili0312	CSS	2	03.09.2008 18:57
horizontale navigation aus meheren grafiken??	celine@23	CSS	16	14.01.2007 15:03
2 Grafiken als Hintergrund ...	PiTi	CSS	3	07.09.2005 23:33
IE zeigt plötzlich Abstände zwischen LIs an	Dr. Love	CSS	5	26.07.2005 13:29