Div's won't select anything

User 2741647 Photo


Registered User
37 posts

Hi!
I'm trying to get my logo in the center of my page and down a little. But when I try to get the image selected it won't work! I'm giving it an id.

<div id="logo">
</div>

And then when I type this in css:

#logo

It doesn't select the area where I put that div. Any suggestions? :)
User 271657 Photo


Ambassador
3,816 posts

Have you tried adjusting the margins and/or padding?
Can you post a link to the page?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2741647 Photo


Registered User
37 posts

paintbrush wrote:
Have you tried adjusting the margins and/or padding?
Can you post a link to the page?


Yes, I tried. But it seems like it won't connect to my css because it won't do anything I say it to do.
http://frogwebd.coffeecup.com/
User 271657 Photo


Ambassador
3,816 posts

<img id="logo" src="images/i.d_logo.jpg" width="1100" height="300" alt="identlogo" border="0">

For starters, get rid of the . in your image name.
There's still nothing in your main.css file???
Where are you saving your CSS file to?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 271657 Photo


Ambassador
3,816 posts

Maybe this might help:
http://www.ironspider.ca/adv/basic_css/external.htm ;)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

You have not given the logo image any styles. If I were you, I would add this to the css file:

#logo {
max-width: 1100px;
width: xyz%;
display: block;
margin: ?px auto ?px;
}
where the xyz represents the percentage of the screen width that you want the image to occupy (if the screen is not as wide as 1100px) and the ? 's are to be substituted by the number of px you want the image to have as space above and below it.
I'm not on the speediest connection in this world, but your background image took ages to load. Maybe you should take a look at the file size.

And follow Paintbrush's advice about removing the dot from the file name.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Oh, and remove the dimensions from the image in the html file. It won't adapt to any small screens with those dimensions in.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2741647 Photo


Registered User
37 posts

Inger wrote:
You have not given the logo image any styles. If I were you, I would add this to the css file:

#logo {
max-width: 1100px;
width: xyz%;
display: block;
margin: ?px auto ?px;
}
where the xyz represents the percentage of the screen width that you want the image to occupy (if the screen is not as wide as 1100px) and the ? 's are to be substituted by the number of px you want the image to have as space above and below it.
I'm not on the speediest connection in this world, but your background image took ages to load. Maybe you should take a look at the file size.

And follow Paintbrush's advice about removing the dot from the file name.

Thank you. Also, is there a way to make sure the image is in the middle? And, idk what's up with the file size. It seems fine.

btw - thanks everyone who helped me
User 271657 Photo


Ambassador
3,816 posts

Also, is there a way to make sure the image is in the middle?

YES – Create a stylesheet! You still have main.css with nothing in it. Did you read the article I linked to above?
<img id="logo" means there should be #logo in your stylesheet with rules for that logo ID (see Inger's example above). Until you do that, your logo is staying right where it is.

You're going to need to set some styles for your menus as well, so you better get going on learning how to write your CSS.

That background image is HUGE. Just because it works fine for you doesn't mean everyone else will see it the same way. http://www.webresizer.com/resizer/

(Also, you still have the period in your file name (src="images/i.d_logo.jpg"), that needs to go.)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2741647 Photo


Registered User
37 posts

paintbrush wrote:
Also, is there a way to make sure the image is in the middle?

YES – Create a stylesheet! You still have main.css with nothing in it. Did you read the article I linked to above?
<img id="logo" means there should be #logo in your stylesheet with rules for that logo ID (see Inger's example above). Until you do that, your logo is staying right where it is.

You're going to need to set some styles for your menus as well, so you better get going on learning how to write your CSS.

That background image is HUGE. Just because it works fine for you doesn't mean everyone else will see it the same way. http://www.webresizer.com/resizer/

(Also, you still have the period in your file name (src="images/i.d_logo.jpg"), that needs to go.)

Thank you, and yeah. When I learned code I had to pay to learn css. Also it didn't teach me very much.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.