CODEWITHSUNDEEP
htmlcssdreamweaver
Blacktea
Blacktea

Reputation: 83

<p> tag isn't positioning correct

I made a .wrapper to be the main container, its width is 980px. And other <div> inside main container has 960px width. by using margin: 0 auto, each of the <div> tags will keep a 10px space to its main container. It's working well in my header and navigation bar. However when I start to input text in my #1st_container by using <p> tag, this 10px space effect is not working anymore, text shows up in main container. I tried a few way try to fix this but none is working and I have no idea what cause this..

How can I fix it?

P.S. it's looks fine in dreamweaver, just like it supports to be, but once I view the site in any browser, this 10px space is gone.

body{
	margin:0px;
	padding: 0px;
	background-color: #DDDDDD;
	}

#header h1 {
	/*font-family: "Arial Black", Gadget, sans-serif;*/
	/*font-family: "Veneer" Gadget, sans-serif;*/
	font-family: "Maven pro", sans-serif;
	font-size: 70px;
	font-weight:900;
	line-height:70px;
	text-shadow: 3px 3px 5px rgba(122, 131, 175, 1);
	color:#FFF;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto;
	z-index:1;
}

.wrapper {
	height: 2024px;
	width: 980px;
	margin: 0px auto;
	padding: 0px;
	background-color:#FFF;
}
#header {
	height: 380px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: -20px;
	padding-top: 10px;
	background:url(../image/header_bg.jpg) repeat;	
}
span.profile{
	font-size:50px;
	}
span.head_line{
	background:url(../image/line.png) no-repeat;
	width: 250px;
	height: 10px;
	display: inline-block;
	margin: 0 20px 12px 25px;
	}
span.name {
	color: #b46b6b;
	}
span.this_is{
	font-size: 50px;
	}
#nav {
	height: 40px;
	width: 960px;
	margin: 0 auto;
	background:url(../image/nav_bg.png) repeat;
	text-align: center;
}
#nav ul {
	margin: 0;
	padding-top: 8px;
	}
#nav ul li {
	list-style: none;
	display: inline;
	}

#nav ul li a:link{
	text-decoration: none;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 100;
	color:#4a4949;
	font-family: 'Open Sans', sans-serif;
	padding: 0 30px;
	}
#1st_container {
	width: 960px;
	height: 380px;
	margin: 0 auto;	
}
#2nd_container {
	
}
<!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>TB hompage</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrapper">
<div id="header"><h1>Hello<br />
					 <span class="this_is">This is</span><br />
                     <span class="name">1st Website</span><br />
                     <span class="head_line"></span>& <span class="head_line"></span><br />
                     <span class="profile">I'm a new beginner</span> </h1>

     	</div><!-- header end -->
<div id="nav">
     	<ul>
        	<li><a href="#">Bref</a>
            <li><a href="#">example</a>
            <li><a href="#">example</a>
            <li><a href="#">example</a>
        </ul>
        </div><!-- navbar end here-->
<div id="1st_container">
<p>here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.</p>

</div>
<div id="2nd_container">here is 2nd content</div>
<div id="3nd_container">here is 3nd content</div>
</div>
</body>
</html>

Upvotes: 0

Views: 101

Answers (2)

Sai
Sai

Reputation: 1949

First of all, you have not closed a bunch of tags right like the li items. you dont have to give < br / > jusr < br > is enough. then I removed body css margin,padding property ( either that or ass a seperate css for < p > like margin:10px

body {
  padding: 0;
  margin: 0;
}
#header h1 {
  /*font-family: "Arial Black", Gadget, sans-serif;*/
  /*font-family: "Veneer" Gadget, sans-serif;*/
  font-family: "Maven pro", sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: 70px;
  text-shadow: 3px 3px 5px rgba(122, 131, 175, 1);
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
}
.wrapper {
  height: 2024px;
  width: 980px;
  margin: 0px auto;
  padding: 0px;
  background-color: #FFF;
}
#header {
  height: 380px;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: -20px;
  padding-top: 10px;
  background: url(../image/header_bg.jpg) repeat;
}
span.profile {
  font-size: 50px;
}
span.head_line {
  background: url(../image/line.png) no-repeat;
  width: 250px;
  height: 10px;
  display: inline-block;
  margin: 0 20px 12px 25px;
}
span.name {
  color: #b46b6b;
}
span.this_is {
  font-size: 50px;
}
#nav {
  height: 40px;
  width: 960px;
  margin: 0 auto;
  background: url(../image/nav_bg.png) repeat;
  text-align: center;
}
#nav ul {
  margin: 0;
  padding-top: 8px;
}
#nav ul li {
  list-style: none;
  display: inline;
}
#nav ul li a:link {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 100;
  color: #4a4949;
  font-family: 'Open Sans', sans-serif;
  padding: 0 30px;
}
#first_container {
  width: 960px;
  height: 380px;
  margin: 0 auto;
}
p {
  margin:0 10px;
}
<div class="wrapper">
  <div id="header">
    <h1>Hello<br>
					 <span class="this_is">This is</span><br>
                     <span class="name">1st Website</span><br>
                     <span class="head_line"></span>& <span class="head_line"></span><br>
                     <span class="profile">I'm a new beginner</span> </h1>

  </div>
  <!-- header end -->
  <div id="nav">
    <ul>
      <li><a href="#">Bref</a>
      </li>
      <li><a href="#">example</a>
      </li>
      <li><a href="#">example</a>
      </li>
      <li><a href="#">example</a>
      </li>
    </ul>
  </div>
  <!-- navbar end here-->
  <div id="firstst_container">
    <p>here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.</p>

  </div>
  <div id="second_container">here is 2nd content</div>
  <div id="third_container">here is 3nd content</div>
</div>

Upvotes: 0

Shawn Erquhart
Shawn Erquhart

Reputation: 1858

You set the width for the header and nav elements - you need to set it for the .1st_container element as well.

Update: no, it's not that - it's that your id's are starting with numbers. Can't do that.

http://css-tricks.com/ids-cannot-start-with-a-number/

Here's a codepen with the fix applied: http://codepen.io/erquhart/pen/vskep

Upvotes: 2

Related Questions