Ir para conteúdo

POWERED BY:

Arquivado

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

Kadu! DG

com CSS

Por , em Desenvolvimento frontend

Recommended Posts

Kadu! DG    0

Kadu! DG
Postado

Boa tarde, eu queria uma ajudinha aqui pq não to conseguindo alinha a barra de navagegação que eu fiz, com a DIV que eu criei pra ele!

 

Primeiro queria falar, que estou aprendendo, e estruturei o layout com uma tabela simples, e estou jogando as DIV's dentro dela.

 

Aqui vou colocar o endereço para vcs verem como ficou: http://www.kdsg.net/index.php

 

O menu tem um Tooltip, que está funcionando certinho, mas o menu fica mto pra cima do bg, queria deixar ele mais pra baixo, perto da faixa mais clara!

 

Aqui vou postar o meu código CSS:

@charset "utf-8";/* K! Design - Criado por Kadu */BODY {	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;	background-image:url(../imagens/site/bgs/bg.gif);	}div#corpo {background-color:#FFFFFF;width: 760px;height:auto;padding-top: 5px;padding-left: 5px;padding-bottom: 5px;padding-right: 5px;}div#logo {  width: 240px;  height: 90px;  display: block;  text-indent: -99999px;  background: url(../imagens/site/logo.jpg) no-repeat right top transparent;  background-color: #FFFFFF;}div#menu {height:30px;background-color:#000000;background-image:url(../imagens/site/bgs/bg_horizontal.jpg);width: 770px;padding: 0 0 0 0px;font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;color: #C3B59B;}p.barNav {position: absolute;margin-top:0px;}   .barNav a {  font: 12px Arial, Verdana,Helvetica,sans-serif;  color: #C3B59B;  text-decoration: none;  text-align: center;  padding: 1px 5px;  font-weight:bold;	}  .barNav a:hover {  color: #666666;  background: #C3B59B;	}  .barNav a span {   display:none;  }  .barNav a:hover span {  display: block;  position: absolute;   top:30px;   width: 770px;  padding-left: 2px;  color: #666;   font-size: 12px;   text-align: left;	}

E aqui eu vou postar a codificação da página index.php:

<!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>K! Design - Conceito, Estilo e Objetivo</title><link href="css/principal.css" rel="stylesheet" type="text/css" /></head><body><table width="790" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>	<td width="10" valign="top" bgcolor="#000000"></td>	<td valign="top" width="770" align="left"><div id="corpo"><div id="logo"></div></div><div id="menu" align="left"><p class="barNav"> <a href="#" >Home<span>Página de entrada no site</span></a><a href="#">Quem somos<span>Conheça nossa equipe. Profissionais de alto gabarito técnico integram nossos quadros </span></a><a href="#">Portfólio<span>Uma coleção de nossos trabalhos e a opinião de clientes </span></a><a href="#">Contato<span>Fale conosco. Sua opinião, sugestão ou crítica é muito importante para nós. </span></a> </p></div></td>	<td width="10" valign="top" bgcolor="#000000"> </td>  </tr></table></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

GeniusDesign    0

GeniusDesign
Postado

cara,to começando agora tbm com css. Mas uma parada q você pode fazer é usar só div. a linha preta lateral do layout você pode colocar um border numa div externa. outra parada tbm é reduzir o css. tipo: margin-top:.... margin... você pode reduzir as 4 margens assim: margin: top right bottom left respectivamente.....mas nao sakei direito sua duvida nao....espero ter ajudado em algo.se falei besteira corrijam aeh!! hehehevlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

Olá Kadu,

 

A dica dita pelo nosso amigo Geniusdesign é mto válida, ok?

 

Qto ao seu problema, não sei se entendi direito...você quer q seu menu fique mais para baixo? use a propriedade TOP, aliada a POSITION.

#menu {top: 90px;position: absolute;height:30px;background-color:#000000;background-image:url(../imagens/site/bgs/bg_horizontal.jpg);width: 770px;padding: 0 0 0 0px;font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;color: #C3B59B;}
Se eu entendi bem, acho q é isso amigao, ok? Testa ai, joga com essas propriedades e veja se resolve. Qlq coisa você pergunta aki no forum, beleza? Abração e bom desenvolvimento http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cornelius    0

Cornelius
Postado

Entaum cara, faz o que o amigo GeniusDesign falou. Mas é prudente você zerar todas as tags do documento, tirar do padraum usando o seletor universal "*" :

 

* {padding: 0; /*aki vai zerar o valor do padding e margin*/margin: 0;}

Ai depois é só você ir usando o margin e o padding.

 

espero ter ajudado flws http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kadu! DG    0

Kadu! DG
Postado

poxa gente, mesmo eu não tendo me explicado bem, essas digas já me fizeram entender um pouco mais do css...mas se eu não falar qual a dúvida vcs não podem me ajudar mesmo!

 

aqui eu vou colocar uma imagem pra vcs visualizarem melhor:

Imagem Postada

 

no círculo menor: tem um espacinho que ele passa do BG. assim fica uma sobrinha pra mim, queria tirar isso!

 

no círuclo maior: é o espaço que eu queria diminuir! trazer as palavras: Home, contato masi para baixo.

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