Problema com CSS no Eclipse

Olá Pessoal,

sou iniciante em Java e não sei trabalhar muito com CSS.
Estou com dificuldade na formatação do CSS que não aparece no eclipse 3.1 (utilizo junto Exadel) da mesma forma que aparece no browser do firefox, no IE 6.0 já tentei e dá erro. As cores e as letras ficam diferentes, e a imagem também não aparece. Preciso de algum plugin??

No eclipse as pastas estão assim:

  • Meu projeto
    – JavaSource (onde estão as servlets, BO, DTO, DAO)
    – WebContent (onde estao as pastas abaixo:)
    — Pasta CSS (com o arquivo .css)
    — images (imagem que quero inserir)
    — Web Inf (onde estão as paginas .jsp)

O codigo do arquivo .css é este:

html * {
margin: 0;
padding: 0;
border: 0; }

body {
margin: 0;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
line-height: 1.1em;
text-align: center;
background-color: #A5DDF8;
background-image: url('images/faixa.jpg);
background-repeat: repeat-x; }

#page {
width: 70%;
text-align: left;
margin-left: auto;
margin-right: auto; }

/* header: */

#header {
width: 100%;
height: 2.3em;
color: #fff;
padding-top: 15px;
background: #206293; }

#header_bar {
width: 70%;
padding-left: 10px;
text-align: left;
margin-left: auto;
margin-right: auto; }

.title {
font-family: verdana,“Trebuchet MS”, Arial, Tahoma, sans-serif;
font-weight: bold;
font-size: 1.2em;
font-style: italic;
color: yellow;
letter-spacing: 1px; }

.title a:link, .title a:visited {
color: #FFFFFF;
text-decoration: none; }

/* content column: */

#content {
float: left;
display: inline;
position: relative;
width: 100%;
font-size: 0.75em;
background-color: #fff;
border: 0.1em solid #4284B5; }

#content h1 {
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.5em 0em 0em 0.2em;
font-size: 1.1em;
font-family: “Trebuchet MS”, Arial, sans-serif;
color: #FF6300; }

#content p {
margin: 0em 0em 0.5em 0em;
padding: 0.35em; }

#path {
font-family: Verdana, Arial, sans-serif;
margin: 0em 0em 0em 0em;
padding: 0.4em 0.6em 0.4em 0.6em;
font-size: 0.9em;
color: #2F5E80;
background-color: #D0E7F4; }

#right {
float: left;
width: 15%;
display: block; }

#left {
float: left;
width: 82%;
display: block;
border-right: 1px solid #def;
padding-bottom: 10px;
padding-right: 10px;
text-align: justify; }

#right_menu {
width: 100%;
padding-left: 10px;
text-align: left; }

#right_menu li{
display: block;
line-height: 2em; }

.block {
background: #FFFFC1;
display: block;
border: 1px solid #FFFFa7;
text-indent: 10px;
text-align: justify; }

.top_menu {
font-family: Verdana, Arial, sans-serif;
margin: 0em;
padding: 0em 0.3em 0em 0em;
font-size: 0.8em;
text-transform: lowercase;
color: #fff;
text-align: right;
display: block; }

.top_menu a:link,.top_menu a:visited {
color: #fff;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
background: #1B4F76; }

.top_menu a:hover, top_menu a:active {
color: #eef;
background: #18486B; }

#content a:link, #content a:visited {
color: #224966;
text-decoration: none;
border-bottom: 1px dotted #B1CDE2; }

#content a:hover, #content a:active {
color: #2E668B; }

#right_menu a:link, #right_menu a:visited {
color: #224966;
text-decoration: none;
border-bottom: 1px dotted #B1CDE2; }

#right_menu a:hover, #content a:active {
color: #2E668B; }

#content acronym {
border-bottom: 1px dotted #4284B5;
cursor: help;
margin: 0;
padding: 0; }

#main {
padding: 0.5em 1.5em 1.5em 0.7em; }

input {
border: 1px solid #B0D7EC; }

div.img_left {
float: left;
margin: 0.5em 0.8em 0em 0em; }

div.img_right {
float: right;
margin: 0.5em 0em 0em 0.8em; }

div.img_left img, div.img_right img {
display: block;
margin: 0;
padding: 0; }

/* this clears floating (e.g images) */
br.clear {
clear: both;
display: none; }

/* footer: */

#footer {
margin: 0em;
padding: 0em;
font-size: 0.65em;
clear: both;
color: #FFFFFF;
background: #206293;
text-align: center; }

#footer a:link, #footer a:visited {
color: #fff;
text-decoration: none; }

#footer a:hover, #footer a:active {
color: #fff; }

.center {
text-align: center;
display: block;
padding: 5px; }

.center_italic {
text-align: center;
display: block;
font-style: italic;
padding: 5px; }

–> o arquivo acima é linkado dentro da minha página .jsp:

<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“css/default.css” />
</head>
<body>
blablablablabla
</body>
</html>


Podem me ajudar?
Valeu,
crhubbe.

Não sei se é isso, mas experimenta colocar “px” nos zeros que estão desacompanhados. (linhas 2, 3 e 4, por exemplo).

Outra coisa, deu erro na linha 14, onde tá escrito background-image&#58; url&#40;'images/faixa.jpg&#41;;
está faltando uma aspa na url. O certo seria background-image&#58; url&#40;'images/faixa.jpg'&#41;;

Experimenta isso.
Se tiveres interesse, usa esse site como validador de CSS.

[]s

Olá,

