1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Body {

Discussion in 'CSS' started by Hades, Dec 7, 2007.

0
  1. #1
    Hi. I am trying to make it so that the top of my website is the actual top and there is no space up at the top. I implemented the following code, but it doesn't seem to want to work:

    body {
	background-color:#999999;
	margin:0;
	padding:0;
	}
    HTML:
    There is space between the top of my header and the top of the browser. Is there soemthing else i have to do to fix this?
     
    Hades, Dec 7, 2007 IP
  2. logylaps

    logylaps Active Member

    Messages:
    761
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    85
    #2
    Can you give a link to the site?
     
    logylaps, Dec 7, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #3
    Always use a universal reset or reset.css if you aren't already.
     
    soulscratch, Dec 7, 2007 IP
  4. Dondon2d

    Dondon2d Peon

    Messages:
    3,193
    Likes Received:
    146
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yep I suggest the global reset also, but if that's the only problem that you have, you can just add topmargin="0" to <body>
     
    Dondon2d, Dec 7, 2007 IP
  5. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    He is already specifying margin and padding for body in his CSS so there is no need for topmargin.

    And since he is having trouble fixing the space between header and body he will have more trouble with the global reset.

    Hades: Just check the margin/padding of your header. Post your HTML with CSS or a link for more help.
     
    manishk, Dec 8, 2007 IP
  6. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #6
    Yeah the whole reset didn't work. Here is the thing:

    It also seems as though my H1 is really small. Not really sure why. I think it's cause i didn't include it in the "h1 a" section, but i don't know. 

    @charset "utf-8";

/* CSS Document */

/**** Miscelaneous ****/


body {
	background-color:#999999;
	margin:0;
padding:0;

	}

p { 
	margin:0;
	padding:0;
	}
	
h1 {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:24px;
	margin:0;
	padding:0;
	}

h1 a, a:active, a:hover, a:visited {
	color:#FFFFFF;
	margin:0;
	padding:0;
	text-decoration:none;
	}

h2 {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:16px;
	margin:0;
	padding:0;
	color:#FFFFFF;
	}
	
h3 {
	color:#FFFFFF;

	font-size:16px;
	margin:0 0 0 16px;
	padding:0;
	line-height:26px;
	vertical-align:middle;
	}

li {
	margin:0;
	pading:0;
	}

ul {
	margin:0;
	padding:0;
	}
	
/* Clear Div */
.clear {
	clear:both;
	}

/* Bottom Nav Spacer */
.space {
	margin:0 0 9px;
	}
/**** Main Wrapper ****/

#wrapper {
	width:840px;
	margin:0 auto 0 auto;
	}

/**** Header ****/

#header {
	width:840px;
	height:99px;
	border-bottom:1px solid #FFFFFF;
	background: url(images/header.gif) repeat-y;
	margin:0;
	margin:0;
	}
	
#logo {
	float:left;
	width:146px;
	height:53px;
	background:url(images/logo.gif);
	margin:20px 10px 0 9px;
	display:inline; /** Avoid Double Float Bug **/
	}

#title {
	float:inherit;
	margin:23px 0;
	}

/**** Main Navigation ****/

#main-menu {
	background-color:#333333;
	height:26px;
	width:840px;
	}

#main-menu a, a:active, a:hover, a:visited {
	color:#FFFFFF;
	margin-left:36px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	text-decoration:none;
	font-weight:bold;
	line-height:26px;
	vertical-align:middle;
	}
	
/**** Flash Banner ****/

#banner {
	width:840px;
	height:120px;
	background:url(images/banner.gif) no-repeat;
	}

/**** Content Wrapper ****/

#c-wrapper {
	background:url(images/content-wrapper.gif) repeat-y;
	width:840px;
	float:left;
	}

/**** Sidebar Navigation ****/

#sidebar {
	float:left;
	width:209px;
	background:#333333;
	}

/*////// Tree Menu CSS //////*/

.arrow {
	display:inline;
	float:left;
	background:url(images/arrow.gif) no-repeat;
	width:8px;
	height:9px;
	margin-top:7px;
	margin-left: 5px;
	}
	
.menutitle{
	cursor:pointer;
	margin:4px auto 0 auto;
	background-color:#f73433;
	color:#fff;
	width:184px;
	padding:3px;
	text-align:center;
	font-weight:bold;
	}

.menutitle a {
	color:#fff;
	}
	
.submenu {
	width:190px;
	background-color:#ffffcd;
	list-style:none;
	margin: 0 auto 0 auto;
	}
	


.submenu a {
	float:left;
	margin: 3px 0 0 9px;
	font-size:11px;
	color:#000000; 
	}

.submenu a:active {
	font-weight:bold;
	}


/**** Content ****/

#content {
	float:right;
	width:631px;
	background:#f6f8e5;
	margin-top:-26px;
	}

#bcec-title { /* The black bar with the bcec title */
	width:631px;
	height:26px;
	background:#000000;
	}
    HTML:
     
    Hades, Dec 8, 2007 IP
  7. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #7
    can we not see the page live? It'll be so much easier.
     
    Crimsonc, Dec 8, 2007 IP
  8. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #8
    for starters you have margin: 0 twice in your header css, take one out.

    I've come back to see if I can help again but still, without seeing the html page we can only guess at the problem.
     
    Crimsonc, Dec 8, 2007 IP
  9. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #9
    This is as much as i can show of the site:

    <body>
	<div id="wrapper">
        <div id="header">
            <div id="logo"></div>
            <div id="title">
                <h1><a href="index.php">Title</a></h1>
                <h2>Title</h2>
            </div>
        </div>
        
        <div id="main-menu"> 
        	<a href="#" class="menu-links"></a>
            <a href="#" class="menu-links"></a>
            <a href="#" class="menu-links"></a>
            <a href="#" class="menu-links"></a>
            <a href="#" class="menu-links"></a>
            <a href="#" class="menu-links"></a>
            <a href="#" class="menu-links"></a>
        </div>
		
        <div id="banner"></div>
        
        <div id="c-wrapper">
        
        	<div id="sidebar">
            	<!-- Keep all menus within masterdiv-->
                    <div id="masterdiv">
                    
                        <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
<span class="submenu" id="sub1">
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="space"></div>        
                      
      
                      </span>

                    
                        <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
                             <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="space"></div>        
                      </span>
                    
                        <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
                        <span class="submenu" id="sub3">
                           <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="space"></div>        
                        </span>
                        
                        <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
                        <span class="submenu" id="sub4">
                            <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div>
                    <div class="space"></div>        

                        </span>
                    
                        
                    
                    </div>
                    
            </div>
            
            <div id="content">
            	<div id="bcec-title"><h3>title</h3></div>
                
            </div>
        
        </div>
	</div>





</body>
    HTML:
     
    Hades, Dec 8, 2007 IP
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #10
    Based on your markup and CSS, I would assume its this..

    I'd swap the top 23 pixel margin for padding.

    I could make a better guess if I saw the actual page though :)
     
    soulscratch, Dec 8, 2007 IP
    Hades likes this.
  11. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Just add overflow:hidden to your header style.
     
    manishk, Dec 8, 2007 IP
    Hades likes this.
  12. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #12
    The overflow did the trick, but the <h1> is still too small. It's much smaller than what <h2> is , and i have h1 set to be larger than h2, so wth?
     
    Hades, Dec 8, 2007 IP
  13. creative4w3

    creative4w3 Active Member

    Messages:
    105
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #13
    #main-menu a, a:active, a:hover, a:visited

    to

    #main-menu a, #main-menu a:active, #main-menu a:hover, #main-menu a:visited

    which might be the problem with the h1, if it's active/visited (at least unless I missed something).
     
    creative4w3, Dec 8, 2007 IP
    Hades likes this.
  14. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #14
    thanks creative. it seems as though that last part has fixed the problem. +REP to all of you!!!
     
    Hades, Dec 8, 2007 IP