CSS template help with images

Discussion in 'HTML – XHTML – CSS' started by OneChick, Sep 20, 2011.

  1. OneChick

    OneChick Banned

    Hi and thanks in advance for the help! I have downloaded a CSS template. This is it Intercraft Free CSS Template | Free CSS Templates | Free CSS I am using Dreamweaver and Photoshop to edit everything. I made a new image for the logo and footerlogo using the same size, etc as the one in the template. When I insert it and go to view it in the browser, the image does not show. I am not very familiar with CSS so any help would be greatly appreciated.:confused:
  2. Geoff Tyrer

    Geoff Tyrer Member

    OneChick,

    These are the debugging steps I'd follow:
    1) Check that the original image is displayed when the page is opened in the browser.
    2) Replace the original image with the new image - overwrite it in the file system (after making a copy).
    3) See what the browser now displays.
    4) If nothing's displayed check the image file by trying to display it using something else.

    Let us know how it goes.
  3. OneChick

    OneChick Banned

    Did all and still does not work. The image is visible in dreamweaver
  4. Geoff Tyrer

    Geoff Tyrer Member

    OneChick,

    Try displaying the image file in your web browser by doing File->File Open (or whatever). Double check that this is exactly the same file that your html/css is trying to access.
  5. navyfalcon

    navyfalcon Active Member

    Remember the internet is case sensitive, your browser for your file on your computer is not. Maybe you need to check the file name and make sure it is exactly the same as your image. I have this problem a lot. If they are not the same, it won't load.
    -
    falcon
  6. ashlay

    ashlay Banned

    Building a website usually requires you to design and then code your own layout, which can be a tedious task if you are artistically inclined or familiar with HTML. Website templates take care of this for you by providing you with a fully designed and coded layout, which you can then use to build your website.
  7. navyfalcon

    navyfalcon Active Member

    Good choice on template "one chick".

    I downloaded intercraft (it downloaded as a zipped folder)
    I rt. clicked it and clicked on extract all
    inside is: index, style, license, and images file
    -
    index will show the template
    -
    open the folder intercraft in your HTML Editor (Dreamweaver)
    click on index (this opens the template in your HTML Editor (Dreamweaver)
    Line 4 <title>Inter Craft</title> you can change the title
    Line 11 <h2>Lorem ipsum dolor sit amet, consectetuer adipiscin</h2>
    You can change this heading
    Line 13 - 17
    <li class="leftpadding">Home</li>
    <li><a href="http://www.free-css.com/">About Us</a></li>
    <li><a href="http://www.free-css.com/">Client</a></li>
    <li><a href="http://www.free-css.com/">Testimonial</a></li>
    <li><a href="http://www.free-css.com/">Contact</a></li>
    change "http://www.free-css.com/" to the address of
    About Us - Client - Testimonial - contact
    -
    Line 19 <h1>Header Image</h1> change to your information
    Line 28 <p class="captiontext">&quot;Inter Craft is a free, tableless,
    W3C-compliant web design layout by Template World. This template has been
    tested and proven compatible with all major browser environments and
    operating systems. You are free to modify the design to suit your tastes in
    any way you like.&quot; </p>

    This information shows up on the template just to the left of Special Services
    Change to suit
    -
    Line 10 is the image
    <div id="logo"><a href="http://www.free-css.com/"><img src="images/logo.gif" title="Inter Craft" alt="Inter Craft" width="67" height="73" border="0" /></a></div>
    -
    change "http://www.free-css.com/" to the address of your image
    if in image folder
    <img src="../Images/Back%20to%20School.jpg" width="250" height="220" align="left" alt="students">
    this is one of my images in Trigonometry
    <img is image - The src attribute instructs the browser where on the server to look for the web page that should be presented to the user in the current frame (or location). ../Images/ is my image folder
    / Back%20to%20School.jpg is the name of the picture in the image folder (%20 is space)
    -
    hope this helps
    falcon
  8. Geoff Tyrer

    Geoff Tyrer Member

    Falcon,

    You deserve a medal - that's above and beyond the call of duty!

    You've no excuses OneChick - get it working!

    Geoff
  9. navyfalcon

    navyfalcon Active Member

    One Chick;
    Let us know if you need any more help
    We all need help from time to time
    -
    falcon
  10. Geoff Tyrer

    Geoff Tyrer Member

    Looks like OneChick's been banned...
  11. navyfalcon

    navyfalcon Active Member

    <title>One Chick Marketing - Home</title>
    Google allows 66 characters in the title - you may want to add a little
    information

    <meta name="DESCRIPTION" content="Follow up with customers to increase your
    success with our digital newsletters!">
    Google allows 150 characters in the description - you may want to add some information

    You may want to widen your page - in 800 x 600 it is narrow

    Validation:
    40 errors
    353 warnings

    You can use HTML Tidy to help correct the errors and warnings
    HTML Tidy Online
    -
    hope this helps
    falcon