Css Box soll sich dem Inhalt anpassen

**Calimero28** · 29.06.2009 22:25

Hallo Community!

Da ich gerade eine Homepage programmiere wollte ich mal versuchen ein Forum auf die Seite einzubinden in meinen inhalts-Bereich. Eigentlich dachte ich das sich meine Box inhalt dann automatisch die Höhe des Inhalts als Höhe für die Box nimmt , aber nach dem einbinden hab ich festgestellt , dass die Box klein bleibt.

Hab mal 2 Screenshots gemacht:

Bild 1:

Bild 2:

hier ist mein Html-Code :

HTML-Code:

<link rel="stylesheet" type="text/css" href="sheet.css"/>

</head>


<body link="black" alink="black" vlink="black">


<div id="container">
 
  <div id="titel">
    
<!--#9d9d9d-->    

    <div id="navigation">

      <ul id="list">
        <li><a href="index.html">Home</a></li>
        <li><a href="forum.html">Forum</a></li>
        <li><a href="">G&auml;stebuch</a></li>
        <li><a href="">Party</a></li>
        <li><a href="">Jahrgang</a></li>
        <li><a href="galerie.html">Fotos</a></li>
      </ul>
</div>
   </div>
 
 
<div id="inhalt">
<h1> TEST</h1>
<p> Test des boxenmodells </p>
   </div>
</div>

Und hier ein Auschnitt aus meiner CSS-Datei:

Code:

}

#container {
width: 950px;
text-align: left;
margin:0 auto;


}

#titel {
background-image: url(bilder/logo.jpg);
background-repeat:no-repeat;
background-position: center;
width: 900x;
height: 243px;
padding: 0px 0px 50px 0px; 

}

#navigation {
  padding: 215px 0px 0px 0px;
  text-align: center;

}

#inhalt {
	background-color:#fff;
	color:#604420;
	border:1px solid #604420;
	padding: 50px 0px 0px 0px; 
	text-align:center;
  }

Ich hab zwar schon bei Google gesucht und auch schon hier im Forum , aber da ich mit dem Gefundenem nichts anfangen konnte , bzw. es nicht umsetzen konnte dachte ich mir ich melde mich mal bei euch im Forum an!

Hoffe ich versteht wie ich mir das vorstelle mit dem Forum

Mfg Andi

**the0bone** · 30.06.2009 08:40

Zitat von Calimero28

Hoffe ich versteht wie ich mir das vorstelle mit dem Forum

Mfg Andi

Fast... :-D

Konnt das Forum dann in ein Frame oder hast du deine DIV Boxen in das Template geschrieben?

**Calimero28** · 30.06.2009 11:16

Also wenn du diese Html-Frames meinst , davon hab ich keine auf meiner Homepage..
Meine Homepage soll zukünftig durch divs auf meiner Css-Datei seine Struktur erhalten.

Es soll halt so wie bei mir auf dem Bild , nur das sich dann die Höhe der Box dem Inhalt anpasst.

Hab auch gerade gesehen das mein Code nicht ganz vollständig war :
Hier der richtige Code der Html-Datei:

HTML-Code:

<link rel="stylesheet" type="text/css" href="sheet.css"/>

</head>


<body link="black" alink="black" vlink="black">


<div id="container">
 
  <div id="titel">
    
<!--#9d9d9d-->    

    <div id="navigation">

      <ul id="list">
        <li><a href="index.html">Home</a></li>
        <li><a href="forum.html">Forum</a></li>
        <li><a href="">G&auml;stebuch</a></li>
        <li><a href="">Party</a></li>
        <li><a href="">Jahrgang</a></li>
        <li><a href="galerie.html">Fotos</a></li>
      </ul>
</div>
   </div>
 
 
 
 
 
 
<div id="inhalt">

<iframe name="forum" frameborder="0" height="100%" width="100%" src="http://.....de/forum/"></iframe> 
</div>


</body>

Mfg Andi

**MrMurphy** · 30.06.2009 12:06

Hallo,

ich meine jetzt folgendes verstanden zu haben:

Du benutzt die iframe-Technik, um eine fremde Seite (das Forum) in deine Seite einzubinden. Diese Einbindung soll möglichst "unsichtbar" geschehen, damit die Seite wie aus einem Guß wirkt. Dazu soll sich das iframe-Fenster flexibel in seiner Größe, speziell der Höhe, dem Inhalt des Forums anpassen.

Dafür gibt es leider keine Lösung mittels html und css, die mir bekannt ist. Das Problem ist, das das iframe-Fenster keine Informationen von der Seite bekommt, die in ihm angezeigt wird, also auch keine Größenangaben. Deshalb kann das iframe-Fenster auch nicht auf Größenänderungen der eingebetteten Seite reagieren. Alle Angaben zum iframe beziehen sich folglich immer auf deine Seite.

Ob da mittels Programmierung etwas gemacht werden kann entzieht sich meiner Kenntnis.

P.S: Nur mal nebenbei: Wenn du dem iframe wie in deinem Beispiel direkt Werte wie framborder, height oder width zuweist widerspricht das deinem sinnvollen Anspruch, alle Formatierungen mittels einer externen css-Datei zu steuern.

Gruss

MrMurphy

**Calimero28** · 30.06.2009 12:17

Danke erstmal für die Antwort !

Ja das hast du soweit schon richtig verstanden . Wenns es da so keine Möglichkeit gibt , könnte ich meine Vorstellung denn dann vielleicht auf anderem Wege realisieren ? So das meine Seite sich dem Inhalt des weißen Kastens anpasst?

EDIT: Also mit Text alleine funktioniert das wunderbar , die Box passt sich immer dem Inhalt an!

Mfg Andi

**MrMurphy** · 30.06.2009 13:05

Hallo,

Also mit Text alleine funktioniert das wunderbar , die Box passt sich immer dem Inhalt an!

Der Text befindet sich ja auch auf deiner Seite, darauf kann sie deshalb auch problemlos reagieren - mal etwas lapidar ausgedrückt.

Zu dem Forum gibt es jedoch nur einen Verweis.

Du kannst ja auch selbst eine weitere Seite erstellen und die dann mittels iframe in deine Seite einbetten. Wenn du dann auf dieser weiteren Seite etwas am Text änderst wird sich das iframe-Fenster nicht anpassen.

Zur Lösung deines Problems kann ich mir mehrere Möglichkeiten vorstellen, das ist halt eine Frage der Kosten, des Aufwands und der sonstigen Umstände.

Du könntest dir z. B. ein Forum suchen, in dem du den Kopf- und Fußbereich inklusiv Links sowie das Aussehen mittels eigener Grafiken, Hintergründe und css-Eigenschaften selbst gestalten darfst. Das kannst du dann so gestalten, das für Außenstehende nur an der Adresse sichtbar ist, das es sich um eine externe Seite handelt, in Bedienung, Aussehen und Funktion gleicht sie dann deiner restlichen Homepage.

Oder du besorgst (= in der Regel kaufst) dir den Quelltext für ein Forum und kannst es dann direkt in deine Homepage einbinden. Dazu wiederum benötigst du einen Provider, der dir die dafür benötigte Technik auf seinem Webserver bereitstellt, wofür die meist auch einen extra Obulus verlangen. Das ist aber nur Leuten zu empfehlen, die sich mit dem dahinter stehenden Programmen und Quellcode gut auskennen.

Gruss

MrMurphy

**the0bone** · 30.06.2009 13:07

Zitat von Calimero28

DWenns es da so keine Möglichkeit gibt , könnte ich meine Vorstellung denn dann vielleicht auf anderem Wege realisieren ? So das meine Seite sich dem Inhalt des weißen Kastens anpasst?

Naja... schau dir mal das Template von phpBB an. Dort sollte es eine header und footer Datei geben. Diese musst du einfach um deinen Code (deine Divs und CSS) erweitern und fertig!

wichtig dabei ist, dass die header datei mit einem offenen <div> endet und die footer Datei mit dem schliessen des </div>s

**Calimero28** · 30.06.2009 19:25

Danke Mrmurphy und the0bone

Das hilft mir schonmal sehr mit dem header und footer , da mein Forum ja selber von phpbb3 ist ! Jetzt aber noch eine Frage : Wenn ich die beiden Dateien jetzt verändert habe wie binde ich die dann ein in meine Navigation ? brauch ich da noch meine forum.html (,von der der HTML-Quelltext weiter unten ist) oder muss ich irgendwie die overall_header.html und die footer einbinden ?

Danke im voraus
Andi

**the0bone** · 30.06.2009 22:04

Zitat von Calimero28

mein Forum ja phpbb3 ist

Na das habe ich schon gesehen...

wie binde ich die dann ein in meine Navigation ? brauch ich da noch meine forum.html (,von der der HTML-Quelltext weiter unten ist) oder muss ich irgendwie die overall_header.html und die footer einbinden ?

Ich glaube du denkst falsch rum.

erstelle deine Seite, so wie du sie haben willst. Mache alle Seiten fertig.
Und ändere dann das Forumstemplate so ab, dass es möglichst so aussieht, wie deine Seite.
Du fakest beim Forum pratisch nur die Optik deiner Seite. Es ist und bleibt das Forum und nur das Template bekommt einige Zusätze.

Beispiel auf der overall_header.html von prosilver:

HTML-Code:

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">

Scheibe dazwischen einfach deine Navi!

HTML-Code:

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="titel">
    
<!--#9d9d9d-->    

    <div id="navigation">

      <ul id="list">
        <li><a href="index.html">Home</a></li>
        <li><a href="forum.html">Forum</a></li>
        <li><a href="">G&auml;stebuch</a></li>
        <li><a href="">Party</a></li>
        <li><a href="">Jahrgang</a></li>
        <li><a href="galerie.html">Fotos</a></li>
      </ul>
</div>
   </div>

<div id="wrap">

Packe noch deinen CSS Code dazu und fertig.

**Calimero28** · 02.07.2009 13:27

habs jetzt folgendermaßen gelöst bekommen

:

Code:

<script type="text/javascript">
<!--

moz=document.getElementById&&!document.all
mozHeightOffset=20

function resize_iframe(){
document.getElementById("iframe_id").height=1200 // required for Moz bug, value can be "", null, or integer
document.getElementById('iframe_id').height=window.frames["iframe_name"].document.body.scrollHeight+(moz?mozHeightOffset:0)
}
// -->
</script>



<center>
<iframe id="iframe_id" name="iframe_name" src="http://www...../forum/" 
frameborder="0" width="900" height="2000" allowtransparency="true" scrolling="no" frameborder="yes" onload=resize_iframe()></iframe>
</center>

und dann per include eingebunden

zur Startseite vom TP

Thema: Css Box soll sich dem Inhalt anpassen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Css Box soll sich dem Inhalt anpassen

Ähnliche Themen

Index.html soll sich Bildschirmauflösung anpassen

Seite soll sich automatisch Browser anpassen

fixierte navigation soll sich anpassen

DIV Inhalt sollte sich je nach Menge anpassen

Frameset soll sich Auflösung anpassen!

Aktive Benutzer

Aktive Benutzer