Main Div passt sich nicht an Inhalt Div an @ tutorials.de: Tutorials, Forum & Hilfe

Merbi · 22.06.07 20:57

Hallo Allerseits,

habe ein problem mit dem ich absolut an meine Grenzen gestoßen bin und bei dem mir bisher noch keiner helfen konnte.

Code von index.php:

Code :

<div class="main"> 
 
    
    <div class="header">
    
    Header
 
    </div>
    
    
    <div class="menue">
        
                            Menü
 
        </div>
 
    <div class="content">
 
                                 Inhalt
 
        </div>
 
</div>

Code stylesheet.css:

Code :

body{
    background-color : #666666;
    font-size : 8pt;
    font-family : Lucida Sans Unicode, Verdana, Arial !important;
    color : #FFFFFF;
    margin : 0;
}
 
.header {
    margin-left: 100px;
    width : 658px;
    height : 137px;
}
 
a {
    color: #666666;
    }
    
a:hover {
    color: #666666;
    background-color: #FFFFFF;
    }
    
img { border: 0px;
background:#FFFFFF 
}
 
/* --- Navigation --- */
 
 
.menue {
    margin-top : 0;
    margin-bottom : 0;
    margin-right : 0;
    margin-left : 4px !important;
    text-align : left !important;
    width : 160px !important;
    max-width : 160px !important;
    min-width : 160px !important;
    border-bottom: 1px solid #666666;
}
 
.menue a {
    font: bold 11px Arial, Helvetica, sans-serif;
    color: #666666;
    line-height:16px;
    letter-spacing:0.1em;
    text-decoration: none;
    display:block;
    padding:8px 6px 10px 20px;
    background-color: #FFFFFF;
    }
    
.menue a:hover {
    color:#FFFFFF;
    background-color: #666666;
    }
    
/* --- content stuff --- */
 
.content {
    position : absolute;
    left : 130px;
    top : 95px;
}
 
.main {
    background-color: #FFFFFF;
    color: #666666;
    margin-right:50px;
    margin-left:50px;
    margin-top:50px;
    margin-bottom:50px;
}

Das Problem wie ihr am besten im Gästebuch seht ist das der Inhalt von content zwar komplett angezeigt wird aber leider passt sich main nicht an die größe von content an.

MFG Daniel

P.S. Link http://dennisschlossi.de.funpic.de/test/

Habe die HP da sie noch in Arbeit ist bei nem Freund hochgeladen.

Peter Klein · 22.06.07 21:25

Also ich würde zuerst mal einen Doctype angeben, sowiedie restlichen Angaben die benötigt werden, wie z.B. <head>, <body> etc.

Wenn du ein Element absolut positionierst, solltest Du, meines Wissens nach, das Elternelement relativ positionieren.

Könnte u.U. damit zusammen hängen. Versuch es auch mal mit overflow: auto

Falls ich falsch liege, einfach ignorieren.

Maik · 22.06.07 21:38

Hi,

wandel mal die absolute Positionierung des DIVs in eine Floatumgebung um.

Hierfür richtest du dir eine linke Spalte #nav ein, in der die DIVs mit der Klasse .menue eingebettet werden. (Anmerkung: das Menü liesse sich auch eleganter mit einem Listenelement umsetzen - Stichwort: "CSS-Listenmenü").

Code :

#nav {
position: relative;
width: 164px;
float:left;
}

Für das DIV content wird nun ein linker Außenabstand gesetzt:

Code :

1
2
3

.content {
margin-left: 170px;
}

Code :

<div class="main">
        <div class="header">
             <img border="0" alt="Der Header" src="template/images/header.jpg" />
        </div>
        <div id="nav">
             <div class="menue"></div>
             <div class="menue">
                        <a href="index.php?id=home.php" title="Startseite">home</a>
             </div>
             <div class="menue">
                        <a href="index.php?id=construction.php" title="Über mich">about</a>
             </div>
             <div class="menue">
                        <a href="index.php?id=construction.php" title="Nen paar Bilder">gallery</a>
             </div>
             <div class="menue">
                        <a href="index.php?id=construction.php" title="Nen paar Videos">video</a>
             </div>
             <div class="menue">
                        <a href="index.php?id=guestbook.php" title="Gästebuch">guestbook</a>
             </div>
             <div class="menue">
                        <a href="index.php?id=construction.php" title="Projekte">projects</a>
             </div>
             <div class="menue">
                        <a href="index.php?id=stuff.php" title="Material">stuff</a>
             </div>
             <div class="menue">
                        <a href="index.php?id=contact.php" title="Schreib mir ne Mail">contact</a>
             </div>
        </div><!-- // end #nav -->
        <div class="content">
                <h1>
                        &raquo; newsarchiv
                </h1>
                <div class="ungerade">
                        <p>
                                <strong>&raquo; Beta-Version</strong>
                                <span class="news_date">
                                        07.06.2007 | 14:55:25                                </span>
                                         <div class="news_entry_content">
                                         <p>So, endlich ist das neue Design Online. <img src="template/images/smileys/icon_cool.gif" border="0" /><br />
                                          <br />
                                          Ich wünsche euch viel Spaß beim rumsurfen auf den paar Seiten die gehen.<br />
                                          Der Rest wird wahrscheinlich erst in den Sommerferien folgen. <br />
                                          <br />
                                          Euer Daniel <img src="template/images/smileys/icon_wink.gif" border="0" /><br />
                                          </p>
                                          <p>So, endlich ist das neue Design Online. <img src="template/images/smileys/icon_cool.gif" border="0" /><br />
                                          <br />
                                          Ich wünsche euch viel Spaß beim rumsurfen auf den paar Seiten die gehen.<br />
                                          Der Rest wird wahrscheinlich erst in den Sommerferien folgen. <br />
                                          <br />
                                          Euer Daniel <img src="template/images/smileys/icon_wink.gif" border="0" /><br />
                                          </p>
                                          <p>So, endlich ist das neue Design Online. <img src="template/images/smileys/icon_cool.gif" border="0" /><br />
                                          <br />
                                          Ich wünsche euch viel Spaß beim rumsurfen auf den paar Seiten die gehen.<br />
                                          Der Rest wird wahrscheinlich erst in den Sommerferien folgen. <br />
                                          <br />
                                          Euer Daniel <img src="template/images/smileys/icon_wink.gif" border="0" /><br />
                                          </p>
                                          </div>
                        </p>
                </div>
        </div>
