|
|||
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) |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
Zitat:
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. |
|
|||
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) |
|
||||
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 |
|
|||
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> Geändert von marcee (03.06.2006 um 12:37 Uhr) |
|
|||
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.
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |