PC Ekspert Forum (https://forum.pcekspert.com/index.php)

- Web dizajn, programiranje i ostalo (https://forum.pcekspert.com/forumdisplay.php?f=39)

- - web stranica problem (https://forum.pcekspert.com/showthread.php?t=218601)

mrVivi

05.08.2011. 12:38

web stranica problem

Evo rekoh ajde da se malo naučim html, css te js i php.

Krenuo sam od html-a i css i sad sam naišo na jedan malo problem naime iz nekog razloga između dva

slika

slika2

mi se ubaci nekakav razmak iako ga nebi trebalo biti te nakon tog ramaka svaka slijedeća slika/tekst (div) mi ubacuje neki razmak koji mi nedopušta da poredam stranicu onako kao ja želim. u svakom slucaju evo dole slika i dio html koda ako jos sta treba recite.

Moje iskustvo sa html i css je staro 4 dana tako da je svaka kritika dobro došla.

http://img840.imageshack.us/img840/122/cb1w.th.jpg

Uploaded with ImageShack.us
http://www.easy-share.com/1917126848/html css.rar

zwer	05.08.2011. 13:19

Google Chrome - loadas to sto si napravio, desni klik, inspect element, i misem iznad svakog diva dok ne nadjes koji ti radi taj space prazni... ovako napamet nis od debuganja, ali vjerojatno ti negdje margin ili padding nisu 0.

Olaksat ces si kasnije posao ako koristis neki css reseter.

fre@k

05.08.2011. 15:20

ja bi ti isto tako preporucio da pocnes ako vec nisi citat w3 school

http://www.w3schools.com/

nisam bog zna kakav ekspertovac ali znam djelomicno HTML i CSS, ali sam procitao sve nabrzinu posto su mi trebale u to vrijeme neke osnove...ali sve je ljepo objasnjeno i prikazano u primjercima :)

mrVivi

05.08.2011. 15:31

ma pregledo sam već cijelu stranicu nisam mogo naci rjesenja za ovo moguće je da je problem u java scriptu za padajuće izbornike ali posto trenutno neznam nis sto se jave tice nemogu naci problem.

zwer	05.08.2011. 15:36

java nije isto sto i javascript (pise se zajedno).

Ory	06.08.2011. 17:39

Citiraj:

Autor zwer (Post 1952077)

java nije isto sto i javascript (pise se zajedno).

Naravno JAVA je mnogo močnija upravo ju učim.

mrVivi

10.08.2011. 19:18

Citiraj:

Autor zwer (Post 1952077)

java nije isto sto i javascript (pise se zajedno).

hvala na rješenju mog problema.

p.s. nemogu ovo rješit neznam u čemu je problem

zwer	10.08.2011. 23:17

Citiraj:

Autor mrVivi (Post 1954488)

hvala na rješenju mog problema.
p.s. nemogu ovo rješit neznam u čemu je problem

Uhh... trivijalan layout, pa problemi.

1 - jesi probao pogledat html u browseru? ili ti se taj razmak javlja samo u design viewu u dreamweaveru?
2 - jesi inspectao element u browseru pa da vidis koji bog radi taj razmak (padding, margin, element?)

Kolko ja vidim iz tvog koda, imas css klasu class_menu_space visoku 10 pixela koja radi razmak menija od contenta. Ili u prijevodu, ne znas koristit padding i margin, nego bespotrebno trpas divove umjesto njih. Naguglaj "two column layout" i skini html i css te ga dobro prouci. I eksperimentiraj sa padding i margin vrijednostima dok ti ne bude jasno, i mene je to zbunjivalo prvi dan...

Osim toga, welcome ti se ne aligna kako spada jer krivo koristis container - stavio si Paragraph u kojem pise welcome sa odredjenim font sizeom unutar diva koji (kad uzmes u obzir paragraph padding) ima manje dimenzije nego sam paragraph pa ti "zdere prostor" jer nema overflow: hidden.

Inace se naslovi pisu u

ili manjem html tagu, nemoj za to koristit
.

I majka svih savjeta (da je bar meni netko to rekao) - koristi CSS reseter uvijek. Bit ce ti lakse skuzit sve kad ne budes morao duzim putem saznavat default vrijednosti svakog taga...

Ovako bi to trebalo izgledat (tvoj layout) u HTMLu, pretpostavimo da ide header, meni, content, footer, single column:

HTML:

`<body> <div class="wrapper"> <div id="header"> HEADER </div> <div id="menu"> TU MENI </div> <div id="content"> CONTENT </div> <div id="footer"> FOOTER </div> </div> </body>`

Wrapperu das margin: 0 auto; i fiksnu sirinu tako da bude centriran i obuhvaca sav sadrzaj sitea. header, meni, content, footer imaju svi fiksnu sirinu koja je jednaka wrapperu (borderi su 0), samo content dio ima varijabilnu visinu, dok svima ostalima fiksiras na zeljene varijable. ako zelis content malo uvuc unutra da ne ide do ruba menija - content id-u das padding npr. 16px, i smanjis mu sirinu za 2x16 (ljevi padding + desni padding). Dalje sam. I nemoj koristit design view u dreamweaveru, samo ce ti odmagat dok ucis...

Uber Gosu

16.08.2011. 10:58

Citiraj:

Autor zwer (Post 1954607)

Wrapperu das margin: 0 auto; i fiksnu sirinu tako da bude centriran i obuhvaca sav sadrzaj sitea....

HTML:

<body>

<div class="wrapper">

   <div id="header"> HEADER </div>

   <div id="menu"> TU MENI </div>

   <div id="content"> CONTENT </div>

   <div id="footer"> FOOTER </div>

</div>

</body>

Zašto "class" a ne "id" na wrapperu na ovakvom banalnom layoutu bez da ima neki footer (ili nešto) izvan wrappera pa da skuži kak se to centrira i da se klase mogu koristiti više puta:chears:

Inače vrlo dobro objašnjeno :respekt:

zwer	18.08.2011. 08:31

Citiraj:

Autor Uber Gosu (Post 1956936)

Zašto "class" a ne "id" na wrapperu na ovakvom banalnom layoutu bez da ima neki footer (ili nešto) izvan wrappera pa da skuži kak se to centrira i da se klase mogu koristiti više puta:chears:
..

Ma moze i id, imas pravo, ne znam vise zasto sam stavio class. A za footer izvan wrappera i razne sticky footere ce mu trebat malo vise iskustva :D :beer:

Overclock

19.08.2011. 23:04

Dreamweaver shit izbjegavati ako ucis, pocni od nule sa notepad++ uz w3schools, a razmaci tog tipa ti se najcesce javljaju zbog paddinga, neda mi se sad skidati tvoj css, ali obrisi sve paddinge vezane za prozor ispod tog razmaka pa vidi je'l se javlja. Postoji sad dosta finta kak to izbjegavati i sakrivati ali prvo treba naci dezurnog krivca za taj razmak.

sinisa1989

19.08.2011. 23:20

Citiraj:

Autor Overclock (Post 1959052)

Za takve stvari Firebug spašava dan. Inspectaš neki element i fino sve vidiš što "utječe" na taj element.

Overclock

19.08.2011. 23:47

Ne valja firebug za te bugove s paddingom, sad sam probal na stranici koju radim, pripise taj razmak div-u iznad div-a u kojem je kriticni padding.

sinisa1989

20.08.2011. 19:19

Ja zasad nisam primjetio nikakve nepravilnosti u radu.

sinisa1989

18.09.2011. 18:00

Problem s navigacijom

Ovako, imam jedan problem sa stiliziranjem navigacije. Napravio sam navigaciju i stilizirao ju, ali ne u potpunosti. Naime htio bih napraviti da mi pozadina linka mijenja boju ovisno o aktivnosti. Nešto kao na večernjakovoj stranici.
Znači trenutno mi se pozadina linka mjenja na hover i htio bih da ostane pozadina od hover-a dok je korisnik otvorio tu stranicu.
Pretpostavljam da bi se to moralo riješit pomoću javascript-a i imam ideju o tome, ali ne znam kako to izvesti.
Ideja bi bila da mi na aktivni link doda klasu npr. "aktivan". Naravno ne znam kako bih to izveo.
Hvala na pomoći.

P.S. valjda nije problem što sam pitanje postavio u ovoj temi.

zwer	18.09.2011. 18:18

Za ovaj dio o aktivnoj stranici, pretpostavimo da imas div sa identifikatorom nav i u njemu linkove u tagu a... modificiraj ako si radio sa UL/OL ili slicno...

Code:

function setActive() {

  aObj = document.getElementById('nav').getElementsByTagName('a');

  for(i=0;i
    if(document.location.href.indexOf(aObj[i].href)>=0) {

      aObj[i].className='active';

    }

  }

}

Dakle to ukratko dohvati div sa identifikatorom nav, pa onda sve tagove a, izvrti ih u petlji i doda class active ako je to trenutna stranica.

I onda samo dodas u script tag na kraju dokumenta (tako da se okine kad se cijeli page ucita):

Code:

window.onload = setActive;

Sto se mijenjanja u razlicite boje tice, ne da mi se to pisat, ali princip je slican. Kazes javascriptu da na hover misa iznad taga dohvati innerHTML linka (znaci npr. imas PAGE 1 ) - u ovom slucaju ce to bit tekst PAGE 1, i onda napravis switch case spiku da za svaki link u meniju promjenis klasu u neku drugu, ovisno o boji... npr. this->className = blue za PAGE 1, red za PAGE 2 i slicno... Ne sjecam se tocne sintakse, znam da je u jQueryu nesto u djiru addClass("class1 class2");

sinisa1989

18.09.2011. 18:33

Puno si mi pomogao. Plaćam cugu. Hvala.:)

sinisa1989

19.09.2011. 16:44

Citiraj:

Autor zwer (Post 1979191)

Za ovaj dio o aktivnoj stranici, pretpostavimo da imas div sa identifikatorom nav i u njemu linkove u tagu a... modificiraj ako si radio sa UL/OL ili slicno...

Code:

function setActive() {

  aObj = document.getElementById('nav').getElementsByTagName('a');

  for(i=0;i
    if(document.location.href.indexOf(aObj[i].href)>=0) {

      aObj[i].className='active';

    }

  }

}

Code:

window.onload = setActive;

Ovo što si ti napisao radi kako treba, ali postoji jedan problem. Jedan link mi već ima klasu otprije. Pa mi onda ova funkcija izbriše već postojeću klasu. Pokušao sam ovo, ali ne radi.

Code:

function setActive() 

{

    aObj = document.getElementById('nav').getElementsByTagName('a');

    for(i=0;i
    {

        if(document.location.href.indexOf(aObj[i].href)>=0) 

        {

            if(aObj.className=='up-last')

            {

                aObj[i].className='active up-last';

            }

            else

            {

                aObj[i].className='active';

            }

        }

    }

}

Pretpostavljam da je negdje greška u sintaksi jer ne znam javascript.

zwer	19.09.2011. 18:26

Code:











        Home | 

        Test | 

        Proba | 

        Ajmo

Eto, meni radi isprobano. Snimis kod u 1 file, nazoves ga index.php, pa ga kopiraj u ostala 3 (ajmo, proba, test) i loadaj u browser...

sinisa1989

19.09.2011. 20:49

Još se jednom srdačno zahvaljujem.:)

Sva vremena su GMT +2. Sada je 15:24.