Announcement

Collapse
No announcement yet.

Logo Overlaying?

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

  • [Forum] Logo Overlaying?

    Hey guys,

    I've been playing around with the styles and whatnot on vB4 and something is still baffling me. I want to achieve and effect like this with my forum's logo:



    The logo takes up the whole header and the navbar moves over, whilst the navbar bg still being under the logo. I would know how to get this on vB3 and whilst I feel it is probably much of the same, I just can't get it.

    Anyone reckon they can give me a hand?

    - Morsolo

  • #2
    I have an idea. You can't use the stylevar.
    Email me the image.
    steven @ happytogether.com

    Edit: I guess you want it to appear as if it's driving over the nav bar.
    I played around with it. I'm not sure if it needs to be in the header or navbar.
    I tried position, float, zIndex to no avail.
    Last edited by steven s; Fri 25th Dec '09, 6:51pm.
    ...steven
    www.318ti.org (vB3.8) | www.nccbmwcca.org (vB4.2)
    bmwcca.org/forum | m135i.net
    "I tried to clean this up but this thread is beyond redemption." - Steve Machol

    Comment


    • #3
      You would need to use float and set the z-index, and probably write a custom CSS rule. Personally, I don't like how the ads are coded in the header so I re-wrote the entire header coding. At least if you custom code the header you can position images, etc exactly.

      Comment


      • #4
        Originally posted by steven s View Post
        I have an idea. You can't use the stylevar.
        Email me the image.
        steven @ happytogether.com

        Edit: I guess you want it to appear as if it's driving over the nav bar.
        I played around with it. I'm not sure if it needs to be in the header or navbar.
        I tried position, float, zIndex to no avail.
        I just want it to look a little more unique than the regular "stacking" kind of look.

        Originally posted by syrus.xl View Post
        You would need to use float and set the z-index, and probably write a custom CSS rule. Personally, I don't like how the ads are coded in the header so I re-wrote the entire header coding. At least if you custom code the header you can position images, etc exactly.
        I completely agree with you. Unfortunately I still haven't got the hang of vB4's coding, but looks like I'll have a lot of fun tonight, haha.

        Comment


        • #5
          No one have a solution?

          Comment


          • #6
            I would also love this, but then the image going "under" the navbar

            Comment


            • #7
              I am coding my 'live' site tomorrow - What I'll do is post a preview of what the outcome looks like, and the custom code I have wrote to achieve it. It is not that hard to achieve, if you know CSS. I will point out the areas in the CSS so you know what is controlled by which definitions.

              I have re-wrote the header coding twice now, both to use different layouts, I notice some people have placed header images right across the top, and the 'Remember Me?' floating over it. To me this should have been coded better initially, the layout completely is a mess if you start adding banners to the default CSS header code. I tried adding a flash banner 468x60 on the right in the header, but to my dismay my logo shifted up on the left. What I done was coded the banner now to float right with a 20px spacing on the right, and not push my logo up, which looked a total mess.

              I used Firefox's Developer Tools, to see what the banner would look like at default - but it even broke the code with a monitor setting of 1024x768. It does not take much to fix an issue like this.

              You can position anything where you want using CSS, all you need is to learn the basics.

              Comment


              • #8
                Originally posted by syrus.xl View Post
                You can position anything where you want using CSS, all you need is to learn the basics.
                Not meaning to hijack.
                I'm using the float:right with padding 2em for a rotating image on the right. It looks OK on a full screen, but when the screen narrows, the image on the right drops down increasing the height of the header.
                ...steven
                www.318ti.org (vB3.8) | www.nccbmwcca.org (vB4.2)
                bmwcca.org/forum | m135i.net
                "I tried to clean this up but this thread is beyond redemption." - Steve Machol

                Comment


                • #9
                  Originally posted by steven s View Post
                  Not meaning to hijack.
                  I'm using the float:right with padding 2em for a rotating image on the right. It looks OK on a full screen, but when the screen narrows, the image on the right drops down increasing the height of the header.
                  I am assuming you have set up 2 div's for your images, if so try adding display:inline-block; to both and maybe overflow-x:hidden; to the body.

                  Comment


                  • #10
                    Originally posted by syrus.xl View Post
                    I am assuming you have set up 2 div's for your images, if so try adding display:inline-block; to both and maybe overflow-x:hidden; to the body.
                    I'm sure there are many ways to do this.
                    Below (header template)
                    HTML Code:
                    <div id="header" class="floatcontainer doc_header">
                    I am using
                    HTML Code:
                    <div style="
                    position:absolute;
                    right:0px;
                    top:30px;
                    width:600px;
                      height:80px;
                      filter:alpha(opacity=30);
                      opacity:0.3;
                    z-index:1;"><img src=""></div>
                    The opacity is so I don't have to edit the image. I'm actually using a rotating image script.
                    The problem I had was the right side image would drop down when making the page narrower.
                    Now it moves on top of my logo which I don't really care.
                    Perhaps the same thing could be used for the logo?
                    http://www.nccbmwcca.org/content.php
                    ...steven
                    www.318ti.org (vB3.8) | www.nccbmwcca.org (vB4.2)
                    bmwcca.org/forum | m135i.net
                    "I tried to clean this up but this thread is beyond redemption." - Steve Machol

                    Comment


                    • #11
                      Originally posted by syrus.xl View Post
                      I am coding my 'live' site tomorrow - What I'll do is post a preview of what the outcome looks like, and the custom code I have wrote to achieve it. It is not that hard to achieve, if you know CSS. I will point out the areas in the CSS so you know what is controlled by which definitions.

                      I have re-wrote the header coding twice now, both to use different layouts, I notice some people have placed header images right across the top, and the 'Remember Me?' floating over it. To me this should have been coded better initially, the layout completely is a mess if you start adding banners to the default CSS header code. I tried adding a flash banner 468x60 on the right in the header, but to my dismay my logo shifted up on the left. What I done was coded the banner now to float right with a 20px spacing on the right, and not push my logo up, which looked a total mess.

                      I used Firefox's Developer Tools, to see what the banner would look like at default - but it even broke the code with a monitor setting of 1024x768. It does not take much to fix an issue like this.

                      You can position anything where you want using CSS, all you need is to learn the basics.
                      Subscribing to this thread for this mod =)

                      Comment


                      • #12
                        Basically, what I've done so far to stop any div dropping below another is adjusted the doc_minWidth css stylevar to 760px (adjust this to suit). This I calculated by adding the logo width, banner advert rotator and also the left and right margins.

                        Both the logo and banner div's have display:block-inline; and positioned using top, right and left margins. I set the the logo div at a fixed width, while the banner is a fluid div width.

                        On top of this, I added to the vbulletin.css template at the end of the body tag overflow-x:hidden; - this stops scroll bars appearing from showing if the browser width is dropped below 760px.

                        I'll post the full code shortly, including how to overlay a logo over the navbar and push the navigation to the right.

                        Comment


                        • #13
                          Thanks!

                          Comment

                          Related Topics

                          Collapse

                          Working...
                          X