Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Intrerupator cu N - doza doar cu ...

Incalzire casa fara gaz/lemne

Incalzire in pardoseala etapizata

Suprataxa card energie?!
 Cum era nivelul de trai cam din a...

probleme cu ochelarii

Impozite pe proprietati de anul v...

teava rezistenta panou apa calda
 Acces in Curte din Drum National

Sub mobila de bucatarie si sub fr...

Rezultat RMN

Numar circuite IPAT si prindere t...
 Pareri brgimportchina.ro - teapa ...

Lucruri inaintea vremurilor lor

Discuții despre TVR Sport HD.

Cost abonament clinica privata
 

css grid

- - - - -
  • Please log in to reply
7 replies to this topic

#1
urban

urban

    Active Member

  • Grup: Members
  • Posts: 1,622
  • Înscris: 25.07.2002
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&amp;width=200&amp;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&amp;width=200&amp;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
sergiu_spooky

sergiu_spooky

    Senior Member

  • Grup: Senior Members
  • Posts: 3,738
  • Înscris: 23.06.2006
Ori server side, pui o clasa speciala la fiecare al n-lea element, fie acelasi lucru cu javascript.
Sau inline-block.

#3
urban

urban

    Active Member

  • Grup: Members
  • Posts: 1,622
  • Înscris: 25.07.2002
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
sergiu_spooky

sergiu_spooky

    Senior Member

  • Grup: Senior Members
  • Posts: 3,738
  • Înscris: 23.06.2006
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
urban

urban

    Active Member

  • Grup: Members
  • Posts: 1,622
  • Înscris: 25.07.2002
Nu ma intereseaza IE6 (sunt sub 1%). Incepand cu IE9 (si sa se vada decent pe IE8).

#6
sergiu_spooky

sergiu_spooky

    Senior Member

  • Grup: Senior Members
  • Posts: 3,738
  • Înscris: 23.06.2006
Atunci inline-block e cea mai buna varianta.

#7
urban

urban

    Active Member

  • Grup: Members
  • Posts: 1,622
  • Înscris: 25.07.2002
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&amp;width=200&amp;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
sergiu_spooky

sergiu_spooky

    Senior Member

  • Grup: Senior Members
  • Posts: 3,738
  • Înscris: 23.06.2006
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

Chirurgia spinală minim invazivă 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

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate