ugrás a tartalomhoz

a div és tartalma mindig kövesse a scrollbarral való mozgatást

Tanul0 · 2009. Már. 20. (P), 09.40
Sziasztok!

Olyan problémám lenne, hogy nem tudom megoldani hogy egy réteg amiben benne van egy table kövesse a div méretét, hogy megértsétek a kód:

<html>
<head>
<title>Honlapom</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="oldal.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="fejlec">                              //EZ A PROBLÉMÁS RÉSZ
<table width="100%" height="77" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td align="left" valign="top" width="425" background="images/fejlec_01.png">
			<div style="width: 425; overflow: hidden"><embed src="images/fejlec1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="38" border="0"></embed></div></td>
		<td background="images/fejlec_02.png">&nbsp;</td>
		<td width="490" height="77" background="images/fejlec_03.png"><?php include("tartalom/login.php"); ?></td>
	</tr>
</table>
</div>
<div class="tartalom">
  <table align="center" width="986" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/index_01.png" width="6" height="7" alt=""></td>
		<td colspan="2">
			<img src="images/index_02.png" width="980" height="7" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_03.png" width="6" height="20" alt=""></td>
		<td colspan="2"><img src="images/index_04.png" width="980" height="20" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_05.png" width="6" height="170" alt=""></td>
		<td colspan="2">
			<img src="images/index_06.png" width="980" height="170" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_07.png" width="6" height="20" alt=""></td>
		<td colspan="2">
			<img src="images/index_08.png" width="980" height="20" alt=""></td>
	</tr>
	<tr>
		<td width="6" rowspan="2" background="images/index_09.png">&nbsp;</td>
		<td width="250" rowspan="2" background="images/index_12.png">&nbsp;</td>
	    <td align="center" width="730" background="images/index_13.png"><img src="images/headlines.png" width="727" height="120" border="0"></td>
	</tr>
	<tr>
	  <td align="center" background="images/index_13.png">
	  <table width="729" border="0" cellspacing="0" cellpadding="0">
	          <tr>
	            <td align="center">
				<div style="padding-bottom:5px; padding-left:5px; padding-right:5px; padding-top:5px; overflow:hidden;">
<?php 
	if(!isset($oldal)) $oldal="hirek";
      $invalide = array('/','/\/',':','.');
      $oldal = str_replace($invalide,' ',$oldal);
      if(!file_exists("tartalom/".$oldal.".php")) $oldal = "hirek";
      include("tartalom/".$oldal.".php");
?>
				</div>
				</td>
	          </tr>
	        </table>
	  </td>
    </tr>
	
	<tr>
		<td>
			<img src="images/index_14.png" width="6" height="20" alt=""></td>
		<td align="center" colspan="2">
			<img src="images/index_15.png" width="980" height="20" alt=""></td>
	</tr>
</table>
</div>
</body>
</html>
screenshotok:
Teljes méretű ablaknél tökéletes:
link_1
lekicsinyített ablaknál szintén:
link_2
scrollbar elcsúsztatásánál ez a hiba:
link_3

Mi lehet a megoldás?
‹ div megjelenites/eltuntetes js-tel vertikalisan kozepre rendezes ill. egymas melle tenni ›
 ■
1

jah aki nem értené pontosan

Tanul0 · 2009. Már. 20. (P), 09.42
jah aki nem értené pontosan miről is van szó annak: http://map.xzn.hu
3

Position: fixed

janoszen · 2009. Már. 20. (P), 10.51
Ha jól értem, Te olyat szeretnél kvâzi mint egy frame, hogy egy adott blokk a scrolltól függetlenül mindig ugyanott marad a képernyőn? Ez esetben Neked a position: fixed CSS tulajdonságra illetve az IEs workaroundjára van szükséged.

Ui nem lett volna szükséges bevágnod az egészet, elég lett volna az a lecsupaszított is, amelyhez a hiba keresése sorân bizonyára eljutottál. Ugye, készült ilyen, mielőtt kérdeztél?
4

ki is emeltem a kódban a

Tanul0 · 2009. Már. 20. (P), 11.00
ki is emeltem a kódban a problémás részt :) sajnos nem az szeretném, hogy a scrolltól független legyen, hanem ha valaki megnyitja az oldalt, és mondjuk a monitora csak 800x600-as felbontásban van, akkor nem fér ki a teljes oldal ezért jobb és bal irányba lehet mozgatni az oldalt. Nos az ablak méretéhez igazodik a fejléc, de ha a scrollal elhúzom jobb irányba akkor már nem szélesedik ki hanem van egy csúnya szürke rész ami a képen is látszik.
2

közös konténer

gex · 2009. Már. 20. (P), 10.47
rakd az egészet egy közös befoglaló elembe, így ha a benne lévő két blokk típusú elem közül bármelyik szélesebb mint az ablak, akkor egyúttal megnyújtja a befoglaló elemet és így a másik blokk elemet is.
5

ez pontosan hogy érted?

Tanul0 · 2009. Már. 20. (P), 11.03
ez pontosan hogy érted? melyiket hova?
6

kód

gex · 2009. Már. 20. (P), 11.29

<div>
    <div id="header">
        <!-- fejléc -->
    </div>
    <div id="content">
        <!-- tartalom -->
    </div>
</div>


#header {
}
#content {
    width: 986px;
    margin: 0 auto;
}
jó lenne ha nem táblázatot használnál a layout kialakításához, meg az is ha valid lenne a html.
7

kipróbáltam, itt más probléma

Tanul0 · 2009. Már. 20. (P), 11.45
kipróbáltam, itt más probléma jön elő, megcsináltam valid-ra, azthiszem megpróbálom a fejlécet csak div elemekből összerakni.
8

más probléma

gex · 2009. Már. 20. (P), 11.50
ez a "más probléma" nem volt túl konkrét. :)
9

maga az eredeti probléma is

Tanul0 · 2009. Már. 20. (P), 12.05
maga az eredeti probléma is jelentkezett, plusz az, hogy ha összehúztam az ablakot kicsire a flash a login rész fölé csúszott
10

flash-sel kapcsolatban: nekem

mahoo · 2009. Már. 20. (P), 16.40
flash-sel kapcsolatban: nekem hasonlo volt a hiba, bar nem teljesen ue. de ez segitett:
<param name="wmode" value="opaque" /> vagy keress ra a wmode-ra.
11

nem adtal meg szelesseget az

mahoo · 2009. Már. 20. (P), 16.58
nem adtal meg szelesseget az elso tablazat kozepso cellajanal! ezert szerintem automatikusan csokkenti annak meretet, ha kisebbre veszed a bongeszod. ha jobban csokkented mint 285px akkor mar nem valtozik semmi, mert a ket szelso cellanak van fix szelesseg adata.
persze lehet hogy ez mind nem igaz :)
12

ilyenre gondoltál?

gex · 2009. Már. 20. (P), 19.06
ilyenre gondoltál? min-width tulajdonság a lényeg benne, ie 7-estől megy, ff, opera, safari, chrome meg eleve ismeri. ie6-ra tudsz pl css expression-t írni, de ezt már meghagyom neked.
13

szép a megoldásod,

eashlon · 2009. Már. 20. (P), 22.13
és roppant egyszerű is :)
huh, hogy én mit szívtam, amikor nem tudtam meggyőzni a grafikust, h a "jobbfelső kifutóra" pozíció nem feltétlen hasznos a webalapú médiában. Sajnos nm értette miért, akkor gyártottam ilyet, de lényegesen gányabb volt (ie box,float bajok)
14

Siker!

Tanul0 · 2009. Már. 21. (Szo), 03.36
Igen, pont erre!