Avaleht
uus teema   vasta Tarkvara »  WWW »  CSS vertical-align 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:  
raitl
HV veteran


liitunud: 20.01.2002



Autoriseeritud ID-kaardiga
sõnum 25.05.2010 08:49:56 CSS vertical-align vasta tsitaadiga
Vaja hulk DIV'e ritta seada nende keskjoone järgi. Kõik DIV'id on erineva kõrgusega ja kõrgused on teadmata. Ei karga mingit mõistlikku lahendust pähe.
Kommentaarid: 166 loe/lisa Kasutajad arvavad:  :: 1 :: 0 :: 147
tagasi üles
vaata kasutaja infot saada privaatsõnum
Traf
Kreisi kasutaja

liitunud: 04.12.2007
sõnum 25.05.2010 08:57:51 vasta tsitaadiga
alustaks äkki sellest, et kuidas sa need divid üksteise kõrvale saad? divid on block tüüpi elemendid ja võtavad endale tavaliselt terve laiuse.
Kommentaarid: 49 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 48
tagasi üles
vaata kasutaja infot saada privaatsõnum
raitl
HV veteran


liitunud: 20.01.2002



Autoriseeritud ID-kaardiga
sõnum 25.05.2010 09:30:06 vasta tsitaadiga
HTML

<div class="Container">
   
   <div class="panel" id="panel_1">
      
      <div class="PFinside">
         <img src="img.jpg" alt="picture" />
         <h2>Heading</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar, turpis id sagittis tempor, magna urna laoreet diam, sit amet malesuada tortor turpis non ligula. Quisque pretium congue dapibus. Nulla facilisi. Vivamus at faucibus libero.</p>
      </div>
   </div>
   
   <div class="panel" id="panel_2">
      
      <div class="PFinside">
         <img src="img.jpg" alt="picture" />
         <h2>Heading</h2>
         <p>Lorem ipsum</p>
      </div>
   </div>
   
   <div class="panel" id="panel_3">
      
      <div class="PFinside">
         <img src="img.jpg" alt="picture" />
         <h2>Heading</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar, turpis id sagittis tempor, magna urna laoreet diam, sit amet malesuada tortor turpis non ligula. Quisque pretium congue dapibus. Nulla facilisi. Vivamus at faucibus libero. Phasellus lacinia, felis id bibendum dictum, erat metus fermentum elit, sed varius nibh velit id turpis. Curabitur felis dui, pellentesque ut tincidunt nec, laoreet non sapien. Pellentesque imperdiet commodo mauris non feugiat. </p>
      </div>
   </div>
</div>


CSS

.Container {
   width:2000px;
   height:400px;
   position: relative;
   }
   
   .Container div.panel {
   float:left;
   padding: 10px;
   width: 274px;
   
   }
   
   .PFinside {
   padding: 10px;
   border: 1px solid red;
   }
Kommentaarid: 166 loe/lisa Kasutajad arvavad:  :: 1 :: 0 :: 147
tagasi üles
vaata kasutaja infot saada privaatsõnum
Alan
HV veteran
Alan

liitunud: 12.02.2008



Autoriseeritud ID-kaardiga
sõnum 25.05.2010 10:10:50 vasta tsitaadiga
Traf kirjutas:
alustaks äkki sellest, et kuidas sa need divid üksteise kõrvale saad? divid on block tüüpi elemendid ja võtavad endale tavaliselt terve laiuse.


No see peaks olema küll CSS most-basic-knowledge, et kuidas divid kõrvuti saada!
Aga DIVide siseselt vertikaalset joondust saada nii lihtne ei olegi.
Üks variant on selline:
css:
  1. display: table-cell;
  2. vertical-align: middle


Teine variant on javascriptiga DOM ready-s offsetHeighti abil näiteks divi kõrgus tuvastada ja seejärel line-height=divHeight px näiteks...
Kommentaarid: 131 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 121
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
raitl
HV veteran


liitunud: 20.01.2002



Autoriseeritud ID-kaardiga
sõnum 25.05.2010 10:24:08 vasta tsitaadiga
tsitaat:
display:table-cell

kuidas IE7 ja IE8 sellesse suhtuvad?
Kommentaarid: 166 loe/lisa Kasutajad arvavad:  :: 1 :: 0 :: 147
tagasi üles
vaata kasutaja infot saada privaatsõnum
Alan
HV veteran
Alan

liitunud: 12.02.2008



Autoriseeritud ID-kaardiga
sõnum 25.05.2010 10:30:54 vasta tsitaadiga
raitl kirjutas:
tsitaat:
display:table-cell

kuidas IE7 ja IE8 sellesse suhtuvad?


http://www.quirksmode.org/css/display.html#table
IE7 tõesti table-* parameetreid ei tunne, seega kui võimalik soovitaks siiski javascripti abil vertikaalne align luua.

Või http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
tsitaat:
The code below works in Internet Explorer 5.0, 5.5 and 6.0, in Gecko browsers (Mozilla, Firefox, Netscape 7), in Opera 7, Konqueror 3.3.1. (maybe lower too), and in Safari
Kommentaarid: 131 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 121
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Traf
Kreisi kasutaja

liitunud: 04.12.2007
sõnum 25.05.2010 10:32:24 vasta tsitaadiga
S-STR kirjutas:
Traf kirjutas:
alustaks äkki sellest, et kuidas sa need divid üksteise kõrvale saad? divid on block tüüpi elemendid ja võtavad endale tavaliselt terve laiuse.

No see peaks olema küll CSS most-basic-knowledge, et kuidas divid kõrvuti saada!

Võtame nüüd hoogu maha. Tean väga hästi, kuidas divid kõrvuti saada, ja selle saavutamiseks on päris mitu viisi. Küsisin, milline viis on kasutusel, sest sellest sõltub edasine lahenduskäik.

@raitl: table-cell ei ole kindlasti hea lahendus. IE7 seda ei toeta, IE8 pole proovinud. ega sellele samas üheselt kena lahendust ei olegi. katsetan veidi ja annan siis teada.
Kommentaarid: 49 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 48
tagasi üles
vaata kasutaja infot saada privaatsõnum
linnumees
HV kasutaja

liitunud: 15.06.2005
sõnum 25.05.2010 14:23:31 vasta tsitaadiga
display: inline-block peaks aitama.
Kommentaarid: 3 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 3
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Traf
Kreisi kasutaja

liitunud: 04.12.2007
sõnum 25.05.2010 15:58:33 vasta tsitaadiga
linnumees kirjutas:
display: inline-block peaks aitama.

Firefoxis, jah. IEga pole õnnestunud.
Kommentaarid: 49 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 48
tagasi üles
vaata kasutaja infot saada privaatsõnum
tafka85
HV vaatleja
tafka85

liitunud: 27.09.2006
sõnum 04.06.2010 00:02:13 vasta tsitaadiga
Sellise olukorra universaalseks lahendiks on TABLE tag, kus TD,TH { vertical-align: middle; }.
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum
raitl
HV veteran


liitunud: 20.01.2002



Autoriseeritud ID-kaardiga
sõnum 04.06.2010 11:44:26 vasta tsitaadiga
tafka85, sedasi lõpuks olukorra lahendasingi. Kuigi ootaks ja loodaks tulevikus viisakamat lahendust. Juhuks kui ei ole võimalik tabelite kasutamine mingil põhjusel.
Kommentaarid: 166 loe/lisa Kasutajad arvavad:  :: 1 :: 0 :: 147
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 04.06.2010 12:12:33 vasta tsitaadiga
tsitaat:
Juhuks kui ei ole võimalik tabelite kasutamine mingil põhjusel

Mind kangesti huvitaks, mis selline põhjus võiks kül olla peale argumendi, et tabel ei kõlba enam kuhugi ja on vananenud. Peaks kõigi browserite poolt toetatud olema ja sarnaselt käituma.
Või eksin ja on siiski mingid erandid?
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Helbeke
HV kasutaja
Helbeke

liitunud: 05.01.2002
sõnum 04.06.2010 13:49:45 vasta tsitaadiga
tabelite renderdamine võtab rohkem aega. vanasti lahendati kogu lehe paigutus tabelitega tabelite sees jne. see võttis brauseril aega asja välja arvutamiseks ja renderdamiseks.
_________________
i like my sugar with coffe and cream
Kommentaarid: 16 loe/lisa Kasutajad arvavad:  :: 1 :: 0 :: 13
tagasi üles
vaata kasutaja infot saada privaatsõnum
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 04.06.2010 14:17:43 vasta tsitaadiga
ei tea kas div, ul, dl jne elemendid kah lolliks lähevd, kuid kui on palju tabeleid üks teise sees, siis võib hakata kuvama valesti...
_________________
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
inzinz
HV kasutaja

liitunud: 26.01.2005
sõnum 04.06.2010 22:24:39 vasta tsitaadiga
Noh, vanasti algsed browserid jah ei renderdanud tabelit enne kui kogu tabeli html blokk oli käes, aga see tehti ümber juba ammu-ammu, enne kui IE6 üldse välja tuli oli juba see käitumine muudetud.

Tabeli laadimisel tõmblemist aitab vältida see kui tabelil endal on laius paika pandud ja vähemalt esimeses reas oleval lahtritel on ka laiused paika pandud, siis browser teab millised tulpade laiused on ja järjest tabeli html laadimisel ei tõmble laiused siia-sinna. Ridade kõrguse kohta samamoodi, et rea vasakpoolseima lahtri kõrgus ütleb ette kogu rea kõrguse, ja siis ei tõmble kõrgus järgmiste ridade lahtrite laadimisel.

Ja kui see kõrguste laiuste ette ütlemine tundub suur töö vms, siis minu teada divide ja muude asjadega tehes tuleb samamoodi elementidele mõõdud ette öelda css'ga, lisaks on vaja üht või teistpidi jukerdada et asi ka IE7 ja IE6 peal mõistlik välja näeks, kuna need ei saa aru min-height ja min-width väärtustest, inline-block ei kõlba ja sada muud häda icon_razz.gif Ning display:table-cell css häkk samamoodi ei tööta. Niikaua kuni IE7 ja IE6 ringi hõljuvad on tihtipeale tabeli kasutamine kõige lollikindlam ja vähem närvesööv lahendus.

