Positionierungsproblem (Text rutscht runter)

mannyk · #1 (**permalink**) 14.08.2010, 10:41

Hallo liebe Community!
Ich habe nun viel probiert aber bekomme es einfach nicht hin, dass die Elemente meiner Seite richtig positioniert sind.

Das Problem ist, dass der Text "Login" immer runterrutscht. Lasse ich das "clear:both" weg, ist er richtig positioniert, aber der gesamte "mainContent" ist zu weit unten ("margin" hat dann auch keinen Effekt).

Anbei der HTML-bzw. CSS-Code und ein Screenshot.

Vielen Dank für eure Hilfe!
lg,
mannyk

HTML:

Code:

</HEAD>
<BODY>

<DIV id=site>
	<DIV id=logo></DIV>
	<DIV id=navigationBg></DIV>
	<UL id=navigation></UL>
	<DIV id=creature></DIV>
	<DIV id=stamp></DIV>
	<DIV id=upperContent></DIV>
	<DIV id=mainContent>
		<DIV id=FormHeader>Login</DIV>
		<DIV id=FormContent></DIV>
	</DIV>
	<DIV id=footer></DIV>
</DIV>
</BODY>
</HTML>

CSS:

Code:

#site {
PADDING-BOTTOM: 0px; 
PADDING-LEFT: 0px; 
WIDTH: 599px; 
PADDING-RIGHT: 0px; 
MARGIN-LEFT: auto; 
MARGIN-RIGHT: auto; 
PADDING-TOP: 0px
}
#creature {
Z-INDEX: 5; 
PADDING-BOTTOM: 0px; 
MARGIN: -109px 0px 0px -72px;
PADDING-LEFT: 0px; 
WIDTH: 326px; 
PADDING-RIGHT: 0px; 
HEIGHT: 297px; 
PADDING-TOP: 0px
}
#stamp {
Z-INDEX: 5; 
PADDING-BOTTOM: 0px; 
MARGIN: -305px -20px 0px 0px; 
PADDING-LEFT: 0px; 
WIDTH: 75px; 
PADDING-RIGHT: 0px; 
FLOAT: right; 
HEIGHT: 74px; 
PADDING-TOP: 0px
}
#logo {
PADDING-BOTTOM: 0px; 
MARGIN: 0px; 
PADDING-LEFT: 0px; 
WIDTH: 599px; 
PADDING-RIGHT: 0px; 
HEIGHT: 90px; 
PADDING-TOP: 0px
}
#navigationBg {
Z-INDEX: 4; 
PADDING-BOTTOM: 0px; 
MARGIN: 0px; 
PADDING-LEFT: 0px; 
WIDTH: 599px; 
PADDING-RIGHT: 0px;
HEIGHT: 27px; 
PADDING-TOP: 0px
}
#upperContent {
Z-INDEX: 15;
PADDING-BOTTOM: 0px; 
MARGIN: -180px 10px 150px 0px; 
PADDING-LEFT: 0px; 
WIDTH: 455px; 
PADDING-RIGHT: 0px; 
FLOAT: right; 
HEIGHT: 100px; 
PADDING-TOP: 0px
}
#mainContent {
PADDING-BOTTOM: 0px;
 MARGIN: 0px 0px 10px; 
PADDING-LEFT: 0px; 
WIDTH: 599px; 
PADDING-RIGHT: 0px; 
PADDING-TOP: 0px
}
#footer {
PADDING-BOTTOM: 0px; 
MARGIN: 0px; 
PADDING-LEFT: 0px; 
WIDTH: 599px;
PADDING-RIGHT: 0px; 
HEIGHT: 27px; 
PADDING-TOP: 0px
}
#navigation {
Z-INDEX: 6; 
PADDING-BOTTOM: 0px; 
MARGIN: -27px 0px 0px 145px;
PADDING-LEFT: 0px; 
WIDTH: 599px;
PADDING-RIGHT: 0px; 
HEIGHT: 27px; 
PADDING-TOP: 0px
}
#Form {
MARGIN-LEFT: auto; 
MARGIN-RIGHT: auto;
}
#FormHeader {
TEXT-ALIGN: center; 
HEIGHT: 26px; 
CLEAR: both; 
FONT-SIZE: small; 
FONT-WEIGHT: bold; 
PADDING-TOP: 3px
}
#FormContent {
PADDING-BOTTOM: 5px;
PADDING-LEFT: 5px; 
PADDING-RIGHT: 5px; 
PADDING-TOP: 5px
}

hubspe · #2 (**permalink**) 14.08.2010, 11:19

Ein Link zum Problem wäre gut.

Kein Link senkt die Zahl der Hilfswilligen i.d.R. drastisch ab.

Screenshots und unvollständiger, nicht lauffähiger Code erhöht die Zahl der Hilfswilligen auch nicht gerade, weil niemand Zeit hat sich erst umständlich ein Beispiel zu konstruieren.

mannyk · #3 (**permalink**) 14.08.2010, 14:48

Tja, ich dachte, dass das ein Anfängerproblem ist, was relativ leicht lösbar ist.
Außerdem ist das Projekt noch nicht online, da es sich noch in der Entwicklung befindet.
Aber ich schau mal was ich tun kann.

