Bilder bündig horizontal zum Text

Anonymous · 18. November 2017

Hallo werte Gemeinde,

jetzt hab ich ein optisches Problem, welches ich lösen möchte.

Ich habe links ein Bild und recht daneben der Text. Der Text hat eine h2 überschrift und diese hat standardmässig einen Border (daran möchte ich nichts ändern) aber durch diesen wird das Bild höher als der Text dargestellt.
Wie bekomme ich das hin, dass beides horizontal bündig ist - Bild und Text

Klasse anlegen im usermod.css? (wie muss die dann lauten?) und wie pflege ich die dann im Content ein?

bin ratlos.....

p.s. der shop ist im Aufbau und daher offline gestellt, kann aber wenn gewünscht kurz online gestellt werden

besten Dank im Voraus

Anonymous · 18. November 2017

Eine h2-Überschrift hat normalerweise ein
margin-top: 18px;
Das würde ich versuchen dem Bild auch zu geben.nebeneinander eingefügt hast?

Anonymous · 18. November 2017

das war auch mein gedanke, nur wie?

Anonymous · 18. November 2017

Dazu brauche ich einmal den genutzen Code.
Wie setzt Du das Bild und den Text nebeneinander?

Anonymous · 18. November 2017

HTML:

<div class="row margin-top-pfz">
    <div class="col-md-6 col-xs-12">
        <img alt="" class="img-responsive" src="images/image/Katrin.jpg" />
    </div>

    <div class="col-md-6 col-xs-12">
        <h2 style="font-weight: 500;"><span style="font-family:tahoma,geneva,sans-serif;">Katrin Sch&uuml;ler</span></h2>

        <p>
            <span style="font-family:tahoma,geneva,sans-serif;"><span style="font-size:14px;"><strong>Katrin Sch&uuml;ler,&nbsp;</strong>Dipl. Soziologin, Gr&uuml;nderin und Inhaberin der Firma naturlieferant ist Produktscout und Entwicklerin von innovativen Ideen&nbsp;rund um das Thema Genuss und Nachhaltigkeit.&nbsp;Bereits in ihrer&nbsp;Jugend entwickelte sie die Leidenschaft f&uuml;r au&szlig;ergew&ouml;hnlich gute Naturlieferanten. Wahrscheinlich hat alles begonnen mit der Entdeckung einer B&auml;ckerei, die so k&ouml;stliche Schusterjungen kreierte, darauf wollte sie nicht mehr verzichten. Der Weg dorthin war umst&auml;ndlich, aber er lohnte sich! Schon damals war ihr kein Weg zu weit.&nbsp;Das ist lange her, doch die Leidenschaft f&uuml;r K&ouml;stlichkeiten aus der Region und das Aufsp&uuml;ren von besonderen Erzeugern und Produkten ist geblieben.</span></span>
        </p>
    </div>
</div>

Anonymous · 18. November 2017

Nutzt Du auf der Seite eine andere Schrift und Schriftgröße?
wenn nciht, würde ich die font-size und font-family aus den Texten raus nehmen.
Wenn Du das in jedem Text einzeln eingibst, musst Du später auch jeden Text bearbeiten, wenn sich die Schrift oder Schriftgröße einmal ändern soll.

ersetze mal bitte dieses:
HTML:
<div class="row margin-top-pfz">
<div class="col-md-6 col-xs-12">
<img alt="" class="img-responsive" src="images/image/Katrin.jpg" />
</div>
gegen dieses:
HTML:
<div class="row margin-top-pfz">
    <div class="col-md-6 col-xs-12" style="margin-top: 18px">
        <img alt="" class="img-responsive" src="images/image/Katrin.jpg" />
    </div>
Und bitte, nutze nächstes Mal die Code-Box für lange Texte und Codes.
Die findest Du hinter dem kleinen "+" Sympol.

Anonymous · 19. November 2017

super, sieht jetzt fein aus und das nächste mal kommt code über die code-box

Danke und einen schönen Sonntag