CSS q re a testimonial page set up
- Started
- Last post
- 19 Responses
- numero1
So I am coding a testimonial page
I have the HTML like this:
[CODE]
<div id="container"><div id="header">
...
</div><div id="maincontent">
<h2>Testimonials</h2>
<h3>Here are some comments </h3>
<div class="holder">
<div class="photo">
<img src="images/test.jpg" alt="" class="left" />
</div>
<div class="testimonial">
<p>Hi Peter,<br />
Just wanted to say thank you so very much for being our celebrant on Saturday, and for everything that you did for us in the lead up to the big day. Being <br />
with the move to your new house, and also with your future celebrant work.</p>
<p>Regards,<br />
Dave & Jill</p>
</div>
</div></div>
</div>
[/CODE]And the relevant CSS like this:
[CODE]
#maincontent {
margin: 0 0 0 14px;
padding: 0;
border: 0;
width: 925px;
}.holder { margin: 0 0 20px 0; padding: 0; border: 0; }
.photo { float: left; width: 195px; margin: 0; padding: 0; border: 0; clear: left; }
.testimonial {
margin: 0 0 0 207px;
padding: 0;
border: 0; width: 718px;
}[/CODE]
Obviously it is not rendering well.
I was just wondering if anyone have had an experience with something similar.
And/or what hints and explanations can be shared.
- neverblink0
do you have an image of how you want it to display?
- numero10
Yeah
Here is the link of how is it at the moment
- neverblink0
and you want the images and the corresponding testimonials to line up? You might want to add a min-height to the testimonials to be at least as tall as the photo.
- JamesBoynton0
Stick a wrapper round image and text and set a margin or padding bottom?
- numero10
Yeah I want the photo to be on the left and the testimonial on the right.
The problem is that the testimonials are not going to be the same. That is why the page renders that way.
I did put a "wrapper" around the the photo and testimonial div.
Is the css and the html above in the right direction?
- JamesBoynton0
ahhh the holder isnt recognising the height of the image because its floated. You could add a class in the holder that has nothing in it but is clear:both. That would force the wrapper to be the same height as whatever is tallest (the image or the text).... but this isnt the best way to do it, any css gurus know the better way?
- JamesBoynton0
also maybe best to do
holder img {float:left; width:195px}
Not sure if you need to wrap a div around the image... or clear:left
- JamesBoynton0
<div class="holder">
<img src="images/test.jpg" alt="">
<p>Hi Peter,<br />
Just wanted to say thank you so very much for being our celebrant celebrant work.</p><div class="clear"></div>
</div>
#holder img {float:left; margin-right:20px}
#holder p {float:left}.clear{clear:both}
Try that, not ideal in terms of adding an html tag thats empty, but it may work.
- sorry, css shouldnt have hash, should be .holder cause they are classesJamesBoynton
- seeessess0
* {margin:0; padding:0}
#content {margin: 0 0 0 14px; padding:0 width:925px;}
.holder {margin:0 0 20px 0; min-height:200px; height:200px; position:relative; padding:0 0 0 210px}
.holder img {position:absolute; top:10px; left:10px; width:195px; border: 0;}--------------
<div id="container">
<div id="header">
...
</div><div id="content">
<h2>Testimonials</h2>
<h3>Here are some comments</h3><div class="holder">
<img src="images/test.jpg" alt="" />
<p>Hi Peter,<br />
Just wanted to say thank you so very much for being our celebrant on Saturday, and for everything that you did for us in the lead up to the big day. Being <br />
with the move to your new house, and also with your future celebrant work.</p>
<p>Regards,<br />
Dave & Jill</p>
</div><div class="holder">
<img src="images/test.jpg" alt="" />
<p>Hi Peter,<br />
Just wanted to say thank you so very much for being our celebrant on Saturday, and for everything that you did for us in the lead up to the big day. Being <br />
with the move to your new house, and also with your future celebrant work.</p>
<p>Regards,<br />
Dave & Jill</p>
</div></div>
</div>- <dMullins
- Wouldnt the position absolute take it out the flow so the wrapper wouldnt use it if the image was lower than the text?
JamesBoynton - Not sure if I understand James. If the op wanted text wrapping around the image then float:left would be used on .holder img.seeessess
- .holder img (would be good to be notified that you have typed your maximum word count here.seeessess
- A q,? Why do you put pos: relative first and then position aboslute in ,holder img. DO we need pos: relayive?numero1
- welded0
Add overflow: hidden; to the element containing the floated image or div. As long as you haven't defined dimensions for it, the container will stretch to fit the content.
<div style="overflow: hidden; margin-bottom: 10px;">
<div style="width: 100px; float: left;"><img src... /></div>
<div style="width: 300px; float: right;">blah blah blah</div>
</div>Something along those lines anyway.
- numero10
This is what I have now and it seems to work in Firefox
The HTML code is the same as above
and the CSS I have now is:
.holder {
margin: 0 0 1em 0;
overflow: hidden;
}.photo {
float: left;
width: 195px;
}.testimonial {
float: right;
width: 715px;
}I am going to try seeessess suggestion. It has less divs in the code.
- numero10
Foolowing seeesses suggestion I came up with this. And it works in Firefox, I havent seen it on IE.
The HTML:
<div id="container">
<div id="header">
...
</div><div id="content">
<h2>Testimonials</h2>
<h3>Here are some comments</h3><div class="holder">
<img src="images/test.jpg" alt="" />
<p>Hi Peter,<br />
Just wanted to say thank you so very much for being our celebrant on Saturday, and for everything that you did for us in the lead up to the big day. Being <br />
with the move to your new house, and also with your future celebrant work.</p>
<p>Regards,<br />
Dave & Jill</p>
</div><div class="holder">
<img src="images/test.jpg" alt="" />
<p>Hi Peter,<br />
Just wanted to say thank you so very much for being our celebrant on Saturday, and for everything that you did for us in the lead up to the big day. Being <br />
with the move to your new house, and also with your future celebrant work.</p>
<p>Regards,<br />
Dave & Jill</p>
</div></div>
</div>And the CSS:
.holder {
position: relative;
margin: 0 0 1em 0;
min-height: 200px;
padding: 0 0 0 227px;
}.holder img {
position: absolute;
top: 0;
left: 0;
width:195px;
border: 12px solid #eee;
}Thanks to everyone for their help! Cheers!
- numero10
I checked seeessees suggestion on IE6 and
- welded0
Dump those zeroes, get with a hero. My suggestion will work. ;)
- numero10
Yeah sorry that was your suggestion. I took the zeroes off. And IE6 still not rendering correctly!
- Try mine already!JamesBoynton
- Hey James I will. I just didnt want to have an empty div tag. Cheers.numero1
- Yeah its not ideal, there is a better way but cant find a link... but its the same principle but without adding empty divs.JamesBoynton
- Haha, oh well.welded
- neverblink0
James instead of a div you can use a
<br class="clear" />
- JamesBoynton0
http://www.positioniseverything.…
clearfix is the best way i have found so far, caused me a few problems
- numero10
Thanks James that a nice link that I have seen before.
And it led me to this links also for everyone out there
