|
|||
Positionierungsproblem (Text rutscht runter)
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> 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 } |
Sponsored Links |
Sponsored Links |
|
|||
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. |
|
||||
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.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Probiere mal das
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; } 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. Geändert von firehorse (14.08.2010 um 23:28 Uhr) Grund: fehler |
|
||||
Zitat:
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; }
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
@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 |
|
|||
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:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (21.08.2010 um 16:05 Uhr) |
|
|||
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 |
Sponsored Links |
|
||||
Warum hat #upperContent ein derart großes margin-bottom von 150px?
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |