1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

CSS

Discussão em 'Web Development' iniciada por mpLopes, 19 de Dezembro de 2006. (Respostas: 15; Visualizações: 1682)

  1. mpLopes

    mpLopes Power Member

    Boas..

    Pretendo utilizar um fieldset, e dentro colocar uma form.
    Os dados a pedir são colocados do lado esquerdo, e as textbox do lado direito, e do lado o fundo da fielset do lado esquerdo ter uma cor de fundo.

    como faço?help..

    Cumps.
     
  2. artideias

    artideias Power Member

    não percebi bem a ordem das coisas...

    Mas será qualquer coisa do tipo.
    HTML
    Código:
    <fieldset>
    <legend>Titulo do Formulario</legend>
    <form action="">
    <label for="name">Nome</label>
    <input type="text" name="name" />
    <label for="mail">E-mail</label>
    <input type="text" name="mail" />
    <label for="message">Mensagem</label>
    <textarea name="" id="" rows="2" cols="20">
    </textarea>
    </form>
    </fieldset>
    
    e CSS
    Código:
    body { 
       padding: 20px; 
       font: 100% verdana, sans-serif    }
    * { padding: 0; margin: 0 }
    fieldset { 
       border: 0; 
       border-bottom: 
       1px solid #6dd352   } 
    legend {    font-size: 1.1em }
    legend, label { 
       font-family: 'Trebuchet MS', Trebuchet, sans-serif; 
       text-transform: uppercase; 
       color: #37941e   } 
    form { 
       background: #beffad url(green.gif) repeat-y 50% 0; 
       padding: 10px; 
       min-width: 400px   }
    label { 
       float: left; 
       border-bottom: 1px solid #6dd352; /* AQUI */
       display: block; 
       width: 50%; 
       line-height: 1.5em; 
       vertical-align: top   }
    input, textarea {
       margin: 0.5em; 
       width: 43%; 
       border: 1px solid #beffad; 
       padding: 2px   }
    Experimentei no IE6 e FF2 e funcionam bem somente o IE se reduzire so ecra abaixo dos 400px os campos passam para baixo do <label>.

    O que te interessa é o
    Código:
    background: #beffad url(green.gif) repeat-y 50% 0;
    crias uma imagem com 3000px por 1px e divides em 2 cores e centras o { background } no <form>.
    Existem N maneiras de fazeres isto poderias somente dar cor de fundo aos labels.

    Espero que seja isto, podes ver em http://www.artideias.com/css/formulario-fieldset-com-2-cores.html
     
  3. mpLopes

    mpLopes Power Member

    Altamente..
    É mesmo isso..
    Vou adaptar isso ao meu código então.

    Muito obrigado.
     
  4. mpLopes

    mpLopes Power Member

    realmente, esta história de os browsers fazerem o que querem com os layouts das páginas deixa-me maluco......
     
  5. artideias

    artideias Power Member

    é não é bem o que querem.

    por vezes não sabem como fazer e então sai borrada, mas isso está a passar e cada vez mais caso do IE7 vão existindo melhoramentos mas continuam a existir falhas.

    E falhas essas que por vezes se tornam quebra cabeças, mas a comparar com os anos atrás era bem pior, pelo que ouço pois nessa altura ainda não andava nestas andanças.

    Mas acho isto tudo maravilhoso.
     
    Última edição: 21 de Dezembro de 2006
  6. mpLopes

    mpLopes Power Member

    Boas.

    Tal como disseste, o que interessa é a propriedade backgound..tirei a tua imagem, e experimentei e nao dá..fica tudo com a cor que a imagem tem na esquerda..

    Código:
        #principal fieldset.login form { 
    		background: #beffad url(images/green.gif) repeat-y 50% 0; 
       		padding: 10px; 
    	   	min-width: 200px;
         }
    
    Código:
    	            <fieldset class="login">
    		            <legend>Login</legend>
    	        <form runat="server">
    		            <label>Admin</label>	 
    		            	<asp:textbox id="username" cssclass="text" columns="15" rows="1" wrap="true" runat="Server"/><br/>
    		            <label >Password </label>
    			        <asp:textbox id="password" cssclass="text" textmode="Password" columns="10" rows="1" wrap="true" runat="Server"/><br/><br/>
    		      
    		            <asp:button id="login_button" onclick="Login_Click" text="  Login  " cssclass="button" runat="Server"/> 
    					<asp:Label id="reslogin" runat="Server"/>
    	            </fieldset>
    	        </form>
    
     
  7. artideias

    artideias Power Member

    não funciona ? o que ele te está a mostrar é a cor de fundo que é a primeira que é definida

    background: #beffad url(images/green.gif) repeat-y 50% 0;

    colocaste o caminho para a imagem correcto?
    Código:
    images/green.gif
    dentro da pasta images ?
     
  8. mpLopes

    mpLopes Power Member

    Sim..é o caminho para a imagem.
    Apenas mostra a cor..e nada de imagem..
     
  9. OldMan

    OldMan Power Member

    a mim uma vez aconteceu a mesma coisa e pus o caminho todo (C:\tal\coiso\imagem.gif) e ja mostrou.
    claro que isso nao e' solucao, mas tenta so pa ver se aparece
     
  10. mpLopes

    mpLopes Power Member

    a imagem encontra-se num servidor..nao tenho acesso ao path completo.
    mas esta a funcionar com todas as imagens que vai buscar, nao pode ser esse o problema.

    thanks na mesma..
    deve ser mesmo algo do css..
     
  11. OldMan

    OldMan Power Member

    nao tenho assim tanta experiencia com css, mas ja tentaste noutro elemento com o mesmo codigo?
     
  12. artideias

    artideias Power Member

    clicas com o botao lado direito, em cima de outra imagem que esteja no servidor e v~es o caminho e depoias alteras no css.

    Mas não tens acesso??

    a imagem tem que estar numa pasta chamada "images" que está ao mesmo nivel da folha de estilos... ou seja

    Código:
    - index.html
    - estilo.css
    images // pasta
        green.gif
        outras imagens
    se está no servidor e se está como acima ou poes o endereço completo

    -- http://wwwteuserver.com/images/green.gif

    ou tenta na folha de estilos coloca uma barra no background: url(/images/green.gif)

    ou melhor mostra onde está isso tudo e resolve-se logo
     
  13. mpLopes

    mpLopes Power Member

    viva..
    o problema vinha do path para a imagem..
    não estava a ir buscá-lo correctamente.

    peço desculpa..e agradeço a ajuda..
     
  14. mpLopes

    mpLopes Power Member

    mais um pequeno problema.
    no final da form quero incluir um botão para "inserir"..
    acontece que se colocar uma label à esquerda o botão aparece no lado direito.
    senão colocar label, o botaão aparece no lado esquerdo.

    o que eu pretendo é colocar o botão encostado totalmente ao lado direito da form.

    como posso fazer?

    Cumps.
    Aproveito para agradecer as ajudas que tem dado, tem sido muito boa gente.
    Bom ano para vocês..
     
  15. SoundSurfer

    SoundSurfer Power Member

    Experimenta fazer uma, classe só para o botão, com "float:right"
     
  16. mpLopes

    mpLopes Power Member

    é um botão de asp.net.. é possivel definir classes no css para esses botões também?

    edit: foi uma pergunta de leigo. pesquisei um pouco e já encontro a resposta para a minha pergunta.
     
    Última edição: 30 de Dezembro de 2006

Partilhar esta Página