Seriously Tired With Layers and Slices ! Help Needed !

Discussion in 'HTML & Website Design' started by seanro, Jul 9, 2007.

Thread Status:
Not open for further replies.
  1. #1
    Hello,

    I have made a template in Photoshop -> then exported it to Image Ready For Sliceing .. i made around 3 slice out of the PSD and then exported it as HTML + images ..

    All work fine ... but i am seriously fed up with this problem ..

    the HTML website i get can not be edited as it is made up of images ... so i Can not write over it in dreamweaver ... i mean the HTML code is like

    <td rowspan="2">
                <img src="images/invisioni.com_Layer-2.gif" width="199" height="169" alt=""></td>
    Code (markup):
    The Code should be like .. that all slices should be in
    background of the table ... so i can write in that table
    ..

    I hope this screen helps u ....

    [​IMG]

    Help me ....

    Thanks
     
    seanro, Jul 9, 2007 IP
  2. lucozade111

    lucozade111 Peon

    Messages:
    1,361
    Likes Received:
    47
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You answered your own problem:

    Create a table or div and use the image as the background.
     
    lucozade111, Jul 9, 2007 IP
  3. mopguy

    mopguy Active Member

    Messages:
    733
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    70
    #3
    Yes, i guess what you need is a table or even nested tables to fit in all your images either as background or ordinary img src image.
     
    mopguy, Jul 9, 2007 IP
  4. seanro

    seanro Banned

    Messages:
    83
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    lol :D

    u people are asking my question to me ...


    hot to make tables with background scr as default in IReady ?:eek:
     
    seanro, Jul 9, 2007 IP
  5. mopguy

    mopguy Active Member

    Messages:
    733
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    70
    #5
    I do not use ImageReady at all.

    I did the stupidier way by cropping the image i want in photoshop and then fit it into the table cells that i have created in Dreamweaver since i use it for most of my development work.

    In dreamweaver, it's easy to add images or background image even when you are a newbie.
     
    mopguy, Jul 9, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You guys are wrong. I'm presumimg that slice 3 is the logo, and that slices 1 and 2 are the backgrounds for page content sections. Here's what I'd do.

    
    <body>
        <div id="header">
            <img src="/images/logo.png" width="200" height="150" alt="Web site logo" />
        </div>
        <div id="content">
            <div class="section">
                Text and content images go here (including P elements containing paragraph text)
            </div>
            <div class="section">
                Text and content images go here (including P elements containing paragraph text)
            </div>
        </div>
    </body>
    
    Code (markup):
    Nice, clean, and semantic XHTML code (BODY element and descendants shown only). If you want to use HTML instead of XHTML, remove the space and forward slash from the IMG element and use an HTML 4 DOCTYPE instead. Adding a menu is simple. Just use an unordered list with an ID of "menu" and put the links inside the LI tags, then place that UL in between <div id="header></div> and <div id="content"></div>. Oh, one other thing. The values for the width and height I provided are examples. Replace them with the actual width and height of the image.

    As for the CSS...

    
    body {
        background-color: #xxxxxx; /* replace #xxxxxx with whatever shade of blue the main background color is */
        color: #FFF; /* provide a color with good contrast for accessibility purposes - when using a blue background, white works very well */
    }
    
    #header {
        height: **px; /* replace ** with the number of pixels the height of slice 3 is */
        position: relative;
            top: -**px; /* replace ** with the number of pixels you want to push the header down by */
        width: **px; /* replace ** with the number of pixels the width of slice 3 is */
        z-index: 1; /* this sets the stacking order so you can position the DIV containing slice 3 ABOVE the content DIV */
    }
    
    #content {
        background: #****** url("/images/content_bg.jpg"); /* replace ****** with the hexadecimal value of the content_bg file for accessibility reasons */
        color: #000;  /* need a good contrast, since this is a light silvery color, black text is a good choice */
        margin: 50px auto 0 auto; /* the top margin is set (I'm guessing 50px but it can be whatever, and the left/right are set to auto so you can force the DIV to snap to the middle, exposing the blue body background as a border */
        width: 80%;  /* set a width so you can center the content DIV - the 80% is just an example, feel free to replace with whatever you want */
    }
        #content .section {
            background: #FFF; /* slices 1 and 2 have white backgrounds, so I'd use a simple background color instead of an image */
            color: inherit; /* this will inherit the black text from the content DIV */
    }
    
    Code (markup):
    Oh, and finally, remove all the CSS comments - they're there as instructions only. You don't need them in your stylesheet. :)
     
    Dan Schulz, Jul 9, 2007 IP
Thread Status:
Not open for further replies.