fiksni navigacijoni bar

fiksni navigacijoni bar

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.
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:
<script type="text/javascript"> function loadNewPage(temp) { var req = new XMLHttpRequest(); req.open("GET", temp, false); req.send(null); var page = req.responseText; document.getElementById("zaUcitavanje").innerHTML = page; } </script>
imam i ovaj div u kojem je tekst:
<div id="zaUcitavanje"> neki tekst. </div>

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



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..

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

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,

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...

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>

offline
  • Software developer
  • Pridružio: 06 Sep 2005
  • Poruke: 3800
  • Gde živiš: Beograd

zurim sada, evo ti na kratkom primeru
<title>Untitled Document</title> <script type="text/javascript"> function loadNewPage(temp) { var req = new XMLHttpRequest(); req.open("GET", temp, false); req.send(null); var page = req.responseText; document.getElementById("zaUcitavanje").innerHTML = page; } </script> </head> <body> <li><a href="" onclick="loadNewPage('prvi.html'); return false;" id="ucitaj">Prvi</a></li> <li><a href="" onclick="loadNewPage('drugi.html'); return false;" id="ucitaj">Drugi</a></li> <div id="zaUcitavanje">aa</div>
imam ta dva prvi i drugi . html fajla i njih ucitava ono sto im se nalazi u <body> tagu

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:
draganmarkovic.net/newsletter.php 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?

Ko je trenutno na forumu
 

Ukupno su 369 korisnika na forumu :: 2 registrovanih, 1 sakriven i 366 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3028 - dana 22 Nov 2019 07:47

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Sirius, vasa.93