[ karabiberovic @ 28.06.2010. 02:00 ] @
Pozdrav ljudi
poceo sam uciti css i web dizajn
css mi zadaje puno problema kod pozicioniranja elemenata na strani
sve sto sam u radu iskusio deluje mi nelogicno i konfuzno, nadam se da je to ipak zato sto sam pocetnik
da predjem na konkretan problem
nekako sam skrpio stranicu da elementi (slike) stoje gde ja zelim
ali sumnjam da se to radi na ovaj nacin i verujem da ce se poznavaoci css zgroziti nad ovim resenjem.

mislim da ne bi treblo za svaku sliku da pravim neki div kontejner itd....

kako bi to trebalo da se resi elegantno?
[ raaddd @ 28.06.2010. 13:59 ] @
Pozdrav,
Problem koji imaš je normalna stvar za svakog ko počinje da se igra sa CSS-om, tako da ne brini.

Za početak bi trebao da se uputiš u pojam box modela u CSS-u, da shvatiš kako browseri prikazuju elemente stranice. Takođe je važno da znaš razlike između inline i block elemenata.

Nakon toga pronađi par tutorijala o CSS pozicioniranju i isprobaj šta se dešava kada nešto pozicioniraš apsolutno, relativno, fixno itd. Važno je da uočiš u odnosu na šta se pozicioniraju elementi. Nakon toga probaj da primeniš float na inline i block elemente i posmatraj šta se dešava. Verovatno ti deluje dosadno sve ovo, ali je najbolji način da sam shvatiš šta i kako radi...


Jesi primetio nešto neobično u kodu koji si priložio? Nisi zatvorio komentar koji se nalazi ispod "<style type="text/css">". I taj komentar ti u suštini ne treba, prebaci te stilove u spoljni fajl i linkuj ga. I za početak validiraj HTML kod.

Vidim da si dosta koristio apsolutnog pozicioniranja, bez relativno pozicioniranih referenci. Apsolutno poz. elementi traže relativno poz. elemente kao parent-e, to ti je kao ono kad ti neko kaže da se neka prodavnica npr. nalazi 5m u levo, a ti ga pitaš u odnosu na koje mesto/stranu itd. Zato su kontejneri često relativno pozicionirani, jer u odnosu na njih pozicioniramo stale elemente. Baci se na W3C school : )

Nemam pojma kako treba da izgleda ova stranica, priloži dizajn, pa ćemo videti kako da rešiš problem "elegantno".

Ćao.
[ karabiberovic @ 28.06.2010. 18:10 ] @
prvo hvala na ogovoru!
sve ono sto sam citao i gledao nije mi mnogo pomoglo za ovaj malcice slozeniji dizajn!
okacicu sliku da se vidi kako sam zamislio da to izgleda!
gornji deo, heder, sastoji se iz paterna (crno beli siljci) da bi se naravno smanjila velicina fajla
u sredini hedera je slika automobila koja kako se vidi veca od slicice paterna i prelazi i gore i dole.
zdesna su 4 dugmica malo se spustaju ispod hedera
pozadina je takodje patern "duginih" boja jedan piksel sirok! preko toga su 4 polja sa tekstom i po jednom slikom(mad samo prvi boks ovde sadrzi i tekst i sliku , tako da ostalo nije od znacaja) i u pozadini boksa je takodje neka sarena slicica(mogao bi i tu biti patern)

e sad kao sto se to vidi u zipovanom fajlu u mom prethodnom, postu resio sam to preko apsolutnog pozicioniranja!
medjutim za svaki od ova 4 sredisnja boksa koristio sam poseban tag koji se razlikuju samo u koordinatama gde bi se taj boks trebao nalaziti
tako da se podaci ponavljaju sto je samo uvecavanje fajla 4 puta!
Code:
#prozor1 {
    position:absolute;
    background-image: url(OkvirBg.jpg);
    border:1px dotted brown;
    top:240px;
    left: 50px;
    float: left;
    height: 220px;
    width: 400px;
}
#prozor2 {
    position:absolute;
    border:1px dotted brown;
    top:240px;
    left: 570px;
    float: left;
    height: 220px;
    width: 400px;
}
#prozor3 {
    position:absolute;
    border:1px dotted brown;
    top:520px;
    left: 50px;
    float: left;
    height: 220px;
    width: 400px;
}
#prozor4 {
    position:absolute;
    border:1px dotted brown;
    top:520px;
    left: 570px;
    float: left;
    height: 220px;
    width: 400px;
}


znam za izbacivanje css van html strane al za sada se fokusiram na pozicioniranje sve ostalo cu uciti kad ovo zavrsim

a slike i boje su ovde birane tako da odskacu da bih mogao jasno da opisem recima sta mi je sta
[ tahuti @ 28.06.2010. 21:44 ] @
Malo sam ti izmenio html, i nisam stavio tvoj spike slicicu
Code:
 
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>very titled document</title>
    <link rel="stylesheet" type="text/css" href="./first.css" media="screen" title="fixed" />
</head>
<body>
    <div id="container">
      
        <div id="meni" >
            <ul>
                <li><img src="btn.png" width="87" height="23" /></li>
                <li><img src="btn.png" width="87" height="23" /></li>
                <li><img src="btn.png" width="87" height="23" /></li>
                <li><img src="btn.png" width="87" height="23" /></li>
                <li><a href="http://www.google.com">www.google.com</a></li>
            </ul>         
        </div><!-- end of meni -->
        
       <div id="mainpic"><img src="nicecar.jpg" height="200" />
       </div><!-- end of mainpic -->
      
      <div id="prozor1">
      <img src="nicecar.jpg" /><p> Prozor 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare semper lorem, sed malesuada mauris posuere ac. 
Maecenas bibendum dapibus sapien, nec aliquam tellus gravida ac. Proin pretium ligula sit amet nisl interdum rhoncus sit amet id risus. Phasellus fringilla augue vitae
dui sollicitudin commodo. Morbi ut orci orci. Ut rutrum eleifend pulvinar. Ut non justo nunc. Aenean ut est arcu, a ultricies turpis. Sed lectus velit, laoreet vel viverra
accumsan, dapibus vel ante. Mauris mauris purus, molestie sit amet pretium eget, volutpat in tellus. Nulla orci felis, semper eget mattis id, imperdiet ac augue. 
Vivamus viverra vehicula condimentum.</p>
      </div><!-- end of prozor1 -->
      
      <div id="prozor2"><p>Prozor 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare semper lorem, sed malesuada mauris posuere ac. 
Maecenas bibendum dapibus sapien, nec aliquam tellus gravida ac. Proin pretium ligula sit amet nisl interdum rhoncus sit amet id risus. Phasellus fringilla augue vitae 
dui sollicitudin commodo. Morbi ut orci orci. Ut rutrum eleifend pulvinar. Ut non justo nunc. Aenean ut est arcu, a ultricies turpis. Sed lectus velit, laoreet vel viverra 
accumsan, dapibus vel ante. Mauris mauris purus, molestie sit amet pretium eget, volutpat in tellus. Nulla orci felis, semper eget mattis id, imperdiet ac augue. 
Vivamus viverra vehicula condimentum. </p>
      </div><!-- end of prozor2 -->
      
      <div class="clear"></div>
      
      <div id="prozor3"><p>  Prozor 3</p>
      </div><!-- end of prozor3 -->    
      
      <div id="prozor4"> <p>  Prozor 4</p>
      </div> <!-- end of prozor4 -->
      
    </div><!-- end of container -->

</body>
</html>

Dodao sam vise texta da bi video kako duzina texta utice na float
Code:

#container {
    width: 960px; /*nemaju svi widescreen */
    margin: 50px auto;
    padding:10px;
    background-image:url('BgPic.jpg');
}

#mainpic{
    margin: 15px auto;
    width: 288px;
    padding:10px;
}

#meni {
    
    margin: 15px 10px;
    padding: 5px;
    border: 1px dotted brown;
    float: right;
}

#meni ul {
         list-style: none;
}

#meni a{
         background-color: white;
}

#prozor1 {
    border: 1px dotted brown;
    width: 400px;
    margin: 20px 20px;
    float: left;
}

#prozor1 img {            /*nemoj da stavljas align sa img tagom, zasto onda koristis css */
    float: right;
    padding: 3px;
}

#prozor2{
    border: 1px dotted brown;
    width: 400px;
    margin: 20px 20px;
    float: right;
    }
    
div.clear { clear: both; }

#prozor3 {
    border: 1px dotted brown;
    width: 400px;
    margin: 20px 20px;
    float: right;
    }

#prozor4 {
    border: 1px dotted brown;
    width: 400px;
    margin: 20px 20px;

}



Bez width neki elementi css ne mogu da rade kako treba. div.clear je malo nakaradan ali radi, resetuje float tako da mozes da uradis sledecu liniju.
Ti sada dodaj ostale elemente, pokusaj da uradis menu u horizontali ako hoces.
Pokusaj kod pozicranja da radis sa float, margin ( sta radi auto), pre nego sto pocnes na relative i absolute position.
[ tahuti @ 28.06.2010. 22:01 ] @
I za Firefox skini Firebug and Web Development Toolbar plugins, firebug ce ti vizuelno pokazati koliki je margin i padding za svaki element. Firebug ti omogucava da uzivo menjas css (ne mozes snimiti), Web Development omogucava snimanje.
[ raaddd @ 28.06.2010. 22:37 ] @
Nezahvalno je učiti nekoga osnovama HTML-a i CSS-a tako što ćemo mu iskodirati njegovo idejno rešenje bez objašnjenja šta i kako koje pravilo radi. Predlažem karabiberovicu da se baci na učenje. Ovaj deo je najzanimljiviji i važno je da ga razume. Kasnije je zezanje i može se razmišljati o specifičnim uslovima.

Tahuti je fino pomogao, ali mislim da će se gomila problema ponovo javiti prilikom sledećeg rada, što ne bi trebalo da se desi, jer ovde ima sve što treba da nauči.

Ovo uopšte nije toliko komplikovan dizajn, koliko ti se čini jer uključuje nekoliko tehnika pozicioniranja. Nije poenta da ti kažemo kako da ovo napraviš - kao prvo, jer se može uraditi na par načina, a drugo - ništa onda ne bi stvarno naučio. Alati koje su ti kolege predložile se svakako najbolji za debugovanje svog koda, ali...

Baci se na W3C school kao što sam ti već rekao, pređi sve ponovo ako već jesi, prvi put ako nisi - nebitno je, to ti je max 5 dana da naučiš osnove kako treba, što i nije puno vremena. Ukoliko imaš problema sa nalaženjem adekvatnih linkova za učenje, predlažem sledeće:

http://www.w3schools.com/css/default.asp

http://sixrevisions.com/css/cs...ng-your-styles-with-css-reset/
http://www.dustindiaz.com/css-shorthand/
http://www.barelyfitz.com/scre...html-training/css/positioning/
http://www.subcide.com/article...ing-a-css-layout-from-scratch/
http://www.456bereastreet.com/...xplorer_and_the_css_box_model/
http://www.threestyles.com/tutorials/5-css-donts-for-beginners/
[ karabiberovic @ 20.07.2010. 03:13 ] @
Zelim da se zahvalim tahuti-u za ulozeni trud i zaista mi je pomoglo da razumem neke stvari kako se prakticno rade(pozicioniranje pomocu margina i paddinga) kao i raaddd-u za prilozene tutorijale.
detaljno sam pregledao svaki od njih i mnogo naucio.
pomenucu da imam i dosta pdf literature o css-u (pa cak i "kako ne treba raditi u css-u")
Medjutim to mi nije pomoglo da resim problem koji sam vec postavio
a to je header pomenute strane.
Dakle nisam nasao metod kako postavljati div-ove jedan preko drugog a da i dalje budu relativno pozicionirani
tj div koji sadrzi spike patern treba da bude ispod diva koji sadrzi sliku automobila. Takodje div sa menijem treba biti preko diva sa spike paternom
pretpostavljam da divovi sa atomobilom i menijem mogu biti u "istoj dimenziji"
ja to mogu uraditi ali ako bar nesto pozicioniram apsolutno, ali onda pri skracivanju prozora neki elementi "gube" svoje mesto...
Dakle moze li se uopste ovako nesto odraditi ili ja ocekujem nemoguce od css-a?

[ kelja @ 23.07.2010. 19:08 ] @
Ne znam zasto ti smeta apsolutno pozicioniranje u headeru, u ovom konkretnom slucaju, no ako bas insistiras na relativnom pozicioniranju, mozes da probas nesto poput ovoga:

Code:


#mainPic {
    
    position:relative;
    margin-top:-170px;
    margin-left:375px;
    z-index:600;
}


a tako nesto odradis i za meni... Koristio sam onaj tvoj css i html iz rar fajla.
[ m.stojanov @ 30.07.2010. 20:16 ] @
Nisam imao vremena da citam sta su ti ostali forumasi predlozili, ali moj savet je sledeci:

Mani se pozicioniranja za sada. Pocetnik si, to ti trenutno nije potrebno! Ja radim CSS vise od 2 godine i u radu se retko, ali bas retko odlucujem za pozicioniranje, pogotovu apsolutno! Relativno koristim, negde jednostavno ne moze drugacije. Uglavnom, trudim se da pozicije elemenata odredjujem marginama! To savetujem i tebi i svim ostalima.

http://www.w3.org/TR/CSS2/box.html