Hallo

ich möchte gerne eine 4images-Seite, die in eigenltichen aus einer Tabelle mit mehreren Zeilen besteht so darstellen, dass sie bei verschiedenen Bildschirmauflösung passt.
Aktuell hatte ich diese lokal an einem Monitor mit 1280x600 programmiert.
Wenn ich diese aber nun an einem Monitor mit 1280x1024 ansehen, beliebt 1/3 der Seite leer.

Kann ich irgendwie einer Seite sagen das diese 100% der Bildschirmhöhe nutzen soll ?
Ich möchte allerdings keine Frames bei der Seite verwenden.

Gruss
Netzjunkie

Hi,

Zitat von netzjunkie

Kann ich irgendwie einer Seite sagen das diese 100% der Bildschirmhöhe nutzen soll ?

schau mal hier: Webmaster FAQ -> [CSS] Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt? (gilt auch für Tabellen).

Code css:

1	html,body,table { height:100%; }

mfg Maik

Hallo zusammen

So, nun habe ich mehrere Versuche hinter mir aber es klappt einfach nicht.
Sobald ich eine Angabe in % eintrage stimmen die Seitenverhältnisse nicht.


Hat vielleicht jemand ein ganz simples Grundgerüst damit ich das nachlesen/trainieren kann ?

Gruss
Netzjunkie

Zitat von netzjunkie

So, nun habe ich mehrere Versuche hinter mir aber es klappt einfach nicht.
Sobald ich eine Angabe in % eintrage stimmen die Seitenverhältnisse nicht.


Hat vielleicht jemand ein ganz simples Grundgerüst damit ich das nachlesen/trainieren kann ?

Wie wäre es mit deinem Code oder den Link zu deiner Seite, damit man auf deinen Versuch näher eingehen kann?

mfg Maik

Hallo Maik

den Code den ich habe, der ist von 4images und sehr sehr manipuliert. Den kann ich aber gleich mal posten.
Im Prinzip benötige ich aber nur eine HTML-Seite die3 Tabellenzeilen hat, wobei die unterse immer unten sein soll, die oberste immer oben und die mittlere soll sich der Seite anpassen.
So wie hier: http://www.themaninblue.com/experime...mple_short.htm


Gruss

HTML-Code:

<style type="text/css">
<!--
.Stil44 {	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999999;
	font-weight: bold;
}
.Stil37 {font-size: 14px}
a:hover {color: #FF0000;}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:active {
	color: #000000;
}
.Stil1 {	font-family: "Courier New", Courier, mono;
	font-weight: bold;
}
.Stil39 {	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
}
.Stil121 {
	font-size: 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FF0000;
}
.Stil122 {
	font-size: 12px;
	color: #000000;
}
-->
</style>
<p>{header}</p>
<br />
<table width="100%" border="0">
  <tr>
    <td width="305" valign="top"><img src="templates/4dark/images/Homepage/Logo.jpg" alt="" width="300" height="33" /></td>
    <td><span class="Stil44"><span class="Stil37"><span class="row2">
      <?php include("4darkm.php"); ?>
    </span></span></span></td>
    <td width="20">&nbsp;</td>
  </tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
  <tr>
    <td class="bordercolor"><table width="100%" border="0" cellpadding="0" cellspacing="1" ">
        <tr>
          <td class="tablebgcolor"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            </table>
            <table width="100%" border="0" cellpadding="0" cellspacing="0" >
              <tr>
                <td width="1" height="450" class="bordercolor" valign="top"><img src="{template_url}/images/spacer.gif" width="1" height="1" alt="" /></td>
                <td width="18" valign="top"><img src="{template_url}/images/spacer.gif" width="18" height="18" alt="" /></td>
                <td width="100%" valign="top"><div align="center"><span class="Stil1"><br />
                </span>
                    <table border="0">
                      <tr >
                        <td width="900" height="241" background="templates/4dark/images/Homepage/SP.jpg" valign="center"><p align="center" class="Stil121"><br>
                            </p>
                        </td>
                      </tr>
                    </table>
                    <span class="Stil1"><br />
                    <br />
                    <img src="templates/4dark/images/Homepage/oben.jpg" /><br />
                    <br />
                    <span class="Stil39">Alle Rechte der hier gezeigten Bilder liegen beim Fotografen oder den Modellen 
                      und d&uuml;rfen nicht <br />
                ohne schriftliche Genehmigung des Rechteinhabers weiter verwendet werden. </span></span> </div></td>
                <td width="19" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="19" height="19" /></td>
              </tr>
              <tr>
                <td valign="top">&nbsp;</td>
                <td valign="top">&nbsp;</td>
                <td valign="top">{footer}</td>
                <td valign="top">&nbsp;</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr> 
  </tr>
