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
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 & 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 & Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments…</p>
</body>
</html>
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 & 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 & Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments…</p>
</body>
</html>
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?
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
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.
Ok, a few things.
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.
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.
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.
you’re using a XHTML doctype, careful with those upper case letters on your tags, that’s invalid markup. (check your LI)
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.
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”.
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.
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:
<!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 & Beauty Studio - Wakefield
</title>
</head><body>
<div id="pageWrapper">
<h1>
BlueBelle
<small>Nail Bar & 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 & Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments....
</p>
<!-- #pageWrapper --></div>
</body></html>
Hope this helps.
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:
<!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 & Beauty Studio - Crofton, Wakefield</title>
</head><body>
<div id="pageWrapper">
<div id="header">
<h1><span><!-- image replacement --></span>Bluebelle <small>Nail Bar & 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 & 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:
@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:
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.
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!
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?
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.
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
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:
a screenshot of the folder containing your home page, showing the home page file, the other folders there and their contents.
the current code of your page.
It’s probable that the src path to the file is still incorrect.
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!
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?
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.
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:
Im really concerned about Just Host now!!
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?