Chirurgia spinală minim invazivă
Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical. Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale. www.neurohope.ro |
css grid
Last Updated: Nov 19 2011 23:16, Started by
urban
, Nov 17 2011 00:59
·
0
#1
Posted 17 November 2011 - 00:59
Buna,
Am urmatoarea lista: <ul id="categoryElements"> <li> <ul class="categoryElement"> <li class="categoryImage"><a rel="nofollow" href="/c17" title="c17"><img src="/media/catalog/?mediaId=5&width=200&height=200" alt="c17" height="200" width="200"></a></li> <li class="categoryName"><h2><a rel="nofollow" href="/c17">c17</a></h2></li> <li class="categoryDescription"><strong></strong></li> </ul> </li> <li> <ul class="categoryElement"> <li class="categoryImage"><a rel="nofollow" href="/c17" title="c17"><img src="/media/catalog/?mediaId=5&width=200&height=200" alt="c17" height="200" width="200"></a></li> <li class="categoryName"><h2><a rel="nofollow" href="/c17">c17</a></h2></li> <li class="categoryDescription"><strong></strong></li> </ul> </li> </ul> In care pot sa am mai multe li-uri (sunt categorii de produse) si vreau sa afisez aceste li-uri intr-un grid cu un numar bine definit de li-uri pe linie. Pana aici nimic complicat. Problema este ca in functie de site-ul unde implementez layout-ul respectiv un client vrea 4 categorii pe un rand alt client vrea 5 categorii. Nici asta nu ar fi prea complicat de facut insa ce nu-mi iese este alinierea ultimei categorii pe fiecare rand la marginea din dreapta. ol, ul { list-style: none outside none; } #categoryElements li { display: inline-table; width: 125px; margin: 0px 7px 0px 0px; } .categoryElement { display: inline-table; } .categoryElement .categoryImage { display: block; padding: 5px 0px; } .categoryElement .categoryImage img { padding: 5px; border: 1px solid #aaaaaa; height: 120px; width: 120px; } .categoryElement .categoryName h2 { display: inline-table; font-weight: bold; font-size: 14px; padding: 0; } .categoryElement .categoryDescription { display: block; } .categoryElement .categoryDescription strong { font-weight: normal; } Acesta este css-ul folosit acum insa din cauza lui "margin: 0 7px 0 0" imi apare in partea dreapta un spatiu enervant. Nici nu pot sa folosesc selectorul last-child pentru ca exista cazuri in care lista depaseste numarul de 4-5 categorii si se continua pe mai multe linii. Intrebarea are fi cum pot sa simulez un grid fara ca sa trebuiasca sa-l impart din cod in mai multe liste (cate una pe fiecare rand) si de preferat si fara tabele? |
#2
Posted 17 November 2011 - 11:16
Ori server side, pui o clasa speciala la fiecare al n-lea element, fie acelasi lucru cu javascript.
Sau inline-block. |
#3
Posted 17 November 2011 - 14:47
As fi vrut sa evit partea de server side pentru ca vreau sa cred ca intr-un viitor apropiat o sa generez html care imi indica ce continut am nu unde il afisez. Ma interesa o solutie in genul asta: W3C CSS Grid
|
#4
Posted 17 November 2011 - 15:07
Atunci singura solutie ramane javascript.
Orice-ai face e nevoie sa diferentiezi celulele de pe o latura. Faci asta cel mai curat printr-o clasa. Clasa aia o poti adauga fie direct de pe server, cand generezi HTML-ul, fie in browser, cu javascript. O solutie mai eleganta ar fi inline-block, dar oricum va trebui sa aplici niste javascript pentru ie6 (care nu implementeaza inline-block). Edited by sergiu_spooky, 17 November 2011 - 15:08. |
#5
Posted 17 November 2011 - 18:01
Nu ma intereseaza IE6 (sunt sub 1%). Incepand cu IE9 (si sa se vada decent pe IE8).
|
#7
Posted 17 November 2011 - 22:13
Am gasit o solutie:
#categoryElements { -moz-column-count: 4; -moz-column-gap: 10px; -webkit-column-count: 4; -webkit-column-gap: 10px; column-count: 4; column-gap: 10px; } .. singurele probleme sunt ca nu merge pe IE si pe anumite browsere umplerea coloanelor nu e ce imi trebuie mie, umple de sus in jos si apoi de la stanga la dreapta (ca la coloanele unui ziar) cand de fapt mi-ar fi trebuit de la stanga la dreapta si de sus in jos. Pana la urma am ramas la solutia cu display: table fara spatiere intre ele si astept vremea cand se vor implementa grid-urile. Dar acum am alta chestie pe care as vrea sa o rezolv: <img src="/media/catalog/?mediaId=5&width=200&height=200" alt="c17" height="200" width="200"> img { height: 200px; width: 200px; } 1. in cazul in care folosesc height si width pe tag-ul img in css mai este nevoie de height/width in html? 2. presupunand ca nu mai este nevoie de height si width in tag-ul html xista posibilitatea (JS, CSS, etc) sa citesc dimensiunea la care se va afisa poza (cf css-ului) si sa trimit acesti parametrii catre poza in url? |
#8
Posted 19 November 2011 - 23:16
Ce ai gasit tu acolo nu e solutie.
robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ Citeste articolul ala si o sa gasesti solutia cea mai buna pentru situatia ta. |
Anunturi
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users