</table>

Die Tabelle mit der Höhe 450, die soll sich immer der aktuellen Seite anpassen (z.B. 80%)

Tabellen dienen semantisch nicht zum Konstruieren eines Seitenlayouts - siehe Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten.

Aber gut, weil hier danach gefragt ist, stell ich mal kurz die Grundtechnik vor:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-09-05">

<title>tutorials.de | demo_netzjunkie</title>

<style type="text/css">
<!--
html,body {
margin:0;
padding:0;
}
html,body,table {
height:100%;
}
body {
text-align:center;
}
table {
width:1000px;
margin:auto;
text-align:left;
}
#head {
height:180px;
background:#cfcfcf;
}
#content {
background:#efefef;
}
#foot {
height:80px;
background:#cfcfcf;
}
-->
</style>

</head>
<body>

<table cellpadding="0" cellspacing="0">
              <tr><td id="head">head</td></tr>
              <tr><td id="content">content</td></tr>
              <tr><td id="foot">foot</td></tr>
</table>

</body>
</html>

mfg Maik

Hallo Maik

ich gucke mir das gleich mal an
Vorweg: Ich bin auch dafür offen das ganze nicht in Tabellenform zu machen. Der Grundcode vom 4images ist in Tabellen und daran habe ich halt nur weiter gearbeitet.
Wenn es weitere Lösungen gibt bin ich dafür offen

Gruss
Netzjunkie

Solltest du dich von dem Tabellenkonstrukt lossagen können, empfehle ich dir mein CSS-Tutorial CSS-Layout mit 100%-Höhe.

mfg Maik

Hallo Maik

habe deinen ersten Code jetzt gerade mal eingestellt.
Im IE ist alles wunderbar, aber wie mache ich Firefox klar das er den Code wie im IE darstellt ?

Gruss
Netzjunkie

PS: Danke für den Link zu deinem Tut., werde ich mir mal ansehen

Zitat von netzjunkie

habe deinen ersten Code jetzt gerade mal eingestellt.
Im IE ist alles wunderbar, aber wie mache ich Firefox klar das er den Code wie im IE darstellt ?

Nimm mal die zwischenzeitlich editierte Fassung des Codes

mfg Maik

Habe ich

Das ist super

Danke Maik

Ich werde morgen Abend mal anfangen damit zu arbeiten.
Ich melde mich dann wenn Fragen kommen
Außerdem werde ich mir dein Tut mal in Ruhe ansehen

Nochmals Danke für die nette und schnelle Hilfe

Gruss
Netzjunkie

Da fällt mir schon eine Frage ein....

Wenn in der Mitte (content) ein Text steht, der für eine Auflösung passt aber für eine andere Auflösung zu lang ist.... wie mache ich das das der mittlere Bereich dann gescrollt wird - und nur der mittlere Bereich.
Oder ist das nicht möglich ?

Gruss
Netzjunkie

Da bist du in einem CSS-gestützten Layout bedeutend besser aufgehoben:

• http://www.cssplay.co.uk/layouts/bodyfix.html
• http://www.cssplay.co.uk/layouts/fixit.html

Sowie aus unseren Tutorials:

• Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken

mfg Maik

Ja die beiden Beispielseiten sehen genial aus.
So würde mir das schon gefallen (eher wie der 2. Link)

Und jetzt habe ich gerade deinen oben stehenden Code in ein 4images als Test eingearbeitet und war so stolz das es geklappt hat

Gruss
Netzjunkie

Dann hast du ja jetzt Gelegenheit, das nächste Erfolgserlebnis einzufahren

mfg Maik