Antworten auf deine Fragen:
Neues Thema erstellen

CSS - Div soll sich automatisch an den Inhalt anpassen!

Jimbim

Noch nicht viel geschrieben

Hi Leute!

Eins vorweg, ich bin noch ein ziemlicher Anfänger in Sachen CSS und HTML. Viele Probleme, konnte ich schon durch bereits vorhandene Themen in diesem Forum lösen, doch dafür hab ich bis jetzt noch keine Lösung gefunden.

Folgendes: Ich hab ne Homepage gemacht, mit divs. Die Linke und die rechte Spalte passen sich schön der Größe des Inhalts an, weil ich den Inhalt direkt in die divs einfügen kann, es ändert sich nix.
Aber der Container in der Mitte, der Inhalt soll sich ständig ändern, wenn man auf einen Link aus der Menüleiste klickt.

Ich hab das Problem bis jetzt mit einem iFrame gelöst. Der passt sich aber nicht der Größe des Inhalts an, oder lieg ich da falsch. Versteht mich nicht falsch, aber ich will nicht bei jedem neuen Eintrag die Größe des iFrames ändern.

Auch mein div, dass ich als Hintergrund benutze (der gelbe, unter dem Header) passt sich nicht der Größe seines Inhalts an (funktioniert nur im IE). Wenn ich das richtig verstehe, liegt das daran, dass die drei container, mit "float: left;" die Spalten erzeugen.

Ich hoffe ich hab es verständlich rüber gebracht und ihr könnt mir helfen!
 

cebito

undefined

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Quellcode (css) oder ein Link wär nicht schlecht. Wenn du deinem div keine feste Höhe gibst, wird er mit dem Inhalt mitwachsen bzw. schrumpfen...
 

Jimbim

Noch nicht viel geschrieben

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Der Link zur Seite:

Der CSS Code:

body {
background-image: url(../images/back.png)
}


#header {
background-image: url(../images/header.png);
width: 940px;
height: 126px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}


#navi {
width: 938px;
height: 20px;
margin-left: 1px;
margin-right: auto;
margin-top: 94px;
z-index: 100;
position: absolute;
}


#back {
background-color: #F2D973;
width: 918px;
height: auto;
padding: 10px;
margin-left: auto;
margin-right: auto;
min-height: 500px;
}


#links {
width: 150px;
height: auto;
min-height: 200px;
margin: 0px;
padding: 0px;
float: left;
}


#mitte {

width: 598px;
height: auto;
min-height: 200px;
margin-left: 10px;
padding: 0px;
float: left;
}

#rechts {
width: 150px;
height: auto;
min-height: 200px;
margin-left: 10px;
padding: 0px;
float: left;
}

.box {
background-image: url(../images/box_header.png);
background-repeat: no-repeat;
border: 1px solid;
border-color: #000000;
width: 138px;
height: auto;
min-height: 100px;
margin-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: justify;
padding: 25px 5px 5px 5px;
}

.box_header {

width: 138px;
height: auto;
margin: -23px auto 0px auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #FFFF99;
position: absolute;
}

.mainbox {
background-image: url(../images/box_header_m.png);
background-repeat: no-repeat;
border: 1px solid;
border-color: #000000;
width: 586px;
height: auto;
min-height: 100px;
margin: 0px 0px 10px 0px;
padding: 25px 5px 5px 5px;
}
 

sokie

Mod | Web

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

nach dem schliessen des rechten bereichs ein <div style="clear:both;"></div> würde schonmal dafür sorgen, dass der Browser weiss, wann das floaten zuende ist, und den Hintergrund entsprechend anzeigen lassen.
die inhalte sind auf der Beispielseite immer noch in einem iframe.
 

Jimbim

Noch nicht viel geschrieben

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Super, des mit dem Hintergrund funktioniert. Danke schon mal.

Auf der Beispielseite ist der Inhalt in der Mitte in einem iFrame, stimmt. So soll es vom Prinzip her auch funktionieren. Die Links HOME, SPONSOREN, IMPRESSUM und KONTAKT funktionieren, so soll es am Ende ausschauen. Nur ohne iFrame, oder gibt es eine Möglichkeit, dass sich der iFrame seinem Inhalt anpasst?
 

Herr_D

offline

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Frame an Inhalt geht nur per Javascript...


du kannst aber, wenn du deine Sachen statt iframe zu nutzen includest, dem Bereich Höhen zuordnen, die sich automatisch verlängern...


Beispiel

Code:
#mitte {

width: 598px;
min-height:200px;
height:auto !important;  /* für moderne Browser */
height:200px;  /*für den IE */
margin-left: 10px;
padding: 0px;
float: left;
}

mainbox müßtest du noch anpassen... da könnte die Höhe aber im Prinzip raus...

Im Quelltext
PHP:
<div id="mitte">

<div class="mainbox">
<?PHP
include("f_index.html");
?>
</div>

</div>


wobei du die f_index.html anpassen mußt (nur der Inhalt des body darf da stehen...)
 

Jimbim

Noch nicht viel geschrieben

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Habs gelöst. Den iframe hab ich mit Java-Script dran bekommen. Danke für eure Hilfe!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben