[ Mirjana21 @ 11.04.2011. 16:38 ] @
Može jedna pomoć?
Radim svoj portfolio i treba da postavim navigaciju po rasporedu kao na slici.
Kada se pređe mišem preko svakog linka, on se uveća.
Problem je u tome što sam to uradila preko tabele ali linkovi su i dalje "zavisni" jedan od drugog i kada se pređe mišem preko jednog automatski se pomeraju i oni drugi ka dole. Kako da ih fiksiram da budu zasebni svaki za sebe?
[ Aleksandar Ružičić @ 11.04.2011. 17:27 ] @
Mogla si malo vecu sliku da stavis, za nas corave :)

Tebi bi posao resilo relativno+apsolutno pozicioniranje, ali bez primera markup-a ne mogu ti vise pomoci. Znaci, daj taj deo HTML-a koji imas trenutno pa ako je pogodan dacu ti CSS, ako ne onda ces morati i HTML da menjas :)

Mada, najbolje bi bilo kada bi okacilo to negde pa dala link, da vidimo kakav tacno efekat uvecanja zelis da postignes..
[ Mirjana21 @ 11.04.2011. 18:38 ] @
Evo sajt je okačen ovde pa možeš pogledati:

http://www.m-portfolio.rs/
[ Mirjana21 @ 11.04.2011. 18:39 ] @
Znači ovi linkovi treba da stoje tamo gde su one kukice gore.
[ Br@nkoR @ 11.04.2011. 19:57 ] @
Problem je u ćelijama u kojima se nalaze linkovi sa slikama, jer prilikom hovera dolazi do promene slike koja je veća od originala i nema dovoljno mesta u ćeliji tabele i tom prilikom tu istu ćeliju povećava i gura ostale ćelije sa ostalim linkovima. Jedno od rešenja je da povećaš ćelije tabele u kojima se nalaze linkovi sa slikama, tako da veće slike imaju dovoljno mesta. A možda bolje rešenje je da izbaciš tabele i koristiš div-ove koje ćeš pozicionirati pomoću CSS-a. Nešto na brzinu:
Code:

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>M-portfolio</title>
    <style type="text/css">
      body {
        background-color: #191919;
        margin: 0;
        padding: 0;
        font-family:Georgia, "Times New Roman", Times, serif;
      }
      #page {
        width:1024px;
        height:768px;
        background:url(img/m-portfolio.png) no-repeat #000;
        position: relative;
      }
      
      #biografija span, #radovi span, #kontakt span {
        display: none;
      }
      #biografija {
        position: absolute;
        top: 195px;
        left: 190px;
        width: 124px;
        height: 198px;
        background-image: url('img/biografija1.png');
        background-repeat: no-repeat;
      }
      #biografija:hover {
        background-image: url('img/biografija2.png');
      }
      #radovi {
        position: absolute;
        top: 195px;
        left: 500px;
        width: 87px;
        height: 218px;
        background-image: url('img/radovi1.png');
        background-repeat: no-repeat;
      }
      #radovi:hover {
        background-image: url('img/radovi2.png');
      }
      #kontakt {
        position: absolute;
        top: 195px;
        left: 755px;
        width: 115px;
        height: 224px;
        background-image: url('img/kontakt1.png');
        background-repeat: no-repeat;
      }
      #kontakt:hover {
        background-image: url('img/kontakt2.png');
      }
    </style>
  </head>
  <body>
    <div id="page">
      <a href="#" id="biografija"><span>Biografija</span></a>
      <a href="radovi.html"  id="radovi"><span>Radovi</span></a>
      <a href="kontakt.html" id="kontakt"><span>Kontakt</span></a>
    </div>
  </body>
</html>


Naravno i ovo moje rešenje nije baš najbolje i ima greški, ovo je samo primer.

Pozdrav
[ Mirjana21 @ 11.04.2011. 20:16 ] @
Branko hvala puno. Moj večiti problem je rešen i sada konačno znam kako ubuduće da fiksiram određene objekte na sajtu a da mi se ne pomeraju i ne mešaju. :)))