Ir para conteúdo

POWERED BY:

Arquivado

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

italogabriel

Possivéis erros

Por , em Desenvolvimento frontend

Recommended Posts

italogabriel    0

italogabriel
Postado

CSS

@charset "utf-8";
/* CSS Document */

/* Parte da Estrutura */

*{
padding: 0;
margin: 0;
right: auto;
}

body{
background-image:url(../images/bg.jpg);
background-repeat:repeat;
}

#header{
background:url(../images/header_bg.jpg);
height:117px;
margin:0 auto;
}

#logo{
background:url(../images/logo.jpg);
margin-top:0px;
margin-left:250px;
width:234px;
height:117px;
float:left;
}

#clear{
clear:both;
}
.clear{
clear:both;
}

#menu-top ul{
margin: 0;
padding: 0;
float:left;
margin-left:90px;
}
#menu-top ul li{
position:relative;
float:left;
list-style-type:none;
}
#menu-top ul li a{ 
display: inline-block;
font-family:Verdana, Tahoma, sans-serif;
font-size:11px;
float:left;
text-align:left;
display: block;
color:#0067f3;
text-decoration: none;
}
#menu-top ul li a:hover{ 
font-family:Verdana, Tahoma, sans-serif;
font-size:11px;
display: block;
text-align:left;
color:#ff6600;
float:left;
text-decoration: none;
}
#menu-top ul li ul li{
display: list-item;
float: none;
color: black;
display: block;
text-decoration: none;
}

#home a{
background:url(../images/home.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;	
}
#home a:hover{
background:url(../images/home.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}
#home2 a{
background:url(../images/home.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;	
}

#servicos a{
background:url(../images/servico.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;
}
#servicos a:hover{
background:url(../images/servico.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;	
}
#servicos2 a{
background:url(../images/servico.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}

#quem a{
background:url(../images/quem.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;
}
#quem a:hover{
background:url(../images/quem.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}
#quem2 a{
background:url(../images/quem.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;	
}

#contato a{
background:url(../images/contato.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;
}
#contato a:hover{
background:url(../images/contato.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}
#contato2 a{
background:url(../images/contato.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}

#orcamento a{
background:url(../images/orcamento.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;
}
#orcamento a:hover{
background:url(../images/orcamento.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}
#orcamento2 a{
background:url(../images/orcamento.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;	
}

#content{
height:900px;
widht:50px;
background-color:#FFF;
}

#nav-container{ 
margin:0 auto; 
width:980px; 
min-width:800px; 
background:#FFF; 
box-shadow:0 0 2px #CCC; 
}

#container{ 
margin:0 auto;
width:930px; 
}

#conteudo{	
margin: 0; 
padding: 20px 0 30px 0; 
text-align: justify; 
color: #555; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #555;
line-height:19px;
}
/* ------------------------------------------------------ */
/* Necessários */

hr { color: #CCC; height: 0px; }

h1,h2,h3,h4,h5 { font-weight:400 }

h1 { font-size: 28px; padding: 10px 0 0; font-weight:700; }
h2 { font-size: 24px; padding: 10px 0 5px; }
h2 small { font-size:16px; }
h3 { font-size: 20px; padding: 0 0 0 7px; }
h4 { font-size: 19px; padding: 10px 0 5px 7px; font-family: 'PT Sans', Arial, Helvetica, sans-serif; color:#369; }
h5 { font-size: 19px; padding: 10px 0 5px 7px; font-family: 'PT Sans', Arial, Helvetica, sans-serif; color:#C03; }

/* ------------------------------------------------------ */

#footer{
margin-top:30px;
line-height:30px;
background:#333;
color:#999;
text-align:center;
font-family:Verdana, Arial;
font-size: 11px;
}

HTML

<!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=utf-8" />
<link rel="stylesheet" href="css/style.css" media="screen"/>
<title>Sepol Computadores - Rio das Ostras</title>
</head>

<body>
<!-- Ínicio Header -->
<div id="header">
<div id="logo">
</div><!-- Fim Logo -->
<div id="menu-top">
	<ul>  			
                <li><div id="home"><a href="?p=home"></a></div></li>
                <li><div id="servicos"><a href="?p=servicos"></a></div></li>
                <li><div id="quem"><a href="?p=portfolio"></a></div></li>
                <li><div id="orcamento"><a href="?p=clientes"></a></div></li>
                <li><div id="contato"><a href="?p=contato"></a></div></li>   		
	</ul>
</div>
</div>
<!-- Fim Header -->
<!-- Ínicio conteudo -->
<div id="nav-container">
    <div id="container">
     <div id="conteudo">
<?
$act = !isset($_GET['act']) ? "home" : $_GET['act'] ;
if (strpos($_GET['act'], "/") || strpos($_GET['act'], "\\")){
$act = "home";
}
if (substr($_GET['act'],0,4) == "clan"){
$actx = $act;
$act = "clan/" . $actx;
}	
if (is_file("".$act.".php")) {
include("".$act.".php");	
} else {	
include("404.php");
}
?>
     </div>
	</div>
</div>
<!-- Fim conteudo -->
<div class="clear"></div>
<div id="clear"></div>
<div id="footer">Copyright ©2013 - Ítalo Gabriel - Todos os direitos reservados.</div>
</body>
</html>

e seguinte, to usando HR para separar exemplo

 

Nossos serviços

<hr>

 

mais só que ele fica colado com nossos serviços, e correto usar margin-top para afastar os 2? ou existe algum outro meio? podem me ajudar por favor

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Não é incorreto usar, só tem que ver se é o que você precisa.

No site que mandou, por exemplo, o "cara" afastou com padding. É relativamente parecido com a propriedade margin.

Gosto de lembrar de margin como a margem externa e padding como a margem interna (há quem prefira "acolchoamento"). Veja:

PeSIJ.gif

:seta: http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics1

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

então qual o mais correto usar? margin o padding?

Não tem um "mais correto". São duas propriedades diferentes, mas que exercem funções semelhantes.

 

Leia o artigo que indiquei. Explica o funcionamento de ambas as propriedades:

:seta: http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics1

 

No caso do site, foi utilizado margin:

hr {
margin: 20px 0;
 
[...]

Melhor para o caso. :thumbsup:

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