scrollbalken bei table (firefox)

-SuperMario- · 06. Nov. 2006

Hallo zusammen!

Hab ein problem meine Table mit scrollbalken auszustatten. Müsst ja eigentlich ganz simple sein mit der

Code:

overflow:auto;

anweisung über css.

Info:

Code:

**************************************
*          *           Part1                          *       *
*          *                                            *  S   *
*          **************************   I    *
*          *                                            *  D   *
* MENÜ *                                            *   E   *
*          *           Part2                          *  B   *
*          *                                            *  A   *
*          **************************   R   *
*          *                                            *       *
*          *           Part3                          *       *
*          *                                            *       *
**************************************

Beschreibung:
Hab ne Table mit 3 spalten (Menü,Mittelteil,Sidebar)
Im Mittelteil ist wiederum ne Table bestehend aus 3 Zeilen diese Part1 - Part3 sollen scrollbar sein.

Ich hab es zb für part2 so versucht:

Code:

<table width='100%' height='100%' border='0' style='table-layout:fixed'>
.....
.....
<tr height='42%'>
<td width='100%' height='42%' valign='top' style='background-color:#F1F3F8;'>
	<div style='width:100%; height:100%; overflow:auto;'>
		<div id='suchergebnis'>Suche starten</div>
	<div>
</td>
</tr>

Wenn ich bei dem div 100% bei den größenangaben mach, müsste er ja die größe der td annehmen. Wenn ich nun mittels AJAX in den "suchergebnis" DIV was reinlade und es ist zu groß verschiebt er alles andere (part3) nach unten hmm, dh die fixen größen angaben ziehen nicht, oder? , obwohl ich der td/tr und dem div ne fixe größe von 42% zugewiesen hab.
Wenn ich jedoch bei dem div-höhe eine px angabe mach, dann macht er die scrollbalken......hääääää??

IE scheint es mit % angabe richtig zu interpretieren, Firefox nicht!

Kann mir bitte wer weiterhelfen :whacky:

Bin für jeden tipp dankbar!

greets!

bubu-der-uhu · 06. Nov. 2006

Hmmm... Also ehrlich gesagt kenn Ich mich nicht so ganz mit deiner beschreibung aus - hoffe aber Ich kann dir ein bissel weiterhelfen.

1.) Wieso machst du eine Tabelle und dann wieder ein Div rein? - Machs doch gleich nur mit Divs
2.) Zu der größen-Sache: manche Browser bestimmen glaub Ich die Größe über den Inhalt - versuch mal mit margin:0px; und vielleicht width: auto; height: auto; etwas herum zu spielen (fürs Div)
3.) Wenn du schon etwas mit CSS machst dann schreib dort auch gleich die Größenangaben für die Tabelle rein

<table width='100%' height='100%' border='0'>

sowas macht man eigentlich nicht.

ich hab dir jetzt vielleicht nicht alles beantwortet - aber Ich hoffe es hilft

dkdenz · 06. Nov. 2006

-SuperMario- schrieb:
IE scheint es mit % angabe richtig zu interpretieren, Firefox nicht!

Das Gegenteil ist der Fall!
Der IE zeigt es natürlich für Deine Augen richtig an, aber der Firefox reagiert korrekt.
Wenn Du einen Blick in die loosedtd wirfst, dann weißt Du, das height bei einer Tabelle nicht erlaubt ist.

Code:

<!ATTLIST TABLE                        -- table element --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- purpose/structure for speech output--
  width       %Length;       #IMPLIED  -- table width --
  border      %Pixels;       #IMPLIED  -- controls frame width around table --
  frame       %TFrame;       #IMPLIED  -- which parts of frame to render --
  rules       %TRules;       #IMPLIED  -- rulings between rows and cols --
  cellspacing %Length;       #IMPLIED  -- spacing between cells --
  cellpadding %Length;       #IMPLIED  -- spacing within cells --
  align       %TAlign;       #IMPLIED  -- table position relative to window --
  bgcolor     %Color;        #IMPLIED  -- background color for cells --
  %reserved;                           -- reserved for possible future use --
  datapagesize CDATA         #IMPLIED  -- reserved for possible future use --
  >

