posicionamenro dano erro

rettich · Setembro 12, 2005

galera to com varios problemas, to tentando fazer o topo da minha pagina e ta ficando tudo errado.olha meu css

/********************************** Estilos Padrão **********************************/*{	list-style: none;	text-decoration:none;}body {	font-family:Verdana, Arial, Helvetica, sans-serif;	color:#666666;	font-size:9px;	margin:5px 0px 0px 0px;	background:#aaa;}/********************************** Estilos Padrão **********************************//********************************** Corpo da Página **********************************/#corpo{	position:absolute;	width:740px;	left:50%;	margin-left:-370px;	height:auto;}/********************************** Corpo da Página **********************************//********************************** Topo da Página **********************************/#topo {	clear:both;	width:740px;	height:14px;	background:#EFEEEE;	border-bottom:2px solid #667AB4;}#logo{	float:left;	margin:0px;	padding:0px;	width:125px;}#menuTopo{	float:right;	background:#E2E3E5;}#menuTopo ul{	margin-right:5px;}#menuTopo ul li{	display:inline;	}	/********************************** Topo da Página **********************************/

agora olha meu html

<div id="corpo">	<div id="topo">		<div id="logo"><img src="imagens/ico_topo_icft.gif"><img src="imagens/txt_topo_telefone.gif" align="absmiddle" title="Tel: 2223-7787"></div>		<div id="menuTopo">			<ul>				<li><a href="#"><img src="imagens/txt_topo_home.gif" title="Home" border="0"></a></li>				<li><img src="imagens/ico_topo_divisor.jpg" title="Divisor"></li>				<li><a href="#"><img src="imagens/txt_topo_extranet.gif" title="Extranet" border="0"></a></li>				<li><img src="imagens/ico_topo_divisor.jpg" title="Divisor"></li>								<li><a href="#"><img src="imagens/txt_topo_mapa.gif" title="Mapa do Site" border="0"></a></li>				<li><img src="imagens/ico_topo_divisor.jpg" title="Divisor"></li>				<li><a href="#"><img src="imagens/txt_topo_news.gif" title="Newsletter" border="0"></a></li>				<li><img src="imagens/ico_topo_divisor.jpg" title="Divisor"></li>				<li><a href="#"><img src="imagens/txt_topo_fale.gif" title="Fale Conosco" border="0"></a></li>			</ul>		</div>	</div></div>

não sei o que pode estar dando errado! :(

pa_bruno · Setembro 12, 2005

primeiramente:

- o q está errado?

- como você quer q fique?

outra coisa, seu código não está semânticamente correto...

onde tem:

*{list-style: none;text-decoration:none;}

coloque:

ul{list-style: none;text-decoration:none;}

na div do topo, você colocou uma tag <img>, coloque essa img como background no CSS e retire a tag... e ela também está usando um valor d atributo q está depreciado "absmiddle", aliás, o atributo align está depreciado tb...

a mesma coisa pros <li>'s da lista... coloque as imagens como background e retire a ttag <img>... isso faz com q fique semantico e você naum precise mais ficar modificando o codigo xhtml pra modificar o layout... ;)

ao invéz do display: inline; você pode utilizar o float: left; pras <li>'s como você colocou no css... ;)

você posicionou o topo no meio, ok... mas fez d um jeito bem complicado... você pode tirar akilo e colocar um text-align: center; no body e colocar um margin: 0 auto; na tag do conteudo, do topo... ;)

bom, isso ae... falow...

rettich · Setembro 12, 2005

- minha lista de imagens está ficando abaixo do topo, não dentro!!

- quero minha lista fique na posição horizontal (inline).

fiz algumas alterações mencionadas, mas falta ainda alguma coisa.

eu deixei minha imagens no <li> porque elas são links!!

ae vai o que fiz de alteração

/********************************** Estilos Padrão **********************************/
ul{
list-style: none;
text-decoration:none;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
font-size:9px;
margin: 0 auto;
background:#aaa;
text-align:center;
}
/********************************** Estilos Padrão **********************************/

/********************************** Corpo da Página **********************************/
#corpo{
width:740px;
height:auto;
}
/********************************** Corpo da Página **********************************/

/********************************** Topo da Página **********************************/
#topo {
clear:both;
width:740px;
height:14px;
background:#EFEEEE;
background-image:url(../imagens/ico_topo_icft.gif);
background-repeat:no-repeat;
background-position:left;
border-bottom:2px solid #667AB4;
}
#tel{
background-image:url(../imagens/txt_topo_telefone.gif);
background-repeat:no-repeat;
background-position:center;
width:70px;
float:left;
margin-left:50px;	
}
#menuTopo{
float:right;
background:#E2E3E5;
height:14px;
}
#menuTopo ul{
margin-right:5px;
}
#menuTopo ul li{
float:left;
margin-left:5px;
}

/********************************** Topo da Página **********************************/

meu html

<div id="corpo">
<div id="topo">
	<span id="tel"></span>
	<div id="menuTopo">
		<ul>
			<li><a href="#"><img src="imagens/txt_topo_home.gif" title="Home" border="0"></a></li>
			<li><img src="imagens/ico_topo_divisor.jpg" title="Divisor"></li>
			<li><a href="#"><img src="imagens/txt_topo_extranet.gif" title="Extranet" border="0"></a></li>
			<li><img src="imagens/ico_topo_divisor.jpg" title="Divisor"></li>				
			<li><a href="#"><img src="imagens/txt_topo_mapa.gif" title="Mapa do Site" border="0"></a></li>
			<li><img src="imagens/ico_topo_divisor.jpg" title="Divisor"></li>
			<li><a href="#"><img src="imagens/txt_topo_news.gif" title="Newsletter" border="0"></a></li>
			<li><img src="imagens/ico_topo_divisor.jpg" title="Divisor"></li>
			<li><a href="#"><img src="imagens/txt_topo_fale.gif" title="Fale Conosco" border="0"></a></li>
		</ul>
	</div>
</div>
</div>

eu acho q ainda estou errado!! http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

pa_bruno · Setembro 12, 2005

inda esta sim. :P

cara, eh soh você colocar no CSS o link com um display: block; depois a altura e largura q estará resolvido essa parte do link "naum poder" estar com background... ;)

ao inves d colocar o atributo depreciado border="0" na tag <img> coloque no CSS

img {border: 0;}

no inline eh soh colocar o float left q falei...

fora q suas tags imgs estaum erradas tem q ter a "/" antes do ">" sendo assim "<img />" e naum "<img>" como você está fazendo

cara, fica meio dificil sem ver algo online... posta ae pra gente ver... to tentando adivinhar aki e fica meio dificil... ;)

to postando pelo menos o codigo "semanticamente correto", pq do jeito q você tah colocando ae num tah nos padroes naum...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>teste</title>
<style type="text/css">
/********************************** Estilos Padrão **********************************/
/********************************** Estilos Padrão **********************************/
ul{
list-style: none;
text-decoration:none;
}
body {
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
margin: 0;
background-color: #aaa;
text-align: center;
}
/********************************** Estilos Padrão **********************************/

/********************************** Corpo da Página **********************************/
#corpo{
width:740px;
margin: 0 auto;
}
/********************************** Corpo da Página **********************************/

/********************************** Topo da Página **********************************/
#topo {
width:740px;
height:14px;
background: #EFEEEE url(../imagens/ico_topo_icft.gif) no-repeat left;
border-bottom:2px solid #667AB4;
text-align: left;
}

#tel{
background: #000000 url(../imagens/txt_topo_telefone.gif) no-repeat center;
width:70px;
float:left;
}

#logo {
background: #000000 url(imagens/ico_topo_icft.gif) no-repeat;
width: 50px;/* naum sei qual a largura da img, entaum coloque a largura correta */
height: 14px; /* naum sei qual a altura da img, entaum coloque a altura correta */
float: left;
}

.divisor {
background: url(imagens/ico_topo_divisor.jpg) no-repeat;
width: 10px;/* naum sei qual a largura da img, entaum coloque a largura correta */
height: 14px; /* naum sei qual a altura da img, entaum coloque a altura correta */
}

#menuTopo{
float:right;
background:#E2E3E5;
height:14px;
}

#menuTopo ul{
margin-right:5px;
padding: 0;
}

#menuTopo ul li{
float:left;
margin-left:5px;
}

#menuTopo ul li a {
height:14px;
width:50px;
display: block;
}

#menuTopo ul li a.home { background: url(imagens/txt_topo_home.gif) no-repeat; }
#menuTopo ul li a.extranet { background: url(imagens/txt_topo_extranet.gif) no-repeat; }
#menuTopo ul li a.mapa { background: url(imagens/txt_topo_mapa.gif) no-repeat; }
#menuTopo ul li a.news { background: url(imagens/txt_topo_news.gif) no-repeat; }
#menuTopo ul li a.fale { background: url(imagens/txt_topo_fale.gif) no-repeat; }

/********************************** Topo da Página **********************************/

</style>
</head>

<body>
<div id="corpo">
	<div id="topo">
		<div id="logo"></div>
		<div id="menuTopo">
			<ul>
				<li><a href="#" class="home"></a></li>
				<li class="divisor"></li>
				<li><a href="#" class="extranet"></a></li>
				<li class="divisor"></li>
				<li><a href="#" class="mapa"></a></li>
				<li class="divisor"></li>
				<li><a href="#" class="news"></a></li>
				<li class="divisor"></li>
				<li><a href="#" class="fale"></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

cara, agora eh soh tuh pesquisar, ver essas paradas... pq ficar postando codigo pra ficar modificando eh meio brabo... ;) vai metendo a cara e perguntando as duvidas...ae tuh vai aprendendo... ;) ... falowww...

Entrar

Arquivado

posicionamenro dano erro

Recommended Posts

rettich 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rettich 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante