SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding Logo or HTML Header to CSS

    Currently, I'm going by tutorials such as this one: http://www.w3.org/Style/Examples/011/firstcss

    I'm wondering how can I add a logo to my CSS as in like a header.



    This is what I want my website to look like. I made this on Adobe GoLive CS. The issue is I needed a global design that I could change very easily if I had to as well the link system.
    http://img64.imageshack.us/i/jptsited.jpg/

    Also how can I get the menu to go under the logo in CSS. And how can I get my menu to look like this one: One this site: http://www.jplegacy.org/home2.php I know it's div something but just not sure how it all works.

    I'm new to CSS and I have been using WYSIWIG Programs since 2004.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint

    If you are talking about image replacement techniques for headings then there are quite a few documented. In most cases you apply a background image to your element (such as an h1 for a main heading) and then hide the foreground text in some manner.

    If you wanted to place a logo next to some text then it could be done in many ways such as floating or positioning it absolutely. However, it seems that you are just starting out and it may be better if you read a few tutorials on CSS before you start so that you can understand how to do this for yourself.

    Sitepoint has just finished a Live CSS course which would have been ideal (at a small cost) and indeed you can still take it retrospectively but just miss out on the live chats etc. There are plenty of tutorials around and we have a good reference site her on Sitepoint which even has a live testing area where you can try out some of the properties.

    If you do have a basic knowledge of css then it would be better if you first took a stab at creating the layout you wanted and then we could help and point out where you went wrong. It's hard to offer specific code as the question is a little vague and open ended and its always easier to help someone who has made a start for themselves even if they are doing it incorrectly to start with.

    Regarding a menu under the heading then you would use a list structure with the list elements set to display:inline or floated to make then appear horizontal.

    You can find some tutorials on horizontal lists here.

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, the issue evolved into something else. I want to be able to convert this in to CSS. I couldn't get CSS to do what I wanted it to. I'm too used to WYSIWYG programs.

    Here's the 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" />
    <meta name="generator" content="Adobe GoLive" />
    <title>Untitled Page</title>
    <style type="text/css" media="screen"><!--
    a:link { color: white; text-decoration: none; }
    a:visited { color: white; text-decoration: none; }
    a:hover { color: white; text-decoration: none; }
    a:active { color: white; text-decoration: none; }
    --></style>
    </head>

    <body bgcolor="black" text="white" link="white" vlink="white" alink="white">
    <div align="center">
    <div style="position:relative;width:818px;height:974px;background-image:url(test/jurassicparksitebackground.jpg);margin:auto;-adbe-g;"></div>
    </div>
    </body>

    </html>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's a little hard to guess exactly but I think you are looking for something 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>Untitled Page</title>
    <style type="text/css" media="screen">
    a {
        color: white;
        text-decoration: none;
    }
    html, body {
        margin:0;
        padding:0;
        height:100&#37;;
    }
    body {
        background:#000;
        color:#fff;
        text-align:center;
    }
    #outer {
        width:818px;
        margin:auto;
        text-align:left;
        background:#ccc url(test/jurassicparksitebackground.jpg) no-repeat 0 0;
        min-height:100%;
    }
    * html #outer {height:100%}
    #header {
        position:relative;
        margin:auto;
        height:200px;
        border:1px solid #fff;
        background:#666;
    }
    #menu {
        margin:0;
        padding:0;
        list-style:none;
        text-align:right;
    }
    #menu li {
        display:inline;
        margin:0 20px
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Header text</h1>
        </div>
        <ul id="menu">
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
        </ul>
    </div>
    </body>
    </html>
    You will have to get your hands dirty though and get to grips with the code as there are no shortcuts with css


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
  •