Bild per CSS zentrieren

[Philo]

Hallo,

ich habe mittels einem Modul ein Bild in den Header gesetzt.

Aber ich bekomme das Bild nicht mittig.

Mittlerweile glaube ich auch, dass ich das Bild vielleicht gar nicht richtig anspreche?

Id's werden mit einem "#" angesprochen, Klassen mit einem "." und wenn ich die Id einer bestimmten Klasse ansprechen möchte, schreibe ich in den Selektor .KLasse #Id ist das richtig?

So zum Problem, das ist der Code für das Bild

<div id="startdiv" class="hoverImg">
  <a href="http://www.starwars-collectorbase.com/swcb/index.php/news.html">
    <img src="http://www.starwars-collectorbase.com/swcb/files/SWCB/Bilder/sitebilder/start.png" id="startbild" alt="SWCB" /> 
  </a>
</div>

Ich dachte sich spreche es wie folgt an:

.hoverImg #startbild {
postion:relativ;
margin-right:auto;
margin-left:auto;}

Mittlerweile bin ich mir gar nicht sicher ob ich das Bild überhaut anspreche. Zwischenzeitlich habe ich einen Margin-left von 10000px gesetzt und nichts hat reagiert.

Aber egal wie ich versuche es anzusprechen, es reagiert nicht.
Wo mache ich meine/n Fehler?

Egal was ich bis jetzt probiert habe, ich bekomme es nicht hin.
Es gibt Moment da wünsche ich mir die gute alte Tabelle wieder zurück

Für eine Idee wäre ich wirklich dankbar

[kleppi]

Hi Philo,

setze noch ein "display:block;" dazu, dann gehts, habe ich mit Firebug getestet.

Gruß kleppi

[Philo]

Super, danke

Wieder eine Baustelle fertig, fehlen noch 99999

[Philo]

Eine Frage hätte ich aber noch, weil ich es verstehen und nicht nur abtippen möchte, damit ich euch nicht wegen allem und jeden Fragen muss und vielleicht hiflt es auch anderen Neulingen

Warum macht "display:block;" den Unterschied?

Auf CCS4You wird man vom display:block auf "block" verwiesen:

Block-Elemente erzeugen eine neue Zeile im Textfluß und können zum vorherigen und zum nachfolgenden Element einen größeren Abstand aufweisen. Sie sind im Textfluß somit immer untereinander angeordnet.
Block-Elemente können Text, Inline- und je nach Element auch weitere Block-Elemente enthalten.

War das Bild vorher irgendwie verkettet, sodaß es alleine nicht mittig werden konnte? Denn der "Block" ist ja im Prinzip so etwas wie <p> oder nicht?

[CeeKay]

Block- und Inlineelemente werden unterschiedlich zentriert. Ein Bild ist von sich aus ein Inline-Element (genauer gesagt ein replaced inline element). Zentrieren über margin-left/-right: auto funktioniert aber nicht für Inline-Elemente, darum brauchst du display:block.

P.S.: CSS4You ist relativ alt und zum Lernen imho nicht geeignet. Hast du ein Standardwerk wie Little Boxes zur Hand? Dort lernen sich die Grundlagen besser.

[Philo]

Ich habe mir "Modernes Webdesign mit CSS" gekauft, aber ich habe mittelerweile den Verdacht, dass ich etwas brauche, dass mich vom Beginn abholt

Danke für die Erklärung!

[pipilotti]

... für alle, die auf diesem Beitrag landen, weil das verflixte margin: 0px nicht folgsam sein will und es dann trotz block nicht geht. Die CSS-Füchse wissen das bestimmt... aber vielleicht gehts manch einem ähnlich wie mir..
Es klappt nur, wenn das Bild auch eine festgelegte Breite hat.

[kischd]

Ich komme leider auch irgendwie nicht weiter...

Versuche auf dieser Seite das Bild zentriert darstellen.

