SitePoint Sponsor

User Tag List

Results 1 to 23 of 23

Thread: Adding a logo

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding a logo

    Hi All,

    In need of some advice!!

    I am currently building the "structure" of my website and dont know what to do with regards to the logo.

    The logo is an IMG file but I have been advised the best way to make the structure is not using the image file. How do I go about this?

    Do I put in "Bluebelle Nail Bar & Beauty Studio" as a <h1> or do I put in the IMG?

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres my html at the moment:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bluebelle Nail Bar &amp; Beauty Studio - Wakefield</title>
    <link href="style1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div>
    <img src="images/Bluebelle-logo.gif" width="344" height="156" alt="Bluebelle Logo" />
    </div>
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html.html">About Us</a></li>
    <Li><a href="treatments.html">Treatments</a></Li>
    <Li><a href="Parties.html">Pamper Parties</a></Li>
    <Li><a href="special.html">Special Offers</a></Li>
    <li><a href="contact.html.html">Contact Us</a></li>
    </ul>
    </div> <!-- end of navigation div -->
    <div>
    <img src="../images/images/shop_03.png" width="398" height="267" alt="Bluebelle Shop Front" /></div>


    <h2> Welcome to Bluebelle</h2>
    <p> Relax and unwind at Bluebelle Nail Bar &amp; Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments....</p>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would it be better like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bluebelle Nail Bar &amp; Beauty Studio - Wakefield</title>
    <link href="style1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div>
    <h1> Bluebelle</h1>
    <h2> Nail Bar & Beauty Studio</h2>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html.html">About Us</a></li>
    <Li><a href="treatments.html">Treatments</a></Li>
    <Li><a href="Parties.html">Pamper Parties</a></Li>
    <Li><a href="special.html">Special Offers</a></Li>
    <li><a href="contact.html.html">Contact Us</a></li>
    </ul>
    </div> <!-- end of navigation div -->
    <div>
    <img src="../images/images/shop_03.png" width="398" height="267" alt="Bluebelle Shop Front" /></div>
    <h2> Welcome to Bluebelle</h2>
    <p> Relax and unwind at Bluebelle Nail Bar &amp; Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments....</p>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also for my navigation I would prefer not to have bullet points as I want to add a navigation Bar to this page? Would I take this into account in the structure or worry about that later?

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im going for a similar look to this: http://www.koko-beauty.co.uk/

    for the top part of my page however I dont require the "rollover part" of the navigation bar

  6. #6
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chadste View Post
    Would it be better like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bluebelle Nail Bar &amp; Beauty Studio - Wakefield</title>
    <link href="style1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    	<div id="logo">
    		<h1> Bluebelle</h1>
            <h2> Nail Bar & Beauty Studio</h2>
    	</div>
        <div id="navigation">
          	<ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html.html">About Us</a></li>
            <Li><a href="treatments.html">Treatments</a></Li>
            <Li><a href="Parties.html">Pamper Parties</a></Li>
            <Li><a href="special.html">Special Offers</a></Li>
            <li><a href="contact.html.html">Contact Us</a></li>
          </ul>
        </div> <!-- end of navigation div -->
        <div>
        <img src="../images/images/shop_03.png" width="398" height="267" alt="Bluebelle Shop Front" /></div>
        <h2> Welcome to Bluebelle</h2>
    <p> Relax and unwind at Bluebelle Nail Bar &amp; Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments....</p>
    </body>
    </html>
    and then style with the image replacement method of your choice on #logo.

    http://css-discuss.incutio.com/wiki/Image_Replacement

    Most people would suggest the Gilder/Levin method.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, a few things.

    1) This is a NEW website, right? If so why the Tranny doctype? Transitional is for supporting old/outdated/half-assed coding techniques, and has NO business being used on any new website of the past decade or so.

    2) I tend to use the h1 as the site title and as materielsdesigner mentioned, a gilder-levin type image replacement over it. This way the site degrades well when images are disabled and CSS on.

    3) What's the div around the menu for? Probably NOTHING. 99% of the time people put a div around their menu UL it's a waste of code, nothing more.

    4) you're using a XHTML doctype, careful with those upper case letters on your tags, that's invalid markup. (check your LI)

    5) a heading tag should be used to start a subsection -- breaking up the 'subtext' into a h2 makes NO sense as it's not the start of a new subsection of your document -- I see people do that all the time and it's pure nonsense. I tend to prefer to use the technique presented in the old WDG HTML reference of using a SMALL tag inside the H1.

    6) You should also be using a MEDIA type on your CSS LINK, and maybe name the file something meaningful like the media type you are targeting instead of the vague/meaningless "style1".

    7) is this going to be fixed width, semi-fluid or fully fluid? If the first two I'd get a wrapping DIV in there for setting the page width on.

    8) because comments between elements can often cause IE rendering issues (like the float related double-render and dissapearing content bugs) I suggest moving your 'end' comment to BEFORE the closing tag -- oh, and since you've got a perfectly good closing tag there and meaningful names on things, you probably don't need to waste time saying 'end'...

    If I was writing the content you have now, it would probably look something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Bluebelle Nail Bar &amp; Beauty Studio - Wakefield
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		BlueBelle
    		<small>Nail Bar &amp; Beauty Studio</small>
    		<span><!-- image replacement --></span>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="index.html">Home</a></li>
    		<li><a href="about.html.html">About Us</a></li>
    		<li><a href="treatments.html">Treatments</a></li>
    		<li><a href="Parties.html">Pamper Parties</a></li>
    		<li><a href="special.html">Special Offers</a></li>
    		<li><a href="contact.html.html">Contact Us</a></li>
    	</ul>
    	
    	<img
    		src="../images/images/shop_03.png"
    		width="398" height="267"
    		alt="Bluebelle Shop Front"
    	/>
    
    	<h2> Welcome to Bluebelle</h2>
    	<p>
    		Relax and unwind at Bluebelle Nail Bar &amp; Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments....
    	</p>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    Hope this helps.

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7) is this going to be fixed width, semi-fluid or fully fluid? If the first two I'd get a wrapping DIV in there for setting the page width on.
    Im hoping for the site to be accessable in all different resolutions. I intend to add a further white background in css where my content will be.


    Thank your both for your advice. I have been playing around with this for around 2 hours now and cannot for the life of me get this working! It is infuriating. I really am trying hard to get to grasps with the coding! I wiil get there eventually!!!

    Here is the code I have got at the moment:


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="en"/>
    
    <link type="text/css" rel="stylesheet" href="style1.css" media="screen,projection,tv"/>
    
    	<title>Bluebelle Nail Bar &amp; Beauty Studio - Crofton, Wakefield</title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<div id="header">
    	<h1><span><!-- image replacement --></span>Bluebelle <small>Nail Bar &amp; Beauty Studio</small></h1>
        </div>
    	
    	<ul id="mainMenu">
    		<li><a href="index.html">Home</a></li>
    		<li><a href="about.html.html">About Us</a></li>
    		<li><a href="treatments.html">Treatments</a></li>
    		<li><a href="Parties.html">Pamper Parties</a></li>
    		<li><a href="special.html">Special Offers</a></li>
    		<li><a href="contact.html">Contact Us</a></li>
    	</ul>
    	
    	<img src="../images/images/shop_03.png" width="398" height="267"
    alt="Bluebelle Shop Front"/>
    
    	<h2> Welcome to Bluebelle</h2>
    	<p>Relax and unwind at Bluebelle Nail Bar &amp; Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments....</p>
        
        <h2> Special Offers </h2>
        <p> Slideshow with special offers </p>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    CSS:

    Code:
    @charset "utf-8";
    /* CSS Bluebelle */
    
    body {
    	font-family: Verdana, Helvetica, Arial, sans-serif;
    	background-color: #a0bad4;
    	line-height: 125%;
    	padding: 15px;
    } 
    
    #header {
    	width: 329px;
    	height: 25px;
    	position: relative;
    	}
    #header span {
    	background: url(Bluebelle-logo.gif) no-repeat;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	}
    This is how it is displaying at the moment:



    This is the logo:


  9. #9
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Are you sure that the image Bluebelle-logo.gif is at the specified URL? i.e. in the same folder as the HTML file itself. The other image in the page: shop_03.png - is in a separate folder.

    To simplify your site's file structure I suggest keeping your images within a folder in the same location as your Home page html file e.g.

    [root]/index.html
    [root]/images/site/ [images used for presentation: logos, backgrounds, symbols and other repeated items]
    [root]/images/content/ [images that are or relate to content: e.g. pictures of nail treatments]

    Also, it's usually a good idea to stick to using lower case for file names. Because many web servers - unlike Windows - are case-sensitive, names of the files themselves and the references to them in your HTML and CSS should always match exactly, and habituating to lower case helps with this.

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply - Ive didnt realise where that file was saved.

    I already have a folder that contains my images as you say above but for some reason I hadnt put the other image there.

    I have checked the image path again and still having no joy!!

    Ive changed the css to:

    #header span {
    background: url(image/Bluebelle-logo.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

    still no joy!

  11. #11
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive managed to figure it out - I had put image instead of images
    Ive got it working now but the text is still appearing abve it at the moment

    When I centralise this eventually will I need to apply this to the code and css?

  12. #12
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Please confirm that the folder named "image" that contains "Bluebelle-logo.gif" is in the same folder as the HTML file (Home.html) itself.

    I must confess to never having developed on Windows but it's likely that you'll have a more comfortable ride if you install a web server environment such as XAMPP.

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I have saved the images into an image file within the html folder.

    How does the above program assist me? Im new to all this thanks

  14. #14
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Web sites run on web server software. XAMPP provides a free and easy way to put a web server on your computer, so that the conditions in which you develop your site closely match those of the server on which it will reside when made public.

    XAMPP uses Apache web server software and also includes the widely used MySQL (database) and PHP (scripting language).

    If using XAMPP, then you should ensure that your web hosting package is based on Apache, rather than Windows. Nowadays, it is very likely to be Apache, and you are likely to find it easier to obtain help from others if this is the case.

    In short, it is the right tool for the job. Why cut nails with kitchen scissors when professional clippers are available for free?

    Moving on to your immediate problem... if you have web hosting, then it will be easier to provide help if you could put your files online so that we can view the code and check that the path to your image file is correct. Assistance is accelerated by access. If you are unable to do this, all I can suggest is that you provide:

    1) a screenshot of the folder containing your home page, showing the home page file, the other folders there and their contents.

    2) the current code of your page.

    It's probable that the src path to the file is still incorrect.

  15. #15
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im really struggling to upload my site at the moment through Just Host. I have no idea how to do it and it is driving me insane!

  16. #16
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Are you using an FTP application or the cPanel File Manager?

    An FTP app will make things easier, as it will enable you to drag and drop between your computer and the web server, though it would be best for a seasoned Windows user to recommend which FTP app to use.

    I don't wish to alarm you, but did you seek out any reviews on JustHost before signing up?

  17. #17
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Usually your webhost will supply you with your login credentials for FTP typically consisting of an FTP Host server address for you to upload to; a username, a password and sometimes some other details.

    If you want to use a free FTP client FileZilla http://en.wikipedia.org/wiki/FileZilla is fine and open source and runs on various platforms and there is also a Portable apps version available.

  18. #18
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was recommended to Just Host by a friend however since looking on here I am somewhat concerned now.

    Who is the best host? I have managed to upload my files now however it still doesnt look great:

    http://www.bluebelle-beauty.com/full%20html/Home.html

  19. #19
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im really concerned about Just Host now!!

  20. #20
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The logo seems to be showing up OK.

    You currently have your files in a folder named "full html". Check your browser's address bar and you'll see the actual URL that's generated is "full%20html" due to the way space characters are encoded in a URL. When naming files or folders always use underscore or hyphen instead of space.

    Also, if you remove Home.html from the URL and view that you will be able to see the entire contents of the folder (directory listing). Not good. If you rename Home.html to index.html you will find that it is no longer possible to get a directory listing. Much safer.

    The web server runs case-sensitive Apache, so change all your file and folder names (and references to them within your HTML) to lower case as suggested earlier.

    As for a hosting company. If JustHost meets your technical needs and you don't find yourself struggling for support, then you may get along OK. To be frank, I'd avoid any company that sells "Unlimited" hosting. Corners will be cut somewhere. I much prefer smaller companies where you can build a relationship with real people, rather than auto-reply systems: electronic or human.

    Checking the WHOIS for your domain, which has been registered today, you seem to describe yourself as a web design company. I'd gained from this topic the distinct impression that you were a complete novice building their own site. Are you both Bluebelle Beauty and CS Web Design?

  21. #21
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chadste View Post
    Im really concerned about Just Host now!!
    The most important aspect is to determine whether the intended "owner" of the domain name is the named registrant. It's not possible to tell from the WHOIS record as the registrant details are hidden by privacy protection, but you should have been supplied with confirmation of the full details. As you are named as Admin contact for the domain it's likely that you are also the registrant, but if not then this would indeed be cause for concern.

    You should also place a file named index.html in the public_html folder of the server, to prevent directory listing there.

  22. #22
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Victorinox - Thank you for the advice I have changed the root path now so the directory doesnt come up anymore - Ive amended the links also so they are all lower case. Thanks for that.

    In response to your question I am building a website for my girlfriends Beauty Salon. I hope that with sufficient practise - I am also enrolling on a Open University course that I can eventually become a web designer.

    At the moment, I am trying to figure out the basics my self to become semi competant before I start my course.

  23. #23
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    My tip would be to ensure your girlfriend is named as registrant. Accidents can happen, and if you were not around she might have trouble claiming the domain when renewal time came. Good luck with your learning, you'll find Sitepoint one of the best resources out there.


Bookmarks

Posting Permissions

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