XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bild hängt linksbündig stehen (http://xhtmlforum.de/showthread.php?t=42025)

dabidu 21.09.2006 13:42

Bild hängt linksbündig stehen
 
Hallo und ein wunderschönen Morgen .......... alle zusammen

Das Bild bleibt, direkt links, dicht an der Container..
wie kann ich das Bild zentrieren.

Code:

#bildeinfuegen {
        clear: both;
        border: 1px solid black;
        background-image: url(Hospiz_100.gif);
        background-repeat: no-repeat;
        height: 100px;
        text-align: center;              /* Hab mit center ausprobiert funktioniert nicht */
}

<div id="container">
<div id="header"> </div>
<div id="bildeinfuegen"> </div>
</div>

RoToRa 21.09.2006 13:50

text-align ist dafür da Text (bzw. Inline-Elemente) zu zentrieren. Du hast hier ein Hintergrund-Bild, den du mit background-position positionieren kannst:

Code:

#bildeinfuegen {
        clear: both;
        border: 1px solid black;
        background-image: url(Hospiz_100.gif);
        background-repeat: no-repeat;
        background-postion: center center; /* verticale und horizontale Position; möglich wäre auch z.B. "top center"
        height: 100px;
}

Die Background-Element kannst du auch zusammenfassen:

Code:

background: url(Hospiz_100.gif) no-repeat center center;

dabidu 21.09.2006 13:54

:oops:


danke

dabidu 21.09.2006 14:02

Hallo

Ich möchte, dass die Überschrift links ist
und direkt daneben in kleiner Schrift
zwei Wörter stehen, die zum anklicken ist...
um in eine andere Seite zu wechseln...

hoffentlichh hab ich mich richtig ausgedruckt
Code:

#header {
        background-color: yellow;
        text-align: left;
}

#header h1 {
        border: 1px solid gray;
        float: left;
        width: 150px;
}

#header  p {
        float: right;
        width: 150px;
        border: 1px solid gray;
        background-color: fuchsia;
}

#header li{
        background-color: red;
        font: 12px arial, verdana, sans-serif;

}

/*==================================================*/

<div id="header"> <h1> Ueberschrift </h1>
                        <p>
                        <ul>
                        <li> <a href="#"> deutsch </a></li>
                        <li> <a href="#"> englisch </a></li>
                        </ul> </p>
                        </div>


mazzo 21.09.2006 14:38

das P um das UL ist unnötig. Du musst nur <ul> auch links floaten, dann legt es sich neben die h1-Überschrift.

Da die Breite von h1 aber nur 150px sind, wird eine Überschrift (je nach Schriftgröße) schnell darüber hinausragen bzw. am Ende verschwinden, wenn das daneben gefloatete <ul> dies mit einer Hintergrundfarbe verdeckt.

Entweder h1 wird breiter, oder <ul> erhält einen margin-left (oder padding-left, probier es aus was welchen Effekt erzielt) oder Du achtest auf kurze Überschriften. Ich würde die Breiten aber in % festlegen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:49 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019