css layouts with background colour

18 New Member

I am trying to set up an elastic layout with a background colour, then the body centred. But it is not working in the browsers. Here is the HTML and CSS, it looks OK to me but I must be doing something wrong.

CSS

Expand|Select|Wrap|Line Numbers

 
#container {

            position: relative;

            width: 40em;

            background-color: #E60073;

            margin-left: auto;

            margin-right: auto;
 
           } 

#header     {

             height: 8em;

             padding: 1em;

             background: #FFFFFF

            }       
 
#main        {

             margin-left: 12em;

             background: #FFFFFF;

             }
 
body          {

               font-family: Verdana, sans-serif;

               margin: 0;

               padding: 0;

               }

            #nav         { font-size: 1em; 

               text-decoration: none; 

               color: #6600CC; 

               font-weight: strong; }
 
h1            {  color: #E60073;

               font-size: 2em;

               }

h2          {  color: #000000;

               font-size: 1.5em;

               }

h3          {  color: #6600CC;

               font-style: italic;

               font-size: 1em;

               }

#footer     {

               float: center;

               border-top: thin;

               border-color: #E60073;

               font-size: .5em;

               }

[html]
</head>

<body>

</body>

</html>
and the HTML
<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet " type="text/css" href="new_page_ 1.css">

</head>
<div.id="contai ner"><class="id container">
<body>
<div.id="header ">
<img border="0" src="images/networkartslogo .gif" width="750" height="110">
</body>
</html>[/html]

can anyone tell me why this does not work?

Dec 21 '07 #1

Subscribe Reply

2105

Death Slaught

1,137

Top Contributor

You have a div outside of your body element, that's not valid, and can't be used that way. You have your class attribute in its own tag....class is an attribute not an element. Also you have a period inbetween your 'div', and your 'id', that is also not valid. Furthermore you have a head, body, and html tags after your CSS. In external stylesheets you do not include tags.

Try changing your code to this and see if it's what you want.

HTML

[HTML] <html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet " type="text/css" href="new_page_ 1.css">
</head>

<body>
<div id="container" >

<div id="header">
<img src="images/networkartslogo .gif" alt="Logo" />
</div>

</div>
</body>

</html>
[/HTML]

CSS (remember no tags just pure CSS)

Expand|Select|Wrap|Line Numbers

  
body {

  font-family: Verdana, sans-serif;

  margin: 0;

  padding: 0;

}
 
#container {

  position: relative;

  width: 40em;

  background-color: #E60073;

  margin-left: auto;

  margin-right: auto;

}
 
#header {

  height: 8em;

  padding: 1em;

  background: #FFFFFF

}
 
img {

  border:0;

  width:750px;

  height:110px;

}

I only included the CSS for the HTML you provided for us. If you have any questions feal free to ask.

Hope it helps, Thanks, Death

Dec 21 '07 #2

quartzy

New Member

Hi
thanks for letting me know where I was going wrong, it works fine now.

Dec 21 '07 #3

quartzy

New Member

Hi
Back again, everything works OK except that the header image is not centred when the full width browser is used, so that is not want I want.

CSS shows this:

Expand|Select|Wrap|Line Numbers

 
body {

        font-family: Verdana, sans-serif;

        margin: 0;

        padding: 0;

      }

#container {

        position: relative;

        width: 100em;

        background-color: #E60073;

        margin-left: auto;

        margin-right: auto;

        }

#header {

        height: 8em;

        padding: 1em;

                   }

      img {

        border:0;

        width:750px;

        height:110px;

        margin-left: auto;

        margin-right: auto;
 
      }
 
#main        {

             margin-left: 12em;

                         }

[html]
html
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet " type="text/css" href="new_page_ 1.css">
</head>
<body>
<div id="container" >
<div id="header">
<img src="images/networkartslogo .gif" alt="Logo" /></div>
</body>
</html>[/html]

Dec 21 '07 #4

quartzy

New Member

amended HTML
[html]
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet " type="text/css" href="new_page_ 1.css">
</head><div id="container" >
<div id="header">

<body>
<img src="images/networkartslogo .gif" alt="Logo" /></div>
</body>
</html>[/html]

Dec 21 '07 #5

Death Slaught

1,137

Top Contributor

As I said before the div element/tag cannot be placed outside of the body tags.

Try adding this line of code to your CSS.

Expand|Select|Wrap|Line Numbers

text-align:center;

Hope it helps, Thanks, Death

Dec 21 '07 #6

quartzy

New Member

yes, I tried that but it does not work. People seem to get layouts that are centred across the browser but I cannot figure out how it is done. I have followed a book and still it is wrong.

Dec 21 '07 #7

Death Slaught

1,137

Top Contributor

Where all have your tried adding that line of code?

- Death

Dec 21 '07 #8

quartzy

New Member

Where all have your tried adding that line of code?

- Death

I added the code to the image tag in the CSS

Dec 21 '07 #9

Death Slaught

1,137

Top Contributor

I added the code to the image tag in the CSS

Try adding it your #header instead.

Thanks, Death

Dec 21 '07 #10

Similar topics

2489

changing a background image to a background colour?

by: Dj Frenzy | last post by:

Hi, I know how to use javascript to change a background image to another background image, and how to change a background colour to another background colour. Is there a way to change an image to a backgound colour? I have a table with a background that has a picture. When the user hovers over the picture I want the background to change to the background colour of the rest of the page, as if to make the picture disappear.

Javascript

5236

Why does background colour and font colour change when you change the windows settings?

by: Louise | last post by:

Hi I have written an HTML pages which does not have any colour specifying tags as far I know. When I view this in an Microsoft internet explorer browser it appears with a white background and black text but when I change Windows start menu->settings->control panel ->display -> appearance and change scheme to 'High Contrast Black' the background in the browser changes to black and the text to white. I understand that the windows scheme...

HTML / CSS

4766

javascript to change cell background colours on a timer.

by: Peter Williams | last post by:

Hi All, I want to write some javascript for a html page which does the following. Imagine that the page contains a table with 2 columns and 3 rows, e.g.: +---+---+ | A | B | +---+---+

Javascript

2116

Question about background: transparent

by: Rhino | last post by:

I've been updating some CSS today and got one odd error from the validator at http://jigsaw.w3.org/css-validator/. Every time I had 'background: transparent;' (or background-color: transparent;) associated with a selector, it gave me this error message: Line : 30 (Level : 1) You have no background-color with your color : #navlist li a Here's the CSS fragment that it doesn't like:

HTML / CSS

2154

Determining the Background Colour of an Element

by: Lachlan Hunt | last post by:

Hi, I'm looking for an interoperable method of determining the current background colour of an element that is set using an external stylesheet. I've tried: elmt.style.backgroundColor; but that only works if the colour has been set using the style attribute or previously set using script. I've also tried:

Javascript

7732

print table with background colors

by: Bob Bedford | last post by:

I've a table in wich I've this CSS: ..oddrow{background-color:#FFFFFF} ..evenrow{background-color:#CCCCCC} The oddrows are white and the even are grey. BUT ! when I do print the table, there is nothing !!! How to print such lines colors ? the main purpose of this table is to be

PHP

2863

Why is it important that I define background-color for validated CSS

by: bissatch | last post by:

Hi, I am running a w3c CSS validation check on a site in development. I have many errors saying that my CSS is not valid because I have not defined the background-color but instead left it default transparent. Why does it require that every CSS defined element have their background-color defined? Also, when I set styles in the following way:

HTML / CSS

3076

background color CSS validation warning

by: Haines Brown | last post by:

A minor issue. When I try to validate a CSS line, I get an error. The line inside the style for a div is background-color: #FFFBF0; The warning (jigsaw.w3.org) is: Line : 54 (Level : 1) You have no color with your background-color : #inside

HTML / CSS

10555

Remove background color from table cell

by: Frinavale | last post by:

Hi there, I'm using JavaScript to highlight a row or column in a table. I have created a CSS class that changes the background colour to a light blue and I apply this class to the cells in the selected row/column. It works great most of the time but sometimes the cell may have an inline style sets background colour to yellow. This, of course, overwrites the background colour in the class that is being used to highlight the cell. ...

Javascript

9589

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9423

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10214

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10048

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9996

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9865

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

3963

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3563

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2815

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General