zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Abhängigkeit von Divs zueinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.01.2016, 19:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2016
Beiträge: 4
Danfx befindet sich auf einem aufstrebenden Ast
Standard 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>
[...]
Nach meinem bisherigen Wissen ist es doch so, dass die drei Divs fly, logo und welcome dieselbe Wertigkeit im Bezug zu dem div mainbody haben.

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.01.2016, 20:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Würde mich über Erklärungen sehr freuen.
Dein gesamtes Vorgehen ist (freundlich ausgedrückt) ungeschickt.

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.01.2016, 22:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2016
Beiträge: 4
Danfx befindet sich auf einem aufstrebenden Ast
Standard

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>
css (gekürzt):
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;
}
jetzt mal unabhängig davon ob das unsauber ist, ich habe divs so verstanden, dass sie nur vom Mutterelement abhängig sind (welches es ja in diesem Fall nicht gibt bzw der body ist). warum befindet sich dann Element button nicht oben links mit den angegebenen Größen?
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
Mit Zitat antworten
  #4 (permalink)  
Alt 24.01.2016, 22:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
ich habe divs so verstanden, dass sie nur vom Mutterelement abhängig sind
Das ist falsch.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 24.01.2016, 22:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2016
Beiträge: 4
Danfx befindet sich auf einem aufstrebenden Ast
Standard

Sehr gute Antwort, danke.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.01.2016, 23:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 24.01.2016, 23:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2016
Beiträge: 4
Danfx befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 25.01.2016, 10:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 25.01.2016, 10:39
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Danfx Beitrag anzeigen
Stattdessen werde ich mit einer frechen Antwort abserviert
Wo hast du denn eine freche Antwort bekommen?

Empfindest du das wirklich als "frech"?????
Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo



Das ist falsch.

Gruss

MrMurphy
Ein Anrede, eine kurze, aber sachlich richtige Antwort und ein Gruss sollen frech sein?

Ich empfinde eher deine 1.Antwort als frech.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.01.2016, 17:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:53 Uhr.