Basic question: How to get rid of white border

Page 1 of 1

11 Replies - 2261 Views - Last Post: 24 May 2012 - 06:13 AM

#1 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Basic question: How to get rid of white border

Posted 17 May 2012 - 01:53 PM

I've been looking into this for awhile and I managed to get rid of the left border but no such luck with my right padding. I labeled this as border but I now know it's padding for the right side. Still don't have it fixed though.

I figure this must be something stupid I'm missing and or not taking into consideration. I'm just starting to learn HTML and CSS. 

<!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>Student Portfolio</title>

</style>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">           
        <div class="header">
        	<div class="navigation">
              <p>&nbsp;</p>
              <p><a href="index.html" title="Home">Home</a>  |  <a href="Portfolio.html" title="Portfolio">Portfolio</a>  |  <a href="Resume.html" title="Resume">Resume</a>  |  				            <a href="About.html" title="About">About Artist</a> |          	  </p>
            </div>
      </div>
        <div class="h1">
        this is index page</div>
</div>
<div class="footer">
        	<div class="footer.text">
        	</div>
        </div>
</body>
</html>


Styles Code Below

.body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
}
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
.container {
	width: 1280px;
	margin: 0;
	position: fixed;
	height: 1024px;
	background-image:
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.content {
	padding: 10px 0;
}
.footer {
	width: 1279px;
	height: 90px;
	background-repeat: no-repeat;
}
.header {
	height: 90px;
	width: 1280px;
}
.h1 {
}
.navigation {
	text-align: center;
}

This post has been edited by Renovatio: 17 May 2012 - 01:58 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Basic question: How to get rid of white border

#2 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 64
  • View blog
  • Posts: 224
  • Joined: 22-November 10

Re: Basic question: How to get rid of white border

Posted 17 May 2012 - 03:22 PM

Your are attempting to set CSS for the CLASS body and not the HTML element body. When setting CSS for HTML elements you do not put a '.' or '#' in front as these represent class and id respectfully.

It looks like you did this with your h1, h2, h3, h4, h5, h6, p, ul, ol, dl elements but not your body element.

This post has been edited by exiles.prx: 17 May 2012 - 03:23 PM

Was This Post Helpful? 0
  • +
  • -

#3 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Basic question: How to get rid of white border

Posted 17 May 2012 - 03:43 PM

Well then apparently it was something basic.

Thanks so much for pointing it out. Time to sit down and break these bad id & class habits then lol.

I'll post in a few if it fixes it, will have to update links. Is there some form of test service to upload code to so that in these circumstances others can see how it would look vs me getting printscreens?
Was This Post Helpful? 0
  • +
  • -

#4 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 64
  • View blog
  • Posts: 224
  • Joined: 22-November 10

Re: Basic question: How to get rid of white border

Posted 18 May 2012 - 06:25 AM

If the file contains any scripting language such as PHP then you will need an Apache or IIS server to view the file as a web page.If the file is a basic HTML file, it can be view on any computer simply by opening the file up in a browser. So you can send others your HTML file and they can open it in a browser. I do not know of any test service which allows you to upload code which can then viewed by other people. Just sign up for a free web hosting service such as 000webhost.com. There are many other free web host providers out there, just Google 'free web hosting'.
Was This Post Helpful? 0
  • +
  • -

#5 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Basic question: How to get rid of white border

Posted 21 May 2012 - 11:39 PM

This is what I was talking about. http://jsfiddle.net/

Easy to share everything and see the result vs this method. :)
Was This Post Helpful? 0
  • +
  • -

#6 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Basic question: How to get rid of white border

Posted 22 May 2012 - 09:31 AM

I think I'm starting to understand the DIV ids/classes or at least better than before.

Now I'm trying to understand how to make a Header & footer that spans the full width of the browser window. Currently my attempt is below. Thanks for any pointers/advice/thoughts.

http://jsfiddle.net/l2g2h/PbFvg/
Was This Post Helpful? 0
  • +
  • -

#7 DarenR  Icon User is online

  • D.I.C Lover

Reputation: 200
  • View blog
  • Posts: 1,528
  • Joined: 12-January 10

Re: Basic question: How to get rid of white border

Posted 22 May 2012 - 09:56 AM

why not just set your css width to 
width:100%;
in your css
Was This Post Helpful? 0
  • +
  • -

#8 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Basic question: How to get rid of white border

Posted 22 May 2012 - 11:23 AM

I see, nice simple fix. Will post my code again as I try to get that to work.

I was following this guide and got, needless to say...confused.

I'll go in search for a good tutorial site then. :splat:

This post has been edited by Renovatio: 22 May 2012 - 11:23 AM

Was This Post Helpful? 0
  • +
  • -

#9 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Basic question: How to get rid of white border

Posted 23 May 2012 - 12:10 AM

I have since scratched everything I had, started over. Seemed like the easiest way to figure what was and wasn't working as this easily becomes a headache.

It looks like I've managed to get my footer and header down at this point even though in dreamweaver cs3 editing it appears like the footer has an auto margin 523 left and header a 485 margin left. When previewing they appear fine. Don't know if that'd be a problem.

No I'm working towards getting my actual content to not appear at weird places like it does now.

Again my thanks to the community for being so helpful, makes this learning process far less painful! :bananaman:

Here is the current code. I will try to update this one rather than making more "fiddles" as they're called on this site.
Link

Once I can get content to stay in between the Header & Footer I'm going to attempt some form of image gallery.

This post has been edited by Renovatio: 23 May 2012 - 12:12 AM

Was This Post Helpful? 0
  • +
  • -

#10 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 64
  • View blog
  • Posts: 224
  • Joined: 22-November 10

Re: Basic question: How to get rid of white border

Posted 23 May 2012 - 06:11 PM

May I ask why you are floating your header and footer?
Was This Post Helpful? 0
  • +
  • -

#11 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Basic question: How to get rid of white border

Posted 23 May 2012 - 09:06 PM

To tell the truth, because I'm experimenting and don't know of another option. I'm simply following tutorials trying to learn how to do all of this. If there is another way I should have it setup then please mention what it'd involve so I could find a tutorial to explain the coding.

At this point I'm just trying to learn, it's rather slow, painful and filled with headaches.
Was This Post Helpful? 0
  • +
  • -

#12 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 64
  • View blog
  • Posts: 224
  • Joined: 22-November 10

Re: Basic question: How to get rid of white border

Posted 24 May 2012 - 06:13 AM

Ok, I only ask because floating your header is going to push your content above it, which is exactly what is happening. Here is a tutorial I used a long time ago. You can skip down to #18, as the beginning is about using photoshop to design/layout your site graphically. Hope this helps.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1