SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 57
  1. #26
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Here's a very rough chop up of your image to show how to make repeats.

    http://www.pmob.co.uk/temp/wood-effect3.htm

    I only used the display:table to avoid a margin collapse on the first element as without it the wrapper gets pulled down by the margin on its first child. Its not really needed as a normal element would have been ok (apart form the margin collapse). It has nothing to do with html tables as such but is just a way of utilising some of their behaviours. Html tables should always be used for data but not for layout. Css has no such structural semantics as such and you can more or less use what you want.

    Paul, thank you so much man! getting pretty late in uk. about 5:33pm now .

    I'm looking forward to looking this over.

    I feel so under -informed about css now.

    what book would you recommend reading to get a good feel for all the possibilities in layout techniques?

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by wc43870n View Post

    what book would you recommend reading to get a good feel for all the possibilities in layout techniques?
    There's plenty of sitepoint books to choose from but you can also learn a lot from the online reference about how things should work although its mainly a manual and not a "how to".

    The learnable courses are good if you really want to embrace learning but comes at a price.

    Otherwise the best way to lean is just to practice and to read through threads in the forum to see how others are tackling things. I learned most of my stuff in the early days from forums like Sitepoint where you can test out and refine ideas. There are also plenty of good sites about that are worth taking the time to look through.

  3. #28
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    There's plenty of sitepoint books to choose from but you can also learn a lot from the online reference about how things should work although its mainly a manual and not a "how to".

    The learnable courses are good if you really want to embrace learning but comes at a price.

    Otherwise the best way to lean is just to practice and to read through threads in the forum to see how others are tackling things. I learned most of my stuff in the early days from forums like Sitepoint where you can test out and refine ideas. There are also plenty of good sites about that are worth taking the time to look through.
    Thanks for the recommendations. I prefer sitepoint's books. They're very good.

  4. #29
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    I prefer sitepoint's books. They're very good.
    Learnable and SitePoint are part of the same company, and you can access the SitePoint books through Learnable (just so you know ).

  5. #30
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  6. #31
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    so i'm planning on slicing this up in photoshop. any recommendations on how i should proceed with that.

    i was planning on slicing the paper part into a bunch of buttons basically about 5 i think it was and the logo as an image by itself.

    one thing i noticed was the text was a bit fuzzy in the buttons like bar, photos, etc. It was saved as a jpeg with 100% quality. the image on the logo looks good just the text looks slightly messed up.

    any ideas. i know this is probably the wrong forum for this question.

    But if you know, please advise.

  7. #32
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    one thing i noticed was the text was a bit fuzzy in the buttons like bar, photos, etc.
    Don't keep the text in the image. On the web, text need to be real text. It's hopeless to do this from a jpg. At least work from the original psd file, so that you can hide the text etc. while you are preparing te bg images.

  8. #33
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    the psd has little faded line images underneath the text links.
    so i will use css to code a link and then i will use javascript for the arrow rollover? or should i use css for that too?
    after each link, i'll have an image of the line?

    Will i just code that as a img or use some type of list element or span and then do the background through css? i believe i saw a technique like that before.

    so i'lll need to get the actual font from them and then my question at this point, are embedded fonts supported
    across all the browsers?

  9. #34
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    the psd has little faded line images underneath the text links.
    so i will use css to code a link and then i will use javascript for the arrow rollover? or should i use css for that too?
    You can use CSS for all those effects. Of course, you use HTML to code the link, and then CSS to style it.

    after each link, i'll have an image of the line?

    Will i just code that as a img or use some type of list element or span and then do the background through css?
    It's not easy to see the lines in the image you posted, but it looks like you'll need to use an image to replicate them. Anyhow, make it a small, transparent image that you can place wherever you need to. Because it's decoration, I would place it as a background image on whatever element it goes with. (You can add padding at the bottom of the element and place the image as a background at the bottom, in the padding area.)

    so i'lll need to get the actual font from them and then my question at this point, are embedded fonts supported
    across all the browsers?
    The font they used may not be web-ready, so to speak. Most commercial fonts can't be used on the web, so if this one isn't available, you'll have to find an equivalent that can be used. With any luck, there will be a free version available, which you can place in your site's files and call via @font-face. The FontSquirrel site has a lot of nice free fonts that are ready for web use.

    To be honest, this stuff takes some skill, so I feel you are biting off a bit more than you are ready for ... but I guess you've got to learn some time! Just don't promise to have this ready by next week.

  10. #35
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i decided to start using cufon for the text problem.

    check it out

    http://webpage.pace.edu/wc43870n/des...ngpattern.html

    wanted to learn sifr, but cufon seemed quicker to learn.

  11. #36
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    i decided to start using cufon for the text problem. ... wanted to learn sifr, but cufon seemed quicker to learn.
    Both of those are out of date and I wouldn't touch them. They are not very accessible, are slow loading, and they introduce other problems you don't need. Web fonts have taken over, and are a much better solution.

  12. #37
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Both of those are out of date and I wouldn't touch them. They are not very accessible, are slow loading, and they introduce other problems you don't need. Web fonts have taken over, and are a much better solution.
    web fonts are not fully supported in IE though if i'm correct?

    Cufon is supported isn't it?

    Let me know, thanks.

  13. #38
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  14. #39
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    web fonts are not fully supported in IE though if i'm correct?
    They work fine in all the current versions.

  15. #40
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes just not in the old ones like Ie 6, 7, or 8. when i design for compatibility, i think i should design for those as well.

    but do most people just design for the latest ones? Please let me know what is the most common practice.

    so i'm looking at the front page of this design again and i'm wondering how i should go about this,

    Cause this paper has a bunch of lines on it and those links are directly above the lines, but as you mentioned already, if you zoom in on the screen, the design
    explodes.

    so what suggestion would you make to the designer.

    cause they're saying they want to keep those lines there for texture.

  16. #41
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    yes just not in the old ones like Ie 6, 7, or 8.
    @font-face works fine on those browsers too.

    this paper has a bunch of lines on it and those links are directly above the lines, but as you mentioned already, if you zoom in on the screen, the design
    explodes.
    As I said above, that's why you need to save the line as a separate image and apply it as a background image on the elements it will sit below. I actually did the same thing in the site I linked to above, if you need some inspiration.

  17. #42
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ok, i see. Then i just need to use the @font face tag, find the font on a font foundry and create regular links and use typical css style selectors to get rid of the underline on the text and then put a background on my link element of that line?

    good tip.

    though, i can't find your example website. can you give me the link.

  18. #43
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    ok, i see. Then i just need to use the @font face tag, find the font on a font foundry and create regular links and use typical css style selectors to get rid of the underline on the text and then put a background on my link element of that line?
    That's basically it, yes. Check out the FontSquirrel site for free fonts that look similar to the font you need (if the exact one is not available). Or you can use sites like TypeKit of FontDeck and link to their version of the font. FontQuirrel is handy, as it gives you the fonts you need and the CSS that goes with it, so check them out even if just to learn about this stuff.

    i can't find your example website. can you give me the link.
    It was in post #21 above.

  19. #44
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://calligraphicworks.com ?

    cause i don't see you put a background on a link element there ?

  20. #45
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    i don't see you put a background on a link element there ?
    The menu links at the top have that, and also the horizontal lines on the main and footer sections are background images, too, so any of those serve as examples.

  21. #46
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The menu links at the top have that, and also the horizontal lines on the main and footer sections are background images, too, so any of those serve as examples.
    managed to get the line in there. but because each line they have is actually unique. it's going to make this a bit image heavy.

    are there any other solutions?

    Also this designer's client is going to request a similar design for the next project, so if you have some recommendations that i can convey to the designer, please let me know.

    thanks.

  22. #47
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    managed to get the line in there. but because each line they have is actually unique. it's going to make this a bit image heavy.

    are there any other solutions?
    A compromise is to have a single, longer version of the line and only show bits of it at a time. That way, just one image to download, and it need not be a big file

    some recommendations that i can convey to the designer
    I'm sure you have some of your own now.

    Mine would be to learn something about web design. The web is a medium quite different from paper.

  23. #48
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    A compromise is to have a single, longer version of the line and only show bits of it at a time. That way, just one image to download, and it need not be a big file



    I'm sure you have some of your own now.

    Mine would be to learn something about web design. The web is a medium quite different from paper.
    http://sixrevisions.com/tutorials/we...-from-scratch/

    i was looking at this and they have a very large background image and also background image is very huge in file size.

    couldn't i just do a huge background of that wood texture and the paper together to simplify things.

    because when i separate the paper from the wood, i also have to deal with the paper not blending perfectly into the wood when its a transparent gif.

    But they used some type of shadow on the paper.

    on the six revisions site, they also have no font for the those unique fonts.

    let me know your feedback on the sixrevisions tutorial

  24. #49
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    That's not good web design, for a number of reasons. If images are disabled, there's no heading text, which I don't like. And if someone has their system fonts set larger than the default, you'll end up with a site that looks like this:

    layout.jpg

    That's what will happen to your site if you stick the paper image to the background image.

    As Paul's example shows, it's quite viable to do the paper image as we've described above. It would be worth sending the sliced image to the graphic designer to make it clear what yo really need, and then he/she can supply you with higher quality graphics.

  25. #50
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well there's more to it than that. on that main homepage, there's an arrow image that appears next to the text and on other pages, there's like a paint brush like rollover where the under line looks like a paintbrush stroke underneath each text with that typewriter font.

    so in addition to having varying line images as backgrounds for these links, then i have an arrow icon next to it on rollover. (javascript or css?)

    is javascript for rollovers like yesterday's news? or just bad practice nowadays?

    Then i got the problem of having a designer who doesn't know if they have the license for the fonts. and giving me fonts that are corrupt.

    so wouldn't that necessitate using images as buttons?

    or has css advanced to a point where we no longer use images as buttons. the only time we do that is using a span and styling it's background as that button image?

    i'm quite confused.


Bookmarks

Posting Permissions

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