1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Css & Html

Discussion in 'Programming & Webmastering' started by Wozzer, Sep 18, 2008.

  1. Wozzer

    Joined:
    Jun 30, 2008
    Messages:
    1,133 (0.48/day)
    Thanks Received:
    68
    Location:
    England
    Hello all,

    Im a little stuck and I need some expert advice. I'm trying to create a website template, and i'm half way there. But unfortunatly, i'm stuck.

    I've created and sliced the template in Adobe Photoshop but I can't work out how to position the images in Dreamweaver. Let me give you an example:

    My web template had a side bar on each side. Left and right. However - I'm stuck. How do I position the images through the code without moving other images. I need to put two side bars in, a banner and a text box. I know where there meant to go, but i'm not sure how to place them there.

    Could someone point me in the right direction ?
     
  2. ZenZimZaliben

    ZenZimZaliben

    Joined:
    Mar 4, 2005
    Messages:
    2,602 (0.73/day)
    Thanks Received:
    546
  3. Wozzer

    Joined:
    Jun 30, 2008
    Messages:
    1,133 (0.48/day)
    Thanks Received:
    68
    Location:
    England
    Cheers - I'll take a look later tonight.
     
  4. W1zzard

    W1zzard Administrator Staff Member

    Joined:
    May 14, 2004
    Messages:
    15,007 (3.90/day)
    Thanks Received:
    11,877
    use css style float: and/or css absolute/relative positioning. make sure you try your result on ie6,7, ff2,3 and opera. also check how it look on different screen widths
     
  5. P4-630

    P4-630

    Joined:
    Jan 5, 2006
    Messages:
    1,150 (0.35/day)
    Thanks Received:
    95
    Location:
    C:\Program Files\P4-630\
    If you dont know much about css you could create a simple table instead:

    Example:

    Code:
    <html>
    
    <table border="1" cellpadding="0" cellspacing="0" width="800px">
    <tr>
    <td colspan="3" height="50px">place top image here</td>
    </tr>
    <tr height="300px">
    <td width="100px">column left</td>
    <td width="600px">center column</td>
    <td width="100px">column right</td>
    </tr>
    <tr>
    <td colspan="3" height="50px">place bottom image here</td>
    </tr>
    </table>
    
    </html>
    You can adjust the column sizes to your images.
    To remove the table border change the table border="1" to
    table border="0".
     
  6. Wozzer

    Joined:
    Jun 30, 2008
    Messages:
    1,133 (0.48/day)
    Thanks Received:
    68
    Location:
    England
    Thanks for your help guys.

    Belows is the template im hoping to code (Perhaps a little to tricky for my first template?):
    http://flux-graphics.co.uk/Gamingtemplate/

    As for wizzard - What do you mean by:
    ''use css style float: and/or css absolute/relative positioning''

    As you can tell, i'm new to all of this. I can edit basic parts of CSS but starting it from scratch is a bigger challenge.
     
  7. P4-630

    P4-630

    Joined:
    Jan 5, 2006
    Messages:
    1,150 (0.35/day)
    Thanks Received:
    95
    Location:
    C:\Program Files\P4-630\
    "float:left" or "float:right" is used to align an element (CSS).

    The page at http://flux-graphics.co.uk/Gamingtemplate/ is using a table to for the page lay-out.
    Using tables is the most easy way to create a simple webpage lay-out.

    The challenge when using CSS is to make each page compatible for every(most popular) web browser(s).

    About pages that use tables for the lay-out: All webbrowsers can display these pages correctly as it was designed.
     
    Last edited: Sep 19, 2008
  8. Wozzer

    Joined:
    Jun 30, 2008
    Messages:
    1,133 (0.48/day)
    Thanks Received:
    68
    Location:
    England
    That was just imported from Adobe Photoshop. Am I alright using that page still, even if it is just tables ? Or am i best starting from scratch, creating a page for the interface and a page for the CSS and building it from there ?

    I've been asked to design a website for a company and I don't want to do a scrappy job. I can make it look professional but I need to learn how to code the thing in CSS.
     
  9. Moose

    Moose New Member

    Joined:
    Sep 1, 2007
    Messages:
    306 (0.12/day)
    Thanks Received:
    26
    Location:
    UK
    I use tables for aligning stuff.
     
  10. W1zzard

    W1zzard Administrator Staff Member

    Joined:
    May 14, 2004
    Messages:
    15,007 (3.90/day)
    Thanks Received:
    11,877
    use google to find answers to the keywords given to you. it's certainly the easiest and most productive way because you will learn a lot more in the process of searching
     
  11. Wozzer

    Joined:
    Jun 30, 2008
    Messages:
    1,133 (0.48/day)
    Thanks Received:
    68
    Location:
    England
    Okay - I'll have another shot tonight and post my result :)
     
  12. P4-630

    P4-630

    Joined:
    Jan 5, 2006
    Messages:
    1,150 (0.35/day)
    Thanks Received:
    95
    Location:
    C:\Program Files\P4-630\
  13. Wozzer

    Joined:
    Jun 30, 2008
    Messages:
    1,133 (0.48/day)
    Thanks Received:
    68
    Location:
    England
    Yeah - I did read about that website. It seems to me that my biggest problem is going to be having the template compatible with all browsers.

    If it was my own personal site, I would'nt be to bothered, but seeing as Im designing for a business - I feel as if I should put extra effort into it.
     

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page