4 Replies - 492 Views - Last Post: 21 July 2014 - 11:21 AM

#1 jamesmarkham94  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 25-March 14

how do i get rid of white space on my website?

Posted 21 July 2014 - 10:34 AM

I am creating a website and have a nav bar with an image and some text directly underneath it. for some reason there is white space in between the nav bar and the image&text. does anybody know how to get rid of it? any help would be much appreciated!

my HTML code is...
<!DDOCTYPE.HTML>
<HTML>
	

	<HEAD>
		<TITLE>Index</TITLE>
	</HEAD>


	
	<BODY>
	
		<HEADER CLASS="Banner">
			<H1><IMG SRC= "images/logo.jpg"></H1>

				
		<LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet.css">		
		
		</HEADER>
		
		
		<NAV>

			<UL CLASS="nav">
				<LI><A HREF="pages/page-one.html">Home Page</A>
				<LI><A HREF="pages/page-one.html">About This Site</A>
				<LI><A HREF="pages/page-one.html">Buy a Car</A>
				<LI><A HREF="pages/page-one.html">Sell a Car</A>	
			</UL>

		</nav>	
		
		
		<SECTION>

		<IMG SRC="images/car.jpg" CLASS="TextWrapLeft">

		<P> Between 1942 and 1978, a total of 22 Australians were decorated with the George Cross (GC), 
		the highest civil decoration for heroism in the United Kingdom and in several countries comprising 
		the Commonwealth of Nations. Fourteen of these medals were awarded directly: nine to military personnel 
		and five to civilians. At the time of the institution of the GC, living recipients of the Empire 	
		Gallantry Medal automatically became recipients of the new award, and were required to return their 
		previous medal; two Australians became GC holders through this method. In 1971, when the British Government 	
		announced that living recipients of the Albert Medal would be invited to exchange their medals for the GC</P>
			
		</SECTION>			
	
	</BODY>



</HTML>




my CSS code is...

.Banner{
	padding-top:5px;
}

BODY {

margin: 0 auto;
width: 940px; 
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;

}

  /* Begin Navigation Bar Styling */
.nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #E1E3E6;
	border-bottom: 1px solid #B4B3B5;
	border-top: 1px solid #B4B3B5;
}
.nav li {
      float: left; }
.nav li a {	
	display: block;
	padding: 10px 10px;
	font-weight: bold;
	color: #6193FF;
	border-right: 1px solid #B4B3B5; 
	text-decoration: none;
}
.nav li a:hover {
	color: #FFFFFF;
	background-color: #3E63B5; }
   /* End navigation bar styling. */


.TextWrapLeft{
	float:left;
	margin-right:10px;
}




Is This A Good Question/Topic? 0
  • +

Replies To: how do i get rid of white space on my website?

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3642
  • View blog
  • Posts: 12,620
  • Joined: 12-December 12

Re: how do i get rid of white space on my website?

Posted 21 July 2014 - 10:46 AM

Note that it is:
<!DOCTYPE html>

You have given .nav a 3em bottom margin, remove or reduce this to remove the gap.
Was This Post Helpful? 0
  • +
  • -

#3 fryishone  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 53
  • Joined: 09-May 14

Re: how do i get rid of white space on my website?

Posted 21 July 2014 - 10:52 AM

Use a developer addon in your browser. Best way to determine what is being interpreted between objects. Most likely some form of padding or margin.
Was This Post Helpful? 0
  • +
  • -

#4 jamesmarkham94  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 25-March 14

Re: how do i get rid of white space on my website?

Posted 21 July 2014 - 10:57 AM

View Postandrewsw, on 21 July 2014 - 10:46 AM, said:

Note that it is:
<!DOCTYPE html>

You have given .nav a 3em bottom margin, remove or reduce this to remove the gap.


AHHH! thanks you :) works fine now
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3642
  • View blog
  • Posts: 12,620
  • Joined: 12-December 12

Re: how do i get rid of white space on my website?

Posted 21 July 2014 - 11:21 AM

You are welcome.

BTW It is preferred that all HTML tags appear in lowercase, rather than uppercase - uppercase tags tend to signify an old (ancient) script.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1