web stranica problem

mrVivi · 05.08.2011., 12:38

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 <div>slika</div> <div>slika2</div> 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.

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

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

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

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 <h1> ili manjem html tagu, nemoj za to koristit <P>.

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

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

Inače vrlo dobro objašnjeno

zwer · 18.08.2011., 08:31

Citiraj:

Autor Uber Gosu

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

..

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

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

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.

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

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<aObj.length;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 <a class="navlink" href="http://www.dot.com/page1/"> PAGE 1 </a> ) - 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

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<aObj.length;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 <a class="navlink" href="http://www.dot.com/page1/"> PAGE 1 </a> ) - 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");

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<aObj.length;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:

<script type="text/javascript">
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
	for(i=0;i<aObj.length;i++) {
		if(document.location.href.indexOf(aObj[i].href)>=0) {
			aObj[i].className = 'link active';
		}
	}
}
</script>

<style type="text/css">
#nav { display: block; padding: 8px; border: solid 1px gray; width: 200px; }
.link {	color: green;text-decoration: none;}
.active { font-size: 17px; color: red;}
</style>

<div id="nav">
	<a href="/test/index.php" class="link">Home</a> | 
	<a href="/test/test.php" class="link">Test</a> | 
	<a href="/test/proba.php" class="link">Proba</a> | 
	<a href="/test/ajmo.php" class="link">Ajmo</a>
</div>
<script>window.onload = setActive;</script>

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.

05.08.2011., 12:38	#1
mrVivi Premium Datum registracije: Jun 2006 Lokacija: Šibenik Postovi: 323	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 <div>slika</div> <div>slika2</div> 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. Uploaded with ImageShack.us http://www.easy-share.com/1917126848/html css.rar

05.08.2011., 13:19	#2
zwer crnjo Moj komp Datum registracije: Mar 2003 Lokacija: Zagreb Postovi: 1,907	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. __________________ 9900K-32GB-5TB-3060TI

05.08.2011., 15:20	#3
fre@k Premium Moj komp Datum registracije: Oct 2008 Lokacija: osijek Postovi: 1,886	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 __________________ Ako Vam je život tužan, ne brinite! Barem Vam je plaća smiješna

05.08.2011., 15:36	#5
zwer crnjo Moj komp Datum registracije: Mar 2003 Lokacija: Zagreb Postovi: 1,907	java nije isto sto i javascript (pise se zajedno). __________________ 9900K-32GB-5TB-3060TI

20.08.2011., 19:19	#14
sinisa1989 Bazinga Moj komp Datum registracije: Nov 2007 Lokacija: Križevci Postovi: 3,932	Ja zasad nisam primjetio nikakve nepravilnosti u radu. __________________ The best place to hide a dead body is page 2 of Google search results.

05.08.2011., 15:31	#4
mrVivi Premium Datum registracije: Jun 2006 Lokacija: Šibenik Postovi: 323	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.

19.08.2011., 23:04	#11
Overclock Premium Moj komp Datum registracije: Mar 2009 Lokacija: Zagorje Postovi: 1,001	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.

19.08.2011., 23:47	#13
Overclock Premium Moj komp Datum registracije: Mar 2009 Lokacija: Zagorje Postovi: 1,001	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.

18.09.2011., 18:00	#15
sinisa1989 Bazinga Moj komp Datum registracije: Nov 2007 Lokacija: Križevci Postovi: 3,932	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. __________________ The best place to hide a dead body is page 2 of Google search results.

18.09.2011., 18:18	#16
zwer crnjo Moj komp Datum registracije: Mar 2003 Lokacija: Zagreb Postovi: 1,907	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<aObj.length;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 <a class="navlink" href="http://www.dot.com/page1/"> PAGE 1 </a> ) - 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"); __________________ 9900K-32GB-5TB-3060TI Zadnje izmijenjeno od: zwer. 18.09.2011. u 18:28.

18.09.2011., 18:33	#17
sinisa1989 Bazinga Moj komp Datum registracije: Nov 2007 Lokacija: Križevci Postovi: 3,932	Puno si mi pomogao. Plaćam cugu. Hvala. __________________ The best place to hide a dead body is page 2 of Google search results. Zadnje izmijenjeno od: sinisa1989. 18.09.2011. u 18:39.

19.09.2011., 20:49	#20
sinisa1989 Bazinga Moj komp Datum registracije: Nov 2007 Lokacija: Križevci Postovi: 3,932	Još se jednom srdačno zahvaljujem. __________________ The best place to hide a dead body is page 2 of Google search results.

Oglasni prostor
PC Ekspert Forum Oglas