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

Image size

M

m@yaman

Neues Mitglied
Was fuer Voraussetzungen braucht es eigentlich damit ein Bild automatisch komplett angezeigt wird?

Bei mir passt es nur wenn ich wie hier (ab Min. 12) konkrete Pixel angebe.
Wuenschen wuerde ich mir eher was wie hier (Example A).
Da sind die Bilder aber nur so hoch wie die Schrifthoehe. (width&height 100%)
oder verschwinden (wohl durch text-indent -9999px) komplett.
 
Wenn für ein <img> keine Angaben zur Größe gemacht werden, weder inline noch CSS, dann wird es automatisch in voller Größe angezeigt.
Äußere Begränzungen werden dabei vollkommen ignoriert!
Gibst du ihm Prozentwerte, orientiert es sich am übergeordneten Element.
Gibst du ihm Fixe Maße, wird es eben genau so groß.
Äußere Begränzungen werden dabei wieder ignoriert!

Um zu wissen warum das bei dir nicht klappt, was nebenbei bemerkt keine brauchbare Fehlerbeschreibung ist, müsste man deinen Code sehen, bei dem es nicht klappt.
 
Naja, die Bilder werden nicht komplett angezeigt sondern sind nur so hoch wie die Schrifthoehe.
Vielleicht nicht die beste Fehlerbeschreibung aber nicht wirklich eine "klappt nicht"-Analyse.

Dann wohl noch ein paar kommunikative Misstaende:
Ich geb mir Muehe aber verfall doch ab und an ins englische. Mit Image war eigentlich ein Bild ganz allgemein gedacht und nicht der Image-Tag.

Auf jeden Fall vielen Dank fuer die Erlaeuterung. Leider hab ich kein Attribut welches eine Groesse angibt.

HTML
Code: 
<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8">
    <title>MySite</title>
    <meta name="viewport" content="width-device=width, initial-scale: 1.0">
    <meta name="viewport" content="width=device-width">
    <link href="bin/LargeStyle.css" rel="stylesheet" type="text/css">


</head>
<body>
<div id="page-wrap">
    <div id= "head">
        <div id="navbar">
            <div id="detail_01"><a href="#">Detail_01</a></div>
            <div id="buttonbar"><a href="#">ButtonBar</a></div>
            <div id="detail_02"><a href="#">Detail_02</a></div>
            <div id="logo"><a href="#">Logo</a></div>
        </div>
        <div class=content>
        </div>
    </div>
</body>
</html>


CSS
Code: 
*
    {
    margin: 0;
    padding: 0;
    }

body
    {
    background-color:#000;
    background-image:url(../assets/LargeStyle/LargeGradient.png);
    background-repeat:repeat-x;
    }
#page-wrap 
    {
    }
    #navbar
        {
        }
        #detail_01
            {
            text-indent: -9999px;
            }
        #detail_01 a
            {
            background: url(../assets/LargeStyle/Large_NavBar_Detail_01.png) center center no-repeat;
            display:block;
            }
        #buttonbar
            {
            text-indent: -9999px;
            }
        #buttonbar a
            {
            background: url(../assets/LargeStyle/Large_NavBar_ButtonBar.png) center center no-repeat;
            display:block;
            height:auto;
            }
        #detail_02
            {
            text-indent: -9999px;
            }
        #detail_02 a
            {
            background: url(../assets/LargeStyle/Large_NavBar_Detail_02.png) center center no-repeat;
            display:block;
            }
        #logo
            {
            text-indent: -9999px;
            }
        #logo a
            {
            background: url(../assets/LargeStyle/Large_NavBar_Logo.png) center center no-repeat;
            display:block;
            }
 
Dein Hintergrundbild hast du dem a-Tag zugewiesen. Wenn du es zu dem übrgeordneten Div zuweist sollte es gehen.
 
Wustersoss schrieb:
Dein Hintergrundbild hast du dem a-Tag zugewiesen. Wenn du es zu dem übrgeordneten Div zuweist sollte es gehen.
Zum Vergrößern anklicken....
Richtig.
Erleuternd dazu:
a-Tags sind Inline-Elemente.
Inline-Elemente sind immer so hoch wie die line-height.
Möchtest du dem Link ein Hintergrundbild-geben, dass vollständig zu sehen ist, wandele das Inline-Element in ein Block element um und gib ihm fixe Maße.
Dabei ist zu beachten, das Text in Block-Elementen immer oben sitzt.
Zum vertikal vermitteln, muss die line-height der Höhe des Block-Elementes entspechen.

Beispiel:
Ein Link (<a ...></a>) soll als Button dargestellt werden mit einem Hintergrundbild, dass die Abmessungen 30x100px hat, was der gewünschten Größe des Buttons enspricht.
Der (einzeilige) Link-Text soll mittig sein.
HTML: 
.foo{
    display: block;
    height: 30px;
    width: 100px;
    line-height: 30px;
    text-align: center;
    background-image:url("pfad/zum/bild.jpg");
}

<a class="foo" href="datei.html">Bar</a>
 
Tut mir leid wegen dem sehr verspaeteten Feedback, aber da war seitdem nichts zu machen.
Auf jeden Fall vielen Dank fuer eure Erlaeuterungen. Schlussendlich bin ich dahintergekommen
wo ich gedanklich falsch abgebogen bin und jetzt komm ich einigermassen zurecht.

Hauptproblem war das ich dachte das background-images zum content gehoeren und
sich das div entsprechend anpasst.
Folglich komme ich wohl nicht ohne konkrete Pixelangaben weiter.
Haette mir etwas Arbeit erspart aber gut...muss es halt so gehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben