Forum Moderators: not2easy
the first instance of the code works good, but the second pushes the picture to the right when its supposed to stay in the left side.
the best i could do was putting a <br clear="all"/> after the first description but this is not good cause since the position of the data is relative and moved by bottom and left properties then the space where this data was located before moving it, its being reserved, resulting in an a big empty gray space. I dont know what else to do, i gave up guys, I will really apreciate any helps or tips about relative positioning.
THANKS IN ADVANCE :)
here is the XHTML
<div id="fighters">
<div class="descriptionBar"><p><b>FEATURED FIGHTERS</b></p></div>
<p class="fightersInfo">
<img src="images/Figther001.jpg" alt="figther1" />
<span class="fighterData">
<br />
BLAS AVENA<br />
Height 5'3"<br />
Weight 135 lbs<br />
Record 135 lbs<br />
</span>
</p>
<p class="fightersInfo">
<img src="images/Figther001.jpg" alt="figther1" />
<span class="fighterData">
<br />
BLAS AVENA<br />
Height 5'3"<br />
Weight 135 lbs<br />
Record 135 lbs<br />
</span>
</p>
<!--end #fighters--></div>
HERE IS THE CSS
.common #fighters {
position: relative;
width: 310px;
left: 0px;
float: right;
background-color: #333333;
}
.fightersInfo {
background-color: #414141;
padding: 10px;
margin: 10px 0px 10px 0px;
}
.fighterData {
width: 200px;
font-weight: bold;
position: relative;
float: left;
left: 100px;
bottom: 120px;
}
.fightersInfo img {
border: 1px solid #999999;
position: relative;
}
The following rework stacks the images, and fixes but the second pushes the picture to the right when its supposed to stay in the left side. and maintains place a description text along the side of a picture
This works in varying versions of FF, Opera, and IE - but may not be at all what you want. Had to guess a bit. It's appropriateness depends upon what you want to do with the rest of the right-hand side of the page. You are almost certainly going to have to adjust or, more likely, add <div>s to complete a workable page. In the meantime, the 'image and caption and stacking solution might give you a place to start.
<html>
<head>
<style>
.img-block {
background-color: #414141; position: relative; width: 300px; height: 300px; margin-top: 1em;
}
.img-block .img-box {}
.img-block .img-box img {
width: 250px; height: 250px; margin-top: 25px; margin-left: 25px;
}
.img-block .img-box span {
position: absolute; right: 30px; bottom: 30px; color: #000; background-color: #faebd7; padding: 5px;
}
</style>
</head>
<body>
<!--
ive spent two hours trying to figure out how to place a description text along the side of a picture using relative positioning andit works perfectly until i duplicate the code. Id like to have one picture and the description and then other one under with its orrespondant description.
the first instance of the code works good, but the second pushes the picture to the right when its supposed to stay in the left side.
the best i could do was putting a <br clear="all"/> after the first description but this is not good cause since the position of the
data is relative and moved by bottom and left properties then the space where this data was located before moving it, its being reserved, resulting in an a big empty gray space. I dont know what else to do, i gave up guys, I will really apreciate any helps or tips about relative positioning.
--><div class="img-block">
<div class="img-box">
<p>
<img src="aaa.jpg" />
</p>
</div>
</div><div class="img-block">
<div class="img-box">
<p>
<img src="aaa.jpg" />
<span>
BLAS AVENA<br />
Height 5'3"<br />
Weight 135 lbs<br />
Record 135 lbs<br />
</span>
</p>
</div>
</div><div class="img-block">
<div class="img-box">
<p>
<img src="aaa.jpg" />
<span class="fighterData">
BLAS AVENA<br />
Height 5'3"<br />
Weight 135 lbs<br />
Record 135 lbs<br />
</span>
</p>
</div>
</div>
</body>
</html>
<edit - text clarification>
[edited by: D_Blackwell at 9:37 pm (utc) on June 22, 2008]
thanks in advance.
