✔ Main Div passt sich nicht an Inhalt Div an

Status
Nicht offen für weitere Antworten.
M

Merbi

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.
 
Zuletzt bearbeitet von einem Moderator:
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.
 
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: 
.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?
 
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
 
Hundert 1000 Dank hat geklappt denke die restlichen schönheitsfehler behebe ich alleine.

Wenn nicht melde ich mich nochmal.


MFG Daniel
 
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
 
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.
 
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
 
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.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück