|
Page 1 of 1 |
|
Posted: Thu, 1st Mar 2012 22:41 Post subject: Web Gurus, WTF am I doing wrong :P |
|
 |
Im trying to set the CSS so it contains the body settings of my site and has a set background image, have I done this right? I just cant get the background image to display!
Ive made a CSS file -
Code: |
<style type="text/css">
body {
height: 100%;
background-image: url(Images/back.jpg);
background-repeat: repeat;
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#h1 {
font-family: Calibri;
font-size: 0.5pt;
color: white;
text-align: center;
}
#h2 {
font-family: Calibri;
font-size: 28pt;
color: black;
}
#h3 {
font-family: Calibri;
font-size: 14pt;
color: black;
}
#h4 {
font-family: Calibri;
font-size: 12pt;
color: black;
}
#logo {
background-image: url(Images/Logo.jpg);
width: 730px;
height: 120px;
margin-left: 35px;
background-repeat:no-repeat;
}
#menu {
background: white;
float: none;
list-style: none;
padding: 0px;
width: 730px;
margin-left: 35px
}
#menu li {
float: left;
font-family: calibri;
font-size: 14pt;
color: black;
margin: 0;
padding: 0;
}
#menu a {
background-repeat:no-repeat;
color: black;
display:block;
padding-left: 34.5px;
padding-right: 34.5px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
background-color: orange;
margin-left: auto;
}
#menu a:hover {
background: #2580a2;
color: #fff;
}
</style>
|
and the HTML file
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" xml:lang="en">
<head>
<title>Untitled Document</title>
<link href="CSS (barebones).css" rel="stylesheet" type="text/css" />
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<ul id="logo">
</ul>
<ul id="menu">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Search</a></li>
<li><a href="#" title="Services">List</a></li>
<li><a href="#" title="Support">Links</a></li>
<li><a href="#" title="FAQ">About us</a></li>
<li><a href="#" title="FAQ">Contact us</a></li>
</ul>
</body>
</html>
|
Everything displays except the Background and it doesnt align in the centre!!!
When I do it like this and include the CSS in the HTML page like this, It works perfect just how I want it -
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>
<title></title>
<style type="text/css">
body {
height: 100%;
background-image: url(Images/back.jpg);
background-repeat: repeat;
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#h1 {
font-family: Calibri;
font-size: 0.5pt;
color: white;
text-align: center;
}
#h2 {
font-family: Calibri;
font-size: 28pt;
color: black;
}
#h3 {
font-family: Calibri;
font-size: 14pt;
color: black;
}
#h4 {
font-family: Calibri;
font-size: 12pt;
color: black;
}
#logo {
background-image: url(Images/Logo.jpg);
width: 730px;
height: 120px;
margin-left: 35px;
background-repeat:no-repeat;
}
#menu {
background: white;
float: none;
list-style: none;
padding: 0px;
width: 730px;
margin-left: 35px
}
#menu li {
float: left;
font-family: calibri;
font-size: 14pt;
color: black;
margin: 0;
padding: 0;
}
#menu a {
background-repeat:no-repeat;
color: black;
display:block;
padding-left: 34.5px;
padding-right: 34.5px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
background-color: orange;
margin-left: auto;
}
#menu a:hover {
background: #2580a2;
color: #fff;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<ul id="h1">
<p> Hello </p>
</ul>
<ul id="logo">
</ul>
<ul id="menu">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Search</a></li>
<li><a href="#" title="Services">List</a></li>
<li><a href="#" title="Support">Links</a></li>
<li><a href="#" title="FAQ">About us</a></li>
<li><a href="#" title="FAQ">Contact us</a></li>
</ul>
</body>
</html>
|
What have I done wrong? The Image names are correct
Thanks
George W Bush -
'...more and more of our imports are coming from overseas.'
|
|
Back to top |
|
 |
|
Posted: Thu, 1st Mar 2012 22:44 Post subject: |
|
 |
I just dont see how it works fine when its all in one but not when its in a CSS and HTML file
George W Bush -
'...more and more of our imports are coming from overseas.'
|
|
Back to top |
|
 |
|
|
Back to top |
|
 |
garus
VIP Member
Posts: 34200
|
Posted: Thu, 1st Mar 2012 22:55 Post subject: |
|
 |
snip
Last edited by garus on Tue, 27th Aug 2024 21:19; edited 1 time in total
|
|
Back to top |
|
 |
|
Posted: Thu, 1st Mar 2012 22:57 Post subject: |
|
 |
#h1 {
font-family: Calibri;
font-size: 0.5pt;
color: white;
text-align: center;
}
#h2 {
font-family: Calibri;
font-size: 28pt;
color: black;
}
#h3 {
font-family: Calibri;
font-size: 14pt;
color: black;
}
#h4 {
font-family: Calibri;
font-size: 12pt;
color: black;
}
What are those for? If you intend styling the Headings, remove the hashes.
Also I'd suggest instead of playing on your body (except for setting it and html to 100% width+height and no padding/margin) you should create a div that takes the desired width and height.
|
|
Back to top |
|
 |
|
Posted: Thu, 1st Mar 2012 22:59 Post subject: |
|
 |
|
|
Back to top |
|
 |
|
|
Back to top |
|
 |
|
Posted: Thu, 1st Mar 2012 23:03 Post subject: |
|
 |
Great, report back if it's working better. Also I'd recommend trying to do this stuff without any 3rd party tool. You'll learn a lot 
|
|
Back to top |
|
 |
|
Posted: Thu, 1st Mar 2012 23:11 Post subject: |
|
 |
I know lol but its just alot easier using dreamweaver as it auto fills in things lol, Ive been editing bits in notepad so think will try doing that more now when making changes. Its like C++ messing around with pre done code you get to see what it does etc
is div a html tag / rule ?
thanks
George W Bush -
'...more and more of our imports are coming from overseas.'
|
|
Back to top |
|
 |
|
|
Back to top |
|
 |
|
Posted: Thu, 1st Mar 2012 23:15 Post subject: |
|
 |
Yes, it is a tag. You might use it as container. A div, usually, takes up a whole line, but you can set it's width, height, background and so on, to your liking
I suggest you use the free and small notepad++, it has code highlighting, so you'll see your html, css and javascript color coded, which helps a lot 
|
|
Back to top |
|
 |
Page 1 of 1 |
All times are GMT + 1 Hour |
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group
|
|
 |
|