zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafik zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.06.2011, 14:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2011
Beiträge: 4
Bellamorte befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2011, 14:59
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

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

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 04.06.2011, 18:00
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Dann gib den Rahmen doch dem img-Element

gruß,
take
Mit Zitat antworten
  #5 (permalink)  
Alt 04.06.2011, 19:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2011
Beiträge: 4
Bellamorte befindet sich auf einem aufstrebenden Ast
Standard

Ok. Wo ? Wie ?
Danke !
Mit Zitat antworten
  #6 (permalink)  
Alt 04.06.2011, 20:58
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Bellamorte Beitrag anzeigen
Ok. Wo ? Wie ?
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
  1. den Abstand zwischen Rahmen und Inhalt des Elements (padding) und
  2. den Rahmen selbst: 1px dick, durchgezogen ("solid") und schwarz ("black")
Diese Eigenschaften werden angewandt auf das div mit der Klassen "image-box". Dieses ist normalerweise so breit, wie die ganze Sidebar. Damit würde der Rahmen über die ganze Breite gehen. Damit das nicht so ist, steht da float:left. Das bewirkt (unter anderem, eigentlich eher als "Nebenwirkung"), dass das div-Element nur noch so breit ist, wie sein Inhalt, also das Bild.
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
Mit Zitat antworten
  #7 (permalink)  
Alt 04.06.2011, 21:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2011
Beiträge: 4
Bellamorte befindet sich auf einem aufstrebenden Ast
Standard

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!!!!
Mit Zitat antworten
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:43 Uhr.