✔ divs nebeneinander

D

denisSCR

Mitglied
Hallo, ich habe ein Problem.
Und zwar will ich mehrere DIvs nebeneinander positionieren.
-----------------OBEN--------------------------
--LINKS-------KARTE--------RECHTS---
---------------UNTEN-------------------------

so soll es etwa aussehen. der Div "Karte" hat eine bestimmte größe, alle divs rund herum sollen sich ihm anpassen. Außerdem soll "Karte" immer in der Mitte vom Bildschirm stehen.
Hat jemand ne Idee wie das geht

Code: 
body {
	background-image: url(img/background_leer.JPG);
	margin:0px;
}
#wrapper {
	width:100%;
	height:100%;
	position:relative;
}
#oben{
	background-image: url(img/bgtranse.png);
	width:100%;
	float:left;

}

#links{
	background-image: url(img/bgtranse.png);
	height:655px;
	float:left;


}
#karte{
background-color:#0000FF;
max-width:1004px;
min-width:1004px;
	width:1004px;
	height:655px;
max-height:655px;
min-height:655px;	
	float:left;
	
}

#rechts{
	background-image: url(img/bgtranse.png);
	height:655px;
	float:right;

}


#unten{
	background-image: url(img/bgtranse.png);
	width:100%;
	height:auto;
	float:left;

}



HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="default.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
<div id="oben">OBEN</div>
<div id="links">LINKS</div>
<div id="rechts">RECHTS</div>
<div id="karte">KARTE</div>
<div id="unten">UNTEN</div>

</div>
</body>
</html>
 
Hi,

ich hab da leider schlechte Nachrichten für dich, denn die Breite der beiden äußeren DIVs #links und #rechts können sich in dem vorgestellten Modell nicht "anpassen" (vergrößern/verkleinern).

Dienen die vier angrenzenden Blöcke nur als "Rahmen" für die Karte, wenn ich mir deren gleichen Hintergrund betrachte, oder sollen sie jeweils individuellen Inhalt in sich aufnehmen?

Bei ersteren könnten sie aus dem Quellcode entfernt, und der Hintergrund stattdessen für den Block #wrapper definiert werden.

Die Karte liesse sich mit http://d-graff.de/selfhtml/center1.html oder http://d-graff.de/fricca/center.html im Viewport horizontal und vertikal zentrieren.

mfg Maik
 
danke für die antwort!
background_leer.JPG ist mein Hintergrund-Bild für die ganze Seite.
bgtranse.png ist einfach ein transparentes Bild. Sprich man kann "nur schlecht" den hintergrund erkennen.

Dienen die vier angrenzenden Blöcke nur als "Rahmen" für die Karte, wenn ich mir deren gleichen Hintergrund betrachte, oder sollen sie jeweils individuellen Inhalt in sich aufnehmen?
Zum Vergrößern anklicken....

Stimmt! Die vier angrezenden Divs sind transparent und dienen als Rahmen für "Karte", die ja immer (egal bei welcher Auflösung) in der Mitte sein soll. Und deswegen müssen die angrenzenden Divs immer an der Karte kleben damit der Rahmen bei jeder Auflösung gegeben ist.
 
Na, dann :)

HTML: 
<body>
<div id="wrapper">
<div id="karte">KARTE</div>
</div>
</body>
CSS: 
* {
    margin:0;
    padding:0;
}
html,body { 
    height:100%; 
}
body {
	background-image: url(img/background_leer.JPG);
	margin:0px;
}
#wrapper {
	width:100%;
	height:100%;
	position:relative;
	background-image: url(img/bgtranse.png);
}
#karte{
    background-color:#0000FF;
	width:1004px;
	height:655px;
	position:absolute;
	left:50%;
	margin-left:-502px;
	top:50%;
	margin-top:-327.5px;
}

mfg Maik
 
danke für die noch schnellere antwort ^^

an sich stimmt es aber das wichtigste hab ich vergessen zu erwähnen:
die karte soll den bgtranse.png - Hintergrund NICHT haben! ( die bgcolor hab ich nur gemacht damit ich den kasten besser sehe.

Das heißt Karte soll ein Kasten sein der den Hintergrund normal sieht (ohne bgtranse.png).. und genau daran verzweifle ich :(
 
Dann gib der Karte den Seitenhintergrund ;)

Mit background-position lässt sich da im Zweifelsfall viel bewegen :-)

mfg Maik
 
Moin,

mein zunächst angenommener Lösungsansatz, dem DIV #karte den Seitenhintergrund zu verpassen, funktioniert hier tatsächlich nicht.

Ich hab derzeit leider auch keinen alternativen Lösungsvorschlag zur Hand.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück