✔ Wie Homepage für verschiedene Auflösungen passend machen?

N

netzjunkie

Mitglied
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
 
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
 
netzjunkie hat gesagt.:
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 ?
Zum Vergrößern anklicken....
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/experiment/footerStickAlt/good_example_short.htm


Gruss

HTML: 
<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: 
<!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
 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück