Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

wangman · 12-01-2010, 12:54

hi
ich versuche mit css ein seitenlayout zu machen.
aber es stellt mir die einzelnen contentberreiche (bunte kisten)
nicht so da wie ich es gerne hätte.
woran liegt das?

skript:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
width: 100%;
}
#distance {
width: 0px;
height: 50%;
margin-bottom: -261px;
float: left;
}
#container {
margin: 0 auto;
position: relative;
height: 542px;
width: 734px;
clear: left;
background-color: #999999;
}
#inhalt {
position: absolute;
height: 100%;
width: 100%;
background-color: #99fff9;
}
#logo {
position: inherit;
min-width:	10.643%;
min-height:	5.42%;
background-color:#6013FF;
margin-top:		0%;
margin-left:	0%;
}
#banner {
position: inherit;
min-width:	31.8556%;
min-height:	5.42%;
background-color:#5023FF;
margin-top:		0%;
margin-left:	10.643%;
}
#zitate {
position: inherit;
min-width:	11.377%;
min-height:	5.42%;
background-color:#4033FF;
margin-top:		0%;
margin-left:	42.4986%;
}
#balken1 {
position: inherit;
min-width:	10.643%;
min-height:	1.1924%;
background-color:#3043FF;
margin-top:		5.42%;
margin-left:	0%;
}
#balken2 {
position: inherit;
min-width:	31.8556%;
min-height:	1.1924%;
background-color:#2053FF;
margin-top:		5.42%;
margin-left:	10.643%;
}
#balken3 {
position: inherit;
min-width:	11.377%;
min-height:	1.1924%;
background-color:#1063FF;
margin-top:		5.42%;
margin-left:	42.4986%;
}
#balken4 {
position: inherit;
min-width:	10.643%;
min-height:	1.1924%;
background-color:#9073FF;
margin-top:		11.5446%;
margin-left:	10.643%;
}
#balken5 {
position: inherit;
min-width:	11.377%;
min-height:	1.1924%;
background-color:#8083FF;
margin-top:		11.5446%;
margin-left:	42.4986%;
}
#pianist1 {
position: inherit;
min-width:	10.643%;
min-height:	7.588%;
background-color:#7093FF;
margin-top:		6.6124%;
margin-left:	0%;
}
#pianist2 {
position: inherit;
min-width:	10.643%;
min-height:	7.588%;
background-color:#6013FF;
margin-top:		14.2004%;
margin-left:	0%;
}
#pianist3 {
position: inherit;
min-width:	10.643%;
min-height:	7.588%;
background-color:#5023FF;
margin-top:		21.7884%;
margin-left:	0%;
}
#suche {
position: inherit;
min-width:	31.8556%;
min-height:	4.9322%;
background-color:#4033FF;
margin-top:		6.6124%;
margin-left:	10.643%;
}
#bald {
position: inherit;
min-width:	11.377%;
min-height:	4.9322%;
background-color:#3043FF;
margin-top:		6.6124%;
margin-left:	42.4986%;
}
#anzeige {
position: inherit;
min-width:	32.8556%;
min-height:	16.6394%;
background-color:#2053FF;
margin-top:		12.737%;
margin-left:	10.643%;
}
#wunsch {
position: inherit;
min-width:	11.377%;
min-height:	16.6394%;
background-color:#1063FF;
margin-top:		12.737%;
margin-left:	42.4986%;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="container">
<div id="inhalt">
<div id="logo">
logo</div>
<div id="banner">
banner</div>
<div id="zitate">
zitate</div>
<div id="balken1">
balken1</div>
<div id="balken2">
balken2</div>
<div id="balken3">
balken3</div>
<div id="pianist1">
pianist1</div>
<div id="suche">
suche</div>
<div id="bald">
bald</div>
<div id="pianist2">
pianist2</div>
<div id="balken4">
balken4</div>
<div id="balken5">
balken5</div>
<div id="pianist3">
pianist3</div>
<div id="anzeige">
anzeige</div>
<div id="wunsch">
wunsch</div>
</div>
</div>
</body>
</html>

das blaue bild ist der skript und falsch.

das bunte bild, ist wie ichs haben möchte.

gruß
w

p.s. die prozentangaben sind alle nach der absoluten größe berechnet

yaet · 12-01-2010, 13:17

versuchs mal mit float.

wangman · 12-01-2010, 13:27

hm, bin neuling, könntest du mir das genauer erklären?

acdc33 · 12-01-2010, 16:59

versuch doch mal die ID #inhalt nicht absolute, sondern auch :relative auszurichten. Die darunter abgelegten divs, kannst du dann auch relativ zum parent objekt ausrichten mit px, nicht mit %. Du wirst dann allenfalls minus-Werte Eingeben müssen..

Nightflyer · 12-01-2010, 21:13

Cascading Style Sheets { Tutorials : CSS-Layouts basiert auf Floatierung }

Ahrsib · 12-01-2010, 22:38

Danke für den Link @Nightflyer!

Ahrsib
... floated.

12-01-2010, 16:59	#4 (permalink)
acdc33 headshooter Registriert seit: May 2004 Beiträge: 52	versuch doch mal die ID #inhalt nicht absolute, sondern auch :relative auszurichten. Die darunter abgelegten divs, kannst du dann auch relativ zum parent objekt ausrichten mit px, nicht mit %. Du wirst dann allenfalls minus-Werte Eingeben müssen.. __________________ ä schwarzn Bildschirm habi, ä schwarzn Bildschirm!!!

12-01-2010, 21:13	#5 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Cascading Style Sheets { Tutorials : CSS-Layouts basiert auf Floatierung } __________________ (\__/) (='.'=) (")_(")

12-01-2010, 22:38	#6 (permalink)
Ahrsib Pixeldipaxeldipux Registriert seit: Dec 2002 Ort: Ruhrmetropole Essen Beiträge: 7.589	Danke für den Link @Nightflyer! Ahrsib ... floated. __________________ Selbstgelerntes ist am Besten! iMac G5/2,1GHz, 2,5GB RAM, 20" Widescreen (1680*1050), MacOS 10.4.11, Safari 4.1, dsl 6000 Achim ...Orient Das Flashforum zu unterstützen ist ganz einfach!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ich glaube diesen Problem kennen viele:-( Performance Problem	Animator	Flash MX	8	11-01-2011 17:07
Antialiasing of Systemfonts problem (problem with Bitmapdata.draw())	genesys	ActionScript 3	1	17-11-2009 12:52
onRollOver-Problem, oder auch gotoAndPlay - kleines Problem für geübten Skripter	Ladina	Flash Einsteiger	2	04-05-2007 11:09
Online Problem, lokal kein Problem	Mr.Brown	Flash MX	4	14-05-2006 18:24
loadmovie problem und schleifen problem mit variable	Bourne	ActionScript 1	8	13-09-2004 00:32

12-01-2010, 13:17	#2 (permalink)
yaet Neuer User Registriert seit: Jun 2005 Beiträge: 151	versuchs mal mit float.

12-01-2010, 13:27	#3 (permalink)
wangman Neuer User Registriert seit: Aug 2003 Ort: Bamberg Beiträge: 876	hm, bin neuling, könntest du mir das genauer erklären?