Seiten springen horizontal

passat100 · #1 (**permalink**) 22.07.2011, 09:45

Hallo liebe Leute,

in den FAQ hab ich nichts gefunden, deshalb hier mein Problem. Ich hab zum Test eine Seite 2 und eine Seite 3 aufgebaut und stelle fest, das die Seiten horizontal springen.
Hier der Quelltext für Seite 2:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
<!--
body {
	height: 100%;
	margin-bottom: 1px;
	margin-top: 0px;
}
-->
</style>


</head>

<body>
<table width="870" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF9900">

  <tr>
    <td colspan="3">Lorem 1ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem anteLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pre</td>
  </tr>

</table>
</body>
</html>

Hier der Quelltext für Seite 3:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	height: 100%;
	margin-bottom: 1px;
	margin-top: 0px;
}
.Stil1 {
	font-size: 18px
}
-->
</style>

</head>

<body>
<table width="870" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF9900">

  <tr>
    <td colspan="3"><p class="Stil1">Lorem 2ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem anteLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nedolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem anteLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, elec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, ele</p>
    <p class="Stil1">        ifend ac, enim. Aliquam lorem anteLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem anteLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis anatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, ju</p></td>
  </tr>

</table>
</body>
</html>

Nach allem was ich bis jetzt herausgefunden habe hat es etwas mit dem Scrollbalken zu tun, bei der Seite mit mehr Inhalt automatisch kommt. Ich habe auch schon

Code:

<!--
body {
	height: 100%;
	margin-bottom: 1px;
	margin-top: 0px;
}
-->

rausgenommen aber das nützt auch nix.
Kann mir jemand einen Tipp geben? Vielen Dank!

zeji · #2 (**permalink**) 22.07.2011, 10:07

Wo ist das Problem? Wenn die Seite länger wird, erscheint ein Scrollbalken, was ganz normal ist und auch so sein sollte. Dass der Inhalt dadurch natürlich weniger Platz hat ist auch klar, somit Springt der natürlich ein bischen nach links..

Du kannst zwar Scrollbalken mit overflow:hidden ausblenden, wobei mir da der Sinn nicht ganz klar wird.

Sollte ich dein Problem dennoch nicht ganz verstanden haben, bitte erklär es nochmal etwas genauer, im besten Fall mit einem live-Fallbeispiel

Gruß

passat100 · #3 (**permalink**) 22.07.2011, 10:20

Hi, danke für Deine schnelle Antwort. Geh mal auf:
Homepage

Wenn Du dann von Home auf Fördermittel springst kannst Du den Sprung sehen. Vielleicht ist mir das früher nie aufgefallen weil die Seiten immer Scrollbalken hatten, aber ich finde den Effekt einfach unschön wenn man wie das bei diesen Seiten der Fall ist immer zwischen Seiten mit und ohne Scrollbalken hin- und herspringt und die Seiten dadurch rumzappeln.
Gruß von passat

fricca · #4 (**permalink**) 22.07.2011, 10:23

Die Angaben für body bringen nichts, weil der Bezug für die Prozent-Höhe fehlt. html wäre der richtige Adressat -- und dann besser mit Padding, nicht Margin.
Noch besser ist overflow-y:scroll. Dann erscheint bei wenig Inhalt nur ein Geisterscrollbalken (wie im IE).

Bitte: Weg mit den HTML-Kommentaren im Stylesheet. Das ist ein Relikt aus längst vergangenen Zeiten.

edit: Hm, apropos längst vergangene Zeiten. Die Zeiten für Tabellenlayouts sind auch längst vergangen.

passat100 · #5 (**permalink**) 22.07.2011, 11:11

Corina, vielen Dank für die schnelle Hilfe.

Code:

overflow-y:scroll

Das hat mir erst mal weitergeholfen und die Seiten sind jetzt stabil.
Du hast natürlich vollkommen Recht, Tabellenseiten usw. Ich mache nur noch sporadisch Webdesign und habe jetzt nicht mehr die Zeit dazu mich in CSS wirklich einzuarbeiten. Bei dem, was ich vereinzelt noch mache hilft mir dann Dreamweaver.
Nochmal: Vielen Dank!!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bücher zu verkaufen	Rupper	Offtopic	2	08.07.2011 13:18
Bücher zu verkaufen	Geronimo	Offtopic	4	15.05.2009 23:14
Hintergrundbild vertikal UND horizontal zentrieren?	yggdrasil	CSS	3	06.07.2008 10:19
Bei Relaunch alte Seiten mit Redirect auf neue Seiten umlenken?	DieterWelzel	Offtopic	5	02.11.2006 21:16
Wie ist es möglich dass Valide Seiten falsch angezeigt werde	albert thommen	(X)HTML	6	26.10.2005 23:16