Layout verschiebt sich bei kleinerem Fenster

Dragon26mFR · 26.07.2005, 13:40

Das Layout meiner Seite verschiebt sich und die grafiken werden teilweise doppelt angezeigt wenn ich das fenster kleiner mache.
Ich habe die seite mit Tabellen gemacht und 1 iframe.
Die Seite ist größtenteils mit grafiken hinterlegt. ( in Photoshop gesliced )
Wenn die Seite auf vollbild (1024) geöffnet wird ist die anzeige ok.

Wie kann ich es verhindern das es alles verschiebt wenn ich die seite verkleinere ???

Baltasar · 26.07.2005, 13:46

1.) poste mal code
2.) anständig coden. jetzt mal ernsthaft: was erwartest du? wenn du willst, dass die seite immer das komplette fenster ausfüllt arbeitest du mit prozent-angaben und gestaltest das ganze so, dass es keine oder keinen nennenswerten qualitätsverluste gibt, wenn man das fenster verkleinert. oder du baust die seite mit festen px-angaben so auf, dass es für auflösungen ab 8ßßx600 immer gleichbleibend angezeigt wird.

aber poste erstmal den code!

Dragon26mFR · 26.07.2005, 14:01

Code:

<html>
<head>
<title>::: Startseite:::</title>
<style>
    @import url(./liste.css);
</style>
    <script language="javascript" src="./script/domLib.js"></script>
    <script language="javascript" src="./script/domMenu.js"></script>
    <script language="javascript" src="./script/domMenu_items.js"></script>
</head>
<body scroll='no'>


<TABLE width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
	<tr height="10px">
		<td background="./Bilder/hauptslice2_01.gif" width="11px"></td>
		<td background="./Bilder/hauptslice2_02.gif" width="211px"></td>
		<td background="./Bilder/hauptslice2_03.gif"></td>
		<td background="./Bilder/hauptslice2_04.gif" width="17px"></td>
	</tr>
	<tr height="43px">
		<td background="./Bilder/hauptslice2_05.gif" width="11px"></td>
		<td background="./Bilder/hauptslice2_06.gif" width="211px"></td>
		<td rowspan="2" bgcolor="#7E8082">


<table width="100%" height="100%" align="center" border="0" cellspacing="0" cellpadding="0" valign="middle">
<tr>
<td align="right">
<div>
[img]./image/amg3.gif[/img]
<div style="position:relative; display:inline; top:-73px; right:50 px;">
       [img]./image/Drachen4.gif[/img]
</div>      </div>


</td>
</tr>
</table>


  </td>
		<td background="./Bilder/hauptslice2_08.gif" width="17px"></td>
	</tr>
 
	<tr height="60px">
		<td background="./Bilder/hauptslice2_09.gif" width="11px"></td>
  <td bgcolor="#7E8082" width="211px"></td>

		<td background="./Bilder/hauptslice2_12.gif" width="17px"></td>
	</tr>
	<tr height="100%">
		<td background="./Bilder/hauptslice2_13.gif" width="11px"></td>
		<td colspan="2" bgcolor="#7E8082" height="100%">
  

<table width="100%" height="100%" align="center" valign="top" border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="20%">


<table width="194px" border="0" cellpadding="0" cellspacing="0">
	<tr height="42px">
		<td COLSPAN="3">
			[img]Bilder/navi3_01.gif[/img]</td>
	</tr>
	<tr height="18px">
		<td background="./Bilder/navi3_02.gif" width="24px"></td>
		<td background="./Bilder/navi3_03.gif" width="140px"></td>
		<td background="./Bilder/navi3_04.gif" width="30px"></td>
	</tr>
	<tr>
		<td background="./Bilder/navi3_05.gif" width="24px"></td>
		<td bgcolor="#91AEF9" >

    <div align="center" id="domMenu_vertical">

        <script language="javascript">
  domMenu_activate('domMenu_vertical');
        </script>
   </div>


        </td>
		<td background="./Bilder/navi3_07.gif" width="30px"></td>
	</tr>
	<tr height="15px">
		<td background="./Bilder/navi3_08.gif" width="24px"></td>
		<td background="./Bilder/navi3_09.gif" width="140px"></td>
		<td background="./Bilder/navi3_10.gif" width="30px"></td>
	</tr>
	<tr height="50px">
		<td COLSPAN="3">
			[img]Bilder/navi3_11.gif[/img]</td>
	</tr>
</table>


</td>
<td width="80%" height="100%">


<table width="100%" height="100%" align="center" valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="100%">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
	<tr height="29px">
		<td background="./Bilder/haupt1_01.gif" width="31px"></td>
		<td background="./Bilder/haupt1_02.gif"></td>
		<td background="./Bilder/haupt1_03.gif" width="35px"></td>
	</tr>
	<tr>
		<td background="./Bilder/haupt1_04.gif" width="31px"></td>
  <td background="./Bilder/haupt1_05.gif" height="100%">


<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="100%">
<td height="100%">
<iframe src="./seiten/home.php" width="100%" height="100%" name="haupt" id="testiframe" frameborder="0"></iframe>
</td>
</tr>
</table>


  </td>
		<td background="./Bilder/haupt1_06.gif" width="35px"></td>
	</tr>
	<tr height="26px">
		<td background="./Bilder/haupt1_07.gif" width="31px"></td>
		<td background="./Bilder/haupt1_08.gif"></td>
		<td background="./Bilder/haupt1_09.gif" width="35px"></td>
	</tr>
</table>

</td>
</tr>
</table>


</td>
</tr>
</table>


</td>
		<td background="./Bilder/hauptslice2_16.gif" width="17px"></td>
	</tr>
	<tr height="19px">
		<td background="./Bilder/hauptslice2_17.gif" width="11px"></td>
		<td background="./Bilder/hauptslice2_18.gif" width="211px"></td>
		<td background="./Bilder/hauptslice2_19.gif"></td>
		<td background="./Bilder/hauptslice2_20.gif" width="17px"></td>
	</tr>
</table>


</body>
</html>

Dragon26mFR · 26.07.2005, 14:06

Das ist der quell.
*nicht schön aber selten* :wink:
Hoffe man kann was erkennen.
Die seite steht leider noch nicht im netz.

Baltasar · 26.07.2005, 14:34

das erste was mir auffällt: es gibt kein "height="100%"

style="height:100%;" müsste es sein.

Dragon26mFR · 26.07.2005, 14:46

hmmm.... ok habs mal bei mir geändert aber die anzeige ist die selbe.

OK hab den fehler gefunden und bräuchte hilfe das zu ändern.
Bei:

Code:

<div>
[img]./image/amg3.gif[/img]
<div style="position:relative; display:inline; top:-73px; right:50 px;">
       [img]./image/Drachen4.gif[/img]
</div>      </div>

Wird das innere DIV in eine neue zeile gemacht und verschiebt somit alles.
(der drache rutsch runter und vergrößert das gesamte tr.)
Wie kann ich es machen das das nicht passiert ?
der drache soll leicht versetzt über dem anderen bild schweben.

Baltasar · 26.07.2005, 18:46

guck dir das mal an: http://www.css4you.de/z-index.html

Dragon26mFR · 26.07.2005, 21:10

Hmmm.... geht leider auch nicht da ich ja nur relativ positioniere und nicht absolut (würde ja auch alles verschieben)

Es scheint so als würde der drache als neues bild angenommen und durch fehlenden platz wird es druntergeschoben. Daher macht es eine neue zeile und verschiebt alles.
Erst dann macht es die relative positionierung.

Bin echt noch am verzweifeln.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fenster schließen und neu öffnen lassen	max-dhom	HTML, Usability und Barrierefreiheit	2	01.04.2007 20:55
Ergebnis aus Fenster 1 in Fenster 2 übernehmen	HaraDej	HTML, Usability und Barrierefreiheit	2	21.04.2006 14:10
Verweis in bestimmtem Fenster öffnen		HTML, Usability und Barrierefreiheit	3	11.02.2006 23:18
[Erledigt] closed()-Abfrage aus beliebigem Fenster		HTML, Usability und Barrierefreiheit	2	16.01.2006 19:01
[Erledigt] Fenster schließt sich nach submit()		HTML, Usability und Barrierefreiheit	2	11.11.2005 15:25
[Erledigt] Link aus pop-up in parent Fenster ausführen		HTML, Usability und Barrierefreiheit	2	23.05.2005 23:03
Links mit verschiedenen Inhalten und extra Fenster		HTML, Usability und Barrierefreiheit	6	27.04.2005 22:23
[Erledigt] JavaScript +mehrereFenster		HTML, Usability und Barrierefreiheit	5	03.02.2005 15:08
Neues Fenster Größe und Position		HTML, Usability und Barrierefreiheit	9	26.10.2004 14:22
[Erledigt] Popup Fenster...		HTML, Usability und Barrierefreiheit	4	18.10.2004 11:48
[Erledigt] on the fly fenster		HTML, Usability und Barrierefreiheit	0	09.09.2004 22:06
[Erledigt] neues Fenster mit JavaScript mit Brain!		HTML, Usability und Barrierefreiheit	3	05.09.2004 13:41
Neues Fenster mit Php öffnen	Pimbolie1979	PHP Tipps 2004	8	17.08.2004 10:04
[Erledigt] Fenster öffnen		HTML, Usability und Barrierefreiheit	2	16.08.2004 13:19
Modales Fenster zur Eingabe von Daten		HTML, Usability und Barrierefreiheit	0	22.06.2004 12:52

26.07.2005, 13:40
Dragon26mFR Erfahrener Benutzer Registriert seit: 29.04.2005 Beiträge: 323	Layout verschiebt sich bei kleinerem Fenster Das Layout meiner Seite verschiebt sich und die grafiken werden teilweise doppelt angezeigt wenn ich das fenster kleiner mache. Ich habe die seite mit Tabellen gemacht und 1 iframe. Die Seite ist größtenteils mit grafiken hinterlegt. ( in Photoshop gesliced ) Wenn die Seite auf vollbild (1024) geöffnet wird ist die anzeige ok. Wie kann ich es verhindern das es alles verschiebt wenn ich die seite verkleinere ??? __________________ Das Leben ist ein scheiß Spiel, aber die Grafik ist einfach geil


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.07.2005, 13:46
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	1.) poste mal code 2.) anständig coden. jetzt mal ernsthaft: was erwartest du? wenn du willst, dass die seite immer das komplette fenster ausfüllt arbeitest du mit prozent-angaben und gestaltest das ganze so, dass es keine oder keinen nennenswerten qualitätsverluste gibt, wenn man das fenster verkleinert. oder du baust die seite mit festen px-angaben so auf, dass es für auflösungen ab 8ßßx600 immer gleichbleibend angezeigt wird. aber poste erstmal den code!

26.07.2005, 14:06
Dragon26mFR Erfahrener Benutzer Registriert seit: 29.04.2005 Beiträge: 323	Das ist der quell. nicht schön aber selten :wink: Hoffe man kann was erkennen. Die seite steht leider noch nicht im netz. __________________ Das Leben ist ein scheiß Spiel, aber die Grafik ist einfach geil

26.07.2005, 14:34
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	das erste was mir auffällt: es gibt kein "height="100%" style="height:100%;" müsste es sein.

26.07.2005, 14:46
Dragon26mFR Erfahrener Benutzer Registriert seit: 29.04.2005 Beiträge: 323	hmmm.... ok habs mal bei mir geändert aber die anzeige ist die selbe. OK hab den fehler gefunden und bräuchte hilfe das zu ändern. Bei: Code: <div> [img]./image/amg3.gif[/img] <div style="position:relative; display:inline; top:-73px; right:50 px;"> [img]./image/Drachen4.gif[/img] </div> </div> Wird das innere DIV in eine neue zeile gemacht und verschiebt somit alles. (der drache rutsch runter und vergrößert das gesamte tr.) Wie kann ich es machen das das nicht passiert ? der drache soll leicht versetzt über dem anderen bild schweben. __________________ Das Leben ist ein scheiß Spiel, aber die Grafik ist einfach geil

26.07.2005, 18:46
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	guck dir das mal an: http://www.css4you.de/z-index.html

26.07.2005, 21:10
Dragon26mFR Erfahrener Benutzer Registriert seit: 29.04.2005 Beiträge: 323	Hmmm.... geht leider auch nicht da ich ja nur relativ positioniere und nicht absolut (würde ja auch alles verschieben) Es scheint so als würde der drache als neues bild angenommen und durch fehlenden platz wird es druntergeschoben. Daher macht es eine neue zeile und verschiebt alles. Erst dann macht es die relative positionierung. Bin echt noch am verzweifeln. __________________ Das Leben ist ein scheiß Spiel, aber die Grafik ist einfach geil