Zymic Webmaster Forums > Dono Whats Wrong With My Css....

k.digennaro

Jun 4 2008, 08:08 PM

Hey all,
Well of course I'm having problems again, this time I dono what the problem is because the section of code im working on seems so simple.

I want a black background, that explains the first part. And second part I want an image in the center, the image path is correct. I want it padded 45 pixels in from the left, and 20 pixels from the top.
To me this code should work, but obviousally something is wrong cus its not working. Ill post the html i was using to load it aswell, although it was nearly nothing on it. (just trying to get my css up and running first)

MY CSS

CODE

#background {
               backgroundcolor: #000000
}

#bodyimage {
               background: url (images/center.gif);
               padding-top: 20px
               padding-left: 45px
}

MY HTML

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
         <title>Nascent Descent Band</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Turv

Jun 4 2008, 08:28 PM

Well its not going to use, There's nothing in your HTML to reference the Div's you have set up in your stylesheet!

You will also want to set a width, and height on your bodyimage div for your background image to display.

CODE

body {
               backgroundcolor: #000000
}

#bodyimage {
               background: url (images/center.gif);
               padding-top: 20px
               padding-left: 45px
}

MY HTML

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
         <title>Nascent Descent Band</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bodyimage"></div>
</body>
</html>

k.digennaro

Jun 4 2008, 10:03 PM

thanks for the help, but i seem to still be missing something. my background isnt showing up, neither is my image, but my padding for the image works if i put text in the html.

Index

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
         <title>Nascent Descent Band</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
</div>
<div id="bodyimage">
</div>
</body>
</html>

Style

CODE

#background {
               backgroundcolor: #000000

}

#bodyimage {
               background: url (Images/center.gif);
               width: 733px;
               height: 559px;
               padding-top: 20px;
               padding-left: 45px;
}

#copyright {

}

o wow i have an extra space between

CODE

url (Images/center.gif);

should be

CODE

url(Images/center.gif);no repeat

, but the background still doesnt work

k.digennaro

Jun 4 2008, 10:17 PM

edit: also the padding isnt working, am i doing it wrong?

flyboy

Jun 5 2008, 12:30 AM

QUOTE(k.digennaro @ Jun 4 2008, 10:17 PM)

edit: also the padding isnt working, am i doing it wrong?

Your code is wrong. You dont need a div to assign a background color. Although u would have to in order to have a repeating image for more advanced layouts in a div tag. But in your case you dont need <div id="background"> code. Use this in css document

body {
background-color: #000000;
{

Aslo you had the wrong syntax for setting the background color its background-color: not backgroundcolor:

I aslo noticed a slight error in your html document

Wrong
<link href="style.css" rel="stylesheet" type="text/css" />

Correct
<link rel="stylesheet" type="text/css" href="style.css" />

Please post link to site or at least say what you want to accomplish . Your code is not very clear.

k.digennaro

Jun 5 2008, 01:04 AM

hmmmm its still not working. Here's an example of what I'm going for.

Here's the code I have so far.

CSS

CODE

#background {
background-color: #000000
}

#bodyimage {
               background: url(Images/center.gif) no-repeat;
               width: 733px;
               height: 559px;
               padding-top:4cm
               padding-left:8cm
}

#copyright {
              background: url(Images/copyright.gif) no-repeat;
              width:
              height:
              padding-top:
              padding-left:

}

HTML

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
         <title>Nascent Descent Band</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="background">
</div>
<div id="bodyimage">
</div>
<div id="bodytext">
Nascent Descent
<p>
Just remember, Stay strong, Stand Tall.
<p>
textgoesheretextgoesheretextgoeshere
<p>
Enter
</div>
<div id="copyright">
<p>
Copyright 2008 DiGennaroDesigns All rights reserved
<p>
</div>
</body>
</html>

Banjo

Jun 5 2008, 07:08 AM

Why still have a div for the background when people above have said you can use body instead.

Change your css to this:

CODE

body {
background-color: #000000;
}

#bodyimage {
               background: url(Images/center.gif) no-repeat;
               width: 733px;
               height: 559px;
               padding-top:4cm;
               padding-left:8cm;
}

#copyright {
              background: url(Images/copyright.gif) no-repeat;
              width:;
              height:;
              padding-top:;
              padding-left:;

}

On your code your not putting ; at the end of css code on some of them.

Eg you had

CODE

backgroundcolor: #000000

notice no ; at the end.

And your html to:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Nascent Descent Band</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bodyimage">
</div>
<div id="bodytext">
Nascent Descent
<p>
Just remember, Stay strong, Stand Tall.
<p>
textgoesheretextgoesheretextgoeshere
<p>
Enter
</div>
<div id="copyright">
<p>
Copyright 2008 DiGennaroDesigns All rights reserved
<p>
</div>
</body>
</html>

Not for the images if there not loading make sure the path is corrent. For example if you had some code like.

CODE

background-image: url(images/bg.gif);

thats not the same as

CODE

background-image: url(Images/bg.gif);

Notice the capital I and small i, just make sure the folder is the same name as in your code.

k.digennaro

Jun 6 2008, 12:45 AM

Thanks for the help banjo, but the padding isn't working, ive tried padding by % and cm, is there a different way I should be doing it? because its not working. Everything else works now, thanks a ton.

And thanks especially for the tips.

QUOTE

Not for the images if there not loading make sure the path is corrent. For example if you had some code like.

CODE
background-image: url(images/bg.gif);

thats not the same as

CODE
background-image: url(Images/bg.gif);

Notice the capital I and small i, just make sure the folder is the same name as in your code.

yeah I did that on purpose cus i accidently nameds the file 'Images' instead of 'images'

Banjo

Jun 6 2008, 06:37 AM

For padding you can use px so something like,

CODE

padding-top: 5px;

you can also use margin.

CODE

margin-top: 10px;

Check
http://www.w3schools.com/css/css_padding.asp

http://www.w3schools.com/CSS/css_margin.asp

Marklo

Jun 6 2008, 07:07 AM

For the background, if all else fails, just put this right under <body> and screw the css, for that part anyways.

CODE

<body>
<body bgcolor="black">
</body>

Turv

Jun 6 2008, 12:53 PM

QUOTE(Marklo @ Jun 6 2008, 07:07 AM)

For the background, if all else fails, just put this right under <body> and screw the css, for that part anyways.

CODE

<body>
<body bgcolor="black">
</body>

Uhm....Why would you ever have two body tags? That wouldn't help at al.

CODE

<body bgcolor="#000">
<!-- Content -->
</body>

However, you should avoid doing it this way, Using CSS is so, so simple, body { background-color: #000; } and your done.

k.digennaro

Jun 6 2008, 01:03 PM

QUOTE(Banjo @ Jun 6 2008, 06:37 AM)

For padding you can use px so something like,

CODE

padding-top: 5px;

you can also use margin.

CODE

margin-top: 10px;

Check
http://www.w3schools.com/css/css_padding.asp

http://www.w3schools.com/CSS/css_margin.asp

hmmmm.... thats how i thought it was done, but its not working

Banjo

Jun 6 2008, 02:35 PM

You got a live demo so i can see whats wrong?

and also it doesn't really matte if you use css or body tags for the background as long as it does it's job.

k.digennaro

Jun 6 2008, 08:35 PM

yeah here ya go to, http://www.phpbbtest.zxq.net , the text is below the image right now because i havent added padding yet and its invisible since its black on black, but first im trying to get that image padded down a bit and to the middle, like the pic above.

Thanks,
Kevin

edit: I'm not understanding why the padding wont work on the image because it works for the text.

edit again: I also might as well ask these two questions now. First off, am i correct in this code for the text?

CODE

#bodytitle {
              font:;
              color: white;
                font-weight: bold;
                font-size: 55px;
              padding-bottom: 500px;
                            padding-left: 500px;

}

everything works correct except for the font and the padding-bottom, i want to use Rockwell extra bold, do i have to do something special since its a three worded font? and finnaly, I want to position this text on top of the image, do i just use padding-top to do so?
Thanks,
Kevin

k.digennaro

Jun 6 2008, 10:33 PM

ugh..... im getting so frustrated....... i know im doing something wrong, but ive read over the w2schools css guide and everything works. and my padding works on my text but not on my images...... I dont understand.....

Banjo

Jun 7 2008, 10:02 AM

Ok, iv checked it with a css validator and it's found some problems look at them here

It looks messed up for me in FF and IE so ill try and fix your code and then post back.

Edit: Just to let you know i think the center image is a bit to big and your site name with slogan if that was a image would be easier to code your site.

Try this for the body image

CODE

#bodyimage {
   background: #000000 url(Images/center.gif) no-repeat;
   width: 733px;
   height: 559px;
   margin: 10px auto;
}

k.digennaro

Jun 9 2008, 03:00 AM

