mntamimi
February 2nd, 2005, 03:54 PM
Hello-
I have what I hope is a basic CSS positioning question. I am still trying to learn how CSS positioning works, sometimes its not so easy for me. Anyways. Using the following html and css I end up with an horizontal rule going through text. Though I would have expected/wanted it to be below everything. I know the answer is probably way simple, but I just don't see why its there as opposed to below everything. The code is below. If someone could explain to me what I'm missing so that I can learn this stuff I would be appreciative. Thanks!
html
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div><a href="/Gallery/index.htm" title="Joshua's Gallery">Gallery</a> >> <a
href="/Gallery/interior exterior/index.htm">Interior/Exterior</a> >> {File Name}
</div>
<div class="pic"><img src="destruction-myth.jpg"></div>
<div class="info"><span class="title">Creation Myth</span>
<div class="info-rt">
<span class="date">2001</span>
<span class="media">paint, chalk, pencil on canvas</span>
</div>
</div>
<hr>
</body>
</html>
CSS
.date {
position: absolute;
right: 40px;
clear: none;
height: auto;
width: auto;
}
.media {
position: absolute;
right: 40px;
clear: none;
height: auto;
width: auto;
top: 20px;
}
.info {
position: relative;
}
.info-rt {
position: relative;
right: 200px;
display: inline;
}
I have what I hope is a basic CSS positioning question. I am still trying to learn how CSS positioning works, sometimes its not so easy for me. Anyways. Using the following html and css I end up with an horizontal rule going through text. Though I would have expected/wanted it to be below everything. I know the answer is probably way simple, but I just don't see why its there as opposed to below everything. The code is below. If someone could explain to me what I'm missing so that I can learn this stuff I would be appreciative. Thanks!
html
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div><a href="/Gallery/index.htm" title="Joshua's Gallery">Gallery</a> >> <a
href="/Gallery/interior exterior/index.htm">Interior/Exterior</a> >> {File Name}
</div>
<div class="pic"><img src="destruction-myth.jpg"></div>
<div class="info"><span class="title">Creation Myth</span>
<div class="info-rt">
<span class="date">2001</span>
<span class="media">paint, chalk, pencil on canvas</span>
</div>
</div>
<hr>
</body>
</html>
CSS
.date {
position: absolute;
right: 40px;
clear: none;
height: auto;
width: auto;
}
.media {
position: absolute;
right: 40px;
clear: none;
height: auto;
width: auto;
top: 20px;
}
.info {
position: relative;
}
.info-rt {
position: relative;
right: 200px;
display: inline;
}