|
|||
Abhängigkeit von Divs zueinander
Hallo alle zusammen,
Ich versuche mir im Moment HTML/CSS/JS anzueignen. Heute bin ich allerdings beim rumprobieren (wieder) auf dasgleiche Problem gestoßen. Ich bin mir nicht sicher, ob der Thread hier hin sollte oder ins das HTML Forum. Folgendes Beispiel: HTML: HTML-Code:
[...] <body> <div id="mainbody"> <div id="fly"> </div> <div id="logo"> </div> <div id="welcome"> </div> </div> </body> [...] Wenn ich jetzt allerdings den CSS-text so definiere: Code:
#mainbody{ width:100%; height:100%; top:0; background: url(hintergrund.jpg) no-repeat center center; } /*Hintergrund ist ein Bild über den kompletten Bildschirm*/ #fly{ height:1%; width:60%; margin: auto; position: relative; top: 50%; bottom: 0; }/*Ein Strich in der mitte des Mainbodys*/ #logo{ top:20%; position:relative; margin-left:20%; width:20%; height:30%; background: url(logo.jpg) no-repeat center center; }/*Ein Logo über dem Strich der linksseitig gleich abschließt und oben einen Abstand von 20% hat*/ #welcome{ width:100px; height:100px; background-color:white;} Es geht um dieses letzte Div welcome. Meines Wissens nach müsste doch nach obiger Definition einfach oben links im Div mainbody ein 100x100 px großes weißes fenster sitzen. Das tut es allerdings nicht. Es sitzt einfach an der linken Seite irgendwo in der Mitte des Bildschirmes und ich kann mir weder erklären wieso, noch wie ich dieses Problem fixen kann. Würde mich über Erklärungen sehr freuen. LG Dan |
Sponsored Links |
|
|||
Hallo
Zitat:
Die Größe von Containern richtet sich grundsätzlich nach deren Inhalt. Testlayouts mit leeren Containern bringen deshalb überhaupt nichts und sollten vermieden werden. Entsprechend sollte so weit wie irgend möglich auch auf height-Angaben verzichtet werden. Weiterhin sollten Container nicht direkt plaziert werden, sondern sich ihren Platz durch Abstände zu den anderen Containern bestimmen. top, bottom, left und right sollten nur dort verwendet werden wo es auch sinnvoll ist. Im Grundlayout wie bei deinem Beispiel ist es nicht sinnvoll. Am besten erstellst du deshalb zunächst mal einen HTML-Quellcode mit Inhalt. Anschließend wird dann per CSS das Layout (also das Aussehen) bestimmt. Gruss MrMurphy |
Sponsored Links |
|
|||
Danke für deine Antwort.
Ich benutze gerne Elemente um das Design der Seite zu bauen (in den Elementen steht manchmal gar nichts drin, die sind nur Optik). Ich habe das Hintergrundbild jetzt in den Body gesetzt und im Quelltext stehen nun 3 völlig unabhängige divs (also nicht verschachtelt) und das dritte div hängt eben immer noch im Bildschirm: HTML-Code:
<div id="fly"> </div> <div id="logoline"> </div> <div id="button"> </div> Code:
#fly{ height:1%; width:20%; margin: auto; position: relative; top: 50%; bottom: 0; } #logoline{ top:20%; position:relative; margin-left:20%; margin-right:20%; height:30%;} #button{ width:60%; height:10%; background-color:white; } Es geht mir hier nicht unbedingt um eine Lösung per se, sondern viel mehr um das Verständnis warum dies so ist. LG Dan |
|
|||
Hallo
Was erwartest du? Fundierte Antworten lehnst du ab. Zusätzlich sollen wir dein Problem an Hand von Quellcodeschnipseln lösen, die als kompletten Quellcode eine weiße Seite ergeben. Gruss MrMurphy |
|
|||
Offensichtlich suche ich nicht nach einer Lösung, sondern nach einer Erklärung wie divs sich zueinander verhalten, obwohl sie keinem Mutterelement untergeordnet sind (eben nicht neutral).
die schnipsel sind a) extrem einfach und b) ein Beispiel, ich bin nicht an einer Lösung interessiert, weil es nur Getippsel war um eben zu üben. Ich bin lediglich am Verständnis interessiert. Stattdessen werde ich mit einer frechen Antwort abserviert - ist ja kein Problem wenn du nicht helfen willst/kannst, dann antworte halt nicht. In Foren in denen ich kein Neuling bin verhalte ich mich auch nicht so zu Neulingen. LG |
|
|||
Damit du es uach von noch jemand hörst: Verwende keine leeren divs sondern verwende, wenn du noch keinen Inhalt hast, lorem ipsum Texte. Ansonsten hat das, was du hier machst, nicht wirklich viel Sinn.
divs verhalten sich so, dass sie untereinander angezeigt werden. So wie sich jedes andere Blockelement auch verhält. Im Gegensatz dazu gibt es inline Elemente, aber da willst du ja nicht wissen, wie sie sich verhalten. |
Sponsored Links |
|
|||
Naja die Antwort von MrMurphy war vielleicht für einen Anfänger nicht sooo hilfreich, weil er eine Erklärung haben wollte, aber frech war es doch trotzdem nicht.
Was genau möchtest du denn realisieren? Ein 3 spaltiges Layout? Da wirst du bei Google genug darauf reduzierte Beispielcodes finden. Außerdem brauchst du position: relative; in deinem Fall wahrscheinlich nicht. Wenn du ein Element relative positioniert und es dann mit Angaben wie top oder bottom verschiebst, wirkt sich diese Verschiebung nicht auf andere Elemente aus. Es bewegt sich quasi von seiner ursprünglichen Position aus, nachfolgende oder vorigende Elemente werden davon aber nicht beeinflusst. Die Reihenfolge der Elemente im Quelltext ist auch relevant. Dein div "button" befindet sich NICHT oben links, weil im Quelltext 2 divs davor stehen, die eine Höhe haben. Und divs sind sogenannte Block-Elemente. Das heißt sie werden untereinander und nicht nebeneinander dargestellt, es sei denn du änderst dieses Verhalten mit diversen Eigenschaften. Und deshalb wird button nach unten verschoben. Geändert von dazzle89 (25.01.2016 um 17:54 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Script nur für Inhalt eines bestimmten DIVs | Kipperdesign | Javascript & Ajax | 8 | 11.02.2013 14:03 |
DIVs wollen nicht in Container | Echnotron | CSS | 4 | 22.02.2012 09:46 |
n Div's in eine Zeile | Mustangore | CSS | 9 | 20.08.2009 16:19 |
Zwei DIVs nebeneinander mit Abhängigkeit | shanxp | CSS | 3 | 24.01.2009 12:25 |
Divs nebeneinander, aber mittig | RomanM | CSS | 2 | 24.10.2007 07:32 |