Zudem sollten Tabellen nicht als Layoutmittel benutzt werden.
(Nachzulesen HIER)
Am Besten, Du überlegst Dir einen anderen Ansatz.

-SuperMario- · 06. Nov. 2006

sry das ich mich so schlecht ausgedrückt hab!!

hab nun mal die table weggeworfen und den mittelteil aus 3 divs gemacht

Code:

<div id='main' style='width:100%; height:100%;'>
<div id='partI' valign='top' style='width:100%; height:15%; background-color:#FFFFFF; overflow:auto; margin:0px;'>
</div>

<div id='partII' valign='top' style='width:100%; height:40%; background-color:#F1F3F8; overflow:auto; margin:0px;'>
  <div id='suchergebnis'>Suche starten</div>
</div>

<div id='partIII' valign='top' style='width:100%; height:40%; background-color:#FFFFFF; overflow:auto; margin:0px;'>
</div>
</div>

(daweil mal ohne css...)

Nun hat es sich etwas gebessert. thx @ bubu & thx @ dkdenz

Hab aber noch probleme:
Mein Ziel ist das die divs komplett fix positioniert sind und eine fixe größe haben. Wenn ich nun die ajax abfrage ins "suchergebnis"-div absetzte, vergrößert sich der partI (das versteh ich schon mal überhaupt nicht) & der partII div! Scrollbalken hat der div2 richtigerweise, aber wieso vergrössern sie sich zusätzlich in der höhe (IE)??? Am Anfang zeichnet er sie ja richtig hin.
Im firefox behalten sie die größe bei!

EDIT
Also im Firefox verändern sich die Div-höhen wenn die 3 div-höhen ungleich 100% sind (wie im code beispiel).
Wenn ich nun die 3 höhen so einstelle, dass ich auf 100 komm, pfuscht der IE aber weiterhin bei den partI & partII höhen herum

:whacky:

menno

Ich würd ja gerne auch auf meine äußerste table verzichten (menü,mittelteil,sidebar) aber ich weiß nicht wie cih sonst so ne aufteilung hinbekomm!

manchmal tut noob-sein echt weh

greetz

bubu-der-uhu · 07. Nov. 2006

Also:
- irgend ein Design vorerst mal ohne Css anzufangen ist: schlecht!
Lies dich mal ein bissel in die Materie ein.

Passts dir so?:

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>

<style>

html { 
padding:0px;
margin:0px;
height: 100%;
}

body {
background-color: #FFFFFF;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
color:#564b47;  
padding:0px;
margin:0px;
height: 100%;
}


#links {
position: absolute;
border: 0px;
left: 0px;
width: 190px;
color:#E9EDF3;
margin: 0px; 
height: 100%;
background-color:#516A99;
}


#rechts {
position: absolute;
border: 0px;
top: 0px;
right: 0px;        
width: 50px;
color:#E9EDF3;
margin: 0px; 
height: 100%;
background-color:#516A99;
}

#part1
{
margin: 0px 50px 0px 190px;
border: 0px;
background-color: #F9F9F9;  
height: 15%;
overflow:auto;
}
#part2
{
margin: 0px 50px 0px 190px;
border: 0px;
background-color: #F1F1F1;  
height: 45%;
overflow:auto;
}
#part3
{
margin: 0px 50px 0px 190px;
border: 0px;
background-color: #F9F9F9;  
height: 40%;
overflow:auto;
}

</style>
</head> 

<body>

<div id="links">links</div>

<div id="part1">Part1</div>

<div id="part2">Part2</div>

<div id="part3">Part3</div>


<div id="rechts">Rechts</div>

</body>
</html>

...beachte: Wenn du die Breite des "links <div>" änderst, oder die breite des "rechts <div>" änderst musst du auch das margin der "Part1-3 <Div>" entsprechend ändern!!

Probiers mal mit deinem Ajax zeugs aus - vielleicht funzt es nun.

Ciao, Bubu

-SuperMario- · 07. Nov. 2006

WOW

!!!!!

Vielen vielen Dank für deine CSS-formatierung!

Das sieht ja super aus....und sauber gemacht ist es nochdazu!!!!

Werds sofort mal einbauen!

sag dann bescheid obs nun funzt!

THX

greetz

bubu-der-uhu · 07. Nov. 2006

Obs so sauber ist weis ich nicht. "supermegaultraprofis" haben immer irgendwo was zu meckern.
Trotzdem:
Gern geschehen -Ich hoffe es funzt... nichts desto trotz solltest du dich in Css trotzdem einlesen

dkdenz · 07. Nov. 2006

bubu-der-uhu schrieb:
Obs so sauber ist weis ich nicht. "supermegaultraprofis" haben immer irgendwo was zu meckern.

Genau!
Wenn der body die Farbe Weiß haben soll, dann braucht man das background-color:#fff nicht, denn die Standard-/Defaultfarbe ist immer #fff...

bubu-der-uhu · 08. Nov. 2006

Genau!
Wenn der body die Farbe Weiß haben soll, dann braucht man das background-color:#fff nicht, denn die Standard-/Defaultfarbe ist immer #fff...

...Ich mag dich nicht

dkdenz · 08. Nov. 2006

-SuperMario- · 09. Nov. 2006

...Ich mag dich nicht

Zum Vergrößern anklicken....

Passts dir so?:

Danke, für das ausgangsmaterial & für den Einblick wie man das angeht!
Habs noch ein kleinwenig abgeändert.

Code:

<!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>
<style>
html 
{ 
	padding:0px;
	margin:0px;
	height: 100%;
}

body 
{
	background-color: #FFFFFF;
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;  
	padding:0px;
	margin-top:5px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	height: 100%;
}


#links 
{
 	float: left;
	border: 0px;
	width: 10%;
	color:#FFFFFF;
	height: 100%;
	background-color:#D8E2FF;
}


#rechts 
{
 	
	float: left;
	border: 0px;
	width: 12%;
	color:#E9EDF3;
	height: 100%;
	background-color:#D8E2FF;
}


#mainwindow
{

 	float: left;
	width:75%;
	height:100%;
	background-color:#ffffff;
	margin-left:1%;
	margin-right:1%;
}


#part1
{

	border: 0px;
	background-color: #F1F3F8;  
	height: 15%;
	overflow:auto;
}

#part2
{
	border: 0px;
	background-color: #F1F3F8;  
	height: 43%;
	overflow:scroll;
	margin-top:1%;
	margin-bottom:1%;
}

#part3
{
	border: 0px%;
	background-color: #F1F3F8;  
	height: 40%;
	overflow:scroll;
}


#window1
{
	width:100%;
	height:100%;
	border:2px;	
	border-color: #000000;
}
</style>
</head>
<body> 
<div id="window1" name="window1">
	<div id="links" name="links">
	</div>
	


	<div id ="mainwindow">
		<div id ="part1">
		</div>

		<div id ="part2">
		</div>
		
		<div id ="part3">
		</div>
	
	</div>

	<div id="rechts" name="rechts">
	</div>
</div>
</body>
</html>

thx @ bubu-der-uhu & dkdenz
Funzt nun und meine tabellen(troublemaker) bin ich auch los

scrollbalken bei table (firefox)

-SuperMario-

New member

bubu-der-uhu

New member

dkdenz

New member

-SuperMario-

New member

bubu-der-uhu

New member

-SuperMario-

New member

bubu-der-uhu

New member

dkdenz

New member

bubu-der-uhu

New member

dkdenz

New member

-SuperMario-

New member