Habe die Tipps auf der Seite mit Firebug ausprobiert leider bekomm ich das nicht hin.
kann mir jmd helfen?

[Spooky]

Ich komme leider auch irgendwie nicht weiter...

Versuche auf dieser Seite das Bild zentriert darstellen.

Habe die Tipps auf der Seite mit Firebug ausprobiert leider bekomm ich das nicht hin.
kann mir jmd helfen?

Welches Bild? Vom ersten Testimonial? Aber das Bild floated ja links vom Text, in wie fern willst du da etwas zentriert haben?

[kischd]

Denke hab es falsch erklärt.
Ich möchte gerne das img im image_container zentrieren...


Gesendet von meinem iPhone mit Tapatalk

[Spooky]

Wenn der Image Container floated, dann ist die (innere) Größe gleich der Größe des Bildes, in so fern kann also hier auch nichts zentriert werden.

[kischd]

Achso ...;-(

Dachte das geht... Das Bild beginnt ja immer links oben im image_container.
Hatte mir vorgestellt, wenn ich den image_container z.b. 300x300px groß mache, dass der obere und untere Teil nicht zu sehen ist...


Gesendet von meinem iPhone mit Tapatalk

[Spooky]

Hm, sorry, verstehe immer noch nicht was du haben möchtest .

[kischd]

Das Bild ist ja im Original 600x800px groß.
Der image_container möchte ich 300x300px machen.
So weit so gut
Das img ist ja standardmäßig immer oben links im image_container positioniert.
Ich hätte es aber gerne dass das img im Container mittig dargestellt wird

Das img soll nun aber mittig im Container stehen. Also bei einem hochformatigem Bild ein Stück oben und unten abgeschnitten...


Gesendet von meinem iPhone mit Tapatalk

[Spooky]

Das Bild ist ja im Original 600x800px groß.
Der image_container möchte ich 300x300px machen.
So weit so gut
Das img ist ja standardmäßig immer oben links im image_container positioniert.
Ich hätte es aber gerne dass das img im Container mittig dargestellt wird

Das img soll nun aber mittig im Container stehen. Also bei einem hochformatigem Bild ein Stück oben und unten abgeschnitten...


Gesendet von meinem iPhone mit Tapatalk

Achso, die Information hättest du gleich im ersten Post geben sollen, auf der Seite selbst ist ja nichts davon implementiert.

figure {
    margin:0;
    position:relative;
    width:300px;
    height:300px;
    background:#3684AF;
}

figure img {
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    margin:auto;
} 

Damit ist das <img> immer maximal so groß wie die fix definierte Größe des <figure> und zusätzlich ist das <img> in jede Richtung zentriert.

http://jsfiddle.net/wam5wgxq/

Das Padding des <figure>, dass du jetzt hast, müsstest du dann aber über

figure img {
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    position:absolute;
    left:20px; top:20px; right:20px; bottom:20px;
    margin:auto;
} 

realisieren.

[kischd]

Danke. Ja hab nur mit firebug rumgespielt. Glaub ich weiß nun auch wo mein Fehler war. Image_container absolut. Auch wenn ich noch nicht verstehe warum das dann funktioniert ;-)


Gesendet von meinem iPhone mit Tapatalk

[Spooky]

Hm, nein image_container hat position:relative;, das <img> hat position absolute. Hier gibt's mehr info zu dieser Art von Zentrierung: http://www.smashingmagazine.com/2013...centering-css/

[kischd]

Cool danke


Gesendet von meinem iPhone mit Tapatalk

[kischd]

Hey spooky,
Glaub Brauch nochmal Hilfe.
Unter #kundenstimmen hab ich das ganze mal eingepflegt.
Kann ich das Bild nur proportional größer darstellen? Damit der image_container ausgefüllt ist?


Gesendet von meinem iPhone mit Tapatalk

[kischd]

Hab versucht das Ganze umzusetzen, leider ist das erwünschte Ergebnis dabei nicht herausgekommen.

