|
|||
Grafik zentrieren
Hallo Forum, hallo Experten.
Ich weiß, der Titel klingt nach war-schon-tausendmal-da, aber ich habe keine Lösung gefunden, obwohl ich schon viel probiert habe. (Aber dann verzieht es den Rahmen oder es passiert schlicht nichts...) Nun hoffe ich auf eure Hilfe... Ich habe in meinem weblog (Delikatessenlager) auf der rechten Seite eine gif-Grafik, die genauso ist, wie ich sie möchte, nur hängt sie mir zu sehr auf der linken Seite und ich habe zuwenig Ahnung von css/html, um das allein hinzubekommen. Anbei das, was es so aussehen lässt, wie es im Moment aussieht, wohl auch recht dilettantisch.... Vielen dank im voraus für eure Hilfe!! <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Demo</title> <style type="text/css"> .image-box { padding: 1px; border: 1px solid black; float: left; display: block; margin-left: auto; margin-right: auto } .image-box img { display: block; } </style> </head> <body> <div class="image-box"> <img src="http://www.p2u.de/Ultra/Bilder/Nordlicht.gif" alt="Avatar" /> </div> <p></p> </body> </html> |
Sponsored Links |
|
|||
<link>, <meta> und <title> dürfen nur in <head> vorkommen!
Zum Problem: Nimm das float:left von .image-box weg, und gib ihr stattdessen text-align:center. Dann ist das div wieder (wie normalerweise) 100% breit (100% der Sidebar!) und du kannst das Bild (ist ein inline-Element) per text-align zentrieren. gruß, take |
Sponsored Links |
|
|||
Hallo take, danke dir !
Ich verstehe ehrlich gesagt nur ein Viertel von dem, was du mir rätst.. ...ich habe das mit dem Ersetzen versucht, dann hat es den Rahmen nach rechts rausgezogen... |
|
|||
Dann gib den Rahmen doch dem img-Element
gruß, take |
|
|||
Du scheinst nicht viel bis gar keine Ahnung von CSS zu haben, oder?
Der Rahmen ist definiert im Bereich .image-box { ... }. Da steht an erster Stelle: padding: 1px; und an zweiter Stelle border: 1px solid black;. Diese beiden Eigenschaften bewirken
Damit du das Bild aber in der Sidebar zentrieren kannst, muss das Element in dem es enthalten ist (das div mit der Klassen "image-box") über die ganze Breite gehen, man kann also nicht mit float:left arbeiten. Damit der Rahmen trotzdem nicht über die ganze Breite geht, gibst du ihn halt dem img Element. Also die beiden Regeln die ich oben angesprochen habe (padding:... und border:...) bei .image-box wegnehmen und bei .image-box img einfügen. Dann musst du noch (wie in meinem anderen Post schon gesagt) das float:left; von .image-box ersatzlos streichen und (sehe ich gerade) das display:block; von .image-box img ebenfalls wegnehmen, sonst funktioniert text-align nicht (Warum das display:block; da steht, ist mir schleierhaft ). Hoffe du kommst damit klar, aber bitte (du tust dir selbst einen Gefallen) lerne die Grundlagen (z.B. bei Litte-Boxes oder SELFHTML)! gruß, take |
|
|||
Oh Mann, danke....ich werde mich durcharbeiten.
Bei html habe ich viel, also einiges allein gelernt, aber css....puh, noch wenig Begegnungen gehabt. Ich plane ohnehin, im Herbst einen von-der-Pieke auf Kurs zu machen. DANKE!!!! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
grafik in container zentrieren | mjb | CSS | 11 | 25.04.2011 22:11 |
eine grafik über andere legen | keyboardY | CSS | 6 | 23.01.2010 18:53 |
Aktive Menü Grafik in den Vordergrund | lavasandzaehler | CSS | 8 | 02.03.2009 19:05 |
Grafik unten rechts im div? | rene090965 | (X)HTML | 11 | 09.08.2006 10:02 |
Vertikal zentrieren in Box | wandler | CSS | 5 | 01.08.2006 20:01 |