Thanks for the response banjo, I really just got a chance to look at it today, was busy with work. Any ways, that validator is awesome, ill defenitely use that in the future. Your code worked great for the body image. Now Im having two issues, which are preventing me from moving on. The first one is font, it seems like every code I try to use for font doesn't work. Here's the one im currently trying to get to work.

CODE

#bodytitle {
              color: white;
                            font-family: Rockwell-Extra-Bold;
              font-style: normal;
                          font-variant: normal;
                          font-weight: 600;
                          font-size: 80px;
                          line-height: normal;
                            padding-width: 100em;
                            padding-height: 100em;
                            padding-left: 500px;
}

Now the color works, the weight works and the size works, but the actual font doesn't. I used Rockwell-Extra-Bold, but it doesnt show up, did i do that wrong? I read through the font thing in the validator, it had some useful info, but I didn't see how to use a font like this.

Also the other problem is padding. I still can't get my padding to work. First off I want to move all the text onto the image (on top of it like the pic above). Do I need to use the

CODE

<h1></>

code in my html around the text I want on top? If so how should I work it?
And padding in general I cant seem to get right. I was under the impression that to pad something there were several ways. The way that made the most sense to me was

CODE

padding-top: 400px; (could also insert bottom left and right)

is this the right way to pad? Because its not working for me very well. Is there a better way?

Thanks,
Kevin

Banjo

Jun 9 2008, 04:19 PM

Ill try and fix your code for you, but because i have GCSE's and school work to do i don't have much time.

For your body title instead of it being a div you could just style the h1 tag like...

CODE

h1 {
font: normal 600 80px Rockwell-Extra-Bold;
margin: auto;
}

Also just as a note to center something you can just use 'auto' like i did with the image i did

CODE

margin: 10px auto;

that made the image 10px down from the top and centered it, so you could just do that with the font or make a container like 400px wide and center that so then you can just write your content in that.

Ill post back if i get anything.

Edit: These may be of some interest to you.

http://www.w3schools.com/css/css_font.asp
http://www.w3.org/TR/REC-CSS2/fonts.html

k.digennaro

Jun 9 2008, 11:37 PM

why cant I put my text on top of my image? do i need to layer it somehow? or something like that?

Style

CODE

/*--------------CSS Document--------------*/

/*---------------Welcome Page---------------*/
body {
background-color: #000000;
}

#bodyimage {
   background: #000000 url(Images/center.gif) no-repeat;
   width: 733px;
   height: 559px;
   margin: 10px auto;
}
#bodytitle {
                                            color: white;
                            font-family: Rockwell-Extra-Bold;
                                          font-style: normal;
                            font-variant: normal;
                            font-weight: 600;
                            font-size: 80px;
                            line-height: normal;
                            padding: 0 200px 0 350px;

}
#bodyslogan {
              font: batang;
              color: white;
                font-size: 15px;
              margin: 10px auto;
                            padding-left: 500px;
}
#bodymessage {
              font: batang;
              color: white;
                font-size: 25px;
              padding-bottom:;
                            padding-left: 750px;
}
#bodyenter {
              font: batang;
              color: white;
                font-size: 35px;
              padding-top: 100px;
                            padding-left: 700px;

}
#copyright {
              font: batang;
              color: white;
                font-size: 12px;
                            padding-left: 0px;
}

/*----------------Welcome Page Ends---------------*/

/*----------------HomePage Begins---------------*/

/*----------------HomePage Ends-----------------*/

Html

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bodyimage">
</div>

<div id="bodytitle">
Nascent Descent
</div>

<div id="bodyslogan">
Just remember, Stay strong, Stand Tall.
</div>

<div id="bodymessage">
Site is getting a make-over please return at a later date, for now check us out at
www.reverbnation.com/nascentdescent
</div>

<div id="bodyenter">
<a href="index1.html">Enter</a></
</div>

<div id="copyright">
Copyright 2008 DiGennaroDesigns
All rights reserved
</div>

</body>
</html>

MrTouz

Jun 11 2008, 10:25 AM

well you want your text to be 'outside' your image, but as i can see it, the text code is under the imagecode :

CODE

<div id="bodyimage">
</div>

<div id="bodytitle">
Nascent Descent
</div>

i think you should start by making it it above.... that it will go on 'top' of it like this :

MYTEXTHERE
___________
MYIMAGE
___________

But if you want your text to go Over the image than :

CODE

<div id="bodyimage">
<div id="bodytitle">
Nascent Descent
</div>
</div>

THat will do something like :

___________
Mytextovermyimage
___________

k.digennaro

Jun 12 2008, 02:31 AM

Thanks mrtouz, it worked. but now im having issues with the text, its on seperate lines when it should just be one.http://phpbbtest.zxq.net/.

right now my html looks like this (below) do i need to move all the </end> tags to the bottom? next to the other two?

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="enter.css" />
</head>
<body>

<div id="bodyimage">

<div id="bodytitle">
Nascent Descent
</div>

<div id="bodyslogan">
Just remember, Stay strong, Stand Tall.
</div>

<div id="bodymessage">
Site is getting a make-over please return at a later date, for now check us out at
www.reverbnation.com/nascentdescent
</div>

<div id="bodyenter">
<a href="homepage.html">Enter</a></>
</div>

<div id="copyright">
Copyright 2008 DiGennaroDesigns
All rights reserved
</div>
</div>

</body>
</html>

also, what do i do to change the text link color? ive done it before but i cant remember... i want to make the 'enter' white with out underline.

Thanks,
Kevin

prixat

Jun 12 2008, 10:34 AM

Hi k

Its not easy to see the nesting the way you've formatted the code.

I would also move bodyenter and copyright out of the bodyimage layer, 'cause you're going to find it difficult to center them later.

CODE

<body>

<div id="bodyimage">
    <div id="bodytitle">Nascent Descent</div>
    <div id="bodyslogan">Just remember, Stay strong, Stand Tall.</div>
    <div id="bodymessage">Site is getting a make-over please return at a later date, for now check us out at www.reverbnation.com/nascentdescent</div>
</div>

<div id="bodyenter"><a href="../digennero/index1.html">Enter</a></div>
<div id="copyright">Copyright 2008 DiGennaroDesigns All rights reserved</div>

</body>

Padding can give unexpected problems with positioning so I keep it to a minimum and use margins instead wherever possible.

Removing padding will also help with the squashed text you've got.

l

MrTouz

Jun 12 2008, 02:50 PM

for links here is what i have got in one of my layouts :

CODE

a {
    color:#78BD1E;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
}
a:hover {
    color:#FFFFFF;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
}

the underlined is caused because of : text-decoration:underline; i think it is default in some browsers, well i set it to NONE on the code.

k.digennaro

Jun 12 2008, 10:35 PM

Thanks again for the tips, I got the padding almost where I want it (just need to tweek it a little). Now I still have a problem with text.

Ive figured out that this code works to change the font.

CODE

font:bold 11px Arial, Helvetica, sans-serif;

and I can add

CODE

font-color: #ffffff;
and
font-weight: 600;
etc.

But I have a specific font i want to use. Rockwell Extra Bold. is there a way to use it? It seems like I need to find out what font family it is in and then it will work. How do i find out what font family a font is in?

Thanks,
Kevin

MrTouz

Jun 13 2008, 10:05 AM

for you should clean your code (the first one :

CODE

whateverhezre {
    font-family: Tahoma, Verdana, Arial,  Helvetica, sans-serif;
    font-size:13px;
    color:#FFFFFF;
    font-weight: 600;
    text-decoration: none;
}

I personaly don't like to put things in one line, i like it when everything is at actualy one line it self its kind of easier to change later one and looks a bit more pro

prixat

Jun 13 2008, 11:02 AM

In answer to your question about Rockwell, the short answer is NO, you can't use it.

Theres nothing to stop you specifying it but only people that have it on their system will see the page properly.

Have a look at this page: http://www.prixat.zxq.net/digennaro/index.html
It has Rockwell specified (I don't have extra bold installed)

k.digennaro

Jun 13 2008, 01:01 PM

is there a site that shows a lists of fonts/font familys i can use on the web?

Thanks,
Kevin

flyboy

Jun 13 2008, 01:06 PM

In order for other to see that specific font they must have it installed on their machine. So i would stay away from custom fonts. Use it as an image instead . That way everyone will see it.

prixat

Jun 13 2008, 02:30 PM

Here's a good page on common fonts:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

MrTouz

Jun 13 2008, 06:20 PM

i have to agree with Flyboi here, i think if you want to use special fonts you better use them as images. PNG can be really good to replace fonts.

Or well if you really want to use fonts only i guess you have to put a download font button so they can download the font you are using... but its can stressfull as user.

k.digennaro

Jun 13 2008, 08:11 PM

thanks a lot guys, I think ill be able to figure this out from here

-Kevin

MrTouz

Jun 14 2008, 09:27 PM

no problem.