Adding Logo or HTML Header to CSS

HTML & CSS
1

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.

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

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

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”>

&lt;head&gt;
	&lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
	&lt;meta name="generator" content="Adobe GoLive" /&gt;
	&lt;title&gt;Untitled Page&lt;/title&gt;
	&lt;style type="text/css" media="screen"&gt;&lt;!--

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>

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

</html>

4

Hi,

It’s a little hard to guess exactly but I think you are looking for something 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>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 :slight_smile: