[resolvido] xhtml + css

21 de fevereiro de 2013 17 respostas

guga08 21 de fevereiro de 2013

Boas pessoal,

Percebo muito pouco sobre controlar os estilos de uma página através de um documento externo, e por isso gostaria que me ajudassem pois penso que depois de saber 1 sei os outros todos.

O meu layout.css está assim:

#title {
	FONT-SIZE: large; 
	FONT-WEIGHT: bold; 
	font-family:times new roman,times,serif;
}

Agora quero passar tudo o que tem "style" no meu xhtml para o meu css, por exemplo nesta página:

<span id="title">Manter Interfaces <br />
		</span>

		<br />
			<h:form id="formInterfaces">
					
					<rich:toolBar id="toolBar" style="width : 700px;">
				
                                         </rich:toolBar>
...
...

                                          <rich:dataTable id="interfacesTable" var="intf" value="#{interfacesDetalhadas}"
						rows="#{interfaceBean.linhasPorPagina}" rowClasses="cur" style=" width : 700px;" >

                                           </rich:dataTable>

                                           <rich:datascroller id="interfacesScroller2" for="interfacesTable"
							maxPages="20" style="position: absolute; left: 226px">
						</rich:datascroller>
                </h:form>

O meu title está aparecer de acordo com o css, mas como meto nesse ficheiro o "style" da toolbar, da datatable e do datascroller? Tenho várias páginas com datatable com diferentes style.

17 Respostas

denis_gariglio 21 de fev. de 2013

Vc pode criar um arquivo e colocar diferentes nomes para os estilos.
Feito isso vc chama o arquivo na sua pagina e no style dos campos vc chama pelo nome do css que esta nesse arquivo.

[]s

guga08 21 de fev. de 2013

denis_gariglio:
Vc pode criar um arquivo e colocar diferentes nomes para os estilos.
Feito isso vc chama o arquivo na sua pagina e no style dos campos vc chama pelo nome do css que esta nesse arquivo.

[]s

O que eu queria era ter um único arquivo css para todo o site. Eu já importei esse aquivo css em todos os xhtml. Mas não sei como meto alguma coisa no arquivo css referindo-me a um ID.

jeffev 21 de fev. de 2013

Acredito que vai ter que criar um para uma que for diferente.

Exemplo:

toolBar1 { width : 700px; }

guga08 21 de fev. de 2013

jeffev:
Acredito que vai ter que criar um para uma que for diferente.

Exemplo:

toolBar1 { width : 700px; }

isso assim não funciona.

vitordarela 21 de fev. de 2013

Amigo segue o exemplo para você referenciar um pagina HTML para pegar as config CSS, com referencia a TAGS segue tmbm o site da W3C SCHOOLS aonde te mostra todas
as TAGS CSS que você queira utilizar, muito util para seu caso, mostra vários exemplos e taus.

<!DOCTYPE html>
<html>
<head>
<title>Página de Teste Trier</title>
<script src="jquery-1.9.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="teste.css" />

LINK PARA TUTORIAL CSS: http://www.w3schools.com/css/default.asp

guga08 21 de fev. de 2013

vitordarela:
Amigo segue o exemplo para você referenciar um pagina HTML para pegar as config CSS, com referencia a TAGS segue tmbm o site da W3C SCHOOLS aonde te mostra todas as TAGS CSS que você queira utilizar, muito util para seu caso, mostra vários exemplos e taus.
<!DOCTYPE html>
<html>
<head>
<title>Página de Teste Trier</title>
<script src="jquery-1.9.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="teste.css" />
LINK PARA TUTORIAL CSS: http://www.w3schools.com/css/default.asp

Eu isso já fiz. Mas não vejo nesses tutoriais onde explica o que eu quero.

Tenho isto:

<rich:modalPanel styleClass="mPanelErros" id="mPanel" width="300" height="200" >
        <f:facet name="header">
            <h:panelGroup>
               <center> <h:outputText value="Mensagem de sucesso/erro"></h:outputText></center>
            </h:panelGroup>
        </f:facet>
        <f:facet name="controls">
            <h:panelGroup>
                <h:graphicImage value="/img/close.png" styleClass="hidelink" id="hidelink"/>
                <rich:componentControl for="mPanel" attachTo="hidelink" operation="hide" event="onclick" />
            </h:panelGroup>
        </f:facet>
      <div id="errosDiv">
				<rich:panel id="panel"  
				rendered="#{not empty interfaceBean.erros}">
				
				<h:graphicImage value="/img/errorr.png"/>
				<h:outputText> &#160; &#160;
				<b>Código:</b> #{interfaceBean.erros.get(0)} <br /><br /> 
				<b>Mensagem:</b> #{interfaceBean.erros.get(1)} <br /> <br /> 
				<b>Descrição:</b> #{interfaceBean.erros.get(2)}</h:outputText>			
			</rich:panel>
			
			<rich:panel id="panelA" width="350" height="100"
				style="text-align: left;border-style:none;background-color: transparent;"
				rendered="#{empty interfaceBean.erros}"><br /><br />
				<center><h:graphicImage value="/img/success.png"/></center>
				<center>
				<h:outputText style="font-size:20px" value="Interface removida"></h:outputText>
			</center>
				</rich:panel>
				
				</div>
    </rich:modalPanel>

Meu css:

.mPanelErros #errosDiv {
	width: 300px;
}

.mPanelErros #errosDiv #panel {
	width:350; 
	height: 100;
	text-align: left;
	border-style:none;
	background-color: transparent;
}

A errosDiv está certa. Mas o panel que está dentro da errosDiv não.

vitordarela 21 de fev. de 2013

esta linha esta errada, não seria "panel" ao inves de "panelA" ?

esta linha esta errada, não seria “panel” ao inves de “panelA” ?

guga08 21 de fev. de 2013

vitordarela:
<rich:panel id="panelA" width="350" height="100"

esta linha esta errada, não seria “panel” ao inves de “panelA” ?

não, o rich:panel a que me refiro no css é o de cima com id=“panel”.

vitordarela 21 de fev. de 2013

Mude seu CSS.

Tire esse bloco de código:

.mPanelErros #errosDiv {  
        width: 300px;  
    }  
      
    .mPanelErros #errosDiv #panel {  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }

Coloque esse:

.mPanelErros #errosDiv {  
        width: 300px;  
    }  
      
    .mPanelErros #errosDiv{  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }  
    .mPanelErros  #panel{  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }

Tente isso, não to podendo testar aqui.

guga08 21 de fev. de 2013

vitordarela:

Mude seu CSS.

Tire esse bloco de código:

.mPanelErros #errosDiv {  
        width: 300px;  
    }  
      
    .mPanelErros #errosDiv #panel {  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }

Coloque esse:

.mPanelErros #errosDiv {  
        width: 300px;  
    }  
      
    .mPanelErros #errosDiv{  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }  
    .mPanelErros  #panel{  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }

Tente isso, não to podendo testar aqui.

Não dá. O "panel" está dentro de "errosDiv" por isso penso que no CSS isso tenha que ser referenciado, mas não estou a ver como.

vitordarela 21 de fev. de 2013

guga08:

vitordarela:

Mude seu CSS.

Tire esse bloco de código:

.mPanelErros #errosDiv {  
        width: 300px;  
    }  
      
    .mPanelErros #errosDiv #panel {  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }

Coloque esse:

.mPanelErros #errosDiv {  
        width: 300px;  
    }  
      
    .mPanelErros #errosDiv{  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }  
    .mPanelErros  #panel{  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }

Tente isso, não to podendo testar aqui.

Não dá. O "panel" está dentro de "errosDiv" por isso penso que no CSS isso tenha que ser referenciado, mas não estou a ver como.

Faça o seguinte.

.mPanelErros #errosDiv {  
        width: 300px;  
    }  
      
    .mPanelErros #errosDiv{  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }  
    #panel{  
        width:350;   
        height: 100;  
        text-align: left;  
        border-style:none;  
        background-color: transparent;  
    }

no seu trexo de código coloque:

<div id="errosDiv">  
             <div id="panel">
                <rich:panel id="panel"    
                rendered="#{not empty interfaceBean.erros}">  
                  
                <h:graphicImage value="/img/errorr.png"/>  
                <h:outputText>      
                <b>Código:</b> #{interfaceBean.erros.get(0)} <br /><br />   
                <b>Mensagem:</b> #{interfaceBean.erros.get(1)} <br /> <br />   
                <b>Descrição:</b> #{interfaceBean.erros.get(2)}</h:outputText>              
            </rich:panel>  
              
            <rich:panel id="panelA" width="350" height="100"  
                style="text-align: left;border-style:none;background-color: transparent;"  
                rendered="#{empty interfaceBean.erros}"><br /><br />  
                <center><h:graphicImage value="/img/success.png"/></center>  
                <center>  
                <h:outputText style="font-size:20px" value="Interface removida"></h:outputText>  
            </center>  
                </rich:panel>  
                  </div>
                </div>

testei! e agora ta certo! só copiar e colar!

vitordarela 21 de fev. de 2013

Teste oque eu lhe passei acima!
aqui testei e ta tudo certo, você só havia feito uma

e para pegar o outro id no caso o "panel" teria que ter outra criada dentro dessa

ou seja tu estrutura teria que ficar assim

<div id="errosDiv>
  <div id="panel>

   //codigo

  </div>
</div>

guga08 22 de fev. de 2013

vitordarela:
Teste oque eu lhe passei acima! aqui testei e ta tudo certo, você só havia feito uma
e para pegar o outro id no caso o "panel" teria que ter outra criada dentro dessa
ou seja tu estrutura teria que ficar assim
<div id="errosDiv>
  <div id="panel>

   //codigo

  </div>
</div>

Mas no seu código eu estou a dar o style à div id="panel", logo não muda nada. Eu quero dar o style ao rich:panel que está dentro da "errosDiv" e não a uma div.

guga08 22 de fev. de 2013

…

vitordarela 22 de fev. de 2013

aaa Blz faça o seguinte entao!
adicione o "styleClass" no seu rich como no exemplo abaixo:

<rich:dataTable styleClass="panel" ...

E adicionar à sua CSS seguinte código:

table.panel{  
        //códigos css 
    }  
      
    table.panel td{  
       //codigos css  
    }

repare que eu usei o rich:dataTable ou seja para tabelas, mas não sei qual o seu caso se seria uma tabela ou não.
caso não seja uma tabela me avise qual o tipo e procurarei o data para lhe informar!

guga08 7 de mar. de 2013

Funcionou, obrigado

vitordarela 7 de mar. de 2013

Opaa!! blzz… Marque o Tópico como resolvido para que outras pessoao com o mesmo problema possao checar

abraço! qualquer coisa estamos ai!

Criado 21 de fevereiro de 2013

Ultima resposta 7 de mar. de 2013

Respostas 17

Participantes 4

17 Respostas

Topicos relacionados