Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Unhappy my design confuses me?!

    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?!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Place you logo as an img element and then apply absolute position to it, along with some left and top values.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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/

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there jarv,

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

    coothead
    Attached Thumbnails Attached Thumbnails my design confuses me?!-header.jpg  

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by coothead View Post
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there abduraooft,
    But then the logo may not be semantic
    I am getting old and maybe a little confused.
    Please enlighten me as to what is not semantic about this...
    Code:
    
    <!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

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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/..._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.
    Last edited by abduraooft; 11-29-2008 at 02:18 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Thumbs up

    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?!

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    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

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by coothead View Post
    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.

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by jarv View Post
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by coothead
    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 )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    ok, so what do you think, thanks for all your help by the way!


  •  

    Posting Permissions

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