1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Problems with images

Discussion in 'Web Development' started by Levara, Apr 16, 2008.

  1. Levara

    Levara New Member

    I am working on a site using the Beauty Salon template. I changed the main jpg file by cutting the photo and replacing it with another one more suitable. Now when I flick between pages the image loads at a different time to the rest of it (split second later) How can I change it to load the same time as the rest of the page? To see what I am talking about goto www.surenity.net

    Thanks for any help you can provide!!

    Sue
     
    Levara, Apr 16, 2008
    #1
  2. vareside

    vareside New Member

    I dont know what you're talking about. The image is loading at the same time (from my computer)! Except by the first page view because the image has to become found generally.
     
    vareside, Apr 26, 2008
    #2
  3. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    After looking at your code, I think your problem lies in the lack of understanding of the coding. It looks like you just replaced items and do not understand the complete underlining reasons as to how it works.

    Maybe this will clear things up about templates and coding.
    When you download and unzip a template you see;
    1.) a psd file => what the web will look like and it's editable to use parts that you may edit, using them in the images directory.
    2.) images directory => the folder which holds all you images and that the css sheet and html pages point to.
    3.) style.css => the style sheet has commands which tell each page how to look. Keeping the same look across all pages you create.
    4.) index.html the main template page to get you started. It displays everything the style.css and image directory has to offer.

    Enough for the basics:

    The style.css shows that logo.jpg is pointing to the images directory.
    #header {
    background: top center url(images/logo.jpg) no-repeat;
    padding-top: 51px;
    width: 252px;
    position: relative;
    }
    Is that where you logo.jpg is?

    Another part of your code shows you pointing to the root dir not images dir.
    <img src="pic_4.jpg" width="73" height="59" alt="Pic 4" class="centre"/>
    Template code shows pointing to images directory
    <img src="images/pic_4.jpg" width="123" height="53" alt="Pic 4" />

    Your code on the menu system copies the template which is a pointer to FWT.


    HTML:
    <li><a href="http://www.surenity.net/index.html">home</a></li>
            <li><a href="http://www.surenity.net/about.html">about us</a></li>
            <li><a href="http://www.surenity.net/services.html">services</a></li>
            <li><a href="http://www.surenity.net/portfolio.html">portfolio</a></li>
            <li><a href="http://www.surenity.net/contact.html">contact us</a></li>
    Your code should look like
    <li><a href="index.html">home</a></li>
    There is no need to tell the browser to go elsewhere to look for index.html. The browser is all ready in that directory.

    Try one of the many on line tutorials like w3schools.com. If nothing else look up the command you are using and review the examples.
    Your understanding will of coding will only grow.

    Hope this helps.
     
    ishkey, Apr 27, 2008
    #3
  4. Levara

    Levara New Member

    Thanks for your reply :) It certainly helped! The problem definately lies in the style.css file whereby I am pointing the image to the images directory and other times to the main directory as you stated.

    I have never used a template before, always doing pages from scratch in notepad. That way I know exactly what I coded from the moment I open the blank file as opposed to changing the bits I want to change. I'm no genius defiantely, but I guess with five kids running around with cabin fever from school holidays and a million things going on I did not pay proper attention to the template coding.

    Cheers for your help, most appreciated!
     
    Levara, Apr 28, 2008
    #4
  5. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Always glad to be of help. So with that in mind and 5 kiddies circling the wagons, then try http://www.alleycode.com/ It is a free editor and more powerfull than notepad. Plus it shows your code in color in way you can really understand things. And you can even see your css files. I think you will like it.
     
    ishkey, Apr 28, 2008
    #5