Basic HTML and CSS Link Not Working
Question
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.
5 answers
solution1
1 2015-08-16 01:52:39
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.
solution2
0 2015-08-16 01:52:50
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.
solution3
0 2015-08-16 01:52:52
<div id="image">
must be closed. Then:
#h2{
position: absolute;
}
solution4
0 2015-08-16 01:59:23
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
solution5
0 2015-08-16 02:29:09
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.