[ djamsi @ 06.04.2009. 02:42 ] @
stvar je ovako. treba da stavim neko efekt u tabelu to znaci da su to dve slike top i bottom. To znaci necu da koristim DIV tag posto od zavisnosti browsera i detekta rezulucii morao bih da ispitam svaku rezoluciju podesim zapisem u fail a to ce da mi oduzme puno vremena. Zbog toga sam se odlucio da sve to strpim u tabelu. Ukoliko ima neki sajd ili progrmcic koj radi sa detekciom browsera i rezoluciju moze da postavi ovde da bi olaksao rad sa div tagom. No da prezdem na kod koi sam napisao i koi ne znam kako da ga saberem u jedan TD. Kod odprilike bi bio ovako:

CSS CODE:
Code:

.td_top{
width:100px;
background-image: url(images/header-efect_01.gif) repeat-x;
background-position:top;
background-color:ffffff;
}
.td_bottom{
width:80px;
background-image: url(images/foter-efect_01.gif) repeat-x;
background-position:bottom;
background-color:ffffff;
}
#td_bottom{
width:80px;
background-image: url(images/foter-efect_01.gif) repeat-x;
background-position:bottom;
background-color:ffffff;
}


Include CSS HTML CODE:
Code:

<table width="780" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td Id="td_bottom" class="td_top" width="780"></td>
      </tr>
</table>


Direktan HTML CODE:
Code:

<table width="780" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td  style="background: #ffffff url(images/foter-efect_01.gif) repeat-x top;" width="780"></td>
      </tr>
</table>

Radi samo ovako:
Direktan HTML CODE:
Code:

<table width="780" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td  style="background: #ffffff url(images/header-efect_01.gif) repeat-x top;" width="780"></td>
        <td  style="background: #ffffff url(images/foter-efect_01.gif) repeat-x top;" width="780"></td>
      </tr>
</table>

Include CSS HTML CODE:
Code:

<table width="780" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="td_top" width="780"></td>
        <td class="td_bottom" width="780"></td>
      </tr>
</table>


Jel mozda neko ima neko resenje kako ja te dve slike da strpim u jedan TD tag ???


[edit: dodati [code][/code] tagovi]

[Ovu poruku je menjao Aleksandar Ružičić dana 06.04.2009. u 05:51 GMT+1]
[ Aleksandar Ružičić @ 06.04.2009. 04:58 ] @
prva stvar je sto si pogresio u vezi odabira tabela umesto div-ova. ne razumem o kakvim detekcijama rezolucije govoris, to je sasvim nepotrebno.

a druga stvar je sto ti ipak treba div unutar tog td-a, ako hoces da imas dve slike, recimo:

Code:

<td class="td_top">
  <div class="td_bottom"></div>
  <!-- sadrzaj ide ovde -->
</td>

Code:

.td_top {
  background: #fff url(images/header-efect_01.gif) left top repeat-x; 
  position: relative;
}

.td_bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(images/foter-efect_01.gif) left bottom repeat-x; 
}
[ djamsi @ 06.04.2009. 08:17 ] @
Probao sam sa code koje je postavio Aleksandar ali naisao sam na ono sta sam i napisao moram da menjam poziciju na DIV tag. Ja cu vam uploadovati print scrina kako to sve treba da izgleda bez obzira na koju rezoluciju ce da se pristupi na sajtu.

Hvala na pomoci Aleksandar.

- Ovako treba da izgleda
- Ovako je sa DIV tagom
[ Miroslav Ćurčić @ 06.04.2009. 11:27 ] @
A da probaš sa:
Code:

<td style="height:200px; background:url(images/foter-efect_01.gif) repeat-x left bottom">
  <img src="images/header-efect_01.gif" />
  Tekst koji ide između gornje i donje slike
</td>
[ Vlatko Zdrale @ 08.04.2009. 17:07 ] @
nisam bas siguran da si shvatio ovo oko tabela. Ako koristis tabelu, onda slobodno mozes da koristis i vise redova
pa umesto ovog sto si koristio:
Code:

<table width="780" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="td_top" width="780"></td>
        <td class="td_bottom" width="780"></td>
      </tr>
</table>


stavi ih u dva reda:
Code:

<table width="780" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="td_top"></td>
      <tr>
      </tr>
        <td class="td_bottom"></td>
      </tr>
</table>

jer nije logicno da ako je sirina tabele 780 u toj istoj tabeli imas dva pola sirine 780....
[ djamsi @ 10.04.2009. 10:23 ] @
Citat:
Vlatko Zdrale: nisam bas siguran da si shvatio ovo oko tabela. Ako koristis tabelu, onda slobodno mozes da koristis i vise redova
pa umesto ovog sto si koristio:
Code:

<table width="780" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="td_top" width="780"></td>
        <td class="td_bottom" width="780"></td>
      </tr>
</table>


stavi ih u dva reda:
Code:

<table width="780" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="td_top"></td>
      <tr>
      </tr>
        <td class="td_bottom"></td>
      </tr>
</table>

jer nije logicno da ako je sirina tabele 780 u toj istoj tabeli imas dva pola sirine 780....


Jeste ali problem je u tome da kad stavim tekst i neku grafiku da ove dve slike budu u pozadini kako background efect bez obzira na to koliko ce teksta da bide ili slicica tako da scroll ide bezkonecno gore dole a da efect ostane na top i bottom od tabele. Ako stavim div tag onda moram da upisem kordinate od gde pocinje gde zavsava, sirina visina. Muka mi je sto pri razlicite setinze displea moram da menjam ili napravim auto detect script. Pre 3-4 godine bilo je lako posto bilo je neki standard 800x600 1024x768 1240x800 ali sad ja se nadam da niko vise to ne moze da prati, a i da bih voleo da napravim takav script trebace mi testirana bar na jedno desetak displea i desetak tipova graficke kartice posto ove nove imaju neke cudne rezolucije pogotovo ako je displaj 14:9.
[ Nemke_BG @ 10.04.2009. 12:32 ] @
Ne razumem zasto mislis da je to problem ili te ja nista ne razumem.......ali za slucaj da sam uspeo da te razumem, probaj ovako....

stavis jedan div sa slikom kao pozadinom ispod contenta, stavis fiksnu visinu diva tj. da bude visine slike, stavis position: relative.....das mu z-index manji nego contentu, stavis mu negativnu top marginu, i to je to:

Nesto ovog tipa

Code:

background-image:url(tvoja_slika.jpg);
background-position: bottom;
height:(visina_slike)px;
margin-top:-(koliko_ces_da_dizes_tu_sliku_gore)px;
position:relative;
z-index:1;


a glavnom divu koji sadrzi content stavis
Code:

position:relative;
z-index:2;


vrlo jednostavno....