WEB adjust css template so theres no space at the top?

Discussion in 'OT Technology' started by Naturally Baked, Sep 29, 2009.

  1. Naturally Baked

    Naturally Baked Active Member

    Joined:
    Sep 24, 2007
    Messages:
    27,942
    Likes Received:
    0
    Location:
    Detroit, Murder Mitten
    http://7thgenhonda.com/miniblog/


    I don't want any white space at the top.

    Here is the CSS:

    Code:
    /* CSS Document */
    
    body {
    	background-color:#fff;
    	background-image:url(../images/backgrounds/body.gif); 
    	background-position:center;
    	background-repeat:repeat-y;
    	font-family: "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
    	font-size:10px;
    	color:#777;
    }
    #container {
    	width:945px;
    	margin:0 auto;
    }
    
    #header {
    height:185px;
    width: 945px;
    background:url(../images/header.jpg) top center no-repeat;
    }
    
    
    #header h1 {
    	text-align:center;
    	font-family:Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
    	font-size:30px;
    	color:#333;
    	margin:0;
    	font-weight:normal;
    }
    #header h1 strong {
    	color:#A85BA6;
    }
    #header h1 a {
    	color:#333;
    	text-decoration:none;
    }
    #header h2 {
    	font-size:11px;
    	font-weight:normal;
    	text-align:center;
    	color:#999;
    }
    #header ul {
    	margin:20px 0 0 0;
    	padding:0;
    }
    #header li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	float:left;
    }
    #header li a {
    	display:block;
    	padding:7px;
    	color:#999;
    	text-decoration:none;
    	border-bottom:5px solid #fff;
    	margin:0 10px 0 0;
    	font-size:10px;
    }
    #header li a:hover {
    	color:#000;
    	border-bottom:7px solid #000000;
    	padding:5px 7px 7px 7px;
    }
    #header li a em {
    	font-style:normal;
    	text-decoration:underline;
    }
    
    #sidebar {
    	float:right;
    	width:164px !important;
    	width:154px;
    	margin:10px 10px 10px 0;
    }
    
    #sidebar h1 {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#000;
    	margin:10px 5px 15px 10px;
    }
    #sidebar p {
    	padding:5px;
    	margin:5px 5px 5px 10px;
    	line-height:17px;
    	word-spacing:-1px;
    }
    
    ul.submenu {
    	margin:0;
    	padding:0;
    }
    .submenu li {
    	marign:0;
    	padding:0;
    	list-style:none;
    }
    .submenu a {
    	display:block;
    	height:13px;
    	padding:7px 7px 7px 17px;
    	margin:1px 0 0 0;
    	background-color:#fff;
    	background-image:url(../images/backgrounds/submenua_normal.jpg);
    	background-position:left;
    	background-repeat:repeat-y;
    }
    .submenu a:hover {
    	background-image:url(../images/backgrounds/submenua.jpg);
    	background-position:bottom;
    	background-repeat:no-repeat;
    	background-color:#fff;
    	padding:7px 7px 7px 15px;
    }
    .submenu a:focus {
    	background-image:url(../images/backgrounds/submenua.jpg);
    	background-position:bottom;
    	background-repeat:no-repeat;
    	background-color:#fff;
    	padding:7px 7px 7px 15px;
    }
    .submenu a:active {
    	background-image:url(../images/backgrounds/submenua.jpg);
    	background-position:bottom;
    	background-repeat:no-repeat;
    	background-color:#fff;
    	padding:7px 7px 7px 15px;
    }
    
    .note {
    	padding:10px;
    	background-color:#eee;
    	border:1px solid #ccc;
    	margin:20px 5px 20px 5px;
    }
    
    
    #content {
    	margin:10px 185px 10px 10px;
    }
    #content h1 {
    	font-family:Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
    	font-size:14px;
    	border-bottom:1px solid #eee;
    	padding:5px;
    	color:#000;
    }
    #content h1 a {
    	color:#000;
    	text-decoration:none;
    	display:block;
    	background-image:url(../images/backgrounds/h1.png);
    	background-position:right;
    	background-repeat:no-repeat;
    }
    #content h1 a:hover {
    	color:#444;
    	background-image:url(../images/backgrounds/h1_hover.png);
    }
    #content h2 {
    	font-size:11px;
    	color:#ccc;
    	margin:10px 0 10px 0;
    	padding:5px;
    }
    #content p {
    	padding:5px;
    	line-height:18px;
    	word-spacing: 0.1em;
    }
    #content .article_menu {
    	text-align:right;
    	padding:5px;
    	margin:10px 0 20px 0;
    	border-top:1px solid #eee;
    }
    #content .article_menu b {
    	float:left;
    	font-weight:normal;
    }
    #content .article_menu a {
    	padding:0 0 0 15px;
    	background-image:url(../images/backgrounds/comment.png);
    	background-position:left;
    	background-repeat:no-repeat;
    	color:#333;
    	text-decoration:none;
    }
    #content p a {
    	color:#333;
    	text-decoration:none;
    }
    
    #content p:hover a {
    	border-bottom:1px dotted #000;
    }
    #content p:hover a:hover {
    	border-bottom:1px solid #000;
    }
    #content .article_menu a:hover {	
    	color:#000;
    	background-image:url(../images/backgrounds/comment_hover.png);
    }
    #content ul {
    	margin:0 0 0 15px;
    	padding:0;
    	border-top:1px solid #f6f6f6;
    }
    #content li {
    	margin:5px 0 5px 0;
    	border-bottom:1px solid #f6f6f6;
    	padding:0 0 5px 20px;
    	list-style:none;
    	background-image:url(../images/backgrounds/arrow.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    	color:#999;
    }
    #content blockquote {
    	background-color:#f6f6f6;
    	margin:4px;
    	padding:5px;
    	border-top:1px solid #eee;
    	border-bottom:1px solid #eee;
    }
    #content blockquote p {
    	marign:0;
    	padding:0 10px 0 10px;
    }
    .comment_odd {
    	background-color:#f6f6f6;
    	padding:10px;
    	border-top:1px solid #fff;
    	border-bottom:1px solid #eee;
    }
    .comment_even {
    	padding:10px;
    	background-color:#fcfcfc;
    	border-top:1px solid #fff;
    	border-bottom:1px solid #eee;
    }
    .comnum {
    	float:right;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:25px;
    	color:#ccc;
    }
    input, textarea {
    	background-color:#fff;
    	border:1px solid #ccc;
    	padding:3px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	color:#777;
    }
    #footer {
    	background-color:#eee;
    	border-top:2px solid #ccc;
    	padding:10px;
    	text-align:center;
    }
    
    a {
    	color:#333;
    	text-decoration:none;
    }

    Here is the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>[ SIX SHOOTER MEDIA FREE CSS TEMPLATE ] - Home</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="css/1.css" type="text/css" media="screen,projection" />
    <style type="text/css">
    <!--
    #apDiv1 {
    	position:absolute;
    	left:296px;
    	top:200px;
    	width:182px;
    	height:0px;
    	z-index:1;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
    				
      <div id="header">
    				  <h2>&nbsp;</h2>
                      <h2>&nbsp;</h2>
    				  <h2>&nbsp;</h2>
    				  <h2>&nbsp;</h2>
    				  <h2>&nbsp;</h2>
    				  <h2>&nbsp;</h2>
                      <h2>&nbsp;</h2>
    			      <p>&nbsp;</p>
    	      </div>
                                      <div id="content">
                                      
    				
    						<h1>&nbsp;</h1>
                            <h1>&nbsp;</h1>
    
    						<h1><a href="#intro" id="intro">Introduction</a></h1>
    				  <h2>Everyting needs an intro!</h2>
    						
    						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    						
    						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    						
    						<div class="article_menu">
    						
    								<b>Posted on Thursday 08 December 2005</b> <a href="#">28 Comments</a>
    						
    						</div>
    	
    						<h1>&nbsp;</h1>
    						
    						</div>
    
    				
    				<div id="footer">
    				
    				  <p>
    						
    							
    				
    				  </p>
    				
    				</div>
    				
    </div>
    
    </body>
    </html> 

    any help please?! :x:
     
  2. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,167
    Likes Received:
    439
    Location:
    L.A.
    why the fuck do you have a bunch of h2's in your header

    get rid of them,
    body style: margin-top:0px;
    dont make bg image in header, just insert image in header div
    or you can do bg image in header, nothing in there, just specify exact width and height and position absolute of header
     
  3. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,645
    Likes Received:
    15
    Location:
    Atlanta
    body {margin: 0px 0px 0px 0px; }
     
  4. fishbulb

    fishbulb Active Member

    Joined:
    Oct 29, 2001
    Messages:
    6,848
    Likes Received:
    4
    Location:
    md
  5. Naturally Baked

    Naturally Baked Active Member

    Joined:
    Sep 24, 2007
    Messages:
    27,942
    Likes Received:
    0
    Location:
    Detroit, Murder Mitten

    :bowdown:

    Ok...it worked in dreamweaver but when I go to preview it in the browser it still shows up :(
     
  6. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    what browser?
     
  7. Naturally Baked

    Naturally Baked Active Member

    Joined:
    Sep 24, 2007
    Messages:
    27,942
    Likes Received:
    0
    Location:
    Detroit, Murder Mitten
    safari and mozilla
     
  8. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,167
    Likes Received:
    439
    Location:
    L.A.
    you stupid fuck are you listening to me

    i told you to get rid of the fucking h2's in the header

    you dont need to use spacers anymore bro

    or just do this and gypsy it



    :o

    h2 {
    padding:0px;
    margin:0px;
    }
    body {
    margin-top:0px;
    }
     
  9. Naturally Baked

    Naturally Baked Active Member

    Joined:
    Sep 24, 2007
    Messages:
    27,942
    Likes Received:
    0
    Location:
    Detroit, Murder Mitten
    :rofl:
    :bowdown::bowdown::bowdown::bowdown:

    you da man
     
  10. TurkeyChicken

    TurkeyChicken New Member

    Joined:
    Jun 26, 2003
    Messages:
    42,913
    Likes Received:
    0
    Location:
    Albuquerque, NM
    you need to stop using spaces ( &nbsp; ) for positioning elements :o
     
  11. Naturally Baked

    Naturally Baked Active Member

    Joined:
    Sep 24, 2007
    Messages:
    27,942
    Likes Received:
    0
    Location:
    Detroit, Murder Mitten
    How do I position then :wtc: lol

    This is my first time actually buidling a css site....Ive worked with it in vb before though
     
  12. TurkeyChicken

    TurkeyChicken New Member

    Joined:
    Jun 26, 2003
    Messages:
    42,913
    Likes Received:
    0
    Location:
    Albuquerque, NM
    Just use padding/margins on various html elements (div, p)
     
  13. Naturally Baked

    Naturally Baked Active Member

    Joined:
    Sep 24, 2007
    Messages:
    27,942
    Likes Received:
    0
    Location:
    Detroit, Murder Mitten
    oooh didnt think about padding :mamoru:
     
  14. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,645
    Likes Received:
    15
    Location:
    Atlanta
    if you're using padding/margin and the div isn't moving, make sure to include position:relative (or absolute on rare occasions)
     
  15. Cojones

    Cojones Guest

    :rofl: thread was :rofl:
     
  16. Coaxsist

    Coaxsist Re-create... Innovate

    Joined:
    Feb 11, 2008
    Messages:
    1,032
    Likes Received:
    0
    I'm assuming a

    body-position: center

    css declaration does the same thing as having

    <div align="center">

    with all other divs nested inside?

    I do this now, and just left align anything that needs to be through align="left" or text-align: left;

    Would be stoked if body-position: center works :x:
     
  17. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,645
    Likes Received:
    15
    Location:
    Atlanta
    do a margin: 0px 0px 0px 0px; to get no spaces around any of the edges... put your background image in this div.

    Then make your container div. If you're doing liquid, do this: position:relative; width:80%; left:10%; display:block;. If you're doing a fixed size, do this: width:1000px; text-align:center. If you're doing a fixed size, you'll have to make a container within the container that simply states: text-align:left.
     
  18. Coaxsist

    Coaxsist Re-create... Innovate

    Joined:
    Feb 11, 2008
    Messages:
    1,032
    Likes Received:
    0
    Right on, right on. Never even thought about that...

    Why text-align: center?

    Slightly redundant?
     
  19. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,167
    Likes Received:
    439
    Location:
    L.A.
    why you tryin to act all smart with big words when you dont even know what they mean son
     
  20. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,326
    Likes Received:
    71
    Location:
    Tasmania
    Remind me never to ask for help on here ;)
     
  21. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,645
    Likes Received:
    15
    Location:
    Atlanta

    This will center the main container in the page since IE doesn't respond well to margin:auto; The second container will left-align everything in the main container
     
  22. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,645
    Likes Received:
    15
    Location:
    Atlanta
    sen, never ask for help on here.




    you're welcome :h5:
     
  23. Naturally Baked

    Naturally Baked Active Member

    Joined:
    Sep 24, 2007
    Messages:
    27,942
    Likes Received:
    0
    Location:
    Detroit, Murder Mitten
    how do I actually center the body of the conetent?

    I tried <center> </center> but it only centers the text
     
  24. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,645
    Likes Received:
    15
    Location:
    Atlanta
    text-align:center... if i understand what you're asking.
     
  25. Naturally Baked

    Naturally Baked Active Member

    Joined:
    Sep 24, 2007
    Messages:
    27,942
    Likes Received:
    0
    Location:
    Detroit, Murder Mitten
    shit...problem

    so my buddy has his content in a word document, formatted the way he wants it....It wont copy and paste to dreamweaver formatted, is there a way to do this?
     

Share This Page