Zum Inhalt springen

webseite an Auflösung anpassen


korea1

Empfohlene Beiträge

Hi Ihr,

hab da ein Problem und seh wahrscheinlich den Wald vor lauter Bäumen nicht mehr.

Ich hab eine Webseite gemacht. Da ich hier beim Entwickeln mit nem Flat sitz und der ne Auflösung von 1280 * 960 hat bin ich nun gerade dabei die Seite auf 1024 * 768 zu optimieren.

Das heißt die meisten Anwender werden eine Auflösung von 1024 * 768 haben. Diejenigen, die mehr haben, sehen die Seite dann einfach verkleinert, das heißt die Layouttabelle stößt nicht an den Bildschirmrand, sondern hört vorher auf. So ist das auch gewünscht.

Nun hier mal ein Quellcodeausschnitt, wo das prima klappt:


<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#000000" colspan="3"><h3>text</h3></td>
</tr>
<tr>
<td bgcolor="#000000"><img src="../img/spacer.gif" width="150" height="30"></td>
<td><img src="../img/spacer.gif" width="375" height="30"></td>
<td><img src="../img/spacer.gif" width="375" height="30"></td>
</tr>
<tr>
<td valign="top">
<!-- #################################### Navi #################################### -->
<table border="0" cellspacing="0" cellpadding="4">
<tr><td><b><a href="../index.htm">Home</a></b></td></tr>
<tr><td><b><a href="xxxx.htm">bla 1</a></b></td></tr>
<tr><td><b><a href="xxx.htm">bla 2</a></td></tr>
<tr><td><b><a href="xxx.htm">bla 3</a></td></tr>
<tr><td><b><a href="xxx.htm">bla 4</a></td></tr>
<tr><td><b><a href="impressum.htm">Impressum</a></td></tr>
</table></td>
<td colspan="2">
<table border="0" cellspacing="3" cellpadding="0">
<!-- #################################### LOGO #################################### -->
<tr bgcolor="#1266AC">
<td colspan="3">
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="../img/spacer.gif" width="355" height="20"></td> <td><img src="../img/logo/logoWeissBlauKl.jpg" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#1266AC">
<td colspan="3"> <div align="center"> <table border="0" cellspacing="0" cellpadding="6">
<td><b><font size="5">blabla</font></b></td> </table> </div>
</td>
</tr>
<!-- #################################### 3Säulen #################################### -->
<tr>
<td bgcolor="#1266AC"><div align="left"><img src="../img/spacer.gif" width="4" height="19"><b><a href="xxx.htm">bla 1</a></b></div></td>
<td bgcolor="#1266AC"><div align="left"><img src="../img/spacer.gif" width="4" height="1"><b><a href="xxx.htm">bla 2</a></b></div></td>
<td bgcolor="#1266AC"><div align="left"><img src="../img/spacer.gif" width="4" height="1"><b><a href="xxx.htm">bla 3</a></b></div></td>
</tr>
<!-- #################################### 3Säulen Erweitert #################################### -->
<tr>
<td valign="top" bgcolor="#1266AC">
<table border="0" cellspacing="0" cellpadding="5"> <tr bgcolor="#1266AC"><td>xx</td></tr> <tr bgcolor="#1266AC"><td>xx<br>xxx</td></tr>
<tr bgcolor="#1266AC"><td>xx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xx</td></tr> <tr bgcolor="#1266AC"><td>xx</td></tr> <tr bgcolor="#1266AC"><td>xx</td></tr>
</table>
</td>
<td valign="top" bgcolor="#1266AC">
<table border="0" cellspacing="0" cellpadding="5"> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xxx</td></tr> <tr bgcolor="#1266AC"><td>xx</td></tr> <tr bgcolor="#1266AC"><td>xx</td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr>
<tr bgcolor="#1266AC"><td> </td></tr>
<tr bgcolor="#1266AC"><td> </td></tr>
</table>
</td>
<td valign="top" bgcolor="#1266AC">
<table border="0" cellspacing="0" cellpadding="5">
<tr bgcolor="#1266AC"><td>xx</td></tr>
<tr bgcolor="#1266AC"><td>xx</td></tr>
<tr bgcolor="#1266AC"><td>xx</td></tr>
<tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr>
<tr bgcolor="#1266AC"><td> </td></tr>
<tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr> <tr bgcolor="#1266AC"><td> </td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>
[/PHP]

