CSS Help Needed :) Thanks!

12 replies
  • WEB DESIGN
  • |
Hey guys,

This is justin here and I have a question using CSS.

My problem is that I want to connect my navigation and header to my body on Making Money on the Web with Targeted Internet Marketing to somewhat resemble something like zacjohnson.com.

I am not copying, just more-so need to find out how to connect it together.

When you have the page maximized it's okay, but when you make the page smaller, the navigation background just doesn't work out and everything is all jumbled up. Any help would be awesome.

Pretty much I want to fix the navigation with the body. (like Super Affiliate Tips from Super Affiliate Zac Johnson - Let the Reign Begin!) thanks guys!

Currently I have my css set up as:

.main-nav {
text-align: center;
margin-bottom: 30px;
margin-left: 10%;
margin-right: 10%;
width: 960px;
height: 100px fixed;
background: URL(http://www.seprofits.com/wp-content/.../image13.png);
background-attachment: fixed;
}

for my navigation bar.

P.S. The image that is there now is... not the image i'm using lol, its to test it.
#css #needed
  • Profile picture of the author Scott Henderson
    For your margins in that div, set the right and left to auto, that might work. Also the fixed on the background may be messing with it as well. CSS involves a lot of testing for me to get things the way I want them.
    {{ DiscussionBoard.errors[1702725].message }}
  • Profile picture of the author Justin Says
    Thanks a lot, i'll go ahead and try this now. Any other input is awesome.
    Signature

    My name is Justin Lewis. My digital marketing company has been in business for over 10 years with multiple six-figure years. We do provide a premium web design service.

    {{ DiscussionBoard.errors[1702807].message }}
  • Profile picture of the author Justin Says
    Hey shen, it worked! Thanks a ton, you're genious

    Now I was wondering how to create decorations around the headings (like the heading at Niche Blitzkrieg Review | Seprofits © Finding Legitimate Work From Home Jobs One Review at a Time where it says Niche Blitzkrieg Review). My problem here is that, I don't understand decorations at all. I want to put like money flowing out of the top of each header :\
    Signature

    My name is Justin Lewis. My digital marketing company has been in business for over 10 years with multiple six-figure years. We do provide a premium web design service.

    {{ DiscussionBoard.errors[1702997].message }}
    • Profile picture of the author Scott Henderson
      Glad it worked for you, was it just the margins or both the margins and the fixed?

      For your next inquiry, I do not see what decorations you are talking about on the headers. I do know a neat trick to do with CSS to have the graphics on your h1, h2 etc tags like you describe. It involves position:relative.

      You would have the dollars flowing graphic img in your html right before your h1, h2 tags. Say you have your h2 tags centered on the page also. In the CSS for the img, it to would need to be centered, then use the position:relative

      .dollar img {
      position: relative;
      top: 10px;

      What this will do is there will be a space above your h2 tag for the graphic, but it will then be offset from the top 10 px, or in other words move down 10 px on top of anything there already. You'll have to play around with the value to get it just right, but it should do the effect that you are looking for.
      {{ DiscussionBoard.errors[1703103].message }}
      • Profile picture of the author Justin Says
        Originally Posted by shen923 View Post

        Glad it worked for you, was it just the margins or both the margins and the fixed?

        For your next inquiry, I do not see what decorations you are talking about on the headers. I do know a neat trick to do with CSS to have the graphics on your h1, h2 etc tags like you describe. It involves position:relative.

        You would have the dollars flowing graphic img in your html right before your h1, h2 tags. Say you have your h2 tags centered on the page also. In the CSS for the img, it to would need to be centered, then use the position:relative

        .dollar img {
        position: relative;
        top: 10px;

        What this will do is there will be a space above your h2 tag for the graphic, but it will then be offset from the top 10 px, or in other words move down 10 px on top of anything there already. You'll have to play around with the value to get it just right, but it should do the effect that you are looking for.
        Uh can you reword that? Like work that in with this...


        #squeeze-template-4 .squeeze-col-1 {
        float: left;
        width: 540px;
        overflow: hidden;
        margin-right: 30px;
        line-height: 1.5;
        font-size: 1.2em;
        }

        .dollar img {
        position: relative;
        top: 10px;
        background: URLhttp://www.nicheblitzkrieg.com/design/order.gif)
        }

        #squeeze-template-4 .squeeze-col-1 h2 {
        font-weight: bold; font-size: 44px;
        line-height: 49px; margin-bottom: 15px;
        background: #071A89;
        padding: 3px 20px;
        border: solid #040C38;
        color: white;
        margin-top: 0px;
        margin-right: 0px;
        margin-left: 0px;
        padding-top: 3px;
        padding-right: 0px;
        }

        because what I tried didn't work :\
        Signature

        My name is Justin Lewis. My digital marketing company has been in business for over 10 years with multiple six-figure years. We do provide a premium web design service.

        {{ DiscussionBoard.errors[1703234].message }}
  • Profile picture of the author Justin Says
    I meant headings. Like titles of the things.

    At the niche blitzkrieg review you'll see the keywords are in the top. I want to create someone like how zacjohnson does on his website with the whole decoration. Just using Zac as a basis to run off of.

    Like on zacjohnson, you'll see...

    "How To Leverage PPV Traffic"

    With the crown right above how.
    Signature

    My name is Justin Lewis. My digital marketing company has been in business for over 10 years with multiple six-figure years. We do provide a premium web design service.

    {{ DiscussionBoard.errors[1703187].message }}
    • Profile picture of the author Scott Henderson
      UPDATED : see post after this one for simple stuff.

      It is real difficult to explain exactly what he is doing, but I get it.
      His HTML and CSS for that header is below, this what is making it all happen.

      In the CSS decor -1 is the crown, he is using float and z-index to put it behind his blue background for that header. the negative value margin moves it outside his content area. z-index lets you "stack" in any order you want, the higher the value, the more up front it is.

      decor-2 is that little triangle that makes the header appear to wrap around the content area.

      As you can see, who ever built this knew a lot about creating effects with CSS, it is a lot of work and I'm sure a lot of testing went on for whom ever wrote the code. The concept is simple, getting the right rules and the values for them in a lot of cases is all trial and error for creating something for the first time.

      html
      <div class="apost">

      <div class="decor-1"></div>
      <h2 id="post-1630"><a href="http://zacjohnson.com/how-to-leverage-ppv-traffic/"
      rel="bookmark" title="Permanent Link to How To Leverage PPV Traffic">How To Leverage PPV Traffic</a></h2>

      <div class="decor-2"></div>

      css

      #content .apost {
      width:100%;
      margin:0 0 30px;
      clear:both;
      }
      #content .apost .decor-1 {
      float:left;
      display:inline;
      margin:-37px 0 0 -56px;
      position:relative;
      z-index:12;
      width:85px;
      height:37px;
      overflow:hidden;
      background:url(images/crown-left.alpha.png) no-repeat;
      }
      #content .decor-2 {
      float:left;
      display:inline;
      margin:0 0 0 -39px;
      position:relative;
      width:19px;
      height:18px;
      overflow:hidden;
      background:url(images/tag-left-blue.jpg) no-repeat;
      }
      {{ DiscussionBoard.errors[1703350].message }}
  • Profile picture of the author Justin Says
    Okay I tested out using the code but...

    Where exactly would I place this? I want it to appear somewhere on the front page and also in other templates of squeeze theme.

    Should I just add it randomly into the stylesheet somewhere?
    Signature

    My name is Justin Lewis. My digital marketing company has been in business for over 10 years with multiple six-figure years. We do provide a premium web design service.

    {{ DiscussionBoard.errors[1703393].message }}
  • Profile picture of the author Justin Says
    Okay got ya.

    The final thing I am having a huge problem with is the whole idea of making the header extend to the far left (if u visit the homepage, i got the sidebar reaching the edge) but on the content side, it just isn't working :\
    Signature

    My name is Justin Lewis. My digital marketing company has been in business for over 10 years with multiple six-figure years. We do provide a premium web design service.

    {{ DiscussionBoard.errors[1703427].message }}
  • Profile picture of the author Justin Says
    Shen you've been a wonderful help =D Thanks a lot man.
    Signature

    My name is Justin Lewis. My digital marketing company has been in business for over 10 years with multiple six-figure years. We do provide a premium web design service.

    {{ DiscussionBoard.errors[1703613].message }}

Trending Topics