Frontpage: Inhalt wird verschoben

Gfelli

Hallo zusammen

Folgendes Problem in Frontpage 2000 (habe es aber auch in 2003 versucht, dort bin ich zum gleichen Ergebnis gekommen): In einer leeren, neuen HTML-Seite lege ich die Seitenränder links und oben auf 0 Pixel fest, erstelle ich eine Tabelle, fxiere deren Breite auf 1003 Pixel, zentriere diese Zelle und setze da ein JPG (1003 x 185 Pixel gross) rein.

Wenn ich nun die HTML-Datei im Internet Explorer 7 öffne, scheint auf den ersten Blick alles normal. Wenn ich die Seite dann aktualisiere, bleibt die Grafik auch noch an ihrem Platz. Wenn ich nun aber in die Adresszeile klicke und mit Enter bestätige (d.h. die gleiche Seite so nochmals neu lade), verschiebt sich die Grafik ein paar Pixel nach links. Bei 1280 x 1024 Bildschirmauflösung ist das eigentlich kein allzu grosses Problem, wenn sich die Tabelle ein wenig verschiebt.

Ich habe die Tabelle allerdings bewusst auf 1003 Pixel festgelegt, damit diese bei einer Auflösung von 1024 x 768 ohne vertikale Scrollbalken genau eingepasst ist. Durch diese Verschiebung allerdings entstehen eben diese unerwünschten Scrollbalken. Die Grafik bleibt vom linken Rand aus gesehen zwar schön bündig, allerdings erhalte ich rechts von der Grafik einen kleinen weissen Rand, welcher durch rüberscrollen sichtbar wird.

Wie kann ich dieses Problem lösen? Vielen Dank für eure Hilfe!

Gruss, Fabio

Dikra

Ohne Quelltext oder Link wird es schwer den Fehler zu finden.

driver

ähm... hast mal ne url ?

jeichi

warum gehst du davon aus, das 1003 pixel bei einer auflösung von 1024 x 768 immer genau ohne scrollleiste auskommen...?

viele user surfen zb mit der offen favoriten-leiste links, oder aber auch zwischen den einzelnen browser gibt es unterschiede ... der opera zb hat links und rechts stärkere rahmen ...?!

warum willst du es außerdem nur auf ie 7 machen?!

für dein problem, wäre toll, wenn du das beispiel hier präsentieren könntest!

Gfelli

@ driver
Ne URL gibt es keine, die Webseite ist noch nicht online.

@ Dikra
Hier der Quelltext:

Zitat

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Test</title>
</head>

<body topmargin="0" leftmargin="0">

<div align="center">
<center>
<table border="0" width="1003" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<p style="margin: 0"></p>
</td>
</tr>
</table>
</center>
</div>

</body>

</html>

Alles anzeigen

Gfelli

@ jeichi
Das mit dem IE7 ist kein Must. War nur ne zusätzliche Info, dass ich es in IE7 getestet habe.
Aber ich muss zugeben, das mit den Favs oder dem Verlauf, welchen einige User offen haben, stimmt schon. Das habe ich nicht berücksichtigt ...

jeichi

zum einen würde ich keine tabellen nehmen, zum anderen warum benutzt du ein div zum zentrieren des gesamten plus extra noch <center>??? ...?

ich würde mal versuchen, die 100% beim <td width='100%'> rauszunehmen.

aber ehrlich gesagt, würde ich das ganz einfach mit einem div (ohne tabelle) versuchen!

Gfelli

Zitat

zum einen würde ich keine tabellen nehmen, zum anderen warum benutzt du ein div zum zentrieren des gesamten plus extra noch <center>??? ...?

Keine Ahnung, wurde von Frontpage automatisch so erstellt. Kenne mich in HTML kaum aus, habe deswegen Frontpage genommen und mit dem Editor gearbeitet.

Zitat

ich würde mal versuchen, die 100% beim <td width='100%'> rauszunehmen.

Habe ich gemacht, das Problem bleibt.

Zitat

aber ehrlich gesagt, würde ich das ganz einfach mit einem div (ohne tabelle) versuchen!

Damit kenne ich mich leider überhaupt nicht aus .

Dikra

Ich denke, es liegt daran, dass der Internet Explorer die Pixel für den Border einfach dazu zählt und so die Tabelle verbreitert, auch wenn gar kein Border angezeigt werden soll. So nach dem Motto, könnte ja sein, dass der User den Rahmen vergessen hat, also halten wir schon mal den Platz dafür frei (Microsoft-Logik).

Aber warum machst du da überhaupt ne Tabelle drum.

<html>

</p>
</div>

</body>

</html>

reicht doch auch aus.

jeichi

hab deinen quelltext jetzt nicht ausprobiert, versuche einfach einen schuss ins blaue ...

Zitat

entweder du versuchst mal diese zeile hier ...
<div style='left: 0px; top: 0px; width: 1003px; height: 185px;'></div>

oder versuch mal folgendes

Zitat

<div align="center">
<center>
<table border="0" width="1003" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><p style="margin: 0"></p></td>
</tr>
</table>
</center>
</div>

Alles anzeigen

... vielleicht sieht man das hier jetzt nicht richtig ... schreib ab der <td> bis zum ende der </td> alles in eine zeile ohne leerzeichen ... (kopier einfach meine zeile) ... bei mir kommt es öfter vor, dass dem ie es nicht taugt, wenn der quelltext auf mehrere zeilen aufgeteilt ist!

Gfelli

@ Dikra und jeichi
Ich habe eure Vorschläge ausprobiert. Leider bleibt bei allen Varianten der vertikale Scrollbalken drin.

Dikra

Füge das mal in den Headbereich ein.

Gfelli

@ Dikra
Das würde funktionieren - allerdings erscheinen jetzt gar keine Scrollbalken mehr, was auch nicht unbedingt die Lösung ist.

Ich fang noch mal von vorne an und erkläre euch, was ich genau vor habe:

Oben an der Seite habe ich eben diese Grafik als Header, welche eine fixe Grösse hat und nicht verzogen werden dürfte. Untendran soll dann links eine Navigation und rechts der Inhalt kommen, beide "Kästchen" sollten eine fixe Breite haben.

Kann ich das anders lösen als mit Tabellen? Ich kenne nur noch die Lösung mit Frames, auf die ich aber erst als Notlösung zurückgreifen wollte.

In erster Linie sehe ich aber eher das Problem des Headers bei den verschiedenen Auflösungen. Mein Wunsch war es, dass bei 1024 x 768 der Header genau in die Breite eingepasst ist, und bei grösseren Auflösungen zentriert sich die Grafik, links und rechts einfach weisse Leerflächen.

Dikra

Mit { overflow:auto; } sollte es aber funktionieren.

Die andere Geschichte lässt sich sicher mit Div-Containern lösen, aber ich glaub, da können dir ein paar andere besser weiterhelfen als ich.

jeichi

Zitat von Gfelli

@ Dikra
Das würde funktionieren - allerdings erscheinen jetzt gar keine Scrollbalken mehr, was auch nicht unbedingt die Lösung ist.

Ich fang noch mal von vorne an und erkläre euch, was ich genau vor habe:

Oben an der Seite habe ich eben diese Grafik als Header, welche eine fixe Grösse hat und nicht verzogen werden dürfte. Untendran soll dann links eine Navigation und rechts der Inhalt kommen, beide "Kästchen" sollten eine fixe Breite haben.

Kann ich das anders lösen als mit Tabellen? Ich kenne nur noch die Lösung mit Frames, auf die ich aber erst als Notlösung zurückgreifen wollte.

In erster Linie sehe ich aber eher das Problem des Headers bei den verschiedenen Auflösungen. Mein Wunsch war es, dass bei 1024 x 768 der Header genau in die Breite eingepasst ist, und bei grösseren Auflösungen zentriert sich die Grafik, links und rechts einfach weisse Leerflächen.

der ie hat das nun mal standardmäßig, dass die horizontale scrollleiste angezeigt wird ...?!

sejuma

Schmeiß mal den ganzen Code raus und probier's mal so:

Code

<div style="width: 1003px;
height: 185px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -501.5px;
margin-top: -92.5px;">
[img]images/header.jpg[/img]
</div>

Gfelli

@ sejuma
Yes, das funktioniert. Vielen Dank!

@ jeichi
Die horizontale Scrollleiste wird doch nicht standardmässig angezeigt..?! Du meinst die vertikale, oder?

Gfelli

Bei meiner Seite gibt's nun noch ein weiteres Problem. Unterhalb des Headers wollte ich dann mit dem Inhalt beginnen, links eine Navigation und rechts der Inhalt. Diese habe ich wie auch den Headerbereich zuerst mit Tabellen gelöst, aber nun stellt sich das Problem des Verschiedens auch.

Wie kann ich das mit diesen Div lösen? Hier der aktuelle HTML-Code:

Zitat

<head>
<title></title>
</head>

<body topmargin="0" leftmargin="0">

<div style="width: 1003px;
height: 185px;
position: absolute;
top: 0%;
left: 50%;
margin-left: -501.5px;
margin-top: 0px;">
<p style="margin: 0">

</div>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<p align="left" style="margin: 0"></p>
<div align="center">
<center>
<table border="0" width="973" cellspacing="0" cellpadding="0">
<tr>
<td width="220" valign="top" bgcolor="#E4E9EF">
<p style="margin-left: 10; margin-right: 0; margin-top: 8; margin-bottom: 0"><font face="Verdana" size="2" color="#FF9900">Home</font></p>
<p style="margin-left: 10; margin-right: 0; margin-top: 8; margin-bottom: 0"><font color="#000000" face="Verdana" size="2">Seite
1</font></p>
<p style="margin-left: 10; margin-right: 0; margin-top: 8; margin-bottom: 0"><font color="#000000" face="Verdana" size="2">Seite
2</font></p>
<p style="margin-left: 10; margin-right: 0; margin-top: 8; margin-bottom: 0"><font color="#000000" face="Verdana" size="2">Seite
3</font></p>
<p style="margin-left: 10; margin-right: 0; margin-top: 8; margin-bottom: 0"><font color="#000000" face="Verdana" size="2">Seite
4</font></p>
<p style="margin-left: 10; margin-right: 0; margin-top: 8; margin-bottom: 0"><font color="#000000" face="Verdana" size="2">Seite
5</font></p>
</td>
<td width="10" valign="top"></td>
<td width="743" valign="top" bgcolor="#E4E9EF">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#A8BACF">
<p style="margin-left: 10; margin-right: 0; margin-top: 6; margin-bottom: 6"><font face="Verdana" size="2" color="#08417C">Home</font></td>
</tr>
<tr>
<td width="100%">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0"><font face="Verdana" size="2">Herzlich
willkommen.</font>
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 0; margin-top: 16; margin-bottom: 0"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>

Alles anzeigen

sejuma

Sorry für meine Direktheit, aber der Quelltext ist entweder Frontpage-Schrott oder in vielerlei Hinsicht nicht sinnvoll.
Wiederholungen wie diese

Code

<p align="left" style="margin: 0"></p>

sollten nicht vorkommen. Auch der Mix von div's und tables sollte in dieser Form nicht vorkommen.

Wenn du dauerhaft mit deiner HP Spaß haben willst, dann trenne dich von Frontpage und lerne etwas HTML und CSS. Die Zeit, die du hier investierst, wird sich sehr schnell amortisieren.
Opfere ein paar Stunden (zwei, drei Nachmittage oder Abende) Zeit und arbeite dich mal durch meine Signatur. Ich habe schon wunderschöne Anfänger-HP's gesehen, die mit diesem wenigen Grundwissen erstellt wurden.

Gfelli8

Zitat von sejuma

Sorry für meine Direktheit...

Kein Problem, deshalb frage ich ja auch .

Zitat von sejuma

... aber der Quelltext ist entweder Frontpage-Schrott oder in vielerlei Hinsicht nicht sinnvoll.

Definitiv die erste Variante!

Tags