Images Breaking Out - My gallery images break out of div

BooZker

Aug 6 2007, 07:57 PM

OK so I want to put the images on:

http://boozkerstweaks.trap17.com/oscargods...photography.php (long URL for testing)

inside the div with the yellow dashes (put those there just until I can get the images inside)

I don't know why they are breaking out though. It's most likely to do with the float: left. I tried the clear:both but that does nothing. I want it to look just like that, but inside my div with the yellow dashes. All the CSS for the gallery images is at the bottom of my style sheet found here:

http://boozkerstweaks.trap17.com/oscargodson/style.css

Take a gander and see if you know how to fix it. I have been trying to fix this for a couple days now, so ANY help would be great.

UPDATE: Just noticed it does it with this also:

http://boozkerstweaks.trap17.com/oscargodson/client_work.php

Maybe a block element problem? Maybe not a problem with floats, but ul and li? Because the gallery is made from an ul.

jlhaslip

Aug 6 2007, 08:15 PM

Had a quick peek.

Find :

CODE

and remove the slash at the end of that tag. The paragraph is closing because of the slash. Might be the problem. (?) Post back if it doesn't work.

*edit*

Just an idea, but if you are planning to attract potential customers from this site, I would consider changing your Myspace user name, or start a new page on Myspace. That name you are using now will really not present a good image for the client to see. Must be a story to be told about that one...

BooZker

Aug 6 2007, 08:29 PM

I'm at work so i can't tell you the story behind the username, but i will on the next post!

I actually just got rid of that p tag. I don't need it. That was leftover from the template. I only need that UL. And it still isn't working... any ideas?

truefusion

Aug 6 2007, 08:37 PM

It is 'cause it is floating to the left. Suggestion: Instead of this:

HTML

Do this:

HTML

Don't have it all into one unordered list. This should make your job easier, even if it's more table-like. Then mess around with CSS for the new coding.

Edit:
Here's the modified CSS

HTML

.thumb_container {
margin: 0 auto;
width: 430px;
border: 1px dashed #ffff00;
}

ul.thumb_list li.thumb_list {
list-style: none;
display: inline;
}

.thumbs {
border: 3px solid #ffffff;
border-bottom:6px solid #ffffff;
height:70px;
width:100px;
margin:5px;
}

BooZker

Aug 6 2007, 08:45 PM

I did that, and yes it's inside the box, but I need to float the images left to make them align horizontally. If i keep float left, but make it in multiple ul it looks the same as before. Breaks out of the div...

oh well...

any more ideas haha

truefusion

Aug 6 2007, 08:50 PM

Not on my side. Did you copy the CSS i just edited in? On my side, with the way i just said to do it, it does not break out of the yellow box and should look the way you want it to.

jlhaslip

Aug 6 2007, 08:53 PM

CODE

<ul class="thumb_container">
<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Abandonment.jpg" rel="lytebox[photography]" title="Abandonment"><img src="photography.php_files/Abandonment_by_boozker.jpg" class="thumbs" alt=""></a></li>

<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Serenity.jpg" rel="lytebox[photography]" title="Serenity"><img src="photography.php_files/Serenity_by_boozker.jpg" class="thumbs" alt=""></a></li>

<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Blissful.jpg" rel="lytebox[photography]" title="Blissful"><img src="photography.php_files/Blissful_by_boozker.jpg" class="thumbs" alt=""></a></li>

<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Cavort.jpg" rel="lytebox[photography]" title="Cavort"><img src="photography.php_files/Cavort_by_boozker.jpg" class="thumbs" alt=""></a></li>

<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Hope.jpg" rel="lytebox[photography]" title="Hope"><img src="photography.php_files/Hope_by_boozker.jpg" class="thumbs" alt=""></a></li>

<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Needless.jpg" rel="lytebox[photography]" title="Needless"><img src="photography.php_files/Needless_by_boozker.jpg" class="thumbs" alt=""></a></li>

<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Wearisome.jpg" rel="lytebox[photography]" title="Wearisome"><img src="photography.php_files/Wearisome_by_boozker.jpg" class="thumbs" alt=""></a></li>

<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Wounded.jpg" rel="lytebox[photography]" title="Wounded"><img src="photography.php_files/Wounded_by_boozker.jpg" class="thumbs" alt=""></a></li>

<li class="thumb_list"><a href="http://www.boozkerstweaks.trap17.com/oscargodson/artwork/personal/art/photography/Escape.jpg" rel="lytebox[photography]" title="Escape"><img src="photography.php_files/Escape_by_boozker.jpg" class="thumbs" alt=""></a></li>
</ul>

A UL is a block-level entity, so remove the div from around it, since it isn't required. Change the class of the UL to do what the outer div was doing and It should be good.

See above codebox, particularly the UL tag with the class change. I am thinking that the UL is not included inside the 'content' because the UL is 'floated', so the wrapper div ignores it. That is one problem with floats. They are removed from the normal document flow and then positioned afterwards, so they sometimes fall out of their container.

*edit*
And modify the CSS for the UL class once the changes are made.

BooZker

Aug 6 2007, 08:56 PM

Oh sorry I didnt even see the CSS part you wrote down for some reason. It was like it wasnt there. Anyways yah it works!!! Thanks so much. What does inline do?

truefusion

Aug 6 2007, 09:01 PM

QUOTE(jlhaslip @ Aug 6 2007, 04:53 PM)

A UL is a block-level entity, so remove the div from around it, since it isn't required. Change the class of the UL to do what the outer div was doing and It should be good.

Removing the division won't work, 'cause the problem is being caused by the floating to the left.. Removing the division will just remove the yellowbox, but the images will still break through.

@Boozker: Inline just puts everything on one line; to put it shortly. It makes block-level elements not stretch from side to side. TABLEs, DIVs, ULs and similar are block-level elements. A, SPAN and others are inline-level elements.

jlhaslip

Aug 6 2007, 09:25 PM

check out the page structure at the Hoverbox Demo

http://host.sonspring.com/hoverbox/

Your site doesn't need the on-hover because you are doing the lightbox javascript method, but review the html and css for the Image UL to see how it works. One UL is all that is required here. Add some margin or padding to adjust them for spacing.

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE