Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation I need to draw some navigator tabs as shown below.

    I want to make strip tabs that are moved sidewise on hover.
    Like two tabs joined sidewise or top to bottom and shifted as required.

    ____________________________________________
    |______tab a joined to __|____tab b._____________|

    Probably jpeg.

    Can anyone suggest a suitable program or technique to help me.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Oh like a rollover image?

    If yes

    Your best bet would be to use photoshop to make your buttons then code it as such.

    Code:
    .nav {
    	background: url(../images/navigation/nav_bg.jpg) repeat-x;
    	width:100%;
    	height:30px;
    	margin:auto;
    	text-align:center;
    }
    
    .rollover {
    width:830px;
    margin:auto;
    }
    .rollover a {
    height:23px;
    width:118px;
    float:left;
    font: bold 13px "Calibri";;
    color:#d9d9d9;
    background: url(../images/navigation/nav.jpg) 0 0 no-repeat;
    text-decoration: none;
    padding-top:7px;
    }
    .rollover a:hover { 
    background-position: 0 -30px;
    color: #d9d9d9;
    }

    PHP Code:
                <div class="nav">
    <
    div class="rollover">

    <
    a href="index.html">Home</a>
    <
    a href="order.html">Order</a>
    <
    a href="support.html">Support</a>
    <
    a href="demo.html">Demo</a>
    <
    a href="testimonial.html">Testimonials</a>
    <
    a href="contactus.html">Contact Us</a>
    <
    a href="packages.html">Packages</a>
    </
    div>

                </
    div

    Then have the image be in a vertical state;

    IE:


    |BUTTON NOT HOVERED|
    |BUTTON IS HOVERED|
    Last edited by PitbullMean; 03-05-2009 at 10:14 PM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • Users who have thanked PitbullMean for this post:

    effpeetee (03-05-2009)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks PitbullMean,

    I do have Photoshop CS2, but I have had trouble using it with Windows 7.

    I'll put it on my XP computer and have a go. What's best gif, jpeg, png. etc. or doesn't it matter. It has been a while since I used Photoshop..

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    I use max quality jpg, but cant get anybetter then png for quality gif is just quick loading but u lose the detail in pictures being made.

    Glad to help a veteran of the forums like yourself.

    Keep in mind that code is designed for 118px (wide) by 30px (high)
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why did you cross post this? Moderators are to move threads. Saying you "moved" it isn't the same thing.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Why did you cross post this? Moderators are to move threads. Saying you "moved" it isn't the same thing.
    Not sure how to organise this moderator wise.
    Thanks for your help. Re-posting did what you said and produced a response.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,856
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by effpeetee View Post
    Not sure how to organise this moderator wise.
    Thanks for your help. Re-posting did what you said and produced a response.

    Frank
    Sorry for being off topic. I raised a similar concern in the "forum feedback" and WA has given the solution.
    Just use the flag(below the Avatar) in the left column of the post(which is to be reported/requested to move) and send a request from the resulting form.
    Last edited by abduraooft; 03-06-2009 at 03:56 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks abduraooft. The need to do so arises from time to time.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    I dont know why you have to be anal about cross posting he needed help and he got it end of discussion.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Mostly because we need to follow rules to make the jobs of moderators easier or to help make it easier for people to help him. Post in one area get an answer but an answer has been given in another thread. Do you not see the problem here? Rules are there for a reason.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Gotta love it I get red flagged for stating my opinion.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •