PDA

View Full Version : external css file doesn't seem to be working



nielsonp
Aug 23rd, 2007, 08:55 AM
hi

i have started building a web page
here is the code i have in the index.html file:
<head>
<meta http-equiv"Content-Type" content="text/html; charset=utf-8" />
<title>..:Nielson's Interactive media 2007 Portfolio:..</title>
<link rel="stylesheet" type="text/css"
href="styles.css" />
</head>
<body>
<div id="wrapper">
<img src="header.jpg">
</div>

</body>

</html>


and this is the text from the styles.css file:

#banner {
margin: 0 auto;
padding: 0px 0 0px 0;
background-color:
padding-top: 25px;
}
#wrapper {
width:1500px;margin:0 auto;
}

now my problem is that image called header is exactly that, a header but i am having problems getting it aligned properly. the #banner stuff on the css doc isn't being used right now, it will probably get deleted. what I am wanting to do with that #wrapper text is to get the header centered no matter what size i set it to. to test that this was working i put the size down to 300 in the width line under #wrapper but it didn't resize down to 300px wide so this leads me to suspect that the css isn't being implemented properly.

thanks in advance for your help.

PaintballKidd
Aug 23rd, 2007, 09:02 AM
well the first thing I notice is that there is no opening <html> tag...if that helps with anything...the other thing to do to test if the css is even reaching the div...is to put a rule in the #wrapper that says background-color: red; or some contrast color, and if that shows up, then you can rule out css not hitting the page

_Aerospace_Eng_
Aug 23rd, 2007, 09:09 AM
What is the width of the image? If its not 1500px wide then you need to use text-align:center; in #wrapper but something tells me this isn't what you want. Making the image display:block; and using margin:auto; might also work. Also remember to use a full complete doctype or margin:auto; won't work in IE.

nielsonp
Aug 24th, 2007, 04:37 AM
thanks everyone for your help so far!

the css does seem to be reaching the page that little test did work when i changed the header div name to test and added our little test background color in a new div in the css called test.

after i posted i realised that the <html> tag was missing. i have since added the following doc type:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Now what i need is for everything on the page to be centered i was told that using #wrapper {width:700px;margin:0 auto;} would work and if it doesn't it's not recognising my doc type. i have used text-align:center; instead, will this center everying on the page or do i need to use something else.

finally my last problem is that the header in not 'touching' the top of the page just under the address bar (in IE 6) there is a bit of a gap between my header and the address bar.

thanks heaps in advance
nielson

_Aerospace_Eng_
Aug 24th, 2007, 08:27 AM
Post a link to your page. Its likely not 'touching' the top because you haven't set the margins and/or padding to 0 on the body.

And you still didn't answer my question. Since you probably still won't you might as well post a link so we can see what you are trying to do for ourselves.

nielsonp
Aug 27th, 2007, 07:43 AM
aerospace

I'm probably misunderstanding you, i thought i answered your question so i agree this is probably the best way to do it, although i am at school (this webpage is for a project for a class) where i cant get access to my FTP server and web server. so the next best thing is to get you a screenshot here it is: :thumbsup:

<a href="http://photobucket.com" target="_blank"><img src="http://i224.photobucket.com/albums/dd140/nielsonp/Untitled-1.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>

i have decided on a 700px wide header this will be centred even on a 15 inch screen which the screenshot has been taken on. the image seems to be centred fine I'm just having issues with getting the header flush with the top of the page, you can see the gap between the header and address bar on old fashioned IE6....

here is the code:

HTML file called index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>..:Nielson's Interactive media 2007 Portfolio:..</title>
<link rel="stylesheet" type="text/css" href="styles.css" >
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="nwrapper">
<img src="header.jpg">
</div>

</body>

</html>


CSS file called styles.css:


#wrapper {
width:1000px;margin:0 auto;
}

#nwrapper {
text-align:center;
padding: 0px 0 0px 0;
margin: 0 auto;
}


(wrapper isn't in use atm as you can see from the HTML code)
i added the padding a few mins ago and it still doesn't seem to be working :(


thanks for your help so far....

_Aerospace_Eng_
Aug 27th, 2007, 07:56 AM
HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>..:Nielson's Interactive media 2007 Portfolio:..</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="wrapper">
<div id="header"></div>
</div>
</body>
</html>
CSS

html, body {
margin:0;
padding:0;
}

#wrapper {
width:700px;
margin:auto;
}

#header {
height: 100px; /* set this to the height of your header.jpg image */
background:url(header.jpg) no-repeat;
}

Arbitrator
Aug 27th, 2007, 01:44 PM
Now what i need is for everything on the page to be centered i was told that using #wrapper {width:700px;margin:0 auto;} would work and if it doesn't it's not recognising my doc type. i have used text-align:center; instead, will this center everying on the page or do i need to use something else.I suspect that youíre missing a few details with regard to the mechanics of CSS.

The text-align property is used to align inline content; img elements, by default, have display: inline; applied, so you can center them with that; if you want to center an inline element, like img, via margin-left: auto; margin-right: auto;, then you need to make sure that you also make the element block‐level (e.g., use display: block;).

Also, note that margin-left: auto; margin-right: auto; will do nothing if applied to an element with display: block; that lacks a specified or intrinsic width, as is the case with #nwrapper in your previous attempt.


finally my last problem is that the header in not 'touching' the top of the page just under the address bar (in IE 6) there is a bit of a gap between my header and the address bar.This would probably be due to a default margin on the body element. A good rule of thumb is to kill default margins and padding on all elements at the beginning of a documentís primary style sheet: * { margin: 0; padding: 0; }.


<head>
<title>..:Nielson's Interactive media 2007 Portfolio:..</title>
<link rel="stylesheet" type="text/css" href="styles.css" >
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >That meta element should be the first thing that appears in the head element, as shown in _Aerospace_Eng_ís example.



<div id="nwrapper">
<img src="header.jpg">
</div>A more appropriate construct would probably be:


<h1><img alt="Ö" width="Ö" height="Ö" src="header.jpg"></h1>Replace the ellipses with appropriate values. Also note that the alt attribute is required for img elements; the value would probably be the Web site name, assuming that thatís what appears in the header image.

If you consider the image to be ornamental rather than content, then you should follow _Aerospace_Eng_ís example and display the image via a CSS background declaration instead of an img element; images that are merely presentational should be displayed via a style sheet and left out of the HTML.

nielsonp
Aug 28th, 2007, 03:03 AM
thanks a lot for that guys....

all is well except something is just bugging me a little..

<a href="http://photobucket.com" target="_blank"><img src="http://i224.photobucket.com/albums/dd140/nielsonp/Untitled-2.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>

http://i224.photobucket.com/albums/dd140/nielsonp/Untitled-2.jpg

as you can see by the picture above (if it works :s) or the link to a photobucket image the www.w3.org validator is saying this code is invalid because of the closing body tag or something. is this validator broke or does my code have something wrong?

my html code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>..:Nielson's Interactive media 2007 Portfolio:..</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="wrapper">
<div id="header"></div>


<div id="backgroundp">
<div id="background"></div>

</div>

</body


</html>

thanks once again.

PappaJohn
Aug 28th, 2007, 04:04 AM
</body
should be
</body>

_Aerospace_Eng_
Aug 28th, 2007, 04:27 AM
And you forget to close your #wrapper div.

nielsonp
Aug 28th, 2007, 06:15 AM
thanks for that

I tried closing that wrapper.div but the whole thing went out of center. to me it seems that wrapper.div and header.div are working together. i then tried putting the </div> next to the other </div> which worked fine for the header because it has the <wrapper> tag associated with it, I would love to get this whole thing right.... any other ideas? heres my code atm..... (as far as I remember nothing has changed will put it here just in case)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>..:Nielson's Interactive media 2007 Portfolio:..</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="wrapper">
<div id="header"></div>


<div id="backgroundp">
<div id="background"></div>

</div>

</body>


</html>

_Aerospace_Eng_
Aug 28th, 2007, 06:18 AM
Then you messed up your CSS some how. Please post it.

nielsonp
Aug 28th, 2007, 06:23 AM
oh sorry i thought pasted it in.

I mustn't have :o

here it is:

html, body {
margin:0;
padding:0;
}

#wrapper {
width:700px;
margin:auto;
}

#header {
height: 200px; /* set this to the height of your header.jpg image */
background:url(header.jpg) no-repeat;
}

#background {
height: 650px;
background:url(background.jpg) no-repeat;
}

#backgroundp {
width:700px;
margin:auto;
position: absolute;
top: 160px;
}

_Aerospace_Eng_
Aug 28th, 2007, 06:33 AM
Without seeing your images I can only guess at what you are trying to do.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>..:Nielson's Interactive media 2007 Portfolio:..</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}

#wrapper {
width:700px;
margin:auto;
background:url(header.jpg) no-repeat;
padding-top:160px;
color:#FFF;
}

#content {
background:#000;
color:#FFF;
}
#content p {
margin:0;
padding:10px;
text-align:justify;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis condimentum vestibulum lorem. Proin lobortis lectus eu justo. Pellentesque pretium nunc a turpis. Aenean egestas. Nam mattis. Donec luctus elit quis velit. Ut neque quam, venenatis ut, porttitor non, sollicitudin id, tortor. Nullam eu ipsum vel nisl tincidunt facilisis. Nunc quam. Nullam dapibus. Vivamus ut erat. </p>
<p> Aenean sollicitudin, pede nec semper tempor, elit nisi elementum nunc, in viverra magna neque in neque. Nunc tristique purus sed nisl. Suspendisse quam nunc, venenatis eget, feugiat id, scelerisque sit amet, eros. Mauris nec purus in sem ullamcorper interdum. Sed hendrerit porta nulla. Aliquam felis purus, lobortis quis, elementum eu, molestie eu, libero. Proin quis tortor. Nunc vel neque. Sed commodo lacus ac lectus. Maecenas nec orci et massa fringilla congue. Morbi aliquam, odio ut tempor eleifend, nibh magna fermentum diam, ac tempor lacus nisl quis enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras sem nibh, iaculis eu, lacinia et, feugiat ultricies, mauris. Duis ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse quis leo et massa auctor fringilla. Maecenas quis est eget lacus iaculis tempor. Etiam mollis neque ullamcorper magna. Donec eleifend est a ante. </p>
<p> Donec fringilla ligula ut dui egestas sollicitudin. Proin ac risus et magna blandit pharetra. Ut sit amet nisi. Integer luctus, turpis ut egestas viverra, elit leo imperdiet nunc, sit amet lobortis elit sem in nunc. Integer dictum. Cras nulla. Vestibulum arcu turpis, fringilla sit amet, fringilla a, consequat sed, turpis. Suspendisse et urna ac neque blandit accumsan. Nullam fringilla sapien ut erat. Nam vitae libero id tellus pharetra vulputate. Nullam auctor. </p>
<p> Vivamus feugiat lectus a ipsum. Praesent nisl urna, eleifend sed, dictum eget, ultrices quis, velit. Maecenas placerat. Vestibulum felis. Nulla dolor. Aenean turpis enim, accumsan et, tincidunt sit amet, facilisis id, est. In eu justo. Pellentesque vestibulum ligula eu massa. Curabitur nulla enim, egestas eu, condimentum vel, mollis et, lorem. Proin vel massa. Aliquam erat volutpat. Ut nunc arcu, pharetra sed, eleifend et, viverra vel, orci. Nulla leo. Proin sit amet neque. Morbi velit. Curabitur ut turpis pharetra est fermentum tincidunt. </p>
<p> Nunc venenatis. Duis ultrices turpis eget tortor. Nulla tortor ante, posuere et, semper vitae, vehicula ac, magna. Cras nisl ipsum, malesuada non, viverra nec, fringilla eu, augue. Nullam non magna. Donec porta tellus eu turpis. Fusce pellentesque nulla et magna. Pellentesque sit amet neque vitae nibh semper condimentum. Suspendisse metus felis, iaculis nec, semper et, hendrerit vel, leo. Cras sed magna. Cras adipiscing risus ut augue cursus bibendum. Vivamus a metus vel libero lobortis nonummy. Cras nec augue mattis ligula dictum aliquet. Maecenas non nibh. </p>
</div>
</div>
</body>
</html>

nielsonp
Aug 28th, 2007, 06:45 AM
ok here is a screenshot:

http://i224.photobucket.com/albums/dd140/nielsonp/Picture1.jpg

_Aerospace_Eng_
Aug 28th, 2007, 05:00 PM
Just attach your images to a post. Is this for an assignment?

nielsonp
Aug 29th, 2007, 06:50 AM
yes this is for an assignment, thanks for the tip i will attach stuff for now on, save myself a lot of time.

_Aerospace_Eng_
Aug 29th, 2007, 03:08 PM
Since this is for an assignment the help you receive will be limited. Just divide your layout into parts. You have the header image, then the black part and then the gradient. You will one to put everything in a container div. Try to avoid using absolute positioning. Most layouts require little or NO absolute positioning.

nielsonp
Aug 30th, 2007, 04:24 AM
i am at the moment concentrating on getting the menu's using a very helpful website, http://htmldog.com/articles/suckerfish/dropdowns/. if there isn't anything i don't get i know where to come ;)

nielsonp
Aug 30th, 2007, 06:27 AM
my menus are coming along nicely although i cannot see the entire menu that is supposed to go down because of the blue background as you can see in the picture attached. how am i able to send this completely to the back so i can see the menu because when i take the background away it will show the full menu so this means it's going under the background.

dw about the funny names for the menus they are just madeup rubbish which will be replaced;)

_Aerospace_Eng_
Aug 30th, 2007, 06:41 AM
Did you use absolute positioning on the blue gradient area? If you did thats your problem. I've been telling you NOT to use absolute positioning if you don't have to. You may need to for your menu but NOT the blue gradient part.

nielsonp
Aug 30th, 2007, 07:42 AM
ok sorry i missed that one :o

so i have now removed it and there is a gap between the black bar and the blue gradient, would using float help???

thanks.

nielsonp
Aug 30th, 2007, 08:42 AM
all is good :thumbsup:

i went back and looked at the code and noticed the header was set at 100px when the header is only 160px.


that will teach me for posting before looking :o

once again thanks heaps.