Site com Margem de Topo

Fernando Neto MH · Julho 7, 2012

hoje comecei a fazer o site ai coloquei o estilo.css

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

body{
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
overflow-x: hidden;
background-image: url(../images/bg_total.jpg);
}
.head {
background-image: url(../images/bg_head.jpg);
background-repeat: repeat-x;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
border-top:#0F5BB0;
border-top:1px;
width:100%;
}

.logo {
background-image: url(../images/LOGO.png);
background-repeat: no-repeat;
background-position: center center;
}

e o 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>
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<link rel="stylesheet" type="text/css" href="menu.css"/>
<link rel="stylesheet" type="text/css" href="css/slide.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="Martins Hospedagens, Hospedagem de sites, Criação de sites, Streaming,Hospedagem + Streaming, Neto Design, São José do Egito-PE" />
<title>Martins Hospedagens, Hospedagem de sites, Streaming e cração de web sites</title>
<link href="css/dcmegamenu.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>

<script type='text/javascript' src='js/jquery.dcmegamenu.1.2.js'></script>

<script type="text/javascript">

$(document).ready(function($){

$('#mega-menu-tut').dcMegaMenu({

	rowItems: '3',

	speed: 'fast'

});

});

</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
	$(function(){
		$('#slides').slides({
			preload: true,
			preloadImage: 'img/loading.gif',
			play: 5000,
			pause: 2500,
			effect: 'slide, fade',
			hoverPause: true
		});
	});
</script>
</head>

<body>
<table class="head" height="150px" margin-top="0px" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <th width="40%" class="logo" scope="col"></th>
   <th width="60%" scope="col">
</th>
 </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <th scope="col"><center><div class="dcjq-mega-menu">

<ul id="mega-menu-tut" class="menu">

<li><a href="#">Home</a></li>
<li><a href="#">Hospedagem de Sites</a></li>
<li><a href="#">Registro de Domínio</a></li>


<li><a href="#">Streaming</a></li>


<li><a href="#">Serviços</a>

 <ul><li><a href="#">Loja Virtual</a></li><li><a href="#">Sites para web rádio</a></li>
 <li><a href="#">Sites para empresa</a></li><li><a href="#">Sites pessoal</a></li><li><a href="#">Manutenção de Sites</a></li>

 </ul></li>

<li><a href="#">Certificado SSL</a></li> 
<li><a href="#">Licenças</a></li>

<li><a href="#">Atendimento</a></li>

</ul>

</div></center>
</th>
 </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="slide">
 <tr>
   <th scope="col">	<div id="container">
	<div id="example">
	  <div id="slides">
     <div class="slides_container">
				<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
				<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
				<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
				<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
				<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title=""I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by." | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
				<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
				<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
		</div>
			<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
			<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
	  </div>
		<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
	</div>
   </div></th>
 </tr>
</table>
</body>
</html>

Ai ele fica com a margem de topo como mostra a imagem.

Thiago Vianna /+/ · Julho 7, 2012

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

body{
       padding: 0;
       overflow-x: hidden;
       background-image: url(../images/bg_total.jpg);
}
.head {
       background-image: url(../images/bg_head.jpg);
       background-repeat: repeat-x;
       margin: 0px;
       border-top:#0F5BB0;
       border-top:1px;
       width:100%;
}

.logo {
       background-image: url(../images/LOGO.png);
       background-repeat: no-repeat;
       background-position: center center;
}

Body não tem margin, body tem padding (:

Não precisa ficar colocando "margin-top", "margin-left" ... Pode colocar somente um: "margin: 0;"

Padding atua do lado de dentro do elemento, Margin, do lado de fora ;D

André do Vale · Julho 7, 2012

Body não tem margin, body tem padding (:

Não precisa ficar colocando "margin-top", "margin-left" ... Pode colocar somente um: "margin: 0;"

Padding atua do lado de dentro do elemento, Margin, do lado de fora ;D

Body possui sim margin, mas não padding. :thumbsup:

@Neto

Utilize algum reset no seu CSS. Recomendo este.

Sugiro também uma revisão completa de sua marcação HTML. Procure sobre "tableless" (leia também sobre divmania para evitar excessos iniciais).

Thiago Vianna /+/ · Julho 7, 2012

Body possui sim margin, mas não padding.

Sim, confundi, desculpe @Neto e obrigado ao André.

@Neto, para que aquele "border-top: ..." na class head ?

Para a bordar aparecer, tem que colocar o style como "solid" se quiser uma borda continua.

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

body{
       margin: 0px;
       overflow-x: hidden;
       background-image: url(../images/bg_total.jpg);
}
.head {
       background-image: url(../images/bg_head.jpg);
       background-repeat: repeat-x;
       margin: 0px;
       width:100%;
}

.logo {
       background-image: url(../images/LOGO.png);
       background-repeat: no-repeat;
       background-position: center center;
}

Entrar

Arquivado

Site com Margem de Topo

Recommended Posts

Fernando Neto MH 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Vianna /+/ 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Vianna /+/ 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante