divs als Tabellenersatz + Iframe mit bestimmter Größe

SucheUndFinde

hi Leute!

ich hoffe ihr könnt mir helfen - die divs bereiten mir Kopfschmerzen.. nun gut, in diesem Fall ist vermutlich der iFrame schuld

und zwar möchte ich einen header haben mit einer bestimmten Höhe, sowie einen Footer, ebenfalls bestimmte Höhe, jeweils in Pixel.

zwischen den beiden soll der Contentbereich sein, der ein Iframe enthält, welches vom linken und rechten, sowie oberen und unteren Fensterrand ebenfalls einen festen Abstand haben soll (in Pixel). IFrame soll ansonsten den ganzen ihm zur Verfügung stehenden Platz einnehmen.
Ich habe schon einige Angaben versucht, wie dem iFrame width und/oder height auf 100% ( gibt es überhaupt height:auto ? )zu verpassen, jedoch war der Frame entweder zu groß, d.h. bis ganz zum rechten Fensterrand oder bis über den unteren Fensterrand.

Es sollen keine Scrollbalken erscheinen!
Ausserdem soll es mindestens in FF und IE einwandfrei aussehen, möglichst natürlich alle Browser

Mit Tabellen scheint mir ein solches Vorhaben recht einfach lösbar zu sein, aber ich möcht nun doch auch aufhören die ständig zu "vergewaltigen"

Hier mein bisheriger Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		div
		{
		border-color:blue;
		border-style:solid;
		border-width:1px;
		}
		body,html {height:100%;}
	</style>
</head>
<body style="margin: 0px; padding: 0px">
<div style="height:100%; width:100%">


	<div style="height:90px; width:392px; padding:0px 20px 10px;">
		Header
	</div>

	<div style="width:auto; margin: 10px 220px 10px 140px;">
		<iframe src="unterseite.html" style="width:auto; height:auto; margin 0px 0px 0px 0px">keine Frames</iframe>
	</div>


	<div style="height:40px">
		Footer
	</div>

</div>
</body>
</html>

Alles anzeigen

Danke schön schonmal fürs Lesen!
und hoffe auf Antworten...

Gruß,
Chris

sejuma

Für was brauchst du denn unbedingt den Frame?
Ist a) nicht suchmaschinenfreundlich und lässt sich b) mit einem div ebenso lösen.
Es lädt dann halt immer die komplette Seite.
Probier doch einfach mal drei div's für header, content und footer.
Gib beiden die gleichen Breiten und paddings, damit sie einheitlich sind.
Sofern du keine Höhen angibst, nehmen sie automatisch die Höhe ihres Inhalts an.
Den Abstand zwischen den div's erreichst du mit einem margin-top-Wert.

SucheUndFinde

der frame lässt sich leider nicht umgehen, da eben nicht die gesamte seite stets neu geladen werden darf.
dass ich statt dem iframe noch ein div nehme - soweit war ich auch schon

synaptic

wieso kann man des, was man mit nem iframe lösen kann auch mit nem div lösen??
kann man von irgendeiner seite automatisch den quellcode als String ausgeben lassen und ins DIV.innerHTML als code einfügen??
also ich glaube nicht, daß sowas geht, habs nämlich schon in diversen varianten ausprobiert...

wenn ein iframe in einem div ist, würd ich dem div eine bestimmte grösse geben und dem darinliegendem iframe 90% - 100% in width und height.
die abstände kann man dann doch mit padding und margin lösen (so weit ich weiß)
sollte ich da falsch liegen, bitte ich um aufklärung in bezug zu diesem thema.

edit: kann ich deinen quellcode auch so verhunzen, wie ich will??
ich meine sofern ich das gewünschte ergebnis bekomme^^...

edit2:
soll dat so aussehen??

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <style type="text/css"> 
      div 
      { 
      border-color:blue; 
      border-style:solid; 
      border-width:1px; 
      } 
      body,html {height:100%;} 
   </style> 
</head> 
<body style="margin: 0px; padding: 0px"> 




   <div style="height:90px; width:392px; padding:0px 20px 10px;"> 
      Header 
   </div> 

   <div style="width:85%;height:70%;left:0%; margin: 10px 220px 10px 140px;"> 
      <iframe src="unterseite.html" style="width:100%; height:100%; margin 0px 0px 0px 0px">keine Frames</iframe> 
   </div> 


   

   <div style="position:absolute; top:90%; left:0%; height:40px; width:500px;"> 
      Footer 
   </div> 



