Avaleht
uus teema   vasta Tarkvara »  WWW »  css: position fixed ja float märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 13:57:54 css: position fixed ja float vasta tsitaadiga
kuidas saavutada sellist asja, et div yks on position fixed ja div kaks floatidakse vasakult div yks külge. div yks suletakse vajadusel jquery abil, nii et mingit konstantset marginit ma div kaks anda ei saa. efekt peaks olema sama, nagu div yks oleks samuti floatidud vasakule.

html:
  1. <!doctype html> 
  2. <html lang="et">
  3. <head> 
  4.   <meta charset="utf-8"> 
  5.   <title>Test</title>
  6.   <style>
  7.     .yks {
  8.       position:fixed;
  9.       width:200px;
  10.       background-color:#ccc;
  11.       height:100%;
  12.     }
  13.    
  14.     .kaks {
  15.       float:left;
  16.       width:600px;
  17.       background-color:#000;
  18.       color:#fff;
  19.     }
  20.   </style>
  21. </head>
  22. <body>
  23.   <div class="yks"></div>
  24.   <div class="kaks">see on nr kaks div mis peaks floatima yks kylge</div>
  25. </body>
  26. </html>

_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andresv
HV kasutaja

liitunud: 06.12.2004



Autoriseeritud ID-kaardiga
sõnum 10.02.2012 17:51:58 vasta tsitaadiga
kui sa juba jquery-t kasutad, siis võid "yks" sulgemise/avamise ajal ka div "kaks" css attribuute muuta sobivaks.

Võid proovida pana sellele "yks" div-ile tavaline div ümber, mis on sama lai ning näidata/peita toda.
Kommentaarid: 5 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 5
tagasi üles
vaata kasutaja infot saada privaatsõnum
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 19:06:40 vasta tsitaadiga
idee oleks selles, et ka ilma jqueryta töötaks. ehk siis kui võtta koodist div yks ära, siis div kaks joondub automaatselt vasakusse äärde...
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 10.02.2012 20:12:17 vasta tsitaadiga
Annad muidugi fixed divile vasakust äärest sama kauguse kui on teine div lai kauguse


*{padding:0px;margin:0px;}
    .yks {

      position:fixed;

      width:200px;

      background-color:#ccc;
   
     left:600px;
    
      height:100%;

    }

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 20:18:45 vasta tsitaadiga
kui üks on fixed, siis kaks -e enam ei huvita yks asukoht. oma marginites ta seda ei arvesta....

ehk siis tahaks sellest css, kus yks on fixed, kaks joondub yks järgi. antud näite puhul siis margin-left 200. oleks vaja, et kui nüüd yks sealt koodist ära võtta, siis kaks margin oleks 0
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 20:33:19 vasta tsitaadiga
mu jutt vist segane ...

ütleme on kaks containerit yks ja kaks. panen mõlemad float left, siis container kaks floatib ennast yks taha paigale, olenevalt siis yks laiusest. ma tahaks, et see yks oleks fixed ja kaks käituks nagu yks oleks kah float. kas sellist asja on võimalik saavutada?

kui mõlemad on float left ja ma võtan yks ära, siis kaks liigub automaatselt brauseri vasakusse serva...
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 10.02.2012 20:47:46 vasta tsitaadiga
Sa ajad vist konteinerite nimed segi, kaotad ikka vasakpoolse eks, kus sees on kiri
see on nr kaks div mis peaks floatima yks kylge
see on sul ju hoopis div.kaks, sellest ka segadus minu poolt. ( kui kaotaksid div.yks siis mida sa veel vasakule liigutad kui div.kaks ongi sul vasakul)
ainult css abil sa seda vist ei saavuta, fixed on ikkagi väga paigal ja ei liigu kuhugi kui numbreid ette ei anna.
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 21:02:23 vasta tsitaadiga
div.yks saab kasutaja jquery abil paremalt vasakule kinni panna! ja sel hetkel peakski see div.kaks lohisema vasakusse äärde. edasine plaan on kirjutada cookie, mis ütleb, et div.yks on kinnipandud ning lehe refreshimisel teda uuesti ei näidata, ennem kui kasutaja seda ei soovi. võimalik, et ma lähenen oma koodiga asjale üldse valet pidi...
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 21:12:00 vasta tsitaadiga
ei
vaja oleks, kui nüüd div.yks kinna panna, kasvõi hide(), siis div.kaks liigub automaatselt äärde. div.yks peab olema fixed

kas seda üldse saab css abil teha?

html:
  1. <!doctype html> 
  2. <html lang="et">
  3. <head> 
  4.   <meta charset="utf-8"> 
  5.   <title>Test</title>
  6.   <script src="jquery-1.7.1.min.js"></script>
  7.   <style>
  8.     body, html {
  9.       margin:0;
  10.     }
  11.     .yks {
  12.       position:fixed;
  13.       width:200px;
  14.       background-color:#666;
  15.       height:100%;
  16.     }
  17.    
  18.     .kaks {
  19.       float:left;
  20.       margin-left:200px;
  21.       width:600px;
  22.       height:1200px;
  23.       background-color:#d8d8d8;
  24.     }
  25.   </style>
  26.   <script>
  27.     $(document).ready(function() {
  28.       $('.close').click(function(e) {
  29.         e.preventDefault();
  30.        
  31.         $('.yks').hide();
  32.       });
  33.     });
  34.   </script>
  35. </head>
  36. <body>
  37.   <div class="yks">see on yks</div>
  38.   <div class="kaks">see on nr kaks div mis peaks floatima yks kylge<br>
  39.   <a href="#" class="close">sule</a></div>
  40. </body>
  41. </html>

_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!

viimati muutis keevitaja 10.02.2012 21:13:47, muudetud 1 kord
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 21:15:19 vasta tsitaadiga
kui panna div.yks float left ja div.kaks margin 0, siis yks sulgemisel läheb kaks vasakusse äärde.
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 23:41:13 vasta tsitaadiga
tundub, et sellist dünaamilist ehitust css-ga siiski teostada ei saa. panen, koodi kuidas lahendasin, ehk kedagi huvita või on mingeid mõtteid...

html:
  1. <!doctype html> 
  2. <html lang="et">
  3. <head> 
  4.   <meta charset="utf-8"> 
  5.   <title>Test</title>
  6.   <script src="jquery-1.7.1.min.js"></script>
  7.   <style>
  8.     body, html {
  9.       margin:0;
  10.       background-color:#666;
  11.     }
  12.    
  13.     .fixed {
  14.       position:fixed;
  15.       width:auto;
  16.       height:100%;
  17.     }
  18.    
  19.     .sidebar {
  20.       float:left;
  21.       width:300px;
  22.       height:100%;
  23.     }
  24.    
  25.     .header {
  26.       float:left;
  27.       width:300px;
  28.       height:1200px;
  29.       background-color:#d8d8d8;
  30.     }
  31.    
  32.     .body {
  33.       margin-left:600px;
  34.       width:600px;
  35.       background-color:red;
  36.       height:2000px;
  37.     }
  38.   </style>
  39.   <script>
  40.     $(document).ready(function() {
  41.       /*$('.sidebar').addClass('closed');
  42.       $('.sidebar').hide();
  43.       $('.body').css('margin-left', 300);*/
  44.      
  45.       $('.close').click(function(e) {
  46.         e.preventDefault();
  47.        
  48.         if($('.sidebar').hasClass('closed')) {
  49.           $('.sidebar').animate({ width : 'show'});
  50.           $('.body').animate({ marginLeft : 600});
  51.           $('.sidebar').removeClass('closed');
  52.         } else {
  53.           $('.sidebar').animate({ width : 'hide'});
  54.           $('.body').animate({ marginLeft : 300});
  55.           $('.sidebar').addClass('closed');
  56.         }
  57.       });
  58.     });
  59.   </script>
  60. </head>
  61. <body>
  62.   <div class="fixed">
  63.     <div class="sidebar">sidebar</div>
  64.     <div class="header"><a href="#" class="close">sule</a></div>
  65.   </div>
  66.   <div class="body">body</div>
  67. </body>
  68. </html>

_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 10.02.2012 23:55:11 vasta tsitaadiga
ai kurja, chrome ja safariga see ei tööta....
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks!
Kommentaarid: 51 loe/lisa Kasutajad arvavad:  :: 1 :: 3 :: 40
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  css: position fixed ja float
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.