6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

CSS Help needed

by mezloh
5 replies
  • WEB DESIGN
    • |
I am wondering if there is anyone out there that can help me out with a CSS tweak to my site.

If you could point me in the right direction I can get it taken care of myself but right now i am stuck.

Please email me and I will send the URL.

I am having problems moving the text in my header. When ever I try to change the margins so I can move it where I want, the entire header moves instead of just the text.

Any help would be appreciated

Thank You
#css #needed
  • Profile picture of the author NickL
    Margin will shift the edge of the header container so the whole thing will appear to move. You may want to use padding. However, remember that margins, padding and width/height are additive - in other words: when you have a container that is width:100px and you want to add padding-left:20px, your container will now be a total width of 120px. So, to "move something over" you would make padding-left:20px; width:80px; --- now your total width is still 100px.

    Make sense?

    I hope this helps. If you provide a sample of the HTML and css classes I can help further.
    Signature

    Have an Excellent Day!

    ~ Nick

    {{ DiscussionBoard.errors[1997738].message }}
  • Profile picture of the author NickL
    Try this:

    #header

    {

    background-image:url('header1.jpg');

    margin:0;

    height:110px; /* was 140px */

    padding: 30px 0px 0px 30px;

    width: 770px; /* was 800 */
    }



    #header h1

    {

    color:#ffffff;

    font-size:24px;

    }


    Make sure there is not other reference to the header padding or the header h1 font size later in the css - these changes it will be over-ridden (unless you use the !important attribute). You asked for a size of 24px and I assumed you meant the header size - you can also use pt (for point) sizes.

    Let me know if that works for ya.

    By the way - you should install FireBug for Firefox - you can use then "inspect" tool to mouse over parts of your website and it will tell you all the css properties and the css file names. It really helps with stuff like this.

    Take care,

    Nick
    Signature

    Have an Excellent Day!

    ~ Nick

    {{ DiscussionBoard.errors[1998739].message }}
    • Profile picture of the author mezloh
      I do use firebug. It just happened I had 10 projects going at a time and then your brain kind of start to betray you. I couldn't wrap my head around it for some reason. But as soon as I saw your css suggestion it clicked for me again.

      But after a good nights sleep this morning I finished this up. I did up the text size to 36 because 24 was too small.

      One thing I did have to do is add "background-repeat:no-repeat;" because without it the header image was repeating and looking terrible.

      Other than that it does what it is intended to do. I think I will give it a nicer looking font and then be done with it.

      Thank for your help.

      Take Care,

      Travis
      Signature

      Don't Miss Out on the FuXion Opportunity!
      {{ DiscussionBoard.errors[1999799].message }}

Trending Topics