Menu
I'm creating a webpage for my photography and basically I'm trying to create div boxes that contain the images, with a div for text displayed over the image. For some reason I cannot work out how to make the text div position from the image div. For example, currently "top: 8%;" positions the text 8% from the top of the page not the top of the image div, despite the fact that the text div is withing the image div in the code and positioned relatively.
HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Josh Graham, amateur photographer</title>
<meta name="description" content="Photography by Josh Graham">
<meta name="author" content="Josh Graham">
<!-- CSS Code -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="icon"
type="image/png"
href="images/favicon.png">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="BROKENjs/script.js"></script>
</head>
<body>
<div id="wrapper">
<table id=menu >
<tr>
<td id=josh-graham>josh-graham.com</td>
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
<div id="home" data-speed="10" data-type="background">
<div></div>
</div>
<div id="ukrainetext">
<img id="ukraine" src="images/ukraine.jpg"/>
<p id="ukrainetextp">Chernobyl,<br>Ukraine</p>
</div>
<div id="cornwalltext">
<img id="cornwall" src="images/cornwall.jpg"/>
<p id="cornwalltextp">Cornwall,<br>England</p>
</div>
<div id="moscowtext">
<img id="moscow" src="images/moscow.jpg"/>
<p id="moscowtextp">Moscow,<br>Russia</p>
</div>
</div>
</body>
</html>
CSS:
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
background: #3e3e3e;
}
#wrapper {
min-width: 640px;
margin-bottom: 0;
}
#menu {
background: #5d5d5d;
font-family: "Kozuka Gothic Pro";
font-size: 20px;
font-weight: lighter;
color: white;
height: 50px;
margin: 0 auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
min-width:640px;
position: relative;
z-index:99;
}
table td {
padding-top: 13px;
}
#josh-graham {
font-size:25px;
padding-top: 6px;
padding-left: 5px;
}
#ukrainetext {
position: relative;
}
#ukrainetextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 6%;
}
#ukraine {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float: left;
}
#cornwalltext {
position: relative;
}
#cornwalltextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 25%;
}
#cornwall {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
#moscowtext {
position: relative;
}
#moscowtextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 43.5%;
}
#moscow {
height: auto;
margin: 0.3% auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
610
CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div).
Create HTMLPut three <div> elements and give them “container”, “image” and “text” class names. Put your image within the second <div> element with the help of the <img> tag and its src attribute. Add some text in the <h1> element.
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
This is a frequently asked question. Your answer: How to position text over an image in css . Jsfiddle: http://jsfiddle.net/EgLKV/3/
HTML:
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p id="text">
Hello World!
</p>
</div>
CSS:
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
