Css divs and ids problems

Question

so i want an image in a div, i want the div to have a background color. but i want the image but not the div to be indented. here's my html

<div id="LogoImageHeader">
    <img src="Logo.gif" width="1403" height="117" id="LogoImage"> 
</div>

and heres my css

#logoImageHeader
{
    background-color:gray;
}

#LogoImage
{
    position: absolute;
    left: 50px;
    top: 10px;
}

it indents the image but does not show the background color of the div,

Im new to web development please help

Just add some padding to your `div`. If you still want to use `position: absolute;` you have to add `position: relative;` to `#logoImageHeader`. — Code Spirit, Sep 24 '16 at 23:01
Try `position: relative;` instead and try `overflow: hidden;` on the `
`. — Sebastian Simon, Sep 24 '16 at 23:01

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

As stated in the comments, HTML ID selectors are indeed case sensitive. But that's not the main problem.

The background color does set correctly once you fix the ID, but due to the fact your image positioning is absolute, the image is being rendered outside the div, therefore the div has a height of 0px.

But if you apply the positioning to the div instead, the image will act as if it's back inside the div and thus the background of the div will be gray.

References and Example

Reference answer on case sensitive HTML ID selectors

Reference answer on absolute child elements

JSFiddle example

edited May 23 '17 at 12:15

Community

1
1

answered Sep 24 '16 at 23:22

Froopy

349
4
12

thanks guys fixed it i use the comment about div width and height but i also change the positioning of the image to relative and fixed my cases. – Spectral Sep 25 '16 at 09:06

score 0 · Answer 2 · answered Sep 24 '16 at 23:36

You need to assign "width" and "height" CSS Style properties to your #logoImageHeader DIV

#LogoImageHeader
{
height: 100px;
width: 80px;
border: 1px solid red;
background-color:gray;
}

#LogoImage
{
position: absolute;
left: 50px;
top: 10px;
}

NOTES:

DIV #ID and CSS Stylesheets are Case SENSITIVE.

I noticed in your html code

You named your div

<div id="LogoImageHeader">

That has a capital "L" for "Logo"

But THEN

In your CSS

You called it

#logoImageHeader

If you notice You used "l" LOWER CASE this time.

This is wrong.

HTML and CSS code is Case Sensitive.

If you gave "#LogoImageHeader" a CAPITAL CASE letter "L" in you HTML CODE then you need to call that DIV with a CAPITAL CASE letter "L" in your CSS CODE

In other words

HTML and CSS Code is case sensitive and DIV names need to be written and matched exactly the same.

--------------_-

If the DIV has no height and no width

It will NOT appear.

If you want background behind the image

You have to define the height and width of the div

I added a 1px solid border for easy viewing

Whenever I code

I usually do this for reference

So I can see where the DIV is

and

How big the DIV is.

Try now.

Pro-TIP: Using 500px to define pixels is very restrictive. I would recommend using 0vh-100vh of screen size or 0%-100% of parent DIV to define width and height DIV Box Sizes. — Shen Hui Zhang, Sep 24 '16 at 23:41

Css divs and ids problems

2 Answers2