Div-uri aliniate pe orizontala, cu Scroll Orizontal

Coduri intrebari, probleme legate de HTML, XHTML si CSS
kaZZ
Mesaje: 1

Div-uri aliniate pe orizontala, cu Scroll Orizontal

Vreau si eu sa fac un site cu design metro dar nu stiu exact cum sa explic. Vreau sa se duca Div-urile spre dreapta pe orizontal cand au ajuns in josul pagini, sa nu mai continuie sa o ia dinou de sus.
Spec ca intelegeti daca nu uitati un exemplu la pagina de la adresa asta:
theme.crumina.net/index.php?theme=onetouch
Vreau ceva gen de acolo, putin de jos unde are scroll-ul albastru.

MarPlo Mesaje: 4343
Salut
Se poate cu cateva proprietati CSS. Div-urile sa fie toate intr-un Div parinte (container), iar acesta sa aibe setat in CSS o inaltime fixa, lungime 100% (sau cat vrei), pentru scroll - overflow-x: auto; iar ca sa nu treca pe un nou rand, se adauga - white-space: nowrap; .
La Div-urile din container se seteaza in CSS display: inline-block; (ca sa fie afisate in linie).
Vezi codul din acest exemplu, il poti testa si modifica dupa cum stii ca iti trebuie la site-ul tau.

Cod: Selectaţi tot

<style type="text/css">
#container {
  position: relative;
  height: 14em;
  width: 99%;
  margin: 2px auto;
  text-align: left;
  overflow-x: auto;
  white-space: nowrap;
}
#container div {
  display: inline-block;
  width: 16em;
  height: 11em;
  margin: 0.5em;
  border: 1px solid blue;
  padding: 2px;
  white-space:normal;
  text-align: center;
}
</style>

<div id="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
  <div>Div 5</div>
</div>

Subiecte similare