homepage Welcome to WebmasterWorld Guest from 54.237.78.165
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Images not staying in div
Images not staying in div
jthensley



 
Msg#: 4401593 posted 5:40 am on Dec 27, 2011 (gmt 0)

I'm new to CSS, and have been recoding my page in HTML 5 and CSS. In the left hadn column, I am having issues with the images. the main page can be seen at [beta.jthensley.com...] and the CSS file is at [beta.jthensley.com...]

the issues are at the top and bottom of the left column. At the top is a Follow Us button that doesn't want to stay centered in the column, and at the bottom is a CSS Award that seems to want to sit at my feet on the right. (Humbling, but I want it on the left-column instead of the corner of the page.)

The CSS code for the left column is:

#content-left {
font-size: 11px;
float: left;
width: 210px;
padding: 20px 32px 20px 20px;
}


#content-left img {
display: block;
margin-left: auto;
margin-right: auto;
}


We are close to the deadline to launch our new site and I'm pulling my hair out!

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4401593 posted 6:32 am on Dec 27, 2011 (gmt 0)

Uh-oh, you missed the part about Do Not Post Links to your own page. But while waiting for the moderators to nip in and take action, I took a quick look. Among other things I found that
:: cough, cough ::
you must have added some stuff to the CSS after it passed validation, because it no longer does-- and the HTML validator made an even bigger fuss.

So that's a start. But a good deal of the site design seems to be lurking in the javascript... which requires someone with younger eyes than mine. You're not paying by the byte, are you? Put in some whitespace, fer hevvins sakes. You're not posting Google Analytics there.*

My preliminary hunch is that the divs don't add up right, so the validation icon that's supposed to be in the left column has ended up on the right.


* For some reason that now escapes me, I once had a look at the GA code. One single solid block of text without ever a pause for breath. You can only do that when you're absolutely positive you will never again need to change a single line.

jthensley



 
Msg#: 4401593 posted 7:04 am on Dec 27, 2011 (gmt 0)

Ok, I had tested something in the CSS. I changed it back.

Now the CSS reads
#content-left {
font-size: 11px;
float: left;
width: 210px;
padding: 20px 32px 20px 20px;
}


I had a quick look at the html. Everything looks good. All the div's are closed properly. It seems with images, they aren't aligning to the center of that div.

jthensley



 
Msg#: 4401593 posted 7:17 am on Dec 27, 2011 (gmt 0)

I took out the center tags, and used CSS
style="text-align: center;" instead. All the validation errors come from Blogtalk radio and paypal codes generated by those sites (go figure)
lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4401593 posted 9:13 am on Dec 27, 2011 (gmt 0)

What's the height of #content-left ? Simply the sum of its parts, or is there an explicit height declaration hiding somewhere else?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved