Anfänger bittet um Rat und Fehlersuche position-absolute etc...

L

liquid_silence

Grünschnabel
Guten Abend,

bin schon am verzweifeln, ich versuche mit verschieden div's ein Layout zu erstellen, leider verschieben sich dich Container beim minimieren des Browser Fensters nach außen bzw. 1 was später evtl. ein Button werden sollte. Habe verschiedene Möglichkeiten versucht, aber ohne erfolg. Habe auch zum Teil den Faden verloren. Ich glaube ich habe die Seite falsch angefangen aber vielleicht könnt Ihr mir weiterhelfen.

PHP: 
<style type="text/css">

body, html {
    margin:0px;
    padding:0px;
}

#content_container {
    padding-bottom:0px;
	
}

#top {
	float: left;
	width: 1px; height: 50%;
	margin-bottom: -12em;
}

#container {
	clear: left;
	position: relative;
	margin: 0 auto;
	width: 32em; height: 24em;
	background: #E0FFE0;
}

#header {
    margin: 0px;
    background: #000;
    text-align:center;
    padding:8px;
}

#logo {
	position:relative;	
	background-color:#CCC;
	min-height:150px;
		width:100%;
}

#middle {
	position:relative;
	margin:0px;
	width:100%;
	background-color:#CFF;
	min-height:700px;

}

#end {
	position:relative;
	margin:0px;
	width:100%;
	background-color:#CCC;
	min-height:100px;


}

#footer {
	margin:0px;
    position:fixed;
    bottom:0px;
    background: #000;
    text-align:center;
	font-size:10px;
	letter-spacing:10px;
	color:#CCC;
    padding:3px;
    width:100%;
}

/* Angaben nur für den Internet Explorer mittels Star-HTML-Hack */

* html, * html body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
}

* html #content_container {
    padding:0;
    height:95%;
    overflow:auto;
}

* html #footer {
    background:#efefef;
    height:5%;
    text-align:center;
    padding-top:1%;
}
</style>

Code: 
<body>
	
<div id="menu" style="position: absolute; float: left; width: 147px; height: 26px; z-index: 100; background-color: #0099CC; border: 1px solid #000000; left: 557px; top: 138px"></div>

<div id="content_container">

	 <h1 id="header"></h1>

</div>
<div class="haupt">

<div id="logo">test</div>
<div id="middle">test b</div>
<div id="end">test c </div>

</div>

<div id="footer">
	<b>fußzeile</b>
</div>

</body>

Habe unter anderem auch schon versucht die position="absolute" mit diversen anderen zu ersetzen, dann passt aber gar nichts mehr. Danke vorab für alle Antworten
 
Hi,
als erstes nimm mal das position: relative überall raus. Ich weiß nicht welchen Sinn das hier haben sollte.

Kannst du mir erklären wie das Menü am Schluss aussehen soll? Den ich muss sagen dass sich mir der Aufbau mit dem Div nicht so ganz erklärt.
Ich könnte dir dann vielleicht sagen wie du das am besten aufbaust.

http://jsbin.com/obebep/

Viele Grüße
 
Erstmal ein Danke für deine Hilfestellung.

Kannst du mir erklären wie das Menü am Schluss aussehen soll? Den ich muss sagen dass sich mir der Aufbau mit dem Div nicht so ganz erklärt.
Ich könnte dir dann vielleicht sagen wie du das am besten aufbaust.
Zum Vergrößern anklicken....

Ganz genau kann ich dir den Aufbau mit den Divs auch nicht erklären :)
Bzgl. der position-relative habe ich gelesen sollte man absolute position nehmen, sollte der Rest relative sein.

Nun gut die Idee mit dem Menü war eigentlich das die Buttons nicht am schwarzen oberen Rand(Kopfzeile), sondern am grauen Rand oben über dem bläulichen ist. leider hat es bei mir nicht so funktioniert.
 
Hi,
meinst du so: http://jsbin.com/obebep/2/edit

Grundsätzlich, vermeide es IDs für CSS einzusetzen, denn dies kann zu Problemen führen wenn du z.B. mit Programmiersprachen zusammenarbeitest und die IDs dynamisch erzeugen.
arbeite lieber mit Klassen, das macht im CSS nicht ganz so den großen Unterschied und du kannst ja auch Klassen nur einmal verwenden wie es bei IDs von Nöten ist.

Auch solltest du position nur verwenden wenn du es benötigst, egal ob absolut, relative oder …
Grundsätzlich hat jedes Element automatisch position:static.

Viele Grüße
 
Hi,
sorry hatte dir die falsche Version verlinkt.
http://jsbin.com/obebep/3/edit

Das mit de nKlassen ist eher so eine Art zu Arbeiten. IDs sind natürlich nicht verboten.
Ich habe nur schon mit richtigen Java Wicket Anwendungen im Hintergrund arbeiten müssen udn da hab ich die Erfahrung gemacht mir das mit den IDs abzugewöhnen :).

Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück