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:
  1. <html>  
  2. <head>  
  3. <title>Honlapom</title>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <link href="oldal.css" rel="stylesheet" type="text/css">  
  6. </head>  
  7. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  
  8. <div class="fejlec">                              //EZ A PROBLÉMÁS RÉSZ  
  9. <table width="100%" height="77" border="0" cellpadding="0" cellspacing="0">  
  10.     <tr>  
  11.         <td align="left" valign="top" width="425" background="images/fejlec_01.png">  
  12.             <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>  
  13.         <td background="images/fejlec_02.png">&nbsp;</td>  
  14.         <td width="490" height="77" background="images/fejlec_03.png"><?php include("tartalom/login.php"); ?></td>  
  15.     </tr>  
  16. </table>  
  17. </div>  
  18. <div class="tartalom">  
  19.   <table align="center" width="986" border="0" cellpadding="0" cellspacing="0">  
  20.     <tr>  
  21.         <td>  
  22.             <img src="images/index_01.png" width="6" height="7" alt=""></td>  
  23.         <td colspan="2">  
  24.             <img src="images/index_02.png" width="980" height="7" alt=""></td>  
  25.     </tr>  
  26.     <tr>  
  27.         <td>  
  28.             <img src="images/index_03.png" width="6" height="20" alt=""></td>  
  29.         <td colspan="2"><img src="images/index_04.png" width="980" height="20" alt=""></td>  
  30.     </tr>  
  31.     <tr>  
  32.         <td>  
  33.             <img src="images/index_05.png" width="6" height="170" alt=""></td>  
  34.         <td colspan="2">  
  35.             <img src="images/index_06.png" width="980" height="170" alt=""></td>  
  36.     </tr>  
  37.     <tr>  
  38.         <td>  
  39.             <img src="images/index_07.png" width="6" height="20" alt=""></td>  
  40.         <td colspan="2">  
  41.             <img src="images/index_08.png" width="980" height="20" alt=""></td>  
  42.     </tr>  
  43.     <tr>  
  44.         <td width="6" rowspan="2" background="images/index_09.png">&nbsp;</td>  
  45.         <td width="250" rowspan="2" background="images/index_12.png">&nbsp;</td>  
  46.         <td align="center" width="730" background="images/index_13.png"><img src="images/headlines.png" width="727" height="120" border="0"></td>  
  47.     </tr>  
  48.     <tr>  
  49.       <td align="center" background="images/index_13.png">  
  50.       <table width="729" border="0" cellspacing="0" cellpadding="0">  
  51.               <tr>  
  52.                 <td align="center">  
  53.                 <div style="padding-bottom:5px; padding-left:5px; padding-right:5px; padding-top:5px; overflow:hidden;">  
  54. <?php   
  55.     if(!isset($oldal)) $oldal="hirek";  
  56.       $invalide = array('/','/\/',':','.');  
  57.       $oldal = str_replace($invalide,' ',$oldal);  
  58.       if(!file_exists("tartalom/".$oldal.".php")) $oldal = "hirek";  
  59.       include("tartalom/".$oldal.".php");  
  60. ?>  
  61.                 </div>  
  62.                 </td>  
  63.               </tr>  
  64.             </table>  
  65.       </td>  
  66.     </tr>  
  67.       
  68.     <tr>  
  69.         <td>  
  70.             <img src="images/index_14.png" width="6" height="20" alt=""></td>  
  71.         <td align="center" colspan="2">  
  72.             <img src="images/index_15.png" width="980" height="20" alt=""></td>  
  73.     </tr>  
  74. </table>  
  75. </div>  
  76. </body>  
  77. </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
  1. <div>  
  2.     <div id="header">  
  3.         <!-- fejléc -->  
  4.     </div>  
  5.     <div id="content">  
  6.         <!-- tartalom -->  
  7.     </div>  
  8. </div>  
  1. #header {  
  2. }  
  3. #content {  
  4.     width: 986px;  
  5.     margin: 0 auto;  
  6. }  
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!