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

c0miLa · 06-05-2010, 11:48

hallo,
mein bruder hat mir die Seite empfohlen, ich hoffe ihr kennt eine antwort auf meine frage. mein problem: (nehmen wir an die div's sind einfach farbige blöcke)
ich habe 1x Banner {left: 0px; top: 0px, width: 100%; height: 147px}
1x Navi {left: 0px; top: 147px; width: 196px; height: 100% (hier fängt das problem schon eigentlich an wegen top 147px und height 100% aber die Höhe interessiert mich erstmal nicht, es geht mir mehr um die Breite..)}
und 1x Content.. hierfür gebe ich lieber mal keine werte an sondern erkläre einfach mal wie ich das haben will. wenn ich nun den browser kleiner oder größer ziehe sollen banner und navi immer so bleiben wie sie in pixel angaben gebeben sind, nur content wo der ganze inhalt drin ist soll beim kleiner ziehen des fensters mit verkleinert werden.. sagen wir mal, ich sage dem content dass da die scrollleiste sichtbar sein soll... die scrollleiste soll immer wieder beim verkleinern genau am rechten rand des browsers sein und der linke rand des contents immer bündig mit dem rechten rand der navi sein.. ich hoffe das war deutlich genug.. und selbst wenn das nicht möglich ist so etwas zu machen bin ich auch zufrieden dann weiß ich wenigstens dass es nicht geht
ich bedanke mich jetzt schon mal..
c0miLa

**sonar** · 06-05-2010, 12:11

Du meinst sowas in der Art?

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your Titel Goes Here</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
/* <![CDATA[ */
#wrapper {
	min-width		:	700px;
}

#content {
	width			:	100%;
}

#header, #footer {
	height			:	50px;
	clear			:	both;
	background		:	silver;
}

#left {
	width			:	150px;
	min-height		:	400px;
	float			:	left;
	background		:	green;
}

#main {
	min-height		:	400px;
	margin			:	0 100px 0 150px;
	border-left		:	1px red dashed;
	border-right	:	1px red dashed;
	background		:	yellow;
}

#right {
	width			:	100px;
	min-height		:	400px;
	float			:	right;
	background		:	blue;
}
/* ]]> */
</style>
</head>

<body>

<div id="wrapper">
	<div id="header">HEADER</div>
	<div id="content">
		<div id="left">LEFT</div>
		<div id="right">RIGHT</div>
		<div id="main">MAIN</div>
	</div>
	<div id="footer">FOOTER</div>
</div>

</body>
</html>

(was du 'content' nennst, heißt in meinem Beispiel 'main')
Suchbegriff für google wäre z.B. 'css liquid layout', wenn du mehr wissen willst…

c0miLa · 06-05-2010, 13:43

wow, was für eine schnelle Antwort und zugleich auch eine perfekte Lösung..
ich bedanke mich recht herzlich. das ist sogar noch besser als das was ich mir vorgestellt hab.. endlich keine kopfschmerzen mehr ^^

danke!

c0miLa

**sonar** · 06-05-2010, 13:58

Gerne

c0miLa · 07-05-2010, 10:57

sonar, ich nochmal..
könntest du mir bitte doch noch die höhe einstellen? ich dachte ich kann das von der breite abgucken aber iwie denk ich komplizierter als es glaub ich ist..
also ich hab den "footer" entfernt und wollte halt dass "main, left" bis unterem rand geht.. ich kann nicht mehr klar denken, stehe unter zeitdruck

danke im voraus

youfyouk · 07-05-2010, 17:38

Hi,

ich habe auch so ein ähnliches Problem.
Warum funktioniert { height: 100% } nicht? Benuzte nur Mozilla FF
Es geht darum, dass der gesamte Inhalt der Seite nicht gescrollt werden soll. Lediglich nur das "Main" Fenster/Frame soll gescrollt werden wenn dieser mit Text oder irgent etwas gefüllt wird. Dazu habe ich mir von sonar den Code soweit modifiziert, dass das nur mit festen max-height angabe in "px" funktioniert jedoch nicht in "%".
Aber ich möchte gerne unabhängig von der Bildschirmauflösung bzw. größe die ganze höhe nutzen. Hier der Quellcode:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS-Layout</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">

html, body {
  height        : 100%;
  margin        :    0;
}

#wrapper {
  background	         : red;
  position               : relative;
  min-height             : 100%;
  height                 : auto !important; /* moderne Browser */
  height                 : 100%; /* IE */
  min-width		 : 700px;
}

#content {
  width			 : 100%;
  max-height             : 100%;
}

#header{
  height	         : 50px;
  clear			 : both;
  background		 : silver;
}

#navi {
  width			 : 150px;
  min-height		 : 500px;
  float			 : left;
  background		 : green;
}

#main {
  min-height		 : 500px;
  max-height             : 100%;     /* hier ist die Problemstelle, in px funktioniert es, aber halt nur mit festwert. Ich weiß ja nicht welche Auflösung der User hat??? */
  margin		 : 0 0 0 150px;
  background		 : yellow;
  overflow               : auto;
}

</style>
</head>

<body>

<div id="wrapper">
	<div id="header">HEADER</div>
	<div id="content">
		<div id="navi">NAVI</div>
		<div id="main">MAIN<p></p></div>
	</div>
</div>

</body>
</html>

Bezieht sich

HTML-Code:

#content {
  width			 : 100%;
  max-height             : 100%;
}

nicht auf den Wrapper? Normalerweise dürfte doch das Mainfenster nicht größer (höher) werden als Content und schon garnicht größer (höher) als Wrapper oder?
Ich hoffe einer hat eine Lösung dafür.
Danke im vorraus.

MfG
youfyouk

youfyouk · 07-05-2010, 20:08

Hi nochmal,

hab es anders gelöst.

Hier meine Lösung:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Test CSS</title>
  </head>
  <body>

  <style type="text/css">
html {
height:100%; 
max-height:100%; 
padding:0;
margin:0; 
border:0;  
overflow: hidden; 
}
body
{
 margin:0;
 padding:0;
 height:100%;
 max-height:100%;
 overflow:hidden;
}
* html body 
{
 height:100%;
}
#oben
{
  background:#aaa;
  position:absolute; 
  left:0; top:0px;  
  width:100%;
  height:140px;  
}
#links
{
  background:#bbb;
  position:absolute; 
  left:0; top:140px; 
  bottom:30px; 
  width:200px; 
  overflow:auto;
  z-index:2; 
}
#main
{
  background:#ccc;
  position:absolute;
  overflow:auto;
  margin: 10 0 10 10; /* top, right, bottom, left also im Uhrzeigersinn */
  top:140px;
  bottom:0px;
  left:200px;
  right:0px;  
}
#foot 
{
  background:#ddd;
  position:absolute; 
  margin:0; 
  bottom:0; 
  left:0; 
  display:block; 
  width:200px; 
  height:30px; 
  overflow:hidden;  
  z-index:1;
}
  </style>
 </head>

 <body>

   <div id="oben"> oben</div>
   <div id="links"> links </div>
   <div id="main">
   <p>
 
   </p></div>
   <div id="foot">&nbsp;</div>

  </body>
</html>

06-05-2010, 11:48	#1 (permalink)
c0miLa Neuer User Registriert seit: May 2010 Beiträge: 3	[CSS] nur content soll dynmisch bleiben hallo, mein bruder hat mir die Seite empfohlen, ich hoffe ihr kennt eine antwort auf meine frage. mein problem: (nehmen wir an die div's sind einfach farbige blöcke) ich habe 1x Banner {left: 0px; top: 0px, width: 100%; height: 147px} 1x Navi {left: 0px; top: 147px; width: 196px; height: 100% (hier fängt das problem schon eigentlich an wegen top 147px und height 100% aber die Höhe interessiert mich erstmal nicht, es geht mir mehr um die Breite..)} und 1x Content.. hierfür gebe ich lieber mal keine werte an sondern erkläre einfach mal wie ich das haben will. wenn ich nun den browser kleiner oder größer ziehe sollen banner und navi immer so bleiben wie sie in pixel angaben gebeben sind, nur content wo der ganze inhalt drin ist soll beim kleiner ziehen des fensters mit verkleinert werden.. sagen wir mal, ich sage dem content dass da die scrollleiste sichtbar sein soll... die scrollleiste soll immer wieder beim verkleinern genau am rechten rand des browsers sein und der linke rand des contents immer bündig mit dem rechten rand der navi sein.. ich hoffe das war deutlich genug.. und selbst wenn das nicht möglich ist so etwas zu machen bin ich auch zufrieden dann weiß ich wenigstens dass es nicht geht ich bedanke mich jetzt schon mal.. c0miLa

06-05-2010, 13:58	#4 (permalink)
sonar mod_rewrite Registriert seit: Feb 2003 Ort: München Beiträge: 15.621	Gerne __________________ RTFM Wie man Fragen richtig stellt. Achim Bindannmalweg Money makes the world go round, fear makes it turn much faster. (New Model Army)

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
Bild soll bleiben!	Descubridor	Flash Einsteiger	7	09-02-2007 14:08
Buttons soll aktiviert bleiben	p-walter	ActionScript 1	1	25-07-2006 10:27
Buttonfarbe soll bleiben	Cemotion	Flash MX 2004	1	01-08-2005 14:29
ES soll bleiben	PiM	Flash 4 und Flash 5	21	05-09-2002 23:30
Button soll da bleiben	bluex	Flash 4 und Flash 5	2	25-02-2002 14:48

06-05-2010, 13:43	#3 (permalink)
c0miLa Neuer User Registriert seit: May 2010 Beiträge: 3	wow, was für eine schnelle Antwort und zugleich auch eine perfekte Lösung.. ich bedanke mich recht herzlich. das ist sogar noch besser als das was ich mir vorgestellt hab.. endlich keine kopfschmerzen mehr ^^ danke! c0miLa

07-05-2010, 10:57	#5 (permalink)
c0miLa Neuer User Registriert seit: May 2010 Beiträge: 3	sonar, ich nochmal.. könntest du mir bitte doch noch die höhe einstellen? ich dachte ich kann das von der breite abgucken aber iwie denk ich komplizierter als es glaub ich ist.. also ich hab den "footer" entfernt und wollte halt dass "main, left" bis unterem rand geht.. ich kann nicht mehr klar denken, stehe unter zeitdruck danke im voraus