</body> 
</html>

Alles anzeigen

ok scrollbars haste noch.. dat hab ich jetzt erst gesehen, daß du keine willst...

SucheUndFinde

das funktioniert so nicht.. das siehst du schon daran, dass der frame keinesfalls einen abstand von 220px vom rechten Rand hat, sondern vielleicht 20 px (bei IE mit 1280*1024). Klar du kannst den Marginwert entsprechend von 220px erhöhen um einen breiteren rechten Rand zu kriegen, aber eine pixelgenaue Platzierung wird so unmöglich.

[EDIT]
soviel ich gelesen habe, ist ein solches Vorhaben nur mit JavaScript möglich, dass den zur Verfügung stehenden Platz ausrechnet und dem Frame zuweist

sejuma

div's kann man nicht verlinken.

synaptic

Zitat von SucheUndFinde

das funktioniert so nicht.. das siehst du schon daran, dass der frame keinesfalls einen abstand von 220px vom rechten Rand hat, sondern vielleicht 20 px (bei IE mit 1280*1024). Klar du kannst den Marginwert entsprechend von 220px erhöhen um einen breiteren rechten Rand zu kriegen, aber eine pixelgenaue Platzierung wird so unmöglich.

du wolltest möglichst viel von der seite für deinen iframe haben...
ok, das mit den scrollbalken und den festen abständen zu allen rändern hatte ich nur mit einem auge mitbekommen.

dann schreib mal auf, welche welche abstände von den rändern da sein sollen...
die höhe des headers und footers war die, in deinem code denke ich mal... welche breite sollen die dinger bekommen?? komplette page-size?
und was ist mit dem bereich auf der linken seite, in dem kein div oder frame ist?? ist das reservierter bereich für dein menü?
wenn du einen dynamischen iframe haben möchtest der bei diversen auflösungen dennoch "das gleiche erscheinungsbild" liefert, lässt sich das tatsächlich mit javascript realisieren...

SucheUndFinde

steht alles im code - die breide von header und footer
die abstände sind die margin werte, also 220px von rechts, 140px von links

ja es ist reservierter platz für ein menü. dass das mit javascript geht, ist logisch. aber ob es auch ohne geht ist unklar.

<div style="height:90px; width:392px; padding:0px 20px 10px;">
Header
</div>

<div style="width:85%;height:70%;left:0%; margin: 10px 220px 10px 140px;">
<iframe src="unterseite.html" style="width:100%; height:100%; margin 0px 0px 0px 0px">keine Frames</iframe>
</div>

<div style="position:absolute; top:90%; left:0%; height:40px; width:500px;">
Footer
</div>

jojo87

wenn es dir nur darum geht, dass nicht ständig die ganze Seite neu geladen wird, mach es mit divs und php. Wenn das für dich ne lösung wäre, helf ich dir hier auch gerne.
Gruß
Jojo

synaptic

also ich würd es mit javascript machen und auf der page erwähnen, daß javascript für volle funktionalität eingeschaltet sein muss.....

hab nochma gebastelt und denke, daß es passt.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <style type="text/css"> 
      div 
      { 
      border-color:blue; 
      border-style:solid; 
      border-width:1px; 
      } 
      body,html {height:100%;} 
   </style> 
   <script type="text/javascript">

   </script>
</head> 
<body style="margin: 0px; padding: 0px"> 
 


   <div id="header" style="height:90px; width:392px; padding:0px 20px 10px;"> 
      Header 
   </div> 

   <div id="main" style="width:68%; height:70%; margin: 10px 220px 10px 140px; overflow:none;" > 
      <iframe src="unterseite.html" scrolling="no" style="width:100%; height:100%; margin 0px 0px 0px 0px">keine Frames</iframe> 
   </div> 


   <div id="footer" style="height:40px; width:500px;"> 
      Footer 
   </div> 



</body> 
</html>

Alles anzeigen

so sieht es meiner meinung nach zumindest so aus, wie du es haben möchtest.

SucheUndFinde

ich glaube du hast da was vergessen !?

Code

<script type="text/javascript">

   </script>

synaptic

nö, wollte es erst auch mit nem script lösen... doch es sollte ja ohne sein.
stimmt das layout etwa noch immer nicht?

Tags