Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

<TD> sa dve slike??? Kako?!

[es] :: Web dizajn i CSS :: <TD> sa dve slike??? Kako?!

[ Pregleda: 2694 | Odgovora: 6 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

djamsi
Dejan Kircanov
Data Centar
HostNet Limited Corp.
Chicago

Član broj: 11896
Poruke: 172
*.hsd1.il.comcast.net.

Sajt: www.hostnetcorp.com


+1 Profil

icon <TD> sa dve slike??? Kako?!06.04.2009. u 02:42 - pre 183 meseci
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]
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: <TD> sa dve slike??? Kako?!06.04.2009. u 04:58 - pre 183 meseci
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; 
}

 
Odgovor na temu

djamsi
Dejan Kircanov
Data Centar
HostNet Limited Corp.
Chicago

Član broj: 11896
Poruke: 172
*.hsd1.il.comcast.net.

Sajt: www.hostnetcorp.com


+1 Profil

icon Re: <TD> sa dve slike??? Kako?!06.04.2009. u 08:17 - pre 183 meseci
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
 
Odgovor na temu

Miroslav Ćurčić
ex mVeliki
Novi Sad

Član broj: 19034
Poruke: 1118
..2.252.195.static.beotel.net.



+19 Profil

icon Re: <TD> sa dve slike??? Kako?!06.04.2009. u 11:27 - pre 183 meseci
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>

"The quieter you become, the more you are able to hear."
Blog | PowerCMS
 
Odgovor na temu

Vlatko Zdrale
Vlatko Zdrale
Chicago, USA

Član broj: 155036
Poruke: 102
*.client.dsl.net.

Sajt: www.zemoon.com


+1 Profil

icon Re: <TD> sa dve slike??? Kako?!08.04.2009. u 17:07 - pre 183 meseci
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....
 
Odgovor na temu

djamsi
Dejan Kircanov
Data Centar
HostNet Limited Corp.
Chicago

Član broj: 11896
Poruke: 172
*.hsd1.il.comcast.net.

Sajt: www.hostnetcorp.com


+1 Profil

icon Re: <TD> sa dve slike??? Kako?!10.04.2009. u 10:23 - pre 183 meseci
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.
 
Odgovor na temu

Nemke_BG

Član broj: 163822
Poruke: 341
*.bg.krstarica.net.

Jabber: Nemke_BG@elitesecurity.org
Sajt: https://www.nmdesign.rs


+45 Profil

icon Re: <TD> sa dve slike??? Kako?!10.04.2009. u 12:32 - pre 183 meseci
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....
...
 
Odgovor na temu

[es] :: Web dizajn i CSS :: <TD> sa dve slike??? Kako?!

[ Pregleda: 2694 | Odgovora: 6 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.