1

Hi guys I am a bit noob in CSS and just started designing a website. What's happening is i am trying to put a logo div on my header div with background color blue. Everything is just fine but when i set the position of child div (logo div) the blue color disappear.

style.css

@CHARSET "ISO-8859-1"; #header { background-color: blue; position: relative; } #logo { position: absolute; } index.html <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Insert title here</title> </head> <body> <div id="header" > <div id="logo"> <img src="images/logo.jpg"> </div> </div> </body> </html>
Improve this question
7
  • why you using absolute position? absolute position can not contain anything inside when has not height and width. Commented Feb 21, 2016 at 9:20
  • but absolute div contains an image and it already has height and width of its own.. Commented Feb 21, 2016 at 9:23
  • 2
    Please use UTF-8, which should only be declared in html and not in CSS Commented Feb 21, 2016 at 9:35
  • decrease the size of the logo Commented Feb 21, 2016 at 9:37
  • 1
    why do you need position:absolute? it might not be the best practice for your specific situation. Commented Feb 21, 2016 at 9:42

4 Answers 4

Reset to default
4

When you changed the pic position to absolute it jumped out of the header, then your div area became equal to zero. So now you need to set a size for it.

body{ width:100%; height:100%; margin: 0px; } #header { background:skyblue; position: relative; width:100%; height:190px; text-align:center; } #logo { position: absolute; }
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Insert title here</title> </head> <body> <div id="header"> <div id="logo"> <img src="http://i.imgur.com/Goy7oBy.gif" style="max-height:190px"> </div> <h2 style="font-family:arial,sans-serif;color:white;line-height:190px;margin:0px">TITLE</h2> </div> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You need to set height of your header. This is because absolute div is kind of "outside" of the header therefor header's height is became 0.

Improve this answer

Comments

0

Set the width and height of the #header

<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"><title>Insert title here</title> <style type = "text/css"> #header { background-color: blue; position: relative; width: 400px; height: 500px; } #logo { text-align: center; } </style> </head> <body> <div id="header" > <div id="logo"> <img src="me.png"> </div> </div> </body> </html>
Improve this answer

Comments

0

The thing is you did not mention any height for the header div and when I tried your code by removing the logo div also I have not seen any blue color, Then I realized the height is not mentioned.

 height: Xpx;/* This works */
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.