8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Can This be Done? If so how difficult

by Byron_Wells
7 replies
  • WEB DESIGN
    • |
Alright Warriors

I am not sure if this is possible or if it is how difficult to do. Firstly I have an old revolution theme called pro media.. I am looking to upgrade to one of the lastest revolution packages..

I am planning to use this image http://supreme-host.com/Byron/header.png for the very top part, i.e header..
But what I am thinking can I put links on the top silver bar, and bottom silver bar? I have seen on one of their themes thatthe navigation links are on the right side of the theme, but I am not sure if I can do it with any image header..

I can slip the image into sections if need be, but then its working out where in the actual code to put the seperate parts..

Can anyone help please?
#difficult
  • Profile picture of the author heary
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[1276418].message }}
    • Profile picture of the author Byron_Wells
      Originally Posted by heary View Post

      You have to use a software like Exit Prophet.
      Heary

      Exit Prophet software is small php script you can use to generate little 'exit traffic salesmen' Nothing to do with my problem
      {{ DiscussionBoard.errors[1276684].message }}
  • Profile picture of the author blogginvixen
    Yes, it can be done.

    The first question I want to ask, however, is how are you going to get that image to span across the entire length of the header? It looks shorter than the actual width of the Revolution header area...unless of course you're changing the size of the entire div...then excuse my question.

    Anyways, there are multiple ways you can attack this, but because I like to take shortcuts so I would chop this image up in Photoshop and set the top and bottom portions as background images for their respective divs. From there, I would then configure the CSS for how I want my links to look on top of the silver areas.

    I hope that helps...
    {{ DiscussionBoard.errors[1276819].message }}
    • Profile picture of the author Byron_Wells
      Originally Posted by blogginvixen View Post

      Yes, it can be done.

      The first question I want to ask, however, is how are you going to get that image to span across the entire length of the header? It looks shorter than the actual width of the Revolution header area...unless of course you're changing the size of the entire div...then excuse my question.

      Anyways, there are multiple ways you can attack this, but because I like to take shortcuts so I would chop this image up in Photoshop and set the top and bottom portions as background images for their respective divs. From there, I would then configure the CSS for how I want my links to look on top of the silver areas.

      I hope that helps...

      I was thinking along the same line as splitting/cropping or whatever you call it, the image into separate pieces in photoshop. Then using each piece for different divs..

      I cant remember this or not but I beleive that the revolution theme header is 800px.. At the moment the width of the image is 760px.. I might change it to the full 800px
      {{ DiscussionBoard.errors[1276948].message }}
  • Profile picture of the author TristanPerry
    Yep, this can easily be done Just use CSS elements and positive them accordingly.

    So have something like:

    <div id="Header">
    <!-- Header would go here - either via an <img> tag, or as a CSS background !-->
    </div>

    <div id="NavBar1">
    <!-- Links here, in a <ul><li></li>...</ul> list, then use CSS "position: relative;" and top/left/right as needed to move these links up to where you want them !-->
    </div>

    <div id="NavBar2">
    <!-- Links here, in a <ul><li></li>...</ul> list, then use CSS "position: relative;" and top/left/right as needed to move these links up to where you want them !-->
    </div>

    So yes, it's easy to do with a little bit of CSS knowledge

    The main thing is the CSS attribute "position: relative;" which then allows you to move the nav bars as necessary.

    I've said to put the links in a <ul> list, since this is more accessible.
    Signature
    Plagiarism Guard - Protect Against Content Theft
    {{ DiscussionBoard.errors[1276978].message }}
    • Profile picture of the author Byron_Wells
      Originally Posted by TristanPerry View Post

      Yep, this can easily be done Just use CSS elements and positive them accordingly.

      So have something like:

      <div id="Header">
      <!-- Header would go here - either via an <img> tag, or as a CSS background !-->
      </div>

      <div id="NavBar1">
      <!-- Links here, in a <ul><li></li>...</ul> list, then use CSS "position: relative;" and top/left/right as needed to move these links up to where you want them !-->
      </div>

      <div id="NavBar2">
      <!-- Links here, in a <ul><li></li>...</ul> list, then use CSS "position: relative;" and top/left/right as needed to move these links up to where you want them !-->
      </div>

      So yes, it's easy to do with a little bit of CSS knowledge

      The main thing is the CSS attribute "position: relative;" which then allows you to move the nav bars as necessary.

      I've said to put the links in a <ul> list, since this is more accessible.
      Alright m8

      Thanks for that bit of advice..

      I am wondering you know you said to put the image under the header div part. Are you talking about the whole image??

      Or do I need to put bits of that image in the navbar1 div section as well??
      {{ DiscussionBoard.errors[1277028].message }}
      • Profile picture of the author TristanPerry
        Originally Posted by Byron_Wells View Post

        Alright m8

        Thanks for that bit of advice..

        I am wondering you know you said to put the image under the header div part. Are you talking about the whole image??

        Or do I need to put bits of that image in the navbar1 div section as well??
        You're welcome

        You don't need to slice up the image. Put the whole image into it.

        CSS and <divs> work via layers. Hence you'd have a "bottom" layer which contains the whole header image (be it via <img> XHTML or background-image: url(); CSS)

        Then you'd have two more layers (the navigation ones), which go "on top of" the header layer.

        So yes, keep it as one image.
        Signature
        Plagiarism Guard - Protect Against Content Theft
        {{ DiscussionBoard.errors[1277119].message }}
  • Profile picture of the author promo_guy
    don't forget to set your ul to display:inline; if you want your links to go horizontally

    Tristan is right, this is pretty simple to do if you know a bit of CSS
    {{ DiscussionBoard.errors[1277625].message }}

Trending Topics