11 Replies - 1136 Views - Last Post: 21 March 2014 - 11:59 PM

#1 annie12   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 27-July 13

giving space when i used <p> </p> tag in footer

Posted 18 March 2014 - 09:14 PM

when i used <p> tag in footer it start giving space at the end in my page above the footer .what i should i do to remove this sapce
#footer
{
height:100px;
width:100%;
background-color:#FF99FF;
}

<div id="footer">
  <p>Posted by: </p>
  <p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</div> 



Is This A Good Question/Topic? 0
  • +

Replies To: giving space when i used <p> </p> tag in footer

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: giving space when i used <p> </p> tag in footer

Posted 19 March 2014 - 01:04 AM

what do you mean by "space at the end in my page above the footer" exactly. a screenshot would help immensely for clarification.
Was This Post Helpful? 0
  • +
  • -

#3 annie12   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 27-July 13

Re: giving space when i used <p> </p> tag in footer

Posted 19 March 2014 - 03:48 AM

View PostDormilich, on 19 March 2014 - 01:04 PM, said:

what do you mean by "space at the end in my page above the footer" exactly. a screenshot would help immensely for clarification.

i mean the footer <div> leave space after centre <div> which it should not suppose to leave a space
its my whole code
<!doctype html>
<html>
<head>
<style>
#main{
width:100%;
height:1040px;
background-color:#008080;

}
#box1{
height:200px;
width:100%;
background-color:#99C2D6;

}
#logo{
height:200px;
width:30%;
background-color:#EBF3F7;
}
#slider{
height:200px;
width:70%;
}

#hor{
height:30px;
width:100%;
background-color:#333399;
}

#centre{
height:700px;
width:100%;
background-color:#B2FF99;

}

#searchbar{
height:30px;
width:100%
background-color:#FOC2B2;
}

#sidelinks{
height:700px;
width:30%;
background-color:#996299;
float:left;

}
#description{
height:700px;
width:50%;
background-color:#FFFFFF;
float:left;

}
#sidenews{
height:700px;
width:20%;
background-color:#003D99;
float:right;
}

#footer
{
height:100px;
width:100%;
background-color:#FF99FF;
}
.ab{
text-decoration:none;
}

<link rel="stylesheet" type="text/css" href="searchbar.css">



</style>
</head>
<body>
<div id="main">

<div id="box1">

  <div id="logo">
  <img src="logo.jpg" alt="no image" width="100%" height="100%">
  </div>

  <div id="slider">
  </div>

</div>

<div id="hor">

<a href="#">FLAVOURS</a>|
<a href="#">COLLECTION</a>|
<a href="#">GOODS</a>|
<a href="#">OUR STORY</a>|
<a href="#">FIND US</a>|
<a href="#">SOCIAL</a>|
</div>


<div id="searchbar">


	<!-- HTML for SEARCH BAR -->
	<div id="tfheader">
		<form id="tfnewsearch" method="get" action="http://www.google.com">
		        <input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton">
		</form>
	<div class="tfclear"></div>
	</div>



</div>

<div id="centre">

<div id="sidelinks">
<h1>CATEGORY 1</h1>
<hr>
<ul>

<li><a href="#" class="ab">sub1</a></li>
<li><a href="#" class="ab">sub2</a></li>
<li><a href="#" class="ab">sub3</a></li>
<li><a href="#" class="ab">sub4</a></li>
<li><a href="#" class="ab">sub5</a></li>
<li><a href="#" class="ab">sub6</a></li>
</ul>
<h1>CATEGORY 2</h1>
<hr>
<a href="#" class="ab">sub1</a><hr>
<a href="#" class="ab">sub2</a><hr>
<a href="#" class="ab">sub3</a><hr>
<a href="#" class="ab">sub4</a><hr>
<a href="#" class="ab">sub5</a><hr>
<a href="#" class="ab">sub6</a><hr>
</div>

<div id="description">
</div>

<div id="sidenews">
</div>


</div>


<div id="footer">
  <p>Posted by: </p>
  <p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</div> 

</div>



</body>
</html>

Attached image(s)

  • Attached Image

This post has been edited by annie12: 19 March 2014 - 03:48 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: giving space when i used <p> </p> tag in footer

Posted 19 March 2014 - 06:23 AM

as suspected, the reason is the default margin of the <p> element. probably the easiest solution is to override that.
Was This Post Helpful? 0
  • +
  • -

#5 annie12   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 27-July 13

Re: giving space when i used <p> </p> tag in footer

Posted 20 March 2014 - 03:16 AM

View PostDormilich, on 19 March 2014 - 06:23 PM, said:

as suspected, the reason is the default margin of the <p> element. probably the easiest solution is to override that.

so how can i do overriding
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: giving space when i used <p> </p> tag in footer

Posted 20 March 2014 - 03:34 AM

by applying a CSS rule in your stylesheet.

(itís not named Cascading Style Sheet for no reason)
Was This Post Helpful? 0
  • +
  • -

#7 annie12   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 27-July 13

Re: giving space when i used <p> </p> tag in footer

Posted 20 March 2014 - 04:04 AM

View PostDormilich, on 20 March 2014 - 03:34 PM, said:

by applying a CSS rule in your stylesheet.

(itís not named Cascading Style Sheet for no reason)

you mean i have to make a css file and then link in it.....or something else i have to do
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: giving space when i used <p> </p> tag in footer

Posted 20 March 2014 - 04:37 AM

Quote

you mean i have to make a css file and then link in it

yepp.
Was This Post Helpful? 0
  • +
  • -

#9 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: giving space when i used <p> </p> tag in footer

Posted 20 March 2014 - 08:21 AM

Make a rule for your footer p tags that takes out the margins for top and bottom. or add a class to your p tags that will be added to the ones giving you the issue.
Was This Post Helpful? 0
  • +
  • -

#10 annie12   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 27-July 13

Re: giving space when i used <p> </p> tag in footer

Posted 20 March 2014 - 10:10 AM

View Postlaytonsdad, on 20 March 2014 - 08:21 PM, said:

Make a rule for your footer p tags that takes out the margins for top and bottom. or add a class to your p tags that will be added to the ones giving you the issue.

can you mean i make it a sthe following way
<div id="footer">
<p id="footer>
</p>
</div>


i dont know how to make the rule for footer p tags...can you expalin me how to make it ...i dont understand what is meant by rule
Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: giving space when i used <p> </p> tag in footer

Posted 20 March 2014 - 10:26 AM

HTML:
<div id="footer">
  <p>
     text here
  </p>
</div>




css:
#footer p{
  margin-top: 0px;
  margin-bottom: 0px;
}



This will remove all the top and bottom margins from the p tags inside of the div with the id of footer.
Was This Post Helpful? 0
  • +
  • -

#12 annie12   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 27-July 13

Re: giving space when i used <p> </p> tag in footer

Posted 21 March 2014 - 11:59 PM

i make a separate css file and link in it in a html and also give margin property but it still give spaces

This post has been edited by Dormilich: 22 March 2014 - 03:31 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1