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 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Photoshop to CSS Question Con't

    I posted here about moving templates from photoshop and incorporating them into CSS on a site.

    I've completely re-done on side of my site with CSS: http://www.tombraiders.net/katie/MyT...erStories.html

    I want to turn this page: http://www.tombraiders.net/katie/index2.html into CSS as well, instead of just having to constantly update the image.

    Can anyone please help?

  • #2
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    I dont quite understand what you are tryingf to do

  • #3
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically, you want to convert (I'm guessing) the date portion of image to text so that you don't have to recreate the image every time. Right?

  • #4
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    On my homepage, the huge image with updates, etc is an image. I want to be able to type it in like on my stories page.

    In other words I want to get rid of having to update the image and be able to update like my other section. Was just wondering how I could do this with the current layout.

  • #5
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Make the template without the text on it, then once you get it up on your site use css positioning to get in the right place

  • #6
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    See that's where I get lost :P

  • #7
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    just all the text that you currently have on there off

  • #8
    Regular Coder
    Join Date
    Mar 2007
    Location
    Quebec
    Posts
    261
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Create a division (div id="name-here"), then for that division use that image as the background. Then you can type and edit it through the HTML page rather then having to open Photoshop and change the text and re-save.

    Example code would be something like this:

    CSS:
    Code:
    #main_body {
    background: url('background_main.gif') <-- this sets the image as the background for that division
    }
    HTML:
    Code:
    <div id="main_body">Hello this is the main body</div>
    Now the text "Hello this is the main body" would appear on top of the image. Generally, I create another division for the text, so I can give it margins and padding etc.

    Hope this helped

  • #9
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks, I'll give it a try


  •  

    Posting Permissions

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