Jump to content

problem with css id


ankitb142

Recommended Posts

Hi

 

I wrote the following small html code for testing out css.

<html>

<head>

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

</head>

<body>

 

<div id="image">

<p>Someone</p>

</div>

 

</body>

</html>

 

And the css code as :

 

p {

width: 100%;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

color: #333333;

}

*/

#image{

background:#fff url(inv_logo.jpg) no-repeat;

padding-top:170px;

}

 

the size of my image is 160X160 px.

I am not able to see the background image. Why is this so?

Link to comment
Share on other sites

Is the path to the image correct? According to the code above, the image needs to be in the same folder as your style2.css file. Also, you should check to make sure it is named correctly, since the case of the letters does matter. "Inv_log.jpg" is not the same thing as "inv_logo.jpg" for example. Same thing with the file extension: ".JPG" is not the same as ".jpg".

Link to comment
Share on other sites

 

 

p {

width: 100%;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

color: #333333;

}

*/

#image{

background:#fff url(inv_logo.jpg) no-repeat;

padding-top:170px;

}

 

the size of my image is 160X160 px.

I am not able to see the background image. Why is this so?

 

Also check out the */ you have just below your CSS paragraph definition. That is a "comment tag" in CSS, which means that the following code will be ignored!

 

Comments are text you leave for yourself to help you recall what the purpose for the code is. Comments are started with the */ and should be ended with /*

Edited by daddyalfie
Link to comment
Share on other sites

Comments are started with the */ and should be ended with /*

Quick comment -- I'm pretty sure you mean that the other way round. CSS comments start with "/*" and end with "*/". Just thought I'd point that out so it doesn't confuse anyone.

 

But good catch though -- the "*/" is probably causing the #image lines within the CSS file to have issues. Removing the "*/" may take care of the error, assuming the image path is correct.

Link to comment
Share on other sites

Sorry for the "*/" tag . It came in the code while copy-pasting the code here. My css file doesn't have this comment tag. Moreover, the path to the file is correct. Its in the htdocs folder itself. When I remove the code associated with <p> tag , the image loads. But still can't figure out why both of them don't appear simultaneously.

Link to comment
Share on other sites

Ok. Got it working now. The code for css is as follows:

 

p {

width: 100%;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

text-align:center;

position:relative;

display:block;

color: rgb(255,127,39);

}

#image{

background-image:url(inv_logo.jpg);

padding-top:170px;

position:relative;

background-repeat:no-repeat;

}

 

2 follow up questions:

1)How can I make the <p> tag be in the same line as of the image. I see the contents of the paragraph in the center , just below where the image ends.

2) Making the position relative in the image loads it properly, while making it absolute loads the partial image only.

Link to comment
Share on other sites

I am not sure but I think this is what you are asking is how to combine more then one selector in your css.

p #img {

css here

}

Do not forget the space between the selectors it is important.

This will however make every paragraph with an image do the same thing.

Again I am not sure what you are asking.

Edited by grabenair
Link to comment
Share on other sites

Yeah basically, I want to have a header which contains a logo on the left and some text aligned to the right. Say for ex. the header of this website. And the header shouldn't also extend over the entire page, meaning having some space on the left and right.

 

What I guess is that I am going somewhere wrong in combining them together(any one of them is over-riding the other).

Link to comment
Share on other sites

ok, understand now. But have a couple of questions. Is the p tag your header? Is the 100% width inside of a div or just in the body tag? Here is what I would do. That is if you want a regular size page.

 

Make a wrapper div 960 px wide and put a header dive in side of that and your content dive inside as well. Something like this.

 

<body>

<div id=wrapper>

<div id=header>Place your logo img here not in a p tag. Place your text here in a p tag</div>

<div id=main_content></div>

</div><--end wrapper div-->

In your CSS

 

#wrapper {

width: 960 px;

}

#header {

width: 960 px;

height:What ever you need

 

#header img {

margin: what ever you need to place the img where you want it. Use CSS short hand Think of a clock noon then 3pm then 6pm then 9pm example, top right bottom left. 10px 0px 0px 20px This wil place your img 10px from the top and 20 px from the left of the edge of the header div.

}

#header p {

This will place any p tag inside of the header and leave the rest of your p tags alone.

}

 

}

#main_content {

width:960px;

}

Do not for get borders will effect the width.

 

 

Or if you are trying to make a header like the one above on this site then put the header inside of the body tag and make it 100% like you did and in the CSS do this

body {

margin: what ever you want here for the left and right and the height whatever you need

}

 

Hope this helps, I will check back tomorrow when I get up.

Edited by grabenair
Link to comment
Share on other sites

Quick comment -- I'm pretty sure you mean that the other way round. CSS comments start with "/*" and end with "*/". Just thought I'd point that out so it doesn't confuse anyone.

 

You know, I stared at that comment tag for minutes. I should have checked my comments before posting, but I didn't.

 

My bad and thanks!

 

Alfie

Link to comment
Share on other sites

1 more thing. I searched out the web for tutorials on absolute and relative positioning. All of them seem to cover these topics loosely. Can anyone explain in brief what is the main difference in these two styles?

This article does a pretty good job of covering the various different types of positioning, and includes examples so you can see things visually as well: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Link to comment
Share on other sites

You could put the header in the wrapper if you want to. Just depends on what you want your page to look like. If you want your page to be like the one here meaning killersites then put the header in a wrapper. It just depend on the look you are going for. Do you have a link to the site you are working on for we can take a look? Here is a site with the header all the way across the top and the content centered at 960px width. I put this here for you just to look at I just started needs a lot of work. http:// www.freewebdesigningreference.com

Take out the space.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...