zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Abstände zw. kleinen Grafiken weg bekommen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.06.2006, 17:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Frage Abstände zw. kleinen Grafiken weg bekommen?

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...?!).

Geändert von marcee (02.06.2006 um 17:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.06.2006, 18:31
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.06.2006, 20:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Standard

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.
Angehängte Grafiken
Dateityp: jpg Lückenbild.jpg (5,1 KB, 9x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 02.06.2006, 22:43
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Und wenn du die dann mittels float: left; floatest?
Mit Zitat antworten
  #5 (permalink)  
Alt 03.06.2006, 10:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Standard

Das war ein guter Tipp, danke! Jetzt muss ich allerdings 5x "<br/>" 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 <br/> 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...

Geändert von marcee (03.06.2006 um 11:15 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 03.06.2006, 11:22
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 03.06.2006, 12:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von marcee (03.06.2006 um 12:37 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 03.06.2006, 13:12
regelmäßiger Gast
neuer user
 
Registriert seit: 19.05.2006
Ort: München
Beiträge: 37
lona befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Denn sonst muss ich bei >>jedem<< Bild x-Mal ein <br/> dahinter schreiben.
reicht da nicht einfach ein <br clear="all" /> ??

gruss lona
Mit Zitat antworten
  #9 (permalink)  
Alt 03.06.2006, 13:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.06.2006, 13:58
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

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 <br style="clear: all;" />
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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
Grafiken in Tabelle überlagern godfather CSS 5 29.10.2007 13:13
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:20 Uhr.