Ich hab aktuelle noch width: auto einebaut, ansonsten würde das Bild auf 140x140 verzerrt werden.

right und bottom 0 noch ausgeblendet damit es nicht mittig rumsteht.

Eigentlich hab ich nichts vergessen oder? Warum wird das Bild nicht zentriert in voller Größe angezeigt?

[Spooky]

Aktuell passt es ja? Ich glaube du hast deine Anforderung immer noch nicht klar definiert. Relativ zu was genau soll das Bild wie genau zentriert sein? Vielleicht solltest du mal eine Skizze machen im Photoshop oder sonst wie, mit Ist-Zustand und Soll-Zustand, damit klarer wird, was du genau haben möchtest.

[kischd]

Vielleicht kann ich das mit dem Bild erklären.

Der Helle bereich vom img soll nicht im image_container dargestellt werden.

Geht das mit CSS?

[Spooky]

Achso, nein, ohne JavaScript geht das nur mit background-image, background-size:cover und background-position:center . Du könntest dir ja das ce_text Template ändern, abfragen ob eine bestimmte Klasse drin vorkommt (bspw. "background") und dann statt dem <figure> einfach in das ce_text <div> mit inline-style das background-image setzen, den Rest über das normale Stylesheet festlegen.

[kischd]

verstehe,... hab ich mir fast gedacht.

Das Problem ist dass der Kunde die Kundenmeinungen selbst einstellen soll.
Damit das einheitlich aussieht, wäre das ne schöne Lösung gewesen.

Vielen Dank für deine Hilfe

[Spooky]

Naja, wie gesagt mit dem background-image bekommst du das leicht hin.

[kischd]

Dann muss ich wohl weiter in meinen php Buch schmökern ;-)
... ein Anreiz weiterzulernen


Gesendet von meinem iPhone mit Tapatalk

[kos]

Dann muss ich wohl weiter in meinen php Buch schmökern ;-)

Hi,

ob du da allerdings fündig wirst bei der Suche nach der CSS-Eigenschaft "background-image"?

Versuche mal lmgtfy.com/?q=background-image

[kischd]

Es geht ja nicht um die css Eigenschaft background-image. !!!
Siehe Post 23+24


Gesendet von meinem iPhone mit Tapatalk

[Spooky]

Hi,

ob du da allerdings fündig wirst bei der Suche nach der CSS-Eigenschaft "background-image"?

Versuche mal lmgtfy.com/?q=background-image

Er meint wegen der Template Änderung. Eine mögliche Variante eines abgewandelten ce_text Templates könnte so aussehen (Contao 3.2.x und 3.4.x gleichermaßen, da man sowieso das umschließende div von block_searchable ersetzen muss - naja, muss man nicht, ist aber imho sauberer):

<?php $bg = in_array( 'background', explode( ' ', $this->class ) ); ?>

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style || $bg): ?> style="<?php echo $this->style; ?><?php if( $bg ): ?>background-image:url('<?php echo $this->src; ?>');<?php endif; ?>"<?php endif; ?>>

  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>

  <?php if (!$this->addBefore): ?>
    <?php echo $this->text; ?>
  <?php endif; ?>

  <?php if ($this->addImage && !$bg): ?>
    <div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>

      <?php if ($this->href): ?>
        <a href="<?php echo $this->href; ?>"<?php if ($this->linkTitle): ?> title="<?php echo $this->linkTitle; ?>"<?php endif; ?><?php echo $this->attributes; ?>>
      <?php endif; ?>

      <img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>"<?php if ($this->title): ?> title="<?php echo $this->title; ?>"<?php endif; ?> />

      <?php if ($this->href): ?>
        </a>
      <?php endif; ?>

      <?php if ($this->caption): ?>
        <div class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></div>
      <?php endif; ?>

    </div>
  <?php endif; ?>

  <?php if ($this->addBefore): ?>
    <?php echo $this->text; ?>
  <?php endif; ?>

</div>