Using div tags - help needed please!

C

cazaline

Junior Member
Hi all!

I've had some experience with HTML but most of my design so far has been with using Flash, however I am trying to use this less and move back to HTML.

I need to make a website, originally I was going to use tables to make everything nice and neat and tidy, but I realised that I wanted to put some links over an image background and after a bit of research, found out the best way to do this was to use div tags. After some online searching, I still can't seem to get it right!

So far I have two images that I want to use, the one on the left is the logo, and the one on the right is a plain background to match the logo and this is where the links are going to go.

I'm using Dreamweaver and somewhere along the way this has gone wrong, please see code below:

<!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 Document</title>
<style type="text/css">
<!--
#logo {
background-attachment: fixed;
background-image: url(Logo-tderf.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 220px;
width: 535px;
position: fixed;
visibility: visible;
float: none;
}
#menu {
background-attachment: fixed;
background-image: url(menu_background.jpg);
background-repeat: no-repeat;
background-position: right top;
float: none;
height: 220px;
width: 459px;
visibility: visible;
}
-->
</style>
</head>

<body>
<div class="menu" id="menu"></div>
<div class="logo" id="logo"></div>

</body>
</html>
Click to expand...

Please see attachments for how I want it to look and how it is appearing in Firefox.

Any help for a newb much appreciated! :confused:

Thanks
 

Attachments

  • how i want it to look.jpg
    how i want it to look.jpg
    56.4 KB · Views: 9
  • how it looks in firefox.jpg
    how it looks in firefox.jpg
    29.7 KB · Views: 5
<!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 Document</title>
<style type="text/css">
<!--
#logo {
background-attachment: fixed;
background-image: url(Logo-tderf.jpg);
background-repeat: no-repeat;
background-position: left top;
background: url(Logo-tderf.jpg) left top no-repeat;
height: 220px;
width: 535px;
position: fixed;
visibility: visible;
float: none;
display:block;
}
#menu {
background-attachment: fixed;
background-image: url(menu_background.jpg);
background-repeat: no-repeat;
background-position: right top;
background: url(menu_background.jpg) right top no-repeat;
float: none;
height: 220px;
width: 459px;
visibility: visible;

display:block;
}
-->
</style>
</head>

<body>
<div class="menu" id="menu"></div>
<div class="logo" id="logo"></div>

</body>
</html>
Click to expand...

Quite a lot of excessive code there. Everything in red can be thrown out. The green lines should be enough to apply your background. The purple lines might fix your problem, but I didn't test this live. The display block is needed because your divs are empty (which isn't a good thing actually).

I might come back to this later but I don't have much time now.
 
You must log in or register to reply here.
Back
Top