ugrás a tartalomhoz

CSS segitség

Hacker1990 · 2008. Szep. 14. (V), 17.00
Szép napot kívánok mndenkinek.
CSS-szel kapcsolatban az lenne a kerdesem,hogy hogyan lehet abszolut pozicionalassal egy div-et vizszintesen közepre igazitani.


......................................................
......................................................
......................................................
. ....................................................
........ .........
........ .........
. .
. .
.......................................

Egy ilyet kellene csinalnom,remelem eszlelhető.A fenti div egy 1000px hosszu, és 250px szeles.A masodik 700px hosszu, és 1000 szeles, valamint 100px-re benne van a az első div-ben.Kösz a segitséget.
‹ optimalizálás mobilra Táblázat helyett...? ›
 ■
1

margin

szabo.b.gabor · 2008. Szep. 14. (V), 20.52
Nem teljesen értettem amit leírtál, de ha fix méretű, akkor azt hiszem vhogy így lehet:
  1. #akarmi{  
  2. position:absolute;  
  3. top:50%;  
  4. margin:-50px; /*amilyen magas, annak a fele..*/  
  5.   
  6. }  
2

css?

ironwill · 2008. Szep. 14. (V), 21.27
szia!

.ize {
position: fixed; //a képernyő azon a pontján marad, ahová pozícionáltad
width: ?px;
height: ?px;
margin: auto;
margin-top: ?px; //a felső pozíció az oldal tetejétől számítva
}

elvileg így is működhet

üdv, Gábor
3

browser támogatás

yaanno · 2008. Szep. 15. (H), 10.57
ironwill: IE6 alatt nincs fix pozíció, csak hackeléssel tudod megoldani. Emellett eléggé valószínűtlen, hogy a kérdező fixen akarná tartani az adott elemet.

Hacker1990: egy html kóddarabka sokat segítene; btw amíg teheted, ne használj position property-t, próbáld margin / padding segítségével
4

Hogyaza DOCTYPE :D

Kecsokoma · 2008. Szep. 19. (P), 15.51
Kedves Mindenki :D

Nem igazan szeretjuk egymast a DIOCTYPE-al :D
Az alabbi kod eleg egyszeru, azt szeretnem, ha a DATA resz mindig kitolteni a maximalis helyet, es a benne levo DATA szoveg mindig kozepen lenne. Ez Mozillaban jo is, de IE alatt csak a DOCTYPE nelkul jo. Hogyan oldalatok meg? Sorry, ha valaki kerdezte mar.

UI.:
DIV es megoldas is nagyon begfelelne, de akkor a DATA termeszetesen scrollozhato legyen. Ez szinten nem akar ugy mukodni ahogy en szeretnem... Mikor Ajax-al kitoltom egy grid resszel szettolja a tablazatot a kepernyo ala...

Udv: Kecso
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.      
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head>  
  6.         <title>Teszt</title>  
  7.         <link href="teszt.css" rel="stylesheet" type="text/css" />  
  8.     </head>  
  9.       
  10.     <body>  
  11.         <table border="0" class="PageTable" cellpadding=0 cellspacing=0>  
  12.             <tr>  
  13.                 <td rowspan="2" class="MenuCell">MENU</td>  
  14.               <td class="HeadCell">HEAD</td>  
  15.             </tr>  
  16.             <tr>  
  17.               <td class="DataCell">DATA</td>  
  18.           </tr>  
  19.     </table>  
  20. </body>  
  21. </html>  
CSS:
  1. .PageTable {  
  2.                         height: 100%;  
  3.                         width: 100%;  
  4.                         margin: 0px;  
  5.                         padding: 0px;  
  6.                         spacing: 0px;  
  7.                         left: 0px;  
  8.                         top: 0px;  
  9.                         right: 0px;  
  10.                         bottom: 0px;  
  11.                         white-space: nowrap;  
  12.                         overflow: hidden;  
  13.                         position: fixed;  
  14. }  
  15.   
  16.   
  17.   
  18. .MenuCell   {  
  19.                         background: #008040;  
  20.                         width: 120px;  
  21.                         height: 100%;  
  22.                         left: 0px;  
  23.                         top: 0px;  
  24.                         right: 0px;  
  25.                         bottom: 0px;  
  26.                         vertical-align: top;  
  27.                         padding-top: 50px;  
  28. }   
  29.   
  30. .HeadCell   {  
  31.                         background: #00AAFD;  
  32.                         height: 120px;  
  33.                         left: 0px;  
  34.                         top: 0px;  
  35.                         right: 0px;  
  36.                         bottom: 0px;  
  37.                         vertical-align: top;  
  38.                         padding-top: 0px;  
  39. }   
  40.   
  41. .DataCell   {  
  42.                         background: #FFAAFD;  
  43.                         height: 100%;  
  44. }