hubspe · #4 (**permalink**) 14.08.2010, 16:28

Zitat:

Zitat von mannyk

Tja, ich dachte, dass das ein Anfängerproblem ist, was relativ leicht lösbar ist.

das ist sehr gut möglich, aber wenn wir aufgrund unvollständiger Infos anfangen rumzuraten, ist die Gefahr groß das wir dich dann in die falsche Richtung schicken.

#5 (**permalink**) 14.08.2010, 23:26

Code:

* {

margin: 0px;
padding: 0px;
border: none;
outline: 0;
line-height: 140%;
text-decoration: none;
list-style-type: none;
list-style-position: outside;
overflow: hidden-x;

}

* steht für alle Elemente innerhalb der Datei. Also nicht nur für Div-Boxen!!!

Ganz oben in die CSS-Datei oder Code einfügen. Das setzt sämtliche Elemente erstmal runter auf null. list-syle oder kannst auch rausnehmen. Ich habe es so in meiner Index.css stehen in der auch möglicher Anzeigefehler einiger älterer Browser behoben werden. Immer nützlich so eine Datei vorweg zu schalten.

hubspe · #6 (**permalink**) 15.08.2010, 11:00

Zitat:

Zitat von firehorse

Code:

* {
margin: 0px;
padding: 0px;
border: none;
outline: 0;
line-height: 140%;
text-decoration: none;
list-style-type: none;
list-style-position: outside;
overflow: hidden-x;
}

sorry, wenn ich das mal so frei sage, aber overflow:hidden-x ist in meinen Augen ein ziemlicher Unfug.

Dann werden evtl bei netbooks und kleinen Bildschirmen Inhalte unerreichbar.

Warum sollte ich den Durchtabbern durch outline:0 den Rahmen um angetabbte Elemente verweigern?

Und warum sollte ich für alle Elemente auch den Links die Unterstreichungen ausschalten. Besucher erkennen an Unterstreichungen das es sich um Links handelt.

Bis auf:

HTML-Code:

* {
margin: 0px;
padding: 0px;
}

finde ich die Liste eher suboptimal, von manchen Anweisungen ist sogar dringend abzuraten.

mannyk · #7 (**permalink**) 21.08.2010, 13:12

@hubspe: Versteh ich natürlich. Deshalb hab ich das Projekt hochgeladen, wo das Problem sichtbar ist. Das rote div wird langgestreckt und sollte sofort mit dem grünen div beginnen (also der rote Bereich am Anfang bis zum Grünen sollte "gelöscht" werden und gleich mit dem Grünen beginnen).

Einsehen könnt ihr das Projekt unter dem Link: Unbenannte Seite
Alle Bilder werden nicht angezeigt, weil ich sie nicht hochgeladen hab (aber ich denke auch nicht, dass die etwas mit dem Problem zu tun haben).

@firehorse: Auch ein Danke an dich, aber mein Problem konnte ich damit leider nicht lösen.

Danke für eure Hilfe,
mannyk

fricca · #8 (**permalink**) 21.08.2010, 15:58

Der im Eingangsposting genannte Text "Login", der auf der verlinkten Seite wohl "Search" heißt, rutscht wegen des Clear unter eines der diversen leeren Elemente, die da rumgeschoben werden.
Einen Zusammenhang zu dem eingangs geposteten Screenshot kann ich nicht herstellen.
Sorry, aber es ist nicht im Geringsten nachvollziehbar, was das werden soll.

Zitat:

Alle Bilder werden nicht angezeigt, weil ich sie nicht hochgeladen hab (aber ich denke auch nicht, dass die etwas mit dem Problem zu tun haben).

Und du bist der Meinung, wenn man hauptsächlich nichts sieht, kann man dir sinnvoll helfen?

mannyk · #9 (**permalink**) 21.08.2010, 19:07

Entschuldige, aber das war mir wirklich nicht klar. Da ich mich aber eben auch nicht gut auskenne, beherzige ich den Rat gerne.

Ich habe nun die Seite so präpariert, wie sie wirklich ist - mit allen Bildern.

Unbenannte Seite

Anbei noch ein Screenshot, wie sie eben aussehen sollte.

@fricca: Ja, das mit dem "clear" ist mir aufgefallen. Wenn ich es weggelassen habe, dann war die SearchBox (oder früher der Login) zwar richtig groß aber wurde zu weit unten dargestellt und nicht direkt unter der Lanze von dem Tier.

Also, wenn es jetzt noch einen Tipp gäbe, wie ich zum gewollten Ergebnis kommen könnte, wäre das super!
lg und Danke,
mannyk

nevermind · #10 (**permalink**) 21.08.2010, 19:24

Warum hat #upperContent ein derart großes margin-bottom von 150px?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wrapper wächst nicht mit, keine Floats	maclady	CSS	11	10.02.2010 17:30
Wachsende Container	Andy CD	CSS	13	10.02.2010 13:08
DIV bis GANZ unten	burnZ	CSS	5	27.07.2008 13:14
Helft mir. Ich habe voll die Leseschwäche	nick	CSS	12	15.01.2008 20:52
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 20:03