[CSS] Positions Fehler

[ottscho]

Hallo zusammen,

kann mir bitte jmd helfen, und sagen warum es mir das rechte Bild auf der Seite verhaut?
https://kiga.ottscho.de/

Das ganze habe ich mit Divs versucht.
https://kiga.ottscho.de/style.css

Bei dem genannten Objekt handelt es sich um #house_right.

Danke für eure Hilfe.

Gruß
ottscho

P.S. Firefox bitte benutzen. Im IE geht noch garnichts

 

[gadon]

wenn die seite mal laden würde...

 

[ottscho]

jetzt gehts, der Server hatte eben Probleme

 

[Detect0r]

jetzt gehts, der Server hatte eben Probleme

div ist ein Blockelement, das heißt es fügt ohne eine Angabe einfach einen Absatz ein...
probiers mal mit
display: inline


Zitat:
Block-Elemente
Block-Elemente erzeugen einen eigenen Absatz im Textfluss. Je nach Elementtyp kann der Browser dabei automatisch einen größeren Abstand zum vorangehenden Inhalt einfügen. So erzeugen die Browser beispielsweise beim p-Element einen sichtbaren Abstand, damit die Absatzschaltung vom einfachen Zeilenumbruch unterscheidbar ist. Beim div-Element dagegen wird beispielsweise einfach eine neue Zeile begonnen.
Block-Elemente können in der Regel normalen Text und nach unten Inline-Elemente enthalten. Einige Block-Elemente können auch andere Block-Elemente enthalten. Ausnahmen von der Regel werden bei den Beschreibungen zu den einzelnen Elementen behandelt. https://de.selfhtml.org/html/referenz/elemente.htm

 

[ottscho]

danke dir...
verstehe ich jetzt nicht ganz, da ich ja die div's pens, menu und house_left auch auf die selbe art gemacht habe, und da bleibt alles auf einer höhe.

wenn ich es so mache:

#house_right {
	background-image:url(images/house_right.gif);
	background-repeat:no-repeat;
	height:301px;
	width:208px;
	margin:0px 0px 0px 731px;
	display: inline
}

verschwindet es ganz, kA wo es dann ist.

 

[Detect0r]

Sorry, jetzt verstehe ich erst genau was du willst...
Gibt viele Methoden, könntest z.B. #big relative positionieren und den die seiten daran (außer ehader, footer und mitte) absolute positionieren.

 

[ottscho]

ja gut, ich habe ja folgende haupt-div in der mitte:

#middle {
	height:301px;
	width:939px;
	background-color:#ffffff;
}

nun möchte ich hier hintereinander in einer linie die anderen divs haben:

#pens {
	background-image:url(images/pens.gif);
	background-repeat:no-repeat;
	height:301px;
	width:111px;
}
#menu {
	float:left;
	width:137px;
	margin:0px 0px 0px 111px;
}
#house_left {
	background-image:url(images/house_left.gif);
	background-repeat:no-repeat;
	height:301px;
	width:13px;
	margin:0px 0px 0px 249px;
}

diese drei divs werden korrekt angezeigt und positioniert.
das letzte div wird aber einfach unten angehängt:

#house_right {
	background-image:url(images/house_right.gif);
	background-repeat:no-repeat;
	height:301px;
	width:208px;
	margin:0px 0px 0px 731px;
}