Web Gurus, WTF am I doing wrong :P View previous topic :: View next topic  


NFOHump.com Forum Index - Programmers Corner
Page 1 of 1
Steve-O 2004




Posts: 2851
PostPosted: 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
Steve-O 2004




Posts: 2851
PostPosted: 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
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: Thu, 1st Mar 2012 22:52    Post subject:
How about removing the style tags out of the css file Laughing

(<style type="text/css"> shold not be in your CSS, JUST CSS, no HTML!)

Further why do you use upper case, special chars and spaces in your filenames? Things like this will break your neck if you upload it onto a webhost that runs *nix instead of windows.

Further always put quotes around the file names in your url("file.jpg"); not url(file.jpg);

And why do you use <ul> to display your logo? <img> loads images just fine and even if you want to load it as background, ul has a purpose as unordered list, stick to it Smile


Last edited by PumpAction on Thu, 1st Mar 2012 22:56; edited 1 time in total
Back to top
garus
VIP Member



Posts: 34200
PostPosted: 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
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: 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
Steve-O 2004




Posts: 2851
PostPosted: Thu, 1st Mar 2012 22:59    Post subject:
PumpAction wrote:
How about removing the style tags out of the css file Laughing

(<style type="text/css"> shold not be in your CSS, JUST CSS, no HTML!)

Further why do you use upper and lower case filenames? Things like this will break your neck if you upload it onto a webhost that runs *nix instead of windows.

Further always put quotes around the file names in your url("file.jpg"); not url(file.jpg);

And why do you use <ul> to display your logo? <img> loads images just fine and even if you want to load it as background, ul has a purpose as unordered list, stick to it Smile


lol, genius Ive been pissing around for hours trying to work it out LOL, always good to get someone else to check your work, I will use the extra info you gave me as well, Thanks Web Guru Very Happy

George W Bush -

'...more and more of our imports are coming from overseas.'
Back to top
Steve-O 2004




Posts: 2851
PostPosted: Thu, 1st Mar 2012 23:01    Post subject:
ok I will do that as well, need to look into "div" etc. I used Dreamweaver and it put the hashes etc in

Thanks Very Happy

George W Bush -

'...more and more of our imports are coming from overseas.'
Back to top
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: 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 Smile

=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
Steve-O 2004




Posts: 2851
PostPosted: 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
Steve-O 2004




Posts: 2851
PostPosted: Thu, 1st Mar 2012 23:13    Post subject:
oh and its already working better thanks, removing them html tags from the CSS has made the basic page layout exactly how I want it! Very Happy thanks

George W Bush -

'...more and more of our imports are coming from overseas.'
Back to top
PumpAction
[Schmadmin]



Posts: 26759
PostPosted: 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 Smile

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 Smile

=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
Page 1 of 1 All times are GMT + 1 Hour
NFOHump.com Forum Index - Programmers Corner
Signature/Avatar nuking: none (can be changed in your profile)  


Display posts from previous:   

Jump to:  
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