ugrás a tartalomhoz

javascript+css help

cerberodas · 2007. Jún. 17. (V), 23.03
Az a célom, hogy egy ablakban középen jelenjen meg a fix magasságú tartalom. Erre írtam egy java scriptet de nem akar működni. Már vagy 3 órája nézem és irogatok át rajta mindent, de nem megy sehogy:(
java scriptben totál kezdő vagyok szoval valószínüleg vagy valami kis hiba van vagy totálidan roszul csinálok valamit... Ha valaki tudna segítani azt nagyon megköszönném.



[colorer=<script language="javascript">]<script language="javascript">
var margin = getCSSRule('#main');
margin.style.margin-top = string((window.innerHeight-585)/2) + 'px';
</script>[/colorer]
 
1

CSS

janoszen · 2007. Jún. 17. (V), 23.46
Ezt puszta CSS-sel is meg tudod csinálni, nem kell ide javascript. Pontosan ugyanazt kell csináld, tehát valahogy így:
  1. html, body  
  2. {  
  3.  height:100%;  
  4. }  
  5.   
  6. body  
  7. {  
  8.  margin-top:50%;  
  9. }  
  10.   
  11. #main  
  12. {  
  13.  height:582px;  
  14.  margin-top:-291px;  
  15. }  
2

css

cerberodas · 2007. Jún. 18. (H), 01.01
köszönöm a gyors választ, de egy fülugró ablakban van az oldal, és ott sajnos ez nekem nem működött.
3

Fölugró?

janoszen · 2007. Jún. 18. (H), 08.53
Mi köze a fölugró ablakhoz? Az is elvileg egy HTML-t tölt be és arra kell ráapplikálni ezt a CSS-t.
4

fölugró

cerberodas · 2007. Jún. 18. (H), 12.19
bocs elnéztem, normál ablaknál se működött csak mivel kisebb az ablak magassága olyan felbontásnál aminél próbáltam kb középre jött ki. Egyszerűen az 50% nem az ablak közepén van.

módosítás:

Köszönöm a segítséget megoldottam végre... és nem értem mit szenvedtem vele ennyit tegnap:P ha úgy ahogy írtad nem is működött egy abszolut pozíciójú divet beraktam 50% ra és ahoz képes mozgatva a tartalmat már jó lett.
5

ha fix a méret, akkor egyszerű

Gixx · 2007. Jún. 19. (K), 09.04
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu">  
  3.   <head>  
  4.     <title>Teszt</title>  
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6.     <meta http-equiv="content-style-type" content="text/css; charset=utf-8" />  
  7.     <meta http-equiv="content-script-type" content="text/javascript; charset=utf-8" />  
  8.     <meta http-equiv="content-language" content="hu" />  
  9.     <style type="text/css">  
  10.       html,body{width:100%;height:100%;margin:0;padding:0} /* erdemes mindig ezzel inditani */  
  11.         
  12.       div#kozepre{  
  13.         position:absolute;  
  14.         width:500px !important;  
  15.         margin-left:-250px; /* a szelesseg fele */  
  16.         height:200px !important;  
  17.         margin-top:-100px; /* a magassag fele */  
  18.         top:50%;  
  19.         left:50%;  
  20.         overflow:auto; /* nem fog nyulni a tartalommal, nem mozdul el */  
  21.         border:1px solid #000000;  
  22.       }  
  23.     </style>  
  24.   </head>  
  25.   <body>  
  26.     <div id="kozepre"><p>ahoj</p></div>  
  27.   </body>  
  28. </html>