HTML (CSS) div-Kästen background-image

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Geht mit background-size

http://www.normansblog.de/css3-im-detail-background-size/

Das funktioniert aber nur in neuen Browsern, die css3 können.

Ansonsten müsstest du das Bild als img in das div setzen und ihm 100%-Maße geben, dann wäre es auch immer so groß wie das div. Eventuelle andere Inhalte müssen dann mit position auf das Bild gepackt werden.

Ich wusste schon mal, wie das geht aber ich weiß grad nicht mehr, wie ich es gemacht habe. Vielleicht hilft Dir die Seite hier weiter, da hab ich auch einiges gelernt.

http://www.css4you.de/

8

danke

0

Webdesign: Automatische Höhenanpassung von DIV-Containern durch Übernahme der Höhe des benachbarten DIV-Containers?

Hallo,

soweit ich weiß, lässt es sich allein mit CSS nicht realisieren, dass sich in einem responsive Design ein Container automatisch die Höhe des benachbarten Containers übernimmt. Dafür ist noch JavaScript vonnöten, richtig?

Nehmen wir mal an, ich hätte 3 DIV-Container, die per float:left; nebeneinander angeordnet sind und nennen wir diese mal #divA, #divB und #div C.

divB ist ein Bild-Container. #divA und #divC sollen beide die Höhe von #divB übernehmen, ohne dass eine "fixe" Höhe definiert ist.

Wie würde das aussehen?

Danke schon mal.

...zur Frage

Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>  

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}
...zur Frage

Ich möchte ein div mit Bild in einem div zentrieren?

Das hier ist der Code in CSS:

Das ist der Code in HTML:

Nun die Frage: Wie schaffe ich es, das Bild zentriert anzeigen zulassen? Und nein das Bild in einen <img> Tag zu packen würde bei meiner Seite zu einem Problem führen. Ich danke euch :)

...zur Frage

HTML / CSS Div-Container bzw. ganze Seite horizontal zentrieren

Hallo...

ich hab ein größeres Problem mit meiner Website. Ich bin noch am Anfang und hab direkt zu Beginn festgestellt, dass viele Websiten zenriert ausgerichtet sind. Sowas wollte ich auch machen, hab gegoogelt, gf durchgeblättert aber noch nichts Brauchbares gefunden.

Ich hab eine Seite aufgeteilt in body und dann einen Div-Container, der alles umschließt (heißt bei mir id="drumrum"). So. Dann wollte ich da weitere Div-Container einfügen, die da heißen sollen kopf, navi, inhalt und footer. Soweit OK, alle möglichen Formatierungsoptionen mit CSS klappen soweit, aber mit der horizontalen Zentrierung komm ich garnicht weiter.

Ich hab schon ausprobiert, margin auf 0px auto zu setzen, text-align:center usw. zu benutzen, aber nichts funktioniert. Damit ihr wisst, wie mein Doctype aussieht:

Hab schon irgendwo gelesen, dass man da vielleicht noch was dran ändern muss, weiß aber nicht genau, was ;)

Hier ist meine CSS-Datei, als Code eingefügt:

/*formate.css*/

drumrum {

width:1000px;
float:left;
margin:0 auto;
text-align:left;

}

kopf {

border-top-left-radius:10px;
border-top-right-radius:10px;
float:left;
width:980px;
height:150px;
border-width:1px;
margin-left:auto;
margin-right:auto;
background-image:url('img/banner.png');
font-weight:bold;
font-size:30pt;
padding-left:10px;
padding-right:10px;

}

navi {

float:left;
width:980px;
border-width:1px;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#00CC00;
font-size:14pt;

}

inhalt {

width:980px;
float:left;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#CCCCCC;
font-size:14pt;

}

footer {

width:980px;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#FFFFFF;
text-align:center;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

} body { background-color:#008800; text-align:center; } * { font-family:Times New Roman; } a:hover { text-color:#00DD66; font-weight:bold; } a:visited { text-color:#FF00EE; } a { text-color:#0022FF; }

Das wäre dann mein momentanes CSS für meine Seite. Wenn mal jemand drübergucken könnte und eine Idee kennt, wie ich "alles" waagerecht in die Mitte krieg, danke schonmal.

Und bitte verlinkt nicht auf eine gf-Seite, leider hat bislang von all den genannten Antworten keine Möglichkeit funktioniert. Vielleicht liegt es ja auch wirklich am Doctype.

Liebe Grüße, HugaTV

...zur Frage

Was möchtest Du wissen?