Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

webseite an Auflösung anpassen

Gast korea1
Gast korea1
in Webdesign

Empfohlene Antworten

Veröffentlicht

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

vielleicht liegts am CSS?

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

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

Hi!

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

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

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

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?

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

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

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

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

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

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

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

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.