MyCity » Web dizajn / HTML » fiksni navigacijoni bar

fiksni navigacijoni bar

Napisano na dan: 16.2.2012

fiksni navigacijoni bar
Sledeća strana Pagination

Idi na vrh

Poslao: 16 Feb 2012 19:29
Idi na vrh
offline
  • Pridružio: 08 Sep 2011
  • Poruke: 70

Pozdarav, učim html/css i imam problem da organizujem index stranicu(osnovnu), tako da navigacijoni bar kad se učitavaju druge stranice ostane na istom mestu!
Objašnjenje: Zelim da napravim website, ali ne znam kako da napravim da mi navigation bude stalno fiksan, znaci da se ne load-uje svaki put. Kada npr. kliknem na HOME da se samo sadrzaj ispod navigation bar load-uje a da je navigation bar fiksan.
Ovo primera koje želim da naučim i primenim, početnik sam pa bih molio za temeljno objašnjenje; Unapred Hvala. Wink



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 16 Feb 2012 19:36
Idi na vrh
offline
  • Software developer
  • Pridružio: 06 Sep 2005
  • Poruke: 3800
  • Gde živiš: Beograd

Stara opcija za tako nesto je bio iframe, sto ti ne bih preporucio jer nisu tako popularni u danasnje vreme.

Druga opcija ti je preko JavaScripta, ja sam ovako to uradio:
JS:

  2. <script type="text/javascript">
  3. function loadNewPage(temp) {
  4. var req = new XMLHttpRequest();
  5. req.open("GET", temp, false);
  6. req.send(null);
  7. var page = req.responseText;
  8. document.getElementById("zaUcitavanje").innerHTML = page;
  9. }
  10. </script>

imam i ovaj div u kojem je tekst:
<div id="zaUcitavanje"> neki tekst. </div>

poziv:
  1. <a href="#"><img src="lippen/001.jpg" width="80" height="70"  loadNewPage('lippen/001.html'); return false;" /></a>
ucitava se ovo 001.html



Poslao: 16 Feb 2012 22:37
Idi na vrh
offline
  • Pridružio: 01 Okt 2009
  • Poruke: 791

Ja navigacioni bar ostavljam na istoj poziciji tako sto kopiram <div></div> i CSS kod na svaku sledecu stranicu..

Poslao: 16 Feb 2012 22:47
Idi na vrh
offline
  • Software developer
  • Pridružio: 06 Sep 2005
  • Poruke: 3800
  • Gde živiš: Beograd

anonimni002 ::Ja navigacioni bar ostavljam na istoj poziciji tako sto kopiram <div></div> i CSS kod na svaku sledecu stranicu..

da, ali on hoce da se menja samo sadrzaj u jednom delu sajta a da ostalo ostane fiksno

Poslao: 16 Feb 2012 23:42
Idi na vrh
offline
  • Pridružio: 08 Sep 2011
  • Poruke: 70

N1k0l4 ::anonimni002 ::Ja navigacioni bar ostavljam na istoj poziciji tako sto kopiram <div></div> i CSS kod na svaku sledecu stranicu..

da, ali on hoce da se menja samo sadrzaj u jednom delu sajta a da ostalo ostane fiksno
To je ok ideja da se kopira samo css na nove stranice, ali KaO ŠtO kaže N1k0|4: -samo da se sadržaj menja!!! Znači navigacijoni bar stoi u mestu a stranice se menjaju. Da li je to moguće izvesti samo html/css? Kako vidim sledeći na redu je javascript za učenje!
N1k0|4 javascript kad postavim samo mi otvara novu stranicu koju ja upišem i ništa više. Problem nije rešen,

Poslao: 17 Feb 2012 09:42
Idi na vrh
offline
  • Software developer
  • Pridružio: 06 Sep 2005
  • Poruke: 3800
  • Gde živiš: Beograd

vladan314 ::
N1k0|4 javascript kad postavim samo mi otvara novu stranicu koju ja upišem i ništa više. Problem nije rešen,

daj kod sta si napisao.
meni to sto sam okacio radi...

Poslao: 17 Feb 2012 10:11
Idi na vrh
offline
  • Pridružio: 08 Sep 2011
  • Poruke: 70

evo koda i gde da postavim javascript i kako da ga formulišem (kodiram)?
N1k0|4 ti sam odaberi koju god navigaciju hoces, pa kodiraj da može, meni je sve jedno ja samo učim!
<HTML>
<HEAD>
<title>bonton</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="bonton lepo ponašanje, bonton čaše, bonton na ulici, svadba, cveće,
bonton ljubljenja, restoran bonton" />
<meta name="description" content="primeri za lepo ponašanje i ophođenje" />
<meta name="Author" content="Vladan Stavric copywrite" />
<style type="text/css">
#container {position: relative; left: 40px; width: 860px;}
#masthead {
position: relative; left: 50px; top: 18px; height: 80px; width: 500px;
background-color: transparent; font-size: 60px;
text-align: center; font-style: oblique;
font-family: Textile, cursive;
}

body {
background-image:url('rain.jpg'); Times, Arial, Helvetica;
}
p {font-weight: 400; font-family: Times, Arial, Helvetica;
text-indent: 45px; font-size: 22px; sans-serif;
}
h1 {font-family: Times New Roman Italic, Times, Georgia, serif; font-size: 44px;
text-align: left; padding-top: 30px; text-indent: 116px;
}
#content #nav {float: right; position: relative; width: 130px; top:-15px;
padding-bottom: 30px;
} /*ugnjezdjeno tecenje*/
a {color: white; text-decoration: none; font-style: italic; font-size: 28px;}
a:link {color: green;}
a:visited {color: green;}
a:hover {color: blue; background-color: white;}
a:active {color: red;}
ol {list-style-type: circle;} /*tabela bez oznaka*/
</style>
</HEAD>
<BODY>
<div id="container">
<TABLE width=100% border="0" bgcolor=transparent> <cveće, svadba, čaše>
<tr>
<th><a href="stranica1.html" title="pokloni"><img src="dugmad.gif"></a></th>
<th><a href="stranica3.html" title="bonton na svadbi"><img src="dugme.gif"></a></th>
<th><a href="stranica2.html" title="ponašanje za stolom"><img src="dugme1.gif"></a></th>
</tr>
</TABLE>
<div id="masthead">
<p1>Vaš BONTON</p1>
</div>
<div id="content">
<div id="nav">
<ol>
<li><a href="stranica.html" title="ponašanje na ulici">ulica</a></li>
<li><a href="stranica4.html" title="ponašanje na javnom mestu">restoran</a></li>
<li><a href="stranica5.html">ljubljenje</a></li>
</ol>
</div>
<h1>ovo bi' trebali znati!</h1>
<p>Jedan od osnovnih zadataka razvoja svake ličnosti je uspešna socijalizacija,
tj. uklapanje u društvenu zajednicu u kojoj živi. Da bi to postigla, potrebno je
da prihvati norme i pravila ponašanja koje zajednica propisuje. To se vrši kroz proces vaspitanja dece od rođenja pa
sve do adolescencije, kada mlada osoba već postaje sposobna da i sama, nezavisno od roditelja, pronađe prihvatljivo
ponašanje u datom trenutku. Čak i onaj koji nije imao uslova i mogućnosti da ga u detinjstvu savlada osnovna pravila
ponašanja, može sa malo pažnje i truda nadoknaditi propušteno. pritom je potrebno uporno samo vaspitanje i
samosavlađivanje.</p>
<p>Osoba koja je uspešno socijalizovana lakše se kreće u društvu i bolje rešava sve situacije u koje
može doći. Time mnogo manje dolazi u sukob sa okolinom, izbegava mnoge nesporazume sa članovima svoje porodice, na
radnom mestu, sa prijateljima i poznanicima. Čak i onda kada nije sigurna kako se treba ponašati, postupiće pravilno
jer je u sebi razvila prirodni osećaj za takt. Tako nece sebe dovesti u priliku da svojim postipcima bude ismejana.</p>
<p>Lepo ponašanje ugrađuje u samu čovekovu ličnost i postaje njen sastavni deo. Osoba se neusiljeno i prirodno ponaša po
pravilima bontona, sigurna je u sebe i ispravnost svojih postupaka, uspešna u komunikaciji sa ljudima oko sebe,
uravnotežena je kao ličnost, a sve to mnogo utiče na očuvanje njenog psihičkog zdravlja.</p>
<p align="right"><img src="2cat.gif" width="190" height="125"/></p>
</div>
</div>
</BODY>
</HTML>

Poslao: 17 Feb 2012 17:08
Idi na vrh
offline
  • Software developer
  • Pridružio: 06 Sep 2005
  • Poruke: 3800
  • Gde živiš: Beograd

zurim sada, evo ti na kratkom primeru

  1. <title>Untitled Document</title>
  2. <script type="text/javascript">
  3. function loadNewPage(temp) {
  4. var req = new XMLHttpRequest();
  5. req.open("GET", temp, false);
  6. req.send(null);
  7. var page = req.responseText;
  8. document.getElementById("zaUcitavanje").innerHTML = page;
  9. }
  10. </script>
  11. </head>
  12.  
  13. <body>
  14. <li><a href="" onclick="loadNewPage('prvi.html'); return false;"
  15. id="ucitaj">Prvi</a></li>
  16. <li><a href="" onclick="loadNewPage('drugi.html'); return false;"
  17. id="ucitaj">Drugi</a></li>
  18.  
  19.  
  20. <div id="zaUcitavanje">aa</div>

imam ta dva prvi i drugi . html fajla i njih ucitava ono sto im se nalazi u <body> tagu

Poslao: 17 Feb 2012 19:56
Idi na vrh
offline
  • Pridružio: 17 Feb 2012
  • Poruke: 9

N1k0l4 hvala ti mnogo i to je odlično rešenje! Ti si mi dao kod javascripta za otvaranje new page.
Sada ću dati primer sajta na kome ima takvo rešenje koje ja hoću da saznam kako se koristi:
[Link mogu videti samo ulogovani korisnici] e na ovom sajtu na primer,
prvi #header menu_gore i menu, znači prva dva menija u hederu!
Kako se to izvodi to me intresuje kojom tehnikom?

MyCity » Web dizajn / HTML » fiksni navigacijoni bar

Ko je trenutno na forumu
 

Ukupno su 1215 korisnika na forumu :: 110 registrovanih, 7 sakrivenih i 1098 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: A.R.Chafee.Jr., Aleksej, ALEXV, amonsrb, Andy, Arahne, armor, Avalon015, Baba_Yagi_Antena, bbelic, Bickoooo, Black Luster Soldier, bobomicek, bojan581, bokisha253, bolimejoli, bpop, brundo65, ccoogg123, Cicumile, cojapop, cvrle312, d.arsenal321, DalmatinacMF, damirZR, DavidA, debeli, dekan.m, Dimitrise93, Djota1, dmrdc, Dzoni2412, eagle.rs, EXIT78, Flanker-G, Glavni Oružni, gomago, goran.vvv, GORDI, HrcAk47, ivan_8282, jalos, Jaz, Kanader, kikisp, kn19, Kobrim, koliko, kovac9mm, larix, Lester Freamon, ljuba, luka1978, MarkoD, Martin543, maxim_von_burdengate, Mercury, metallac777, Metanoja, Milan Miscevic, milanpb, milbos, MILJEVINAC, moldway, Mrav Obrad, N.e.m.a.nj.a., Nemanja Opalić, nemkea71, Nobunaga, Novakomp, omen, OtacMakarije, Pale2025, Pancevac, Panzer88, Pilence, PlayerOne, Prašinar, Prečanin30, probisic, proka89, radionica1, raptorsi, Raso75, rednap, rovac, samo opusteno, samoulogovankorisnik, sap, sasakrajina, Sava89, savuni, sekretar, Sir Budimir, Slingshot, sluga, Str2022, tmanda323, UAV operator, vensla, virked, voja64, Volkcho, VP6919, Wrangler, Yellow Pinky, Zimbabwe, zokizemun, Zorge, šumar bk2