</div>

Und wieso bindest du (in der Online-Version) das DIV .content in sich selbst ein?

Merbi · 22.06.07 21:39

Vielen Dank für die schnelle Antwort probiere es mal aus.

Das Doctype etc. hab ich weg gelassen damit der Code nicht zu lang wurde.

MFG Daniel

Merbi · 22.06.07 21:44

Hundert 1000 Dank hat geklappt denke die restlichen schönheitsfehler behebe ich alleine.

Wenn nicht melde ich mich nochmal.

MFG Daniel

Maik · 22.06.07 21:47

Und was genau hat jetzt geklappt?

Merbi · 22.06.07 22:03

Also das jetzt der Main Bereich so groß ist wie der Inhalt.

Naja nur leider ist der Inhalt unter das Menü gerutshct und wenn man mit margin-top: -px; arbeitet verschwidnet dqas menü.

Wäre nett wenn mir da noch eienr helfen könnte.

Trotzdem schonmal vielen Dank.

MFG Daniel

Maik · 22.06.07 22:05

Die Auswirkung ist mir schon klar, nur, mit welchem der Vorschläge hast du es jetzt umgesetzt? In der verlinkten Seite ist nämlich noch alles beim Alten.

Merbi · 22.06.07 22:17

So habe es jetzt neu hochgeladen.
Hatte vorher noch nen footer gemacht für den grauen Rahmen.
Das Problem habe ich mit #nav gelöst außer halt das es jetzt unterhalb des Menüs ist.

Wäre auch nett wenn mir kurz einer näher erläutern könnte wie ich das mit dem Menü besser machen sollte.

(Mit ul/li)

Habt mir aber auch so wahnsinnig geholfen.

MFG Daniel

Maik · 22.06.07 22:33

Du hast zum einen vergessen, die neuen CSS-Angaben im Stylesheet einzusetzen, und zum anderen bindest du noch immer das DIV .content in sich selbst ein - vergleiche hierzu nochmal meine Quellcode-Angaben für das Stylesheet und das HTML-Markup.

Ein Listenmenü wird grundsätzlich so erzeugt:

Code :

<ul>
   <li><a href="#">link 1</a></li>
   <li><a href="#">link 2</a></li>
   <li><a href="#">link 3</a></li>
   <!-- usw. -->
</ul>

Auf http://css.maxdesign.com.au/listamatic/ findest du zahlreiche Beispiele, wie sich die Listennavigaton anschliessend mit CSS formatieren lässt.

Merbi · 22.06.07 22:35

Also ich habe die neuen Angaben im stylesheet.css eingetipp und hochgeladen und ich verstehe gerade nciht was du mit conetn in sich selbst einbinden meinst.

Mit li bin ich gerade dran.

MFG Daniel

Maik · 22.06.07 22:42

Das hier meine ich damit:

Code :

<div class="content">
 
    [color=red]<div class="content">[/color]
        <h1>
            &raquo; newsarchiv
        </h1>
<div class="ungerade">
 
            <p>
                <strong>&raquo; Beta-Version</strong>
                <span class="news_date">
                    07.06.2007 | 14:55:25               </span>
  <div class="news_entry_content">    
    <p>So, endlich ist das neue Design Online. <img src="template/images/smileys/icon_cool.gif" border="0" /><br />
      <br />
 
      Ich wünsche euch viel Spaß beim rumsurfen auf den paar Seiten die gehen.<br />
      Der Rest wird wahrscheinlich erst in den Sommerferien folgen. <br />
      <br />
      Euer Daniel <img src="template/images/smileys/icon_wink.gif" border="0" /><br />
    </p>
  </div>
            </p>
 
  </div>
                [color=red]</div>[/color]   </div>

Mir wird noch immer der alte Code des Stylesheets angezeigt.

Merbi · 22.06.07 22:55

Hmmm ka muss ich mal gucken.

Ist ja nett das du dir so viel Mühe machst.

Nur da ich eigentlich an der stellle nur en stück mit php get habe geht das ja garnid anders mit dem content.

Denn das sieht so aus:

<div class="content">

<?php

blablabla

</div>

MFG Daniel

P.S. Hab nachgesehen bei mir steht da

.nav {
position: relative;
width: 164px;
float:left;
}

.content {
margin-left: 170px;
}

im stylesheet.

Maik · 22.06.07 22:59

Dann wird sich wohl im PHP-Code nochmal das DIV content befinden.

Maik · 22.06.07 23:05

Trotz geleertem Browsercache bekomme ich in keinem mir zur Verfügung stehenden Browser das aktuelle Stylesheet (http://dennisschlossi.de.funpic.de/t...stylesheet.css) angezeigt.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

DIV passt sich nicht an

[CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Div passt sich nicht an Inhalt an

Div passt sich im firefox nicht an Inhalt an

Inhalt vom Iframe passt sich nicht an..

E-Mail:

Abonnieren Abbestellen