[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 440
  • Last Modified:

no space in the top, right and left side of the layout

Hello,
I begin a layout for my new page, and the design I produce with html and css.
In the top of the page, the blue bar (contains logo), is not in the top, because have a white bar. The same thing for the right a nd left of blue bar.
I want to know how I put the blue bar in the top, right and left, without white space.
CSS CODE
 
BODY {
  background-color: #ffffff;
}
 
#barra {
  position: relative;
  height: 120px;
  background-color: #3300cc;
  position: relative;
}
 
#barra_contem{
  margin-left: auto;
  margin-right: auto;
  width: 770px;
  height: 120px;
  position: relative;
}
 
 
 
/*#geral {
  margin-left: auto;
  margin-right: auto;
  width: 770px;
  height: 500px;
  background-color: white;
}*/
 
#logo {
  position: relative;
  margin-left: 25px;
  padding-top: 15px;
}
 
HTML CODE
<!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" />
<title>gloradin websites</title>
<style type="text/css" media="screen">
@import "/estilo/index.css";
</style>
</head>
 
<body>
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><img src="imagem/logo_branco.jpg" /></div>
  </div>
</div>
 
 
<!--<div id="geral">
</div>-->
</body>
</html>

Open in new window

css.jpg
0
Pedro Chagas
Asked:
Pedro Chagas
2 Solutions
 
Roger BaklundCommented:
Use this in your css:
BODY {
  background-color: #ffffff;
  padding:0;
  margin:0;
}

Open in new window

0
 
quincydudeCommented:
Or this if you do not want the bottom part get zero margin


BODY {
  background-color: #ffffff;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  
}

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now