Warum funktioniert das hier nicht auch so?? hier füllt die Tabelle bei einer hohen Auflösung den ganzen Bildschirm aus, was nicht passieren sollte.

[PHP]<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- #################################### Header #################################### -->
<table cellspacing="0" cellpadding="5" border="0">
<tr>
<td bgcolor="#000000" colspan="3"><h3>Das Unternehmen</h3></td>
</tr>
<tr>
<td bgcolor="#000000"><img src="../img/spacer.gif" width="150" height="30"></td>
<td><img src="../img/spacer.gif" width="375" height="30"></td>
<td><img src="../img/spacer.gif" width="375" height="30"></td>
</tr>
<tr>
<td valign="top">
<!-- #################################### Navi #################################### -->
<table border="0" cellspacing="0" cellpadding="4">
<tr><td><b><a href="../index.htm">Home</a></b></td></tr>
<tr><td><b><a href="3Saeulen.htm">Geschäftsbereiche</a></b></td></tr>
<tr><td><b><a href="impressum.htm">Impressum</a></td></tr>
</table>
</td>
<td colspan="2">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<blockquote>text </blockquote>
</td>
<td>
<blockquote>text </blockquote>
</td>
</tr>
</table>
</td>
</tr>
</table>



</body>
</html>

Wisst Ihr was ich meine?

Danke korea1

Link zu diesem Kommentar
Auf anderen Seiten teilen

Hi,

das versteh ich jetzt nicht, ich hab doch weder beim oberen Beispiel noch beim unteren eine Breitenangabe und beim oberen klappts und beim unteren nicht. Oder hab ich ne Breitenangabe übersehen in einem der beiden Quellcodes?

Außerdem zeigt es die untere Seite bei beiden Auflösungen so an, dass sie bis zum Bildschirmrand geht.

Das obere Beispiel füllt bei 1024 * 768 den ganzen Bildschirm aus und bei der höheren Auflösung nicht, so wie es sein soll.

Soll ich noch das css posten? Ich weiß mir langsam keinen Rat mehr.

Danke

korea1

Link zu diesem Kommentar
Auf anderen Seiten teilen

Hi,

nein ich binde nicht in beide das gleiche css ein.

css für die obere Datei:

body{ 
background-color:#1266AC;
font-family:Arial;
font-size:10pt;
color:#ffffff
}

TD {
font-family : Verdana;
font-size : 11pt;
line-hight:12%;
font-weight:500;
color:#ffffff;
}

a:link { text-decoration:none; color:#ffffff}
a:active { text-decoration:none; color:#ffffff}
a:visited { text-decoration:none; color:#ffffff}[/PHP]

css für die untere Datei:

[PHP]body{
background-color:#B2B0B0;
font-family:Arial;
font-size:10pt;
#font-weight:bold;
color:#ffffff
}

a:link { text-decoration:none; color:#ffffff}
a:active { text-decoration:none; color:#ffffff}
a:visited { text-decoration:none; color:#ffffff}

MfG

korea1

Link zu diesem Kommentar
Auf anderen Seiten teilen

Hi,

ich hab das jetzt mal mit Prozentangaben versucht.

Das hat aber nix geholfen.

Wenn ich mit der hohen Auflösung eine Breitenangabe für die Tabelle in die untere Datei setze, damit Sie genau so breit is wie die obere und dann auf die niedrige Auflösung umschalte, dann muss ich da wieder nach rechts scrollen.

So langsam weiß ich nicht mehr, was ich noch alles ausprobieren soll.

An was könnte das liegen? Vielleicht an meiner spacer Grafik, mit der ich mir immer wieder Platz schaffe?

MfG

korea1

Link zu diesem Kommentar
Auf anderen Seiten teilen

TD {

    font-family : Verdana;

    font-size : 11pt;

    line-h[b]e[/b]ight:12%;

    font-weight:500;

    color:#ffffff;

}

"e" fehlt!
 body{

    background-color:#B2B0B0;

    font-family:Arial;

    font-size:10pt;

    [b]#[/b]font-weight:bold;

    color:#ffffff

} 

in css wird mit /**/ kommentiert!

Ich bin mir sehr sicher das das Problem in den CSS dateien schlummert!

Probier mal beide seiten ohne css aus!

Sind sie dann gleich breit?

Link zu diesem Kommentar
Auf anderen Seiten teilen

Hi,

sorry inzwischen hab ich glaub wirklich Tomaten auf den Augen.

Wo fehlt das e?

Ich werds mal ohne css versuchen.

Weiß jemand von Euch wie breit ich eine Tabelle machen darf, dass sie bei einer Auflösung von 1024 * 768 den ganzen Bildschirm ausfüllt?

Bei der hohen Auflösung kann ich eine Breite von width="1111" angeben und dann wird die untere Datei ( Tabelle ) augenscheinlich genau so breit wie die obere angezeigt. Fahre ich dann mit der Auflösung wieder herunter muss ich nach links scrollen. Ich versteh die Welt nicht mehr....

Danke

korea1

Link zu diesem Kommentar
Auf anderen Seiten teilen

Hi,

also ohne css werden beide Seiten unterschiedlich groß angezeigt.

Jetzt wird die obere Datei bzw. Tabelle kleiner angezeigt, als die untere Tabelle. ??

Kann das sein, dass sich die Tabellen immer so viel Platz nehmen, wie sie lustig sind, wenn man nicht überall eine Breitenangabe angibt?

Als Breitenangaben für die Tabelle und jede einzelne Spalte?

Oder muss ich meine style sheets abändern?

Danke

korea1

Link zu diesem Kommentar
Auf anderen Seiten teilen

Mit welchem Browser testest du? Ich hab deine beiden Sources mal beide ausprobiert!

Im Firfox und IE sind beide Tabelle gleich groß (zumindest bei mir!)

Allerdings habe ich die Bilder dazu nicht runter geladen! Vielleicht verzerren die Dein Bild?

Ich meine die Bilder in der rechten inneren Tabelle, wo dein Content steht.

gruss

markus

Link zu diesem Kommentar
Auf anderen Seiten teilen

Ich würde an deiner Stelle nochmal neu anfangen und richtiges, sinnvolles HTML schreiben, anstatt sinnlos Tabellen zu verschachteln!

Zu deiner eigentlichen Frage: Rechnen wir mal zusammen:

1. Quelltext:

150 Pixel + 375 Pixel + 375 Pixel + 150 Pixel = 1255 Pixel

2. Quelltext:

150 Pixel + 375 Pixel + 375 Pixel = 900 Pixel

Irgendwie fehlt also im zweiten Quelltext was... ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Ich glaube du machst was grundsätzliches falsch: Webseiten werden nicht für irgendwelche Auflösungen optimiert. Heute komme ich mit dem 21" TFT bei 1600x1200, morgen mit meinem PDA bei 320xirgendwas und übermorgen surfe ich vielleicht bei deiner Auflösung, habe das Browserfenster aber gar nicht maximiert.

Kleiner Tip: Stelle das Design erstmal um von wild verschachtelten Tabellen auf CSS. Tabellen nimmt man für tabellarische Daten, jegliches Design macht man mit CSS (Tabellenlayouts sind konträr zum Auszeichnungsgedanken). Angaben immer relativ machen, also von Anfang an Prozentangaben.

bis denne, Christian

Link zu diesem Kommentar
Auf anderen Seiten teilen

@Der Kleiner

Oops, sorry. *rotwerd*

Aber das, was ich ausdrücken wollte, dürfte rübergekommen sein, nämlich dass oben im QT mehr Breite definiert ist als unten im QT.

Aber wie smile schon sagte: Fang nochmal neu an und verwende Tabellen nur, wenn wirklich tabellarische Daten vorliegen.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...