...

View Full Version : my design confuses me?!



jarv
11-28-2008, 03:58 PM
ok so i have done a design header but I designed it so teh logo goes over the main picture, I am just thinking how would i setup the layout and CSS?!
I probably wouldn't have the logo as a background image?!
http://www.mutecms.com/halohairdesign/images/design.jpg

abduraooft
11-28-2008, 04:06 PM
Place you logo as an img element and then apply absolute position to it, along with some left and top values.

jarv
11-28-2008, 04:27 PM
Place you logo as an img element and then apply absolute position to it, along with some left and top values.

are you sure this is best practise using position absolute?! i am using my tv as a monitor and it's resolution is quite highI have put a left:200px; on logo

http://www.mutecms.com/halohairdesign/

Excavator
11-28-2008, 04:37 PM
Hello Jarv,
There are plenty of times that everyone here will tell you not to use position:absolute; but this is one of the times you need it. Would work a little better like this though -
#top{
background-image:url(images/top.gif);
background-repeat:no-repeat;
position: relative;
width:926px;
height:93px;
float:left;
}
#logo{
width:235px;
height:118px;
position:absolute;
top:8px;
}

coothead
11-28-2008, 05:19 PM
Hi there jarv,

would it be easier to use just one image instead of three as in the attachment?

coothead

abduraooft
11-29-2008, 09:29 AM
Hi there jarv,

would it be easier to use just one image instead of three as in the attachment?

coothead
But then the logo may not be semantic (if we put it as a big background image, or using an img tag). The page should convey the main elements, even if there is no style.

coothead
11-29-2008, 12:43 PM
Hi there abduraooft,

But then the logo may not be semantic
I am getting old and maybe a little confused. :confused:
Please enlighten me as to what is not semantic about this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<meta name="keywords" content="none">
<meta name="description" content="none">
<meta name="language" content="en">

<title>untitled document</title>

<style type="text/css">
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:1em;
}
#container {
width:925px;
margin:auto;
}
#header {
height:298px;
background-image:url(http://www.codingforums.com/attachment.php?attachmentid=6909&d=1227892515);
}
#header h1 {
width:244px;
line-height:1.5;
margin:12px 0 0 318px;
font-size:1.4em;
font-style:oblique;
color:#666;
float:left;
}
#header h1 span {
margin-left:58px;
}
#search {
width:300px;
float:left;
margin:10px 0 0 58px;
}
#search ul {
margin:0;
padding:0;
list-style-type:none;
}
#search ul li {
width:100px;
height:20px;
margin-bottom:15px;
float:left;
text-align:center;
}
#search ul li a {
font-size:0.74em;
font-weight:bold;
color:#999;
text-decoration:none;
}
#search form {
margin:0;
}
#inp1 {
width:188px;
height:28px;
border:2px solid #999;
margin-left:36px;
float:left;
}
#inp2{
width:36px;
height:34px;
border:2px solid #999;
margin-left:10px;
background-color:#b3eae7;
color:#999;
float:left;
}
</style>

<!--[if IE 6]>
<style type="text/css">
#header h1, #search{
display:inline;
}
</style>
<![endif]-->

</head>
<body>

<div id="container">

<div id="header">

<h1>Unisex Salon<br> <span>&amp; Beauty room</span></h1>

<div id="search">

<ul>
<li><a href="#" tabindex="1">Opening times</a></li>
<li><a href="#" tabindex="2">About us</a></li>
<li><a href="#" tabindex="3">Contact us</a></li>
</ul>

<form action="#">
<div>
<label for="inp1"></label>
<input id="inp1" type="text" tabindex="4">
<input id="inp2" type="submit" value="Find" tabindex="5">
</div>
</form>

</div><!-- end #search -->

</div><!-- end #header -->

</div><!-- end #container -->

</body>
</html>

coothead

abduraooft
11-29-2008, 02:16 PM
Let me try to explain.

In the SEO point of view, images like Logo, Title(if it's represented as an image) etc have a clear purpose in a webpage. They are not supposed to style a webpage. Instead, they should convey some message to all users including the search engines. Have you got a web-developer toolbar in FF? If so, just press Ctrl+Shift+S(Or just remove the CSS) on a page like http://www.boagworld.com/technology/semantic_code_what_why_how/ and the one created by you above, you'd get the difference.

Or in other words, a logo should be included in the html markup as an img tag with some good alt attribute value. If the image is used for presentational purpose(say a shadow, corner, gradient, just like an art work behind the www.boagworld.com header), then they should be moved to the stylesheet.

jarv
11-29-2008, 03:19 PM
right then you lot, Thanks for all your help, my finished layout is here:

http://www.mutecms.com/halohairdesign/

Might change the picture of the girl as show only has one eye.
any comments, please let me know, I think i've done my best for SEO?!

coothead
11-29-2008, 03:29 PM
Hi there abduraooft,

so really this is just a discussion about layout and presentation and explains why we are at cross purposes. ;)

I view the three images that I have combined in the header as presentational with the importance lying with
the h1 element, you on the other hand see one of the three images as having layout purposes. Fair enough.

Semantically,though, I would suggest that either view will be correct.

My code certainly passes the WAI guidelines.

coothead

Apostropartheid
11-29-2008, 03:33 PM
My code certainly passes the WAI guidelines.
I'm certainly not an expert on the guidelines, but I say it doesn't: some users will not get the "Halo Hair Salon" piece of data. A physical HTML element would be best practice for the logo and the strapline, if they so wished that to be an image, as these are both images with a purpose other than presentation.

abduraooft
11-29-2008, 03:52 PM
right then you lot, Thanks for all your help, my finished layout is here:

http://www.mutecms.com/halohairdesign/

Might change the picture of the girl as show only has one eye.
any comments, please let me know, I think i've done my best for SEO?!

There is a good tool in the web-development toolbar of firefox, to view the document outline(Under information tab). Which tells "No Heading Text", when checked on your page. coothead had taken care of that :thumbsup:

abduraooft
11-29-2008, 03:55 PM
Semantically,though, I would suggest that either view will be correct.I'd disagree. A search engine won't index any of the image from the page created by you and thus nothing will be displayed in the image search result
(I believe at least a logo should be indexed by a search engine(of course, if there is one) from a webpage :))

jarv
11-29-2008, 05:06 PM
ok, so what do you think, thanks for all your help by the way!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum