Rahmen größer als Objekt

html.de-Forum HTML, XHTML & CSS
1

Ich bastele derzeit (immer noch) an einer Vereinshomepage. Den Kopfbereich und das Menü (links) habe ich mit Farbverlaufsgrafiken hinterlegt (die aber nicht als Backgrounds definiert sind; ganz normale div´s).

Das Problem ist nun, dass ich gern einen dezenten Rahmen um diese Objekte hätte, was ja eigentlich auch problemlos geht. Doch steht der Rahmen immer am untern Ende des Bilds (bottom) ein gutes Stück über, sodass ein weißer Streifen zu sehen ist.

Ich habe es schon mit „boderer“ und „outline“ probiert und auch ansonsten schon einiges getan. An den Grafiken liegt es definitiv nicht und es sind auch keine paddings, margins usw. im code enthalten, die dafür verantwortlich sein könnten.

Was mache ich falsch? Woran könnte es liegen?

Danke für die Antwort!

Hier ein Auszug aus dem Code:

[HTML]

#backoben {
    position: absolute;
    margin-top: 5px; 
    left:288px;
    outline-style:solid;
    outline-width:2px;
    outline-color:#777;
    z-index:1;
     }



<div 
id="backoben"><img src="images/BGmenü1vert.jpg" 
width="962" 
height="135"
alt="banner"/> 
</div>

[/HTML]

2

Bilder sind standardmäßig Inline-Elemente. Das bedeutet, sie richten sich an der gedachten Grundlinie des umgebenden Textes (auch, wenn das keiner ist) aus, um Platz für Unterlängen (wie beim p oder beim y) zu lassen.

Eine üblicherweise funktionierende Lösung ist es, das img-Element zu einem Block-Element zu machen:

#backoben img { display: block; }
3

danke,

die frage muss einem wissenden ziemlich blöde erscheinen, aber am anfang ist das alles recht verwirrend.

leider hat das einfügen der angeführten zeile aber keine besserung gebracht. der rahmen ist immer noch zu groß.

bei meinen recherchen bin auf zwei aspekte gestoßen: display: block und die zeilenhöhe. kann letztere auch zur lösung führen?

code:

#backoben {
    display: block;    
    position: absolute;
    margin-top: 5px; 
    left: 288px;
    outline-style: solid;
    outline-width: 2px;
    outline-color: #777;
    z-index:1;
     }
4

Bin ich mir nicht sicher.

[html]

<head>
    <meta charset="utf-8" />
    <title>New</title>

    <style type="text/css">

        #backoben {
            position: absolute;
            width: 300px;
            height: 90px;
            margin-top: 5px;
            left:288px;
            border: 3px solid red;
            z-index:1;
        }

        #backoben img {
            display: block;
        }
    </style>

</head>

<body>

    <div id="backoben">
        <img src="http://imgs.xkcd.com/comics/%28.png" alt="banner"/>
    </div>

</body>
[/html]

)

Edit: Grafik von xkcd.com.

5

die freude war groß, denn beim „banner“ hat es gekplappt. jetzt habe ich aber das gleiche problem beim menü und da funktioniert die wunderformel nicht :frowning:

auch soll der rahmen bei der verwendung von „outline“ die ränder eigentlich nicht verändern, was er aber tut. ich bin sprachlos… und habe jetzt auch noch andernorts gehört, dass man grafiken sowieso generell mit css einbinden soll. nur wie?

code:

    #menuback {
    position:absolute;  
    top:140px; 
    left:14px;
    outline-style: solid;
    outline-width: 2px;
    outline-color: #777; 
    z-index:1 }

#menuback img {
    dispay:block
}

[…]

    <div id="menuback"><img src="http://www.html.de/images/BGmenü1.jpg" width="275" height="600" alt="bild"/> </div>

}
6

Das hängt davon ab, ob die Grafiken reine Verzierungen oder inhaltstragende Elemente sind. Ich habe eben überlegt, ob ich auch darauf hinweisen soll, aber ich dachte mir, dass in diesem Fall ein img-Element durchaus vertretbar ist.

Was dein Problem angeht: Du hast „dispay“ getippt statt “display“.