Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mestre fyoda

Icone Nao estao alinhados

Por , em Desenvolvimento frontend

Recommended Posts

mestre fyoda    1

mestre fyoda
Postado 

<table height="100px" style="margin-top: 150px;" >
			 <tbody>
				 <tr>
					 <th scope="row" class="column1">
		    	     		 <img src="icones/erro.png" class="centro"><span class="texto">. $msg[$i-1] .</span><br />
							//Comentar tudo que está dentro do IF para nao mostrar "acessar o suporte tecnico"
								 <img src=icones/suporte.png class=centro><span class=texto>Clique na imagem ao lado para acessar o suporte tecnico.</span>
		      			
			      	 </th>
				 </tr>
			 </tbody>
		 </table>

Como mostra a imagem Imagem Postada

o ultimo botao vermelho ele está desalinhado comparado com os outros 2. Como eu faço para alinha-lo ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Desnickadu    0

Desnickadu
Postado

você não colocou nenhuma aspas no codigo da ultima imagem

 

<img src=icones/suporte.png class=centro><span class=texto>Clique na imagem ao lado para acessar o suporte tecnico.</span>

Compartilhar este post

Link para o post
Compartilhar em outros sites

mestre fyoda    1

mestre fyoda
Postado

Mil desculpas, acabei esquecendo de colocar o css.

Segue o css


		html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
			margin:0;
			padding:0;
		}
		body {
			background: #fff url(graphics/bg-body.gif) repeat-x;
			font:76%/160% "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
			}
		p {
			text-align:center;
			}
		a:link {
			color:#d42945;
			text-decoration:none;
			border-bottom:1px dotted #ffbac8;
			}
		a:visited {
			color:#d42945;
			border-bottom:none;
			text-decoration:none;
			}
		a:hover,
		a:focus {
			color:#f03b58;
			border-bottom:1px solid #f03b58;
			text-decoration:none;
			}
		table a,
		table a:link,
		table a:visited {
			border:none;
			}
		img {
			border:0;
			margin-top:.5em;
			}
		table {
			width:90%;
			border-top:1px solid #e3f1fe;
			border-right:1px solid #e3f1fe;
			margin:1em auto;
				border-collapse:collapse;
			}
		caption {
			color: #9ba9b4;
			font-size:.94em;
			letter-spacing:.1em;
			padding:0;
			margin:1em 0 0 0;
			margin-bottom:0;
			caption-side:top;
			text-align:center;
			}
		tr.odd td,
		tr.odd .column1 {
			background:#f4f9fe url(background/background.gif) no-repeat;
			}
		.column1	{
			background:#f9fcfe;
			text-align: center;
			}
		td {
			color:#678197;
			border-bottom: 1px solid #e3f1fe;
			border-left:1px solid #e5eff8;
			padding:.3em 1em;
			text-align:center;
			}
		th {
			font-weight:normal;
			color: #678197;
			text-align:left;
			border-bottom: 1px solid #e3f1fe;
			border-left:1px solid #e5eff8;
			padding:.3em 1em;
			}
		thead th {
			background:#f4f9fe;
			text-align:center;
			font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
			color:#66a3d3
			}
		tfoot th {
			background:#f4f9fe;
			text-align:center;
			}
		tfoot th strong {
			font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
			margin:.5em .5em .5em 0;
			color:#66a3d3;
				}
		tfoot th em {
			color:#f03b58;
			font-weight: bold;
			font-size: 1.1em;
			font-style: normal;
			}
		img.centro {
			vertical-align: -9px;
		}
		span.texto {
			padding-left: 15px;
			font-size: 20px;
		}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Você pode fazer com listas isso. Para ficar crossbrowser, faça algo assim:

 

ul li{
list-style: none;
background: url(caminhoDaImagem.jpg) no-repeat left center;
padding: 0 0 0 20px;
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

mestre fyoda    1

mestre fyoda
Postado

então, tb nao adiantou, a imagem ainda continua cortada !

	ul {
		margin-top: 150px;
		border: 1px solid #e3f1fe;
	}

	ul li{
		list-style: none;
		background: url(icones/erro.png) no-repeat left center;
		padding: 0 0 0 40px;
	}

	li {
		padding: 32px;
	}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Precisa utilizar um display:block no seu li, ficando assim:

ul {
                margin-top: 150px;
                border: 1px solid #e3f1fe;
                list-style-type: none;
        }

        ul li{
                display: block;
                height: [ defina uma altura ]; /* <== Defina uma altura para seu <li> */
                line-height: [ defina o mesmo valor da altura ]; /* <== Coloque aqui a mesma medida utilizada no height */
                background: url(icones/erro.png) no-repeat left; /* <== Removi o center pois por padrão ele centraliza quando não declarado */
                padding: 0 0 0 40px;
        }
Aqui ainda seria talvez necessário utilizar um width no seu li, mas isso vai depender de outros detalhes, que pelo menos por enquanto não vêm ao caso... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Caso não queira utilizar o display:block, pode tentar usar o display:inline-block, mas tenha cuidado caso ainda esteja se preocupando com browsers mais antigos, como o IE6, e ainda também o IE7, que às vezes esse display se comporta de maneira não-prevista... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Teste aí amigo e nos comunique o(s) resultado(s).

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito