[resolvido] xhtml + css

guga08 · Fevereiro 21, 2013, 4:25pm

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:

[code]Manter Interfaces

	<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>[/code]

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.

denis_gariglio · Fevereiro 21, 2013, 4:41pm

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 · Fevereiro 21, 2013, 4:45pm

[quote=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[/quote]

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 · Fevereiro 21, 2013, 5:07pm

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

Exemplo:

toolBar1 { width : 700px; }

guga08 · Fevereiro 21, 2013, 5:23pm

[quote=jeffev]Acredito que vai ter que criar um para uma que for diferente.

Exemplo:

toolBar1 { width : 700px; }[/quote]

isso assim não funciona.

vitordarela · Fevereiro 21, 2013, 5:32pm

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.

[code]

Página de Teste Trier [/code]

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

guga08 · Fevereiro 21, 2013, 5:36pm

[quote=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.

[code]

Página de Teste Trier [/code]

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

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

Tenho isto:

[code]<rich:modalPanel styleClass=“mPanelErros” id=“mPanel” width=“300” height=“200” >
<f:facet name=“header”>
<h:panelGroup>
<h:outputText value=“Mensagem de sucesso/erro”></h:outputText>
</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>

<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>[/code]

Meu css:

[code].mPanelErros #errosDiv {
width: 300px;
}

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

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

vitordarela · Fevereiro 21, 2013, 5:42pm


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 · Fevereiro 21, 2013, 5:47pm

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

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

[/quote]

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

vitordarela · Fevereiro 21, 2013, 5:57pm

Mude seu CSS.

Tire esse bloco de código:

[code]
.mPanelErros #errosDiv {
width: 300px;
}

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

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 · Fevereiro 21, 2013, 6:00pm

[quote=vitordarela]Mude seu CSS.

Tire esse bloco de código:

[code]
.mPanelErros #errosDiv {
width: 300px;
}

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

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.
[/quote]

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 · Fevereiro 21, 2013, 6:07pm

[quote=guga08][quote=vitordarela]Mude seu CSS.

Tire esse bloco de código:

[code]
.mPanelErros #errosDiv {
width: 300px;
}

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

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.
[/quote]

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. [/quote]

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:

[code]

<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>  [/code]

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

vitordarela · Fevereiro 21, 2013, 6:30pm

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

[code]<div id="errosDiv>

<div id="panel> <p>//codigo</p> </div> </div>[/code]

guga08 · Fevereiro 22, 2013, 9:30am

[quote=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

[code]<div id="errosDiv>

<div id="panel> <p>//codigo</p> </div> </div>[/code][/quote] <p>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.</p>

guga08 · Fevereiro 22, 2013, 9:30am

…

vitordarela · Fevereiro 22, 2013, 11:17am

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

E adicionar à sua CSS seguinte código:

[code] table.panel{
//códigos css
}

table.panel td{  
   //codigos css  
}

[/code]

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 · Março 7, 2013, 11:06am

Funcionou, obrigado

vitordarela · Março 7, 2013, 11:11am

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

abraço! qualquer coisa estamos ai!

system · Dezembro 30, 2015, 1:47pm

[resolvido] xhtml + css

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI