Cum ati pozitiona elementele in urmatorul design?

Stiu ca pare usor dar vreau sa stiu parerea voastra.
Cum ati pozitiona elementele in design-ul urmator, unde cu float, unde cu absolute s.a.m.d…


De asemenea unde ati folosi h1 si h2?
Pt h1 eu ma gandeam sa il folosesc de ex la logo cu: h1 class=“logo” … a href="" > Qhsse.ro </h1… mai ales ca site-ul este la inceput…
Cu cat mai multe pareri cu atat mai bine.
Ms

1 Like

Nimic absolut. Float doar la coloane. Fa-ti un bine si foloseste Bootstrap:

6 Likes

Nu este nevoie de nici o poziționare absolută.

Eu aș face așa (emmet/zen):

header(>.identity>img^+nav>ul>li*5>a)+div(>div.heroImage+.fullColumn+.columns(>section.column*3>header>img+h3^article)+.fullColumn)+footer>.copyright+.social|c

Lăbărțat ar arăta cam așa (sper că n-am sărit ceva):


<header>
  <div class="identity"><img src="" alt="" /></div><!-- /.identity -->
  <nav>
    <ul>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>
  </nav>
</header>
<div>
  <div class="heroImage"></div><!-- /.heroImage -->
  <div class="fullColumn"></div><!-- /.fullColumn -->
  <div class="columns">
    <section class="column">
      <header>
        <img src="" alt="" />
        <h3></h3>
      </header>
      <article></article>
    </section><!-- /.column -->
    <section class="column">
      <header>
        <img src="" alt="" />
        <h3></h3>
      </header>
      <article></article>
    </section><!-- /.column -->
    <section class="column">
      <header>
        <img src="" alt="" />
        <h3></h3>
      </header>
      <article></article>
    </section><!-- /.column -->
  </div><!-- /.columns -->
  <div class="fullColumn"></div><!-- /.fullColumn -->
</div>
<footer>
  <div class="copyright"></div><!-- /.copyright -->
  <div class="social"></div><!-- /.social -->
</footer>
1 Like

Chestia cu h1 la meniuri are sens dar până acum nici prin cap nu mi-a trecut să fac așa ceva. :+1:

A, cred ca m-am exprimat gresit. Nu voiam sa zic ca elementele alea efective din meniu devin H1, ci ca titlul lor devine H1 in pagina interioara, cu element separat, si ca se scoate H1 de pe logo. Markup-ul meniului nu il schimb in interior, ca se schimba ierarhia navigarii apoi, care o las constanta pe toate paginile.

Sunt curios de ce recomanzi scoaterea h1 de pe logo. Eu ma gandeam ca ar fi mai ok sa ramana acelasi tag pentru logo avand in vedere ca va exista peste tot.

eu as pune h2 pe titlurile coloanelor, ca in ordinea importantei alea vin la rand. si devin h1 pe paginile individuale.

Update: nevermind, s-a zis deja :slight_smile: am citit superficial

Pai logo-ul exista peste tot, dar titlul paginii este acelasi cu numele site-ului doar pe homepage. In rest, continutul principal din orice alta pagina din interior are propriul titlu (Servicii, Despre noi, Contact, etc), iar acolo trebuie sa fie <h1>.

1 Like

Parerea mea e ca denumirea site-ului (care de cele mai multe ori se regaseste in logo) trebuie sa fie intotdeauna in h1. Altfel document outline-ul pentru paginile interioare ar fi lipsite de context. In afara de asta, ar aparea probleme in cazul in care paginile interioare ar contine si sectiuni generale / repetitive / introductive ale site-ului (ex: inserarea in pagina de “Servicii” a unui scurt paragraf cu titlu si link catre pagina “Despre noi”).

##Ex fara logo in h1:##

1 Servicii
__1.1. Consultanta
__1.2. Audit
__1.3. Despre noi - in cazul in care continutul tangential cu cel din main, va fi pus in aside. Problematic pentru ca “Despre noi” va fi subheading al “Servicii”, desi semantic lucrurile stau diferit
2. Despre noi - asta daca nu se va folosi aside, section sau orice alt element de tip sectioning content, iar titlul va fi pus tot ca h1. Problematic pentru ca amandoua sunt headinguri directe ale lui body, desi “Despre noi” este o sectiune mai putin importanta decat “Servicii” - continutul principal al paginii. Sa zicem ca asta s-ar rezolva partial dpdv semantic daca “Servicii” ar fi pus in main, insa document outline-ul ar ramane acelasi, iar contextul ar lipsi in continuare.

##Ex cu logo in h1:##
1 Denumire Companie
__1.1. Servicii
____1.1.1. Consultanta
____1.1.2. Audit
__1.2. Despre noi

Edit: se pare ca nu reusesc sa fac o lista nested in Markdown … Dar sper totusi ca sunt clare cele doua exemple.

1 Like

no BEM? :smile:

Uitati un subiect pentru Sectiune de Tutoriale. :slight_smile:

am ajuns pana in stadiul acesta:


nu imi dau seama de ce div-ul .despre nu apare dedesubtul slide-ului…
ce am gresit si alte pareri daca se putea si altfel sau mai usor,
Ms

Nu prea e bine. Citeste specificatiile HTML5 (ai link catre document in raspunsul lui ant de mai sus) si urmeaza guideline-urile respective. Foloseste tag-ul <p> pentru paragrafe, nu <br>. La fel, foloseste ul si li acolo unde trebuie.

Ca idee, invata sa lucrezi conform standardelor de la bun inceput. Nu va fi mai usor acum, ci pe viitor.

2 Likes

Nu mi-ar trebui neaparat specificatiile html5 acum ci doar o rezolvare OK… ul si li nu vad unde ar mai trebui…
Ant a explicat utilizarea la h1…

Păi și dacă îți spun să scoți position:absolute de la slider, ce faci?

asa are default scriptu…

Nu trebuie position:absolute si nici background, cam asa ceva trebuie sa ai in html:

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="nivoslider-4" class="nivoSlider">
<img src="http://demo.dev7studios.com/nivo-slider/files/2013/02/5896103449_fa2c7a168d_b.jpg" alt="" />
<img src="http://demo.dev7studios.com/nivo-slider/files/2013/02/03037_liverpool_1920x1080.jpg" alt="" />
<img src="http://demo.dev7studios.com/nivo-slider/files/2013/02/3928848343_42443ae67d_o.jpg" alt="" />
<img src="http://demo.dev7studios.com/nivo-slider/files/2013/02/4207529693_d4f03f6dd7_o.jpg" alt="" />
</div>

am modificat si in css-ul scriptului…
dar div-ul acela tot pe dedesubtul slide-ului este…

Dar tot n-ai modificat html-ul asa cum ti-am zis…

Eh, acum înțelegi de ce nu ai nevoie doar de o rezolvare?