Announcement

Collapse
No announcement yet.

Header Formatting (toplinks and logo issues)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [Forum] Header Formatting (toplinks and logo issues)

    I'm having a bear of a time getting my header formatted in a way that looks good on all browswers.

    My forum at at www.treefrogtreasures.com/forum

    I have three logos that I place at the top of the header (two linked outside the forum). When I first put those logos in, the toplinks covered the logos (in some browsers) and were hard to see. To move the toplinks off of the logos I ended up putting this in 'additional.css'
    .toplinks {
    padding-top: 98px;
    }


    I also bumped the top margin value on the navbar to 40. This sort of works...but is has some issues:
    • In some browsers there is an unnecessarily large amount of empty 'header space' - the toplinks show up WAY under the logos.
    • In Google Chrome and Firefox the proximity of the toplinks to the logos renders the logo links inoperable (when I expand the browser width to get the toplinks away from the logos the links offiste work just fine).
    If there a way to actually fix the location of the toplinks under the logos?

  • #2
    Your "padding-top" is what is causing the issue. I'd set it to position:relative and clear:both and float:left (you said in the other thread that is what you wanted).

    Please don't PM or VM me for support - I only help out in the threads.
    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
    Want help modifying your vbulletin forum? Head on over to vbulletin.org
    If I post CSS and you don't know where it goes, throw it into the additional.css template.

    W3Schools <- awesome site for html/css help

    Comment


    • #3
      I must be missing someting (or not quite understanding)....I changed additional.css to:

      .toplinks {
      position:relative
      clear:both
      float:left
      }

      It placed the toplinks on the right directly over my logos. Is there something in the header pushing it right?

      Comment


      • #4
        You are missing the ;
        HTML Code:
        .toplinks {
         position:relative; 
        clear:both; 
        float:left; 
        }

        Please don't PM or VM me for support - I only help out in the threads.
        vBulletin Manual & vBulletin 4.0 Code Documentation (API)
        Want help modifying your vbulletin forum? Head on over to vbulletin.org
        If I post CSS and you don't know where it goes, throw it into the additional.css template.

        W3Schools <- awesome site for html/css help

        Comment


        • #5
          Bingo!

          Is there a way to shift them so they are left-justified directly under the logos above (they extend slightly to the left)?

          Comment


          • #6
            You have padding/margins in various places there. Your toplinks has right:20 set, you'll want that to be 0. And then your input boxes are centered:
            HTML Code:
            .toplinks .logindetails {    text-align: center;}
            I'd suggest installing firebug for firefox so you can see the CSS easily and see what is effecting your layout.

            Please don't PM or VM me for support - I only help out in the threads.
            vBulletin Manual & vBulletin 4.0 Code Documentation (API)
            Want help modifying your vbulletin forum? Head on over to vbulletin.org
            If I post CSS and you don't know where it goes, throw it into the additional.css template.

            W3Schools <- awesome site for html/css help

            Comment


            • #7
              We'd like to do this change for our header. I added the code above and it moved the toplinks AND the banner both to bottom left.

              We'd like to just move the toplinks in the header to under the header 1 ad like the OP has now.

              Thanks
              Last edited by niteflyer32; Thu 10 Feb '11, 8:32am.

              Comment


              • #8
                You should start your own thread and post an image of what you want it to look like along with a link to see what it looks like now.

                Please don't PM or VM me for support - I only help out in the threads.
                vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                Want help modifying your vbulletin forum? Head on over to vbulletin.org
                If I post CSS and you don't know where it goes, throw it into the additional.css template.

                W3Schools <- awesome site for html/css help

                Comment

                Related Topics

                Collapse

                Working...
                X