CODEWITHSUNDEEP
htmlcss
geeb.24
geeb.24

Reputation: 557

Basic HTML and CSS Link Not Working

I am trying to use HTML and CSS to construct my own website. I am confused as to why using CSS with HTML isn't working for me.

I have the following block of code in my HTML document:

<body>
  <div id="image">
      <img src="header_photo.jpg" alt="" width="500" height="250"/></div>
      <div id="h20" <p>Insert Overlay Text Here</p></div>
 <h1> About Me</h1>

The following code is in my CSS script:

 body {
  font-size: 14px;
  color: black;
  background-color: #d0e4fe;
}

h1 {
  color: white;
  background-color: #009;
}

#image {
  position: relative;
  border-width: 5px;
}

#h20 {
  color: red;
  background-color: blue;
  position: absolute;
}

How do I overlay the #h20 text on top of the image, indicated by the ID selector, #image? What currently results is the image, left-justified, with text underneath. I want to use CSS to do this rather than styling in HTML, but I can't even get the border around my photo. Any help is appreciated.

EDIT: I have updated my script to include the above edits; however, my header_image still does not have a border, and the text is overlaying h1, "About Me". I was wondering what else I'm doing wrong to get these errors? Thanks for your help.

Upvotes: 0

Views: 83

Answers (5)

Allen F.
Allen F.

Reputation: 151

Okay, I fixed up your code, you had a few mistakes. I believe this is the type of overlay you are looking for. Edit the top and left values to adjust its position on the #h20 id. You can also change it to a percent value if you want it to be slightly more responsive. If you really want it to be responsive, I recommend using a twitter-bootstrap .jumbotron.

body {
  font-size: 14px;
  color: black;
  background-color: #d0e4fe;
}

h1 {
  color: white;
  background-color: #009;
}

#image {
  position: relative;
  border-width: 5px;
}

#h20 {
  color: red;
  position: absolute;
  top: 50px;
  left: 50px;
}
<body>
      <div id="image"><img src="header_photo.jpg" alt="" width="500" height="250"/></div>
      <div id="h20"> <p>Insert Overlay Text Here</p></div>
      <h1>About Me</h1>
</body>

Upvotes: 0

Rob
Rob

Reputation: 15150

There are a few fundamental errors. First, your styling for the p element is set as color=red which is invalid. Look at your other CSS and you should be able to easily tell what is wrong there. Secondly, all CSS properties must have a unit value, such as px or em or what have you. Your border property has none of those.

Last, you need to read up on the fundamentals of positioning. Images are inline, like text, by default. So any text following that will also be in a line box just like a paragraph of text. If a line of text (the image essentially) is followed by a real line of text, you can imagine what is happening there.

So, to accomplish the overlapping you hope for, "positioning" is what you need to study up on.

All of this covers a lot of ground making an answer very broad. You need to brush up on this elsewhere.

Upvotes: 1

kittenchief
kittenchief

Reputation: 1255

There are a lot of syntax errors in your CSS and HTML. Try to replace them with the following:

HTML:

<body>
  <div id="image">
    <img src="header_photo.jpg" alt="" width="500" height="250"/>
    <div id="h20"><p>Insert Overlay Text Here</p></div>
  </div>
</body>

CSS:

body {
  font-size: 14px;
  color: black;
  background-color: #d0e4fe;
}

h1 {
  color: white;
  background-color: #009;
}

#image {
  position: relative;
  border-width: 5px;
}

#h20 {
  color: red;
  background-color: blue;
}

p {
  color: red;
}

Hope that helps.

Upvotes: 0

LolWalid
LolWalid

Reputation: 535

In your html: you forgot to close the #image div causing some trouble

<body>
  <div id="image">
    <img src="header_photo.jpg" alt="" width="500" height="250"/>
    <div id="h20">
      <p>
        Insert Overlay Text Here
      </p>
    </div>

In your CSS: a lot of little syntax error, like the color=red

body {
  font-size: 14px;
  color: black;
  background-color: #d0e4fe;
}

h1 {
  color: #fff;
  background-color:#009;
}

#image {
  position: relative; // To position the div relatively in the body
  border-width: 5px;
}

#h20 {
  color: red;
  background-color:blue;
  position: absolute; // To position the image absolute depeding of parents postition
  top:0;
}

p {
  color:red;
}

This should work properly

Upvotes: 0

KZee
KZee

Reputation: 446

<div id="image">

must be closed. Then:

#h2{
position: absolute;
}

Upvotes: 0

Related Questions