Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 2 of 2 FirstFirst 1 2
Results 11 to 16 of 16

Thread: Advice Needed!

  1. #11
    Junior Member
    Join Date
    Mar 2015
    Posts
    8
    Member #
    48025
    I will let you know what the client thinks... with any luck they will love the slanted letters too (but doubtful). They basically sent me the whole site designed already compiled in a Photoshop file.
    Any Idea on how to get the darn things to line up? I've been trying to find a resource for hours.

  2.  

  3. #12
    Junior Member
    Join Date
    Mar 2015
    Posts
    8
    Member #
    48025
    I figured out how to fix the text. In the CSS tag used to control the look of the text you must use
    Code:
     -webkit-transform: skew(-30deg) !important;
       transform: skew(-30deg) !important;
    Which is the opposite.

    However, I am still having issues getting the parallelograms to line up so that the parallel lines resemble a straight line.

  4. #13
    Junior Member
    Join Date
    Mar 2015
    Posts
    8
    Member #
    48025
    Th same theory as above actually will straighten out all the menu sub-items. It will line up all the parallelograms. The code you suggested was genius. With a little tweaking it build the menu I needed.

  5. #14
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,480
    Member #
    425
    Liked
    2784 times
    What it may be, and this is a guess on my part, is that you've got two "important" CSS skew rules and it looks like the parent rule (the li rule) is cancelling the child rule (the a rule) out. Take the important off of the li rule and see what happens.

    Another thing you could try, although this is hackish, is to put your text inside of a span, set the display to block, and put the -45 degree skew on it. So <a href="#"><span>Text</span></a>.

    Again, though, this is guessing on my part.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #15
    Banned
    Join Date
    Jun 2014
    Location
    Laredo, Texas
    Posts
    16
    Member #
    39482
    Jwhissell,

    You can also try extracting the css code straight from photoshop. This method would avoid all the hand coding. Process would be as follows.

    1 ) Select the layers in the layers work panel.

    2 ) Go to the options of the layers work panel.

    3 ) Select " copy css ".

    4 ) Paste to a css file.

    5 ) Test it by including a link in your html page to the css file.

    6 ) Hit preview of html page.

    It has several advantages: 1 ) avoids hand coding from scratch, 2 ) no flash, 3 ) proven process ( I have used it on several projects but nothing this complex ).

    Good luck and let me the outcome,

    Braulio

  7. #16
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,480
    Member #
    425
    Liked
    2784 times
    Photoshop wouldn't be able to handle the CSS3 transformations and generates bloated code. It works in limited circumstances, but hand coding is always best in the long run.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 2 of 2 FirstFirst 1 2

Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 03:36 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com