fiz as alterações que vc falou, mas não deu certo.
Abaixo coloquei o código que está na página .jsp, acho que o problema pode estar aqui… , se puder dar uma olhada, agradeço.

<body>

&lt;div id="header"&gt;
    &lt;div id="header_bar"&gt;
        &lt;span class="title"&gt;&lt;a href="index.jsp"&gt;Minha página&lt;/a&gt;&lt;/span&gt;            
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id="page"&gt;    
    &lt;div id="wrapper"&gt; 
        &lt;div id="content"&gt;
            &lt;div id="path"&gt;
                Autenticação do Sistema
            &lt;/div&gt;    
        &lt;div id="main"&gt;
            &lt;div id="left"&gt;
                &lt;p class="block"&gt;
                    &lt;span class="center"&gt;"Simplicity is the ultimate sophestication" - Albert Eienstein.&lt;/span&gt;
                &lt;/p&gt;
      
                &lt;p&gt;
                    &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
		Para a utilização do Sistema é necessário autenticação via "Usuário" e "Senha".             
                &lt;/p&gt;
        &lt;form method="post" action="&lt;%=request.getContextPath()%&gt;/UsuarioValidarServlet"&gt;                     
		    &lt;p&gt;		    
			&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
			Nis: &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input type="text" name="nis"&gt; &lt;br&gt;			
			&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
			Usuário: &amp;nbsp; &lt;input type="text" name="usuario"&gt; &lt;br&gt;			
			&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
			Senha: &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input type="password" name="senha"&gt;
		    &lt;/p&gt; 	             
                    
                &lt;/div&gt;  
			&lt;div id="right"&gt;
                    &lt;div id="right_menu"&gt;
                    	&lt;input type="submit" value="Entrar" onblur="JavaScript.verificar"&gt;&lt;br&gt;
						&lt;input type="reset" value="Limpar Campos"&gt;&lt;br&gt;							
						&lt;input type="button" value="Cancelar"&gt;&lt;br&gt;
                    &lt;/div&gt;
                &lt;/div&gt;                     
        	&lt;/div&gt;   
    	&lt;/form&gt;
  &lt;/div&gt;    
&lt;div id="footer"&gt;
    Copyright &amp;copy; 2006 Your Company Inc. Website optimized for 1028 x 768 resolution. Crafted by &lt;a href="mailto:gg@sprout.in"&gt;Ganesh Gunasegaran.&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

</div>
</body>


Valeu pelas dicas!
crhubbe.

Olá,

fiz as alterações que vc falou, mas não deu certo.
Abaixo coloquei o código que está na página .jsp, acho que o problema pode estar aqui… , se puder dar uma olhada, agradeço.

<body>

&lt;div id="header"&gt;
    &lt;div id="header_bar"&gt;
        &lt;span class="title"&gt;&lt;a href="index.jsp"&gt;Minha página&lt;/a&gt;&lt;/span&gt;            
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id="page"&gt;    
    &lt;div id="wrapper"&gt; 
        &lt;div id="content"&gt;
            &lt;div id="path"&gt;
                Autenticação do Sistema
            &lt;/div&gt;    
        &lt;div id="main"&gt;
            &lt;div id="left"&gt;
                &lt;p class="block"&gt;
                    &lt;span class="center"&gt;"Simplicity is the ultimate sophestication" - Albert Eienstein.&lt;/span&gt;
                &lt;/p&gt;
      
                &lt;p&gt;
                    &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
		Para a utilização do Sistema é necessário autenticação via "Usuário" e "Senha".             
                &lt;/p&gt;
        &lt;form method="post" action="&lt;%=request.getContextPath()%&gt;/UsuarioValidarServlet"&gt;                     
		    &lt;p&gt;		    
			&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
			Nis: &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input type="text" name="nis"&gt; &lt;br&gt;			
			&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
			Usuário: &amp;nbsp; &lt;input type="text" name="usuario"&gt; &lt;br&gt;			
			&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
			Senha: &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input type="password" name="senha"&gt;
		    &lt;/p&gt; 	             
                    
                &lt;/div&gt;  
			&lt;div id="right"&gt;
                    &lt;div id="right_menu"&gt;
                    	&lt;input type="submit" value="Entrar" onblur="JavaScript.verificar"&gt;&lt;br&gt;
						&lt;input type="reset" value="Limpar Campos"&gt;&lt;br&gt;							
						&lt;input type="button" value="Cancelar"&gt;&lt;br&gt;
                    &lt;/div&gt;
                &lt;/div&gt;                     
        	&lt;/div&gt;   
    	&lt;/form&gt;
  &lt;/div&gt;    
&lt;div id="footer"&gt;
    Copyright &amp;copy; 2006 Your Company Inc. Website optimized for 1028 x 768 resolution. Crafted by &lt;a href="mailto:gg@sprout.in"&gt;Ganesh Gunasegaran.&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

</div>
</body>


Valeu pelas dicas!
crhubbe.

Vou ver no que dá isso, mas antes, só uma dica…
Quando fores colocar código no post, usa a tag Code :wink:
Fica mais apresentável.

[]s

Ok, valeu pela dica!

crhubbe.

Cara, testei e não consegui resolver rápido.
Teu código não usa position: em lugar nenhum, sei lá, eu não conseguiria arrumar sem mudar muita coisa.
Espero que alguém tenha soluções mais práticas, pq eu sugeriria alterar tudo hehehe

[]s

Também cheguei a mesma conclusão que vc! Valeu pelas dicas e pela tentativa.
Vou começar de novo e diferente.

:wink:
Até a próxima!
crhubbe.