Problems viewing bg images and div’s
Posted: 16 September 2007 11:34 AM   [ Ignore ]
Newbie
Rank
Total Posts:  7
Joined  2007-09-16

Hi. Could you please help. I can’t view my bg image in the bg style and my div’s bg image or the div at all for that matter.

Here is the HTML code:


<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
meta name="description" content="Silvia & Daniel's Wedding Website" />
<
title>Silvia Daniel's wedding</title> 
<link href="css/main.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<!-- Site navigation menu -->
<div id="header">
</div>
<ul class="navbar">
  <li><a href="index.html">Home page</a></li>
  <li><a href="musings.html">Musings</a></li>
  <li><a href="town.html">My town</a></li>
  <li><a href="links.html">Links</a></li>
</ul>

<!-- Main content -->
<h1>Silvia und Daniel</h1>

<p>Still working on site!</p>

<p>It lacks images, but at least it has style.
And it has links, even if they don'
t go
anywhere
...</p>

<
p>There should be more herebut I don't know
what yet.</p>



</body>
</html>


Here is the CSS code:

body {
      padding-left: 11em;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      color: purple;
     background: #FFFFCC url(/images/test.jpg) no-repeat center fixed;
}

#header {
    background:#FFFFCC url(/images/header.jpg) no-repeat top;
    padding: 2;
    border: thin #CCCCCC;
}
  
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em; 
 }
 
 
h1 {
  font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
}

        
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black; 
  
 }
 
  
ul.navbar a {
  text-decoration: none; 
}


ul.navbar a:link {
  color: blue; 
 }
 
 
ul.navbar a:hover {
  color: #b5420c;
  text-decoration: none;
  border-bottom: 2px dashed  } 
Profile
 
 
Posted: 20 September 2007 08:27 AM   [ Ignore ]   [ # 1 ]
Jr. Member
RankRank
Total Posts:  38
Joined  2007-09-03

There are several things wrong with your CSS.  To name just two

a. In your header selector you have

padding2

- the only time you can specify lengths without a unit is when the number you supply is zero.
b. The very next line you have

borderthin #CCCCCC 
- not sure where you got

thin

from.  CSS3 border styles are hidden, dotted, dashed, solid, double, groove, ridge, inset and outset. Some of the more exotic ones do not work with all browsers.

That said, your background-image code should work - I tested it in Firefox 1.5, Opera 9.1 and IE6.  It worked just fine. Have you checked that the image in question is actually available? If you are testing on a Linux machine have you ensured that the filename is in the right case?

An unrelated thought - you appear to be in the process of creating the landing page for your site.  Are you thinking of repeating your header/navbar page on each subsequent page you create?  The right way is to use server side includes so you can write that code once and then stitch it into every page that is delivered from your site.

Profile
 
 
Posted: 21 September 2007 07:56 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  4
Joined  2007-09-21

Actually thin is CSS2 but should have the CSS mark up as something like this:

#header {
  background:#FFFFCC url(/images/header.jpg) no-repeat top;
  padding: 2px;
/*—added the px unit to coincide with EXPLAIN THAT—*/
  border:  #CCCCCC;
  border-width: thin;
}

please reference: http://www.w3schools.com/css/css_reference.asp#border

Profile
 
 
Posted: 21 September 2007 08:04 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  4
Joined  2007-09-21

on second thought the first way is correct also - I just got into the habit of calling certain features out. (i.e. different border sizes, styles and the like on a single element like left border 1px and the right be 3px)

Profile