1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Other Really quick css problem

Discussion in 'Software' started by nukeman8, 17 Jan 2011.

  1. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    clicky

    I can't work out why the centre column is not snugly sat at the top of the page, something has moved it down by about 20 pixels, usually its due to me missing a margin or padding tag but not this time.

    any ideas?
     
  2. tristanperry

    tristanperry Minimodder

    Joined:
    22 May 2010
    Posts:
    922
    Likes Received:
    41
    Hmm. I always suck with diagnosing this sort of issue.

    If it helps you/anyone else, this fixes the issue kind of:

    Code:
    .content{
        position:relative;
        top:0px;
        width:800px;
        min-width:800px;
        margin:0px auto;
        height:100%;
        background-image:url('bg.jpg');
        background-repeat:repeat-y;
        padding:0px;
        z-index:2;
    border: 1px solid black;
     }
    
    I say kind of since you shouldn't need to add a border. Not sure why this fixes the issue, but hopefully this post can help someone else with figuring out the actual cause.
     
  3. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    that's bizarre, it does indeed sort of fix it, im just left with a border that i don't ideally want.

    Thanks for the reply anyway, just a shame adding a 0px border doesn't work hehe
     
  4. jrs77

    jrs77 Modder

    Joined:
    17 Feb 2006
    Posts:
    3,483
    Likes Received:
    103
    Why do you set everywhere a position:relative/fixed to begin with?
     
  5. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    just messing about with a layout and i just suppose its how i do things, wrongly by the sounds of it.

    *edit that may of sounded slightly ungrateful, any help/advice is hugely appreciated, im basically taught myself css so i am most likely doing it wrong.
     
    Last edited: 17 Jan 2011
  6. jrs77

    jrs77 Modder

    Joined:
    17 Feb 2006
    Posts:
    3,483
    Likes Received:
    103
    Try this, and save yourself alot of work...

    Code:
    
    body {
    	font-family: Arial; /* or whatever font you wanna use */
    	background: #000000;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000; /* font-color for all the text if not specified otherwise */
    }
    
    #container {
    	width: 1000px;
    	margin: auto; /* the auto margins (in conjunction with a width) center the page */
    	text-align: left; /*  this overrides the text-align: center on the body element. */
            background: #FFFFFF;
    }
    
    #content {
        width: 800px;
        margin: 0px auto;
        height: 100%;
        background-image: url('bg.jpg');
        background-repeat: repeat-y;
        padding: 0px;    
    }
    
    h3{
        text-align:center;
    }
    
    
    You don't need left and right, but only two containers. One inside the other.

    HTML would look like this then....

    Code:
    <!DOCTYPE html> 
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel='stylesheet' type="text/css" href='layout.css'/> 
    <title></title>
    </head>
    	
    <body>
    <div id="container">
        <div id="content">
        <h3></h3>
        </div>
    </div>
    
    </body>
    	
    
    </html>
    
    Oh, and I'd work with IDs for the containers and classes only for other stuff like text-formats etc. Makes it easier to determine, what is what later on.
     
    Last edited: 17 Jan 2011
  7. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    thanks for the reply.

    My plan was to eventually ditch the left and right and just use a background image in the body.
    i copied your code and tried it out, however it isn't working for me. No matter what i try the bg.jpg isn't showing, its just a black screen with whatever text i wrote it in.

    However after messing about with my own some more (removing 90% of the code that didn't need to be there.) it is now sorted, the h3 tag was causing the gap at the top.

    just quickly but is this more or less ideal for what i was trying to achieve?

    Code:
    <!DOCTYPE html> 
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel='stylesheet' type="text/css" href='layout.css'/> 
    <title></title>
    </head>
    	
    <body>
        
    <div class="content">
       
    </div>
        
    </body>
    </html>
    Code:
    html, body {
        margin: 0; padding: 0;
        height:100%; width:100%;
        background-color:black;
    }
    
    .content{
        width:800px;
        margin:0px auto;
        height:100%;
        background-image:url('bg.jpg');
        background-repeat:repeat-y;     
     }
    
     
  8. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    Im having the same problem again even with your code, as soon as i add a h3 tag or add a margin to the content div it screw things up the same.
     
  9. Modsbywoz

    Modsbywoz Multimodder

    Joined:
    14 Oct 2009
    Posts:
    2,778
    Likes Received:
    273
    Can you show us an example and i will be able to debug it for you in no time.
     
  10. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    linky

    the problem is that there shouldn't be the gap below the top of the page and the centre column.

    code is as follows:


    Code:
    html, body {
        margin: 0; padding: 0;
        height:100%; width:100%;
        background-color:gray;
    }
    
    .wrapper{
        width:800px;
        margin:0px auto;
        height:100%;
            background-image:url('bg.jpg');
        background-repeat:repeat-y;     
     }
    
     #content{
        
    }
    Code:
    <!DOCTYPE html> 
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel='stylesheet' type="text/css" href='layout.css'/> 
    <title></title>
    </head>
    	
    <body>
    
    <div class="wrapper">
        
    <div id="content">
       <h3>Title</h3>
    </div>
    </div>
    
    </body>
    </html>
    
     
  11. Ljs

    Ljs Modder

    Joined:
    4 Sep 2009
    Posts:
    2,234
    Likes Received:
    117
    I can't really visual the problem without playing round with the code myself which I can't do at the moment but...

    Not sure if it will fix the problem, but surely the wrapper should be an ID and not a class. Also, I'm not sure you need any of that margin stuff in there surely? Try taking that out as well.
     
  12. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    changing it from a class to an id doesn't help, as i have tried and forgot to turn it back by the looks of it.
    the margin stuff is indeed needed, removing it screws up the design but doesn't close the gap at the top.
     
  13. jrs77

    jrs77 Modder

    Joined:
    17 Feb 2006
    Posts:
    3,483
    Likes Received:
    103
    The problem you have is, that you're putting the h3-tag into the same "box" as your background-image.

    That's why I gave you the advice to make a box in a box.

    The outer box contaiuns the background-image and the inner box contains the content including the h3-tags etc.


    CSS...
    Code:
    body {
      background: #000000;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    
    #container {
      width: 800px;
      margin: auto;
      background: url(bg.jpg) repeat-y;
      height: 100%;
    }
    
    #content {
      margin: 0px auto;
      padding: 0px 10px;
      text-align: left;
    }
    
    h3{
        text-align:center;
    }
    HTML...
    Code:
    <!DOCTYPE html> 
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel='stylesheet' type="text/css" href='layout.css'/> 
    <title></title>
    </head>
    	
    <body>
    <div id="container">
        <div id="content">
        <h3></h3>
        </div>
    </div>
    
    </body>
    	
    
    </html>
    I can't write the thing for you so that you only need to copy and paste it, you need to understand how this works.
    But try to copy the above and see what it does.
     
    Last edited: 18 Jan 2011
  14. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    but thats what i have done isn't it?

    wrapper contains the image
    content contains the h3 tag

    I know you must be right and somewhere im going fatally wrong just for some reason i can't see it.
    Il insert the bits of the code provided that i haven't put in and see what changes what.
     
  15. jrs77

    jrs77 Modder

    Joined:
    17 Feb 2006
    Posts:
    3,483
    Likes Received:
    103
    Get rid of the H3-tag and use your own... The H3-Tag has a padding you don't want.

    Change H3 to head1 in CSS and HTML and it worky fine.

    Sorry for not seeing this problem earlier. Don't use the standard-tags is what I'd recommend as they're preformatted and you can't change that.
     
  16. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    but surely the h3 padding shouldn't move the whole image, just the h3 text? As its position should be based on the wrapper not on the body/html.
     
  17. jrs77

    jrs77 Modder

    Joined:
    17 Feb 2006
    Posts:
    3,483
    Likes Received:
    103
    It would be logical yes, however these standard-formats override some things.

    Simply define all tags yourself and don't use the pre-formatted ones. That's what I do and the reason I didn't thiought of this problem in the first place.
     
  18. Modsbywoz

    Modsbywoz Multimodder

    Joined:
    14 Oct 2009
    Posts:
    2,778
    Likes Received:
    273
    all you have to do to remove the padding on a h3 tag is add the css

    Code:
    
    h3
    {
      padding: 0px;
      margin: 0px;
    }
    
    
    You should ALWAYS use the Heading tags, it gives the page stucture and makes it more SEO friendly.
     
  19. nukeman8

    nukeman8 What's a Dremel?

    Joined:
    24 Jul 2008
    Posts:
    867
    Likes Received:
    17
    thanks both for the replies, this rather odd problem is now fixed.
    I can easily avoid adding any thing to the top margin.
     
  20. jrs77

    jrs77 Modder

    Joined:
    17 Feb 2006
    Posts:
    3,483
    Likes Received:
    103
    Why do you just don't create your own headings, like: topic1, topic2, topic3 etc? Makes it just as structured and you don't need to add tons of formatting to redefine the standard ones ;)

    Anyways. Glad we could help finding a solution for the problem.
     

Share This Page