Kui tabelitel kõikidel öelda border=0 cellpadding=0 cellspacing=0 siis ei tohiks layoutiga väga midagi juhtuda.
_________________
Upload.ee - eestimaine failiupload
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum
linnumees
HV kasutaja

liitunud: 15.06.2005
sõnum 05.06.2010 04:44:54 vasta tsitaadiga
Traf kirjutas:
linnumees kirjutas:
display: inline-block peaks aitama.

Firefoxis, jah. IEga pole õnnestunud.

IE renderdab display:inline nagu peaks inline-block'i.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Kommentaarid: 3 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 3
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
keevitaja
AM 10 aastat
keevitaja

liitunud: 05.11.2001
sõnum 06.06.2010 03:12:04 vasta tsitaadiga
link :: CSS vertical align

leidsin ühe varianda puht juhuslikult. testisin firefox 3.6, IE 6, IE 8. kõigis töötab:

html:
  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="en">
  3. <head>
  4.     <title>DEMO: CSS vertical align</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <style type="text/css">
  7.                 .v-outer {
  8.                         display: table;
  9.                         #position: relative;
  10.                         overflow: hidden;
  11.                         height: 100px;
  12.                         background: black;
  13.                         color: white;
  14.                         width: 100%;
  15.                 }
  16.  
  17.                         .v-middle {
  18.                                 display: table-cell;
  19.                                 #position: absolute;
  20.                                 #top: 50%;
  21.                                 vertical-align: middle;
  22.                         }
  23.  
  24.                                 .v-inner {
  25.                                         #position: relative;
  26.                                         #top: -50%;
  27.                                 }
  28.         </style>
  29. </head>
  30.  
  31. <body>
  32.  
  33.         <div class="border v-outer">
  34.         <div class="v-middle">
  35.         <div class="v-inner">
  36.         ...content...
  37.         </div>
  38.         </div>
  39.         </div>
  40.  
  41. </body>
  42. </html>


aga suht jama ikkagi... oleks vaja sellist lihtsat lahndust, kust saad blokkile öelda, et tema sees olev stuff on valign:middle ja kõik
_________________
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
inzinz
HV kasutaja

liitunud: 26.01.2005
sõnum 06.06.2010 12:58:46 vasta tsitaadiga
Niipalju kui mina tean, siis niisama lihtsalt sellist valign:middle ei saagi teha. Kas vaja teha tabelina, mida toetavad kõik browserid suht ühtemoodi, või mingi css häkina.
Aga imestama paneb see, et muudkui kurdetakse et tabel on paha-paha, aga css's kasutatakse rõõmsalt display:table ja display:table-cell, mis käsivad browseril seda elementi tabeli ja tabeli lahtrina käsitleda. Põhimõtteliselt pannakse div element puudulikku/puudega tabelit mängima. Miks puudulikku/puudega, sellepärast et enam ei toimi tabelile omane tulpade süsteem, et kui ühel real tulba lahtri sisu on natuke suurem siis läheb kogu tulp laiemaks, ning browserid arvutavad vastavalt määratud tabeli laiusele teiste lahtrite suuruseid ümber. Lisaks ei saa kasutada colspan ja rowspan.

Ma olen ükskord koperdanud sellise asja otsa kus keegi "kaval" tegi selliselt disaini:
<div class="table">
  <div class="tr">
    <div class="td width200 valign-middle"></div>
    <div class="td width300 valign-bottom"></div>
  </div>
</div>

Ja niipea kui kuskil kõrgus või laius suurenes sisu tõttu oli kogu disain metsas, viskas viimase lahtri teiste lahtrite alla jne.

Ja kui probleemiks on tüütu cellspacing jms kirjutamine table tagi, siis kui css's panna table elemendile border-collapse:collapse;border-spacing:0;border-width:0 ning td elemendile padding:0 siis see nullib ära vajaduse cellpadding="0" cellspacing="0" border="0" kasutamise järele.

Lõppkokkuvõttes kellelegi kliendile disaini/veebilehte tehes, klient ei hooli sellest kui kavala häkiga asi tööle on saadud, teda huvitab et asi töötaks võimalikult paljudes browserites normaalselt ning et selle tegemine ei võtaks ülikaua aega ja korduvalt parandamist. Kui võrrelda sellesama vertical align efekti olemasolevate vahenditega minutiga tegemist nö "old school" table tagiga VS css häkkidega div elemendi table ja td elemendiks tegemine ning kõikides levinutes browserites korralikult tööle saamist, siis ei tea küll kumb nõuab vähem vaeva ja võimaldab koheselt minna edasi muid probleeme lahendama ?
_________________
Upload.ee - eestimaine failiupload
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  CSS vertical-align
[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.