css pozicioniranje

[ stefo.94 @ 28.03.2014. 01:23 ] @

Pozdrav,
imam zadatak iz kursa WebDizajna da se napravi neki sajt prost koristeći samo html(ko hoće/zna može koristiti css), nebitno šta, ja sam odlučio neki sajt za recenziju filmova. Nisam neki ekspert za css, radim ga već 2-3 sedmice, a na kursu ga nismo radili, i treba mi pomoć oko pozicioniranja, msm da je, jer sam mislio uklopiti 5-6 filmova, kao mrežu 3x2.

Međutim, ovo sam uspio nekim komplikacijama koristeći

Code:
<article style="position:relative;left:34%;">

da bih Betmena postavio pored Inceptiona, a bez ovog koda sa "left:34%" dobijem Betmen preko Inceptiona. Da li postoji mogućnost da se nekako kreiranjem novog artikla, novi 'gurne' do već postojećeg, praveći lijepu mrežu kao na postavljenoj slici. Mislim da će mi još veći problem praviti kad napravim 4. artikl koji mora da ide ispod inceptiona. Ako neko zna elegantnije, ili bilo kakvo drugo rešenje, koje bi pomoglo, bio bih zahvalan da mi pomogne.

Hvala.
P.S. Ima i html i css ako neko želi da vidi kako izgleda u kodu.
WDSajt

[ valjan @ 28.03.2014. 09:55 ] @

Ovo su elementarne stvari što se tiče CSS-a, imaš gomilu tutorijala na tu temu, samo trebaš malo da pretražiš po netu. Ključna stvar za tebe je "float:left" ili "float:right" koje treba da ubaciš u style atribut, u zavisnoti od toga da li hoćeš da se ređaju ulevo ili udesno od željene tačke, i kad više nema mesta u jednom redu automatski nastavljaju da se ređaju u sledećem. Znači ne treba ti onaj "position:relative" uopšte za to. Da bi to iole radilo kako treba, moraš explicitno definisati širinu svakog elementa koji učestvuje u float-u, takođe u style atributu, putem "width:Xpx;" gde umesto X staviš željenu vrednost. Ako ne znaš koliko je taj tvoj element širok, postoje jednostavni alati u browseru kojima to možeš saznati. Takođe, za dobar izgled dobro bi bilo definisati i bočne margine (ali nije neophodno), odnosno razmak između dva elementa. Tako da bi tvoj article tag trebalo da izgleda nešto poput ovog:

Code:

<article style="width:50px;margin-left:5px;margin-right:5px;float:left;"></article>

I tako ponoviš za svaki article tag. Ako ti je kod svih ista širina i iste margine, izdvoj sve to u zasebnu klasu pa upiši u CSS fajl

Kad složiš sve elemente u tu matricu, da bi ostatak stranice izgledao kako treba, prvi sledeći element treba očistiti od floata, u tvom slučaju to je footer tag:

Code:

<footer style="clear:both;"></footer>

I to su ti neke osnove, a ti dalje razrađuj prema svojim potrebama.

[ stefo.94 @ 28.03.2014. 14:54 ] @

Hvala na pomoći, ali, zašto meni to ne radi kad sam to iskucao u cssu, možeš viditi u okačenom fajlu. Kod articla je

Code:
article img{
    float: left;
    width: 180px;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 0;
}

article{
    display: inline-block;
    float: left;
    clear: both;
    margin:1%;
    width: 30%;
    background: linear-gradient(#DCDCE6, white);
    border-radius: 5px;
    position: absolute;
    padding-left: 1%;
}

nego lijepi jedan preko drugog?
I za footer sam isto uradio to clear, to znam šta treba od prilike da je od prilike praksa da se u svaki footer stavi clear.

[ plus_minus @ 28.03.2014. 16:12 ] @

Zašto koristiš float za inline-block ?
Ta vrednost za display svojstvo je inače novijeg datuma, ie6 veze nema šta je to, npr.. No, taj ie6 je mrtav, valjda.
To je baš ono što treba da se sa lakoćom rasporede elementi - bez float-a.

Pre nego što kreneš da se arčiš sa css-om, dobro obrati pažnju i nauči koji element pripada u block grupu, kao podrazumevanu.
Zatim, pošto je kaskada u pitanju, ne pita te koliko istih klasa imaš nadžidžanih nikad, već samo lepi preko.
Ona koja je zadnja i sva pravila koja ima - to preovlađuje. Tako isto i za ID. I za tagove.

-article img-, recimo, treba da ide posle, ne pre article taga.

Tvoj prethodni deo koda bi ja ovako nekako.. pisano u letu ..
Probaj, nisam ni gledao tvoj html, nemam vreme sad za dropbox.

Code (html):

<!DOCTYPE html>

<html lang="sr">

<head id="fallBack">

<meta charset=utf-8>

<title> Recenzije </title>

<style type="text/css">

body {

 position:absolute;

 top:0;

 right:0;

 bottom:0;

 left:0;

 text-align:center;

}

article {

 position:relative;

 display: inline-block;

 margin:5px;

 padding: 3px;

 width: 320px;

 height: auto;

 background: linear-gradient(#DCDCE6, white);

 border-radius: 5px;

}

article img {

 display: block;

 float: left;

 width: 180px;

 height: 240px;

 padding: 0;

 margin: 8px 5px 1px 5px;

 background-color: rgb(255,255,255);

 background-color: rgba(255,255,255,0.5);

}

article p {

 padding:5px;

 color: Black;

 font-size:10px;

 line-height:1.3;

 text-align:justify;

 font-family: Verdana, Geneva, sans-serif;

}

.clear {

 float:none;

 clear:both;

}

</style>

</head>

<body>

<h1> Recenzije </h1>

 <article>

  <h2> Film 1</h2>

  <img src="/imgPath/img1.jpg" alt="img1Here">

  <p>

    <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

    when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    It has survived not only five centuries, but also the leap into electronic typesetting,

    remaining essentially unchanged.

    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,

    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </p>

  <br class="clear" />

 </article>

 <article>

  <h2> Film 2</h2>

  <img src="/imgPath/img2.jpg" alt="img2Here">

  <p>

    <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

    when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    It has survived not only five centuries, but also the leap into electronic typesetting,

    remaining essentially unchanged.

    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,

    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </p>

  <br class="clear" />

 </article>

</body>

</html>

_{[Ovu poruku je menjao plus_minus dana 28.03.2014. u 17:26 GMT+1]}

[ valjan @ 28.03.2014. 18:13 ] @

Stavio si najpre float:left pa si ga odmah u sledećem redu "ubio" sa clear:both... Izgleda nisi pažljivo čitao šta sam ti napisao...

[ stefo.94 @ 28.03.2014. 22:24 ] @

@valjan, hvala na pomoći, danas kad sam uklonio clear:both, sve se lijepo složilo. Hvala i plus_minus na uloženom trudu.

[ dusans @ 28.03.2014. 22:36 ] @

Za ovaj tvoj slučaj je daleko najbolje koristiti display: inline-block; za artikle.
Korištenje float (left) i clear je verovatno najviše "silovana" stvar u istoriji čovečanstva,
koju koriste dizajneri (neki i sa decenijskim iskustvom) koji apsolutno ne razumeju box model.

Koristan Savet: U 95% slučajeva gde vidiš float: left je nebuloza- može se zameniti
i daleko logičnije napraviti malo drugačijim css-om.