← HTML + CSS

Mini problema básico com CSS

Lida 5843 vezes

Offline

Cacofb 
Elite
Mensagens 1035 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Boas pessoal!

Tou aqui com um mini problema numa tabela. (deve ser das horas)

Quero fazer uma tabela com cantos arredondados, mas o meu top e bottom tem apenas 4 px de height.

Tenho este código:

Código: [Seleccione]
<div id="header">
  <table width="960" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="images/top960white.gif" width="960" height="4" /></td>
    </tr>
    <tr>
      <td class="white">header</td>
    </tr>
    <tr>
      <td><img src="images/bottom960white.gif" width="960" height="4" /></td>
    </tr>
  </table>
</div>

Apenas queria definir fundo branco para a classe white de modo a que fique com a zona a editar. As outras td ficam com as imagens de top e bottom respectivamente.

Tenho este CSS:

Código: [Seleccione]
#header
{
background-color: transparent;
height: 50px;
width: 960px;
}

div #header .white{
background:#FFF;
border: 0;
}

Acho que tou a fazer correctamente, mas ele dá-me espaços. entre o td do meio e os restantes.

De CSS ainda sei algumas coisinhas, mas brincar com estes td's, tr's, th's em tabelas ainda sou muito verde.

Se alguém me puder dar a dica agradeço. Obrigado
Offline

Riey 
Membro
Mensagens 1001 Gostos 0
Feedback +4

Troféus totais: 30
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Código: [Seleccione]
<div id="header">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="images/top960white.gif" height="4px" /></td>
    </tr>
    <tr>
      <td class="white">header</td>
    </tr>
    <tr>
      <td><img src="images/bottom960white.gif" height="4px" /></td>
    </tr>
  </table>
</div>


Código: [Seleccione]
#header {
background-color: transparent;
height: 50px;
width: 960px;
}

#header .white{
background:#FFFFFF;
}


isto assim não te funciona??? coloca as imagens aqui sff
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Acho que aquele DIV que o Riey tirou estava ali a mais...
Offline

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

porque nao usar o CSS para fazer os cantos arredondados?
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

porque nao usar o CSS para fazer os cantos arredondados?
Como?
Poupavas-me muito trabalho a fazer imagens sempre que preciso de mudar/fazer cantos arredondados!
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

porque nao usar o CSS para fazer os cantos arredondados?
Porque nem todos os browsers o suportam... A não ser que te estejas a referir em fazer da maneira mais complicada e confusa... LOL
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Porque nem todos os browsers o suportam... A não ser que te estejas a referir em fazer da maneira mais complicada e confusa... LOL

Como assim, se ele está a usar imagens para fazer os cantos arredondados qual é o problema com os browsers, complicação e confusão?
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Como assim, se ele está a usar imagens para fazer os cantos arredondados qual é o problema com os browsers, complicação e confusão?

Eu tava a falar em CSS e não em imagens...
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Eu percebi, mas agora fico sem perceber o que querias dizer com "fazer da forma mais complicada e confusa".
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Eu percebi, mas agora fico sem perceber o que querias dizer com "fazer da forma mais complicada e confusa".

Sim, há maneira no css de fazer com varias divs, o que torna mais complicado e confuso. Mas também dá para fazer com imagens e css...
Offline

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Porque nem todos os browsers o suportam... A não ser que te estejas a referir em fazer da maneira mais complicada e confusa... LOL
Todos os BONS browsers suportam isso :)
Para alem de mais leve do que as imagens acho que é menos trabalhoso (Em vez de tar a fazer tabelas e complicações do genero
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Todos os BONS browsers suportam isso :)
Para alem de mais leve do que as imagens acho que é menos trabalhoso (Em vez de tar a fazer tabelas e complicações do genero
Sim, todos os BONS, mas infelizmente nem toda a gente utilizam os BONS. O ultimo Opera por estranho que seja não suporta cantos redondos...
Offline

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Sim, todos os BONS, mas infelizmente nem toda a gente utilizam os BONS. O ultimo Opera por estranho que seja não suporta cantos redondos...
A sério?? Essa nao sabia :S
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

A sério?? Essa nao sabia :S
Yup, achei estranho porque a versão 9 suportava, agora a 10 não... :/
Offline

Cacofb 
Elite
Mensagens 1035 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Aqui vão as imagens de top e bottom.





O código funciona mas deixa-me espaços entre as células acho eu.
Só quero colocar a branco o fundo do meio, para que possa também ser a zona de conteúdo.