Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Images Breaking Out, My gallery images break out of div
BooZker
post Aug 6 2007, 07:57 PM
Post #1


Mad Scientist of 2006
*********

Group: [HOSTED]
Posts: 750
Joined: 27-April 06
From: Washington State in the USA
Member No.: 22,661
T17 GFX Crew
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.

This post has been edited by BooZker: Aug 6 2007, 08:09 PM

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Aug 6 2007, 08:15 PM
Post #2


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,874
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
Had a quick peek.

Find :
CODE
<p class="main_text"/>
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... tongue.gif

(list)

Go to the top of the page
 
+Quote Post
BooZker
post Aug 6 2007, 08:29 PM
Post #3


Mad Scientist of 2006
*********

Group: [HOSTED]
Posts: 750
Joined: 27-April 06
From: Washington State in the USA
Member No.: 22,661
T17 GFX Crew
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?

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Aug 6 2007, 08:37 PM
Post #4


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,861
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
It is 'cause it is floating to the left. Suggestion: Instead of this:
HTML
<ul>
<li><a><img></a></li>
<li><a><img></a></li>
<li><a><img></a></li>
<li><a><img></a></li>
<li><a><img></a></li>
<li><a><img></a></li>
</ul>

Do this:
HTML
<ul>
<li><a><img></a></li>
<li><a><img></a></li>
<li><a><img></a></li>
</ul>
<ul>
<li><a><img></a></li>
<li><a><img></a></li>
<li><a><img></a></li>
</ul>
<ul>
<li><a><img></a></li>
<li><a><img></a></li>
<li><a><img></a></li>
</ul>

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;
}

(list)

Go to the top of the page
 
+Quote Post
BooZker
post Aug 6 2007, 08:45 PM
Post #5


Mad Scientist of 2006
*********

Group: [HOSTED]
Posts: 750
Joined: 27-April 06
From: Washington State in the USA
Member No.: 22,661
T17 GFX Crew
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

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Aug 6 2007, 08:50 PM
Post #6


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,861
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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.

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Aug 6 2007, 08:53 PM
Post #7


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,874
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
BooZker
post Aug 6 2007, 08:56 PM
Post #8


Mad Scientist of 2006
*********

Group: [HOSTED]
Posts: 750
Joined: 27-April 06
From: Washington State in the USA
Member No.: 22,661
T17 GFX Crew
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?

(list)

Go to the top of the page
 
+Quote Post