• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Rahmen ums Bild - mit Abstand

Bellamorte

Bellamorte

Neues Mitglied
Hallo !
Also eigentlich klingt das nicht wirklich kompliziert...ist es warscheinlich auch nicht.
Aber ich habe gesucht und probiert und es geht nicht.
Mein Ziel ist ein (farbiger) Rahmen um ein Bild, wobei jedoch zwischen Bild und Rahmen ein kleiner Abstand (vielleicht 2px) ist.
Meint ihr, ich kriege das hin ??? Nein....
:roll:
Mein code sieht folgendermassen aus:
<div align=center><img src="bild" border=3></div><p>
Ich habe es mit hspace und vspace probiert und mit padding, aber ich bin so dermassen html-Grün hinter den Ohren, es klappt nicht.
Es wäre genial, wenn mir jemand unter die Tasten greifen könnte...
Danke.
DANKE...
 
Hallo und willkommen im Forum. Mit CSS geht das zum Beispiel so:

HTML: 
<!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: 2px;
                border: 3px solid red;
                float: left;
            }

            .image-box img {
                display: block;
            }

        </style>
    </head>

    <body>
        <div class="image-box">
            <img src="http://www.html.de/customavatars/avatar22615_1.gif"
                 alt="Avatar" />
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante
            velit, porttitor ut dapibus eget, tincidunt at neque. Morbi euismod,
            metus id iaculis aliquam, lectus tortor viverra turpis, porta ornare
            metus dolor nec diam. Maecenas tristique varius consectetur. Proin
            non auctor lectus. Nulla facilisi. In dignissim, elit ut condimentum
            rhoncus, purus dui porttitor lectus, eu aliquam metus magna
            vulputate felis. Donec aliquam pellentesque risus a placerat. Nunc
            id purus purus. Etiam diam elit, condimentum a luctus quis,
            tincidunt a velit. Phasellus facilisis lacinia mauris ac vulputate.
            Sed eget tincidunt massa. Integer et tortor eros. Donec sit amet
            massa nisi. Nullam bibendum massa ac sem hendrerit iaculis. Sed sit
            amet nisl at lectus ornare consectetur. Fusce quis sem velit.
            Vivamus dictum diam vitae mi eleifend ultricies.</p>
    </body>

</html>
 
Holladiewaldfee und danke...
Geil.
Ich habe den Blindtext einfach raus und alles auf 1px und schwarz....sieht gepflegt gut aus.
DANKE !
Wo finde ich die Farbnamen ? Also was wäre z.B. dunkel-Lila ? Oder kann ich den Hex-code auch nehmen ?
 
Hallo.

@mermshaus: Welchen Vorteil bringt das div?

Ich machs immer so:
HTML
HTML: 
<img class="rahmen" src="meinbild.jpg" width="424" height="283" alt="Blick auf den Fujijama">
CSS
Code: 
.rahmen {border-style: solid;
         border-color: #000000;
         border-width: 5px;
         padding: 5px}
Ist jetzt ein einfaches Beispiel von einem meiner Bilder.

Gruss
Elroy
 
Es ist aber einfach sauberer, alles mit DIVs zu machen. Bei solchen Kompromissen, wie das img-Tag direkt mit CSS zu formatieren, kann auch leicht mal Murks in einigen Browsern rauskommen. Im Zweifelsfall immer ein Div nehmen, der lässt sich wirklich am besten und bedenkenlos formatieren.
 
aber ein img kann auch sauber definiert werden. und nur wegen einem img ein div zu definieren ist nicht gerade sinngemäss. hab ich zumindest gerade kürzlich so gelernt.
gib dem img eine klasse dann gehts genau so gut.
 
Gut klar, hast ja Recht.
Ich meinte nur, dass man jetzt beispielsweise (so wie ich das als blutiger Anfänger immer gemacht habe) nicht JEDES Tag einzeln formatieren sollte. Da sagt man dem einen H1, es soll 20px weiter links stehen, dem einen Bild, es soll in der Mitte stehen und letztenendes verliert man total den Überblick. Lieber alles strukturiert in ein paar DIVs legen, absolut positionieren und fertig ist. Aber für ein einziges img einen DIV zu erzeugen ist natürlich Schwachsinn^^
 
Also soll ich es jetzt lieber anders machen ?
Ich schaue es mir mal mit opera an, wenn es da auch schön ist, passt es doch oder ?
 
Hallo.

Handelt es sich um ein einziges Bild gib die id/class deinem Bild.

Handelt es sich um mehrere Bilder, z.B. eine Galerie, arbeite mit einem div.

Gruss
Elroy
 
Elroy schrieb:
Hallo.

@mermshaus: Welchen Vorteil bringt das div?

Ich machs immer so:
HTML
HTML: 
<img class="rahmen" src="meinbild.jpg" width="424" height="283" alt="Blick auf den Fujijama">
CSS
Code: 
.rahmen {border-style: solid;
         border-color: #000000;
         border-width: 5px;
         padding: 5px}
Ist jetzt ein einfaches Beispiel von einem meiner Bilder.

Gruss
Elroy
Zum Vergrößern anklicken....


dass hier sollte eigentlich genug erklären
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben