White space

Page 1 of 1

12 Replies - 673 Views - Last Post: 16 April 2012 - 11:59 AM

#1 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

White space

Posted 15 April 2012 - 02:11 AM

I have a fairly simple format for a website. This is what it looks like,

Posted Image

Now the problem is if I put some content in the body area, a strip of white space appears between the navbar and the body. It looks like the body section moves down a little bit.

Posted Image

How can I stop this from happening? Is there a CSS rule which I could use for this?

Is This A Good Question/Topic? 0
  • +

Replies To: White space

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2888
  • View blog
  • Posts: 7,534
  • Joined: 08-June 10

Re: White space

Posted 15 April 2012 - 02:23 AM

it depends on the HTML/CSS code used, but it looks like there is a non-collapsing margin or an offset.

besides that, it is best to create your pages in a standard compliant browser (Firefox/Chrome/Safari) and fix the IE issues afterwards.
Was This Post Helpful? 0
  • +
  • -

#3 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: White space

Posted 15 April 2012 - 03:02 AM

Oh sorry, I forgot to mention, this happens in every browser. Not only in IE.

This is the HTML page,

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Signet Consultants</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>

<div id="container">

    <div id="header">
    	
    </div>


    <div id="navbar">
    	
    </div>


    <div id="rightsec">
    	
    </div>
    
    
	<div id="bodi">
    	<span id="content">
        <h2>SIGNET CONSULTANTS</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam convallis, est id fermentum sodales, enim eros imperdiet nunc, sit amet sollicitudin lorem dui eget libero. Maecenas et leo in neque tincidunt posuere vitae vel velit. Proin at eros nulla, </p>
	</span>
    </div>


    <div id="footer">
    	
    </div>

</div>

</body>
</html>


And this is the CSS stylesheet.

#container {
	width:900px;
	margin-left:auto;
	margin-right:auto;
}

#header {
	width:900px;
	height:150px;
	background-color:#1D4D6B;
	
}

#navbar {
	width:900px;
	height:35px;
	background-color:#EB070D;
}

#bodi {
	width:900px;
	height:600px;
	font:Segoe UI;
	background-color:#FFCC66;
}

#rightsec {
	height:600px;
	width:150px;
	background-color:#CCC;
	float:right;	
}

#footer {
	width:900px;
	height:100px;
	background-color:#053350;
}


Using border-collapse:collapse; inside both #bodi and #navbar didn't do any change.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2888
  • View blog
  • Posts: 7,534
  • Joined: 08-June 10

Re: White space

Posted 15 April 2012 - 03:13 AM

the span doesn’t belong there (block elements are not allowed inside inline elements) and a DTD is missing. for everything else I’d prefer a live page.

as suspected, it’s the h2’s default margin that’s causing this

This post has been edited by Dormilich: 15 April 2012 - 12:08 PM
Reason for edit:: added explanation

Was This Post Helpful? 1
  • +
  • -

#5 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: White space

Posted 15 April 2012 - 07:19 AM

I added this rule and it appears alright now.

#bodi h2{
     display:inline;
}


I suppose this is the right way to go about it? I'm sorry this is my first attempt at Web Development. That's why I want to know for sure if I'm doing it right.

btw the DTD is there.(had to Google to find out what it meant :D) I just removed it when posting the code here.

Thank you for answering.
Was This Post Helpful? 0
  • +
  • -

#6 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: White space

Posted 15 April 2012 - 10:54 AM

One of the most important things in web development is a good debugger like Firebug for example, you'll be able to see what styles are applied to each element.

Also, you will most likely want a reset stylesheet such as the Meyer reset : http://meyerweb.com/...ools/css/reset/

This will remove all the default margins etc from elements. So you're starting off with a consistent baseline.
Was This Post Helpful? 1
  • +
  • -

#7 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: White space

Posted 15 April 2012 - 10:57 AM

Nice! That'll sure come in handy! Thank you.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2888
  • View blog
  • Posts: 7,534
  • Joined: 08-June 10

Re: White space

Posted 15 April 2012 - 12:06 PM

View PostnK0de, on 15 April 2012 - 04:19 PM, said:

I added this rule and it appears alright now.

#bodi h2{
     display:inline;
}


I suppose this is the right way to go about it?

definitely a bad idea. headings are never meant as inline element (i.e. it doesn’t make sense having a heading not being a block element).
Was This Post Helpful? 0
  • +
  • -

#9 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: White space

Posted 15 April 2012 - 12:48 PM

Oh! I'll look into that. I'm not entirely convinced I understand everything on Inline and Block elements. I better do some more reading on that. Thanks.
Was This Post Helpful? 0
  • +
  • -

#10 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1210
  • View blog
  • Posts: 4,124
  • Joined: 27-January 10

Re: White space

Posted 16 April 2012 - 07:26 AM

View PostnK0de, on 15 April 2012 - 10:19 AM, said:

I added this rule and it appears alright now.

#bodi h2{
     display:inline;
}


I suppose this is the right way to go about it? I'm sorry this is my first attempt at Web Development. That's why I want to know for sure if I'm doing it right.

btw the DTD is there.(had to Google to find out what it meant :D) I just removed it when posting the code here.

Thank you for answering.


That's not the way to go about it! :)

The problem you were seeing is because the H2 tag has a default margin.

To fix this issue:

h2 {
    margin:0px; /* This element now has zero pixels margin on all sides. */
}


I definitely recommend Firebug on firefox, or use the Web Inspector is you're using Chrome.

Opera has the absolute best debugger, with Dragonfly. Try it out!
Was This Post Helpful? 1
  • +
  • -

#11 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: White space

Posted 16 April 2012 - 11:13 AM

Cool, it did the trick! Thank you :)

I am familiar with Firebug and Chrome's Web Inspector. I just haven't really used in in my developing up to now. I will try it out for sure. Thanks.
Was This Post Helpful? 0
  • +
  • -

#12 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1210
  • View blog
  • Posts: 4,124
  • Joined: 27-January 10

Re: White space

Posted 16 April 2012 - 11:49 AM

Are you aware that you can modify pixel values and see the results in real time using those tools?

I ask because when I started out I used to modify a pixel by 1, then save, then alt tab, then refresh.

Rinse repeat. HOURS wasted this way. :lol:
Was This Post Helpful? 0
  • +
  • -

#13 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: White space

Posted 16 April 2012 - 11:59 AM

You're right. I'm in the same boat now! I actually do those same steps! haha...I'll definitely look into the features of those tools and use em from now on.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1