HTML. Tabele.

#1
Motvel

Posted 12 July 2009 - 11:22

Member

Grup: Members
Posts: 295
Înscris: 12.02.2007

Fac layout-ul unei pagini cu ajutorul tabelelor.
Prima coloana a paginii este impartita in 3 randuri: headerul (culoare verde), meniul (linkurile), si al treilea rand contine o celula goala de culoare alba,
pentru a nu se repeta imaginea background din meniu (cercul taiat), atunci cand se va introduce mult text in pagina si layout-ul se va intinde.
Merge OK pe Firefox

FF.gif 9.84K 22 downloads dar
Problema apare la afisarea paginii in Internet Explorer 6

IE.gif 12.1K 21 downloads, si consta in faptul ca celula goala este deplasata in jos si ca rezultat se repeta imaginea de background a meniului.
Pentru mai buna intelegere am atasat 2 imagini cu rezultatele pe ambele browsere sa vedeti diferenta.
Deci, cum as putea rezolva aceasta problema?
(Stiu ca un layout se face cu CSS, ca tabele sun demodate in privinta asta, se incarca greu, etc, etc,.... dar acum urmaresc altceva si deaceea va rog sa ma ajutati cu
solutii doar pentru tabele.).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Home</title>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<table border="0" width="800" cellspacing="0" cellpadding="0">
<tr> <!-- Headerul paginii -->
<td width="148" bgcolor="green" height="116">�</td>
<td width="164" height="116" bgcolor="orange">�</td>
<td width="488" colspan="2" bgcolor="brown">�</td>
</tr> <!-- Sfarsit Headerul paginii -->

<tr> 
<!-- Meniul saitului -->
<td width="148" height="219" background="images/bgmenu.jpg" align="right">
<a href="#"><b>Link 1</b></a> �<br>
<a href="#"><b>Link 2</b></a> �<br>
<a href="#"><b>Link 3</b></a> �<br>
</td> <!-- Sfarsit meniul saitului -->

<!-- Submenu -->
<td width="164" rowspan="2" bgcolor="94ACEA" valign="top">
Submenu
</td>

<!-- Pentru a adauga un spatiu de 10 pixeli intre "submeniu" si textul din "body!" -->
<td width="10">�</td>
<td width="488" rowspan="2" valign="top">

<p><h3 align="right"><font color="#000000" face="arial">Body!</font></h3></p>

<font size="2" color="#000000" face="Verdana">
<p>Text.... text....<br> 
</p>
<p>Text.... text....<br> 
</p>
<p>Text.... text....<br> 
</p>
<p>Text.... text....<br> 
</p>
</td>
</tr>

<!-- Se ataseaza sub Meniul paginii pentru ai fixa acestuia o inaltime fixa
si sa nu se repede background-image'ul -->
<tr>
<td width="148">�</td>
</tr>

<!-- Footer -->
<tr bgcolor="#3186C9">
<td colspan="4" align="center">
<font face="tahoma" size="1">�</font>
</td>
</tr>
</table> <!-- Sfarsit tabel -->

</body>
</html>

Edited by Motvel, 12 July 2009 - 11:28.

Back to top

#2
Alta_

Posted 12 July 2009 - 12:44

Active Member

Grup: Members
Posts: 1,197
Înscris: 22.05.2007

Am testat codul tau la mine, dar se repeta background-ul si in Firefox. Tot la CSS va trebui sa apelezi:

<td valign="top" align="right" style="background: url(images/bgmenu.jpg) no-repeat;">

sau

<style>
.meniu {
  background-image: url(images/bgmenu.jpg);
  background-repeat: no-repeat;
  background-position: top right;
}
</style>
...
<table>
  <tr>
	<td class="meniu">Links</td>
  </tr>
</table>
...

Back to top

#3
Motvel

Posted 12 July 2009 - 16:48

Member

Grup: Members
Posts: 295
Înscris: 12.02.2007

Alta_, on 12th July 2009, 13:44, said:

Am testat codul tau la mine, dar se repeta background-ul si in Firefox. Tot la CSS va trebui sa apelezi:

<td valign="top" align="right" style="background: url(images/bgmenu.jpg) no-repeat;">

sau

<style>
.meniu {
  background-image: url(images/bgmenu.jpg);
  background-repeat: no-repeat;
  background-position: top right;
}
</style>
...
<table>
  <tr>
	<td class="meniu">Links</td>
  </tr>
</table>
...

Mersi!
Intre timp unica solutie care am gasit=o este aceea ca sai pun un height celulei goale. Astfel ea va avea o inaltime fixa si va tine background-ul strans.
Dar daca nu ar fi existat CSS (sau altceva de ajutor), cu s-ar fi rezolvat?... :unsure:

Back to top

#4
Alta_

Posted 12 July 2009 - 18:09

Active Member

Grup: Members
Posts: 1,197
Înscris: 22.05.2007

Motvel, on 12th July 2009, 17:48, said:

Dar daca nu ar fi existat CSS

Cred ca merge sa dimensionezi celula (TD) in care vrei sa pui meniul, asa incat sa aiba aceeasi inaltime fixa (height) cu a imaginii - background. N-am testat.

Back to top

Anunturi

Bun venit pe Forumul Softpedia!

HTML. Tabele.

#1 Motvel Posted 12 July 2009 - 11:22

#2 Alta_ Posted 12 July 2009 - 12:44

#3 Motvel Posted 12 July 2009 - 16:48

#4 Alta_ Posted 12 July 2009 - 18:09

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
Motvel

Posted 12 July 2009 - 11:22

#2
Alta_

Posted 12 July 2009 - 12:44

#3
Motvel

Posted 12 July 2009 - 16:48

#4
Alta_

Posted 12 July 2009 - 18:09