My code is messed up wrong bg color and text color

Discussion in 'CSS' started by theblurr5495, Dec 19, 2008.

0
  1. #1
    I want the my page to have a black background and orange text but it comes out with black text and a red background. Please help. Here's the code:

    <html>
    <head>
    <title>The Complete Soccer Guide- Soccer tips,guide,games,videos,pictures,forums,and more</title>
    <style type="text/css">

    body
    { margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    }

    #header {
    margin: 20px;
    padding: 10px;
    height: 100px;
    }
    #left {
    position: absolute;
    left: 15px;
    top: 160px;
    width: 200px;
    }
    #center {
    top: 0;
    margin-left: 230px;
    margin-right: 230px;
    }
    #right {
    position: absolute;
    right: 15px;
    top: 160px;
    width: 200px;
    }
    </style>
    </head>
    <body bgcolor="black"<FONT color="white"</FONT>"
    <body>

    <div id="header">
    <img src="Soccer Logo.jpg" />

    </div>

    <div id="left">



    </div>


    <div id="center">
    <h1>Mental Soccer Guides</h1>
    <p> Under Construciton
    <div id="right">



    </div>

    </body>
    </html>
     
    theblurr5495, Dec 19, 2008 IP
  2. theblurr5495

    theblurr5495 Active Member

    Messages:
    436
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #2
    edit actually my background is black but you cannot see my text.
     
    theblurr5495, Dec 19, 2008 IP
  3. designz

    designz Peon

    Messages:
    301
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well for starters cleaning up the code would be a good idea. Please for god sake keep presentation away from structure. What i mean is dont use styling within the html document. you specify the background image ,color, font size ,font weight, font family, text decoration, Background color etc all in the css. Thats the whole point in the cascade style sheet. To easily maintain a website which by editing one file globally effects the way the website looks.

    What i mean is this (WRONG SYTAX) You have two body tags which you canot have. There should not be two body tags. If you wanted to style the body tags do it in the css document. Also if you want to declare a margin to default 0 then simply margin: 0;

    
<html>
<head>
<title>The Complete Soccer Guide- Soccer tips,guide,games,videos,pictures,forums,and more</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>
<body bgcolor="black"<FONT color="white"</FONT>"
<body>

<div id="header">
<img src="Soccer Logo.jpg" />

</div>

<div id="left">



</div>


<div id="center">
<h1>Mental Soccer Guides</h1>
<p> Under Construciton
<div id="right">



</div>

</body>
</html>
    Code (markup):
    Correct Syntax

    HTML DOCUMENT
    
<html>
<head>
<title>The Complete Soccer Guide- Soccer tips,guide,games,videos,pictures,forums,and more</title>
<style type="text/css">

</head>
<body>

<div id="header">
    <a href=""><img src="Soccer Logo.jpg" /></a><!--Makes the logo clickable as it is now a link-->
        </div><!--End of Header-->

            <div id="left">
                </div><!--End of Left-->

            <div id="center">
        <h1>Mental Soccer Guides</h1>
    <p> Under Construciton</p?
</div><!--End of Center-->

    <div id="right">
        </div><!--End of Right-->

</body>
</html>
    Code (markup):

    Also why use position absolute . You do know you only use position:absolute if you wish to take it out of the general flow/structure of the site. Use floats instead.

    If you could show us a link to your site i can quickly fix it up for you using proper correct usage of the css + html syntax. I cant redo your css file until actually see what it is you are trying to do.
     
    designz, Dec 19, 2008 IP
  4. theblurr5495

    theblurr5495 Active Member

    Messages:
    436
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #4
    theblurr5495, Dec 19, 2008 IP
  5. opaweko123

    opaweko123 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    type this code <body bgcolor="the color that you want"> -_-
     
    opaweko123, Dec 19, 2008 IP
  6. designz

    designz Peon

    Messages:
    301
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #6
    For your css if you want all your text to apprear white then simply add the flowing to our css style sheet. This applys a black background with all text within the whole document as white. If you wish to specify a colour to specific tag ie h1

    
body{
margin: 0;
background-color: #000000;
color:#ffffff;
}

h1{
color: #Hex code Goes Here;
}
    Code (markup):
     
    designz, Dec 19, 2008 IP