webseite an Auflösung anpassen

korea1 · 26. November 2004

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"> 
<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">

<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

kills · 26. November 2004

vielleicht liegts am CSS?

ich würd sagen da fehlt ne breitenangabe bei dem äußeren Table

korea1 · 26. November 2004

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

Vossi1984 · 26. November 2004

Hi!

Versuch doch mal, die ABSOLUTEN breiten Angabe in dynamische mit % umzuwandeln! Vielleicht hilft das ja schon!?

Krain · 26. November 2004

bindest du in beiden Header die gleiche CSS ein?

korea1 · 26. November 2004

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

korea1 · 26. November 2004

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

kills · 26. November 2004

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?

korea1 · 26. November 2004

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

korea1 · 26. November 2004

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

Krain · 26. November 2004

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

kills · 27. November 2004

Hi,

sorry inzwischen hab ich glaub wirklich Tomaten auf den Augen.
Wo fehlt das e?

Ich hatte die fehlenden Buchstaben in meinem letzten post fett markiert...

FMG · 27. November 2004

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...

Der Kleine · 28. November 2004

1. Quelltext:
150 Pixel + 375 Pixel + 375 Pixel + 150 Pixel = 1255 Pixel

Den hab ich nicht verstanden :floet: .

375+375=750

150+150=300

Gesamt 1050?

smile · 28. November 2004

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

FMG · 28. November 2004

@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.

Anmelden

webseite an Auflösung anpassen

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte