...

View Full Version : first time css layout help



roraz
03-22-2005, 09:54 PM
sorry this has to be my first post, Ive been browsing the forum for a while now - but this is really starting to annoy me and I was so hoping somebody could help me

Im trying my hand at css layouts and was making one for word press. However Im having some trouble with the post layout.

The site is http://www.popsacrifice.com | css here (http://popsacrifice.com/postimages-files/style.css)

in both firefox and IE the top post looks funny (both browsers display the problem differently, but its in the same area). I know its because of the image (wonder woman) thats in the post. If I take the image out the post looks normal. Like I said Im new to making layouts out of css, so I was hoping someone could help :(

mcdougals4all
03-22-2005, 10:24 PM
Welcome roraz.

Can you elaborate on "looks funny"?


in both firefox and IE the top post looks funny

How do you want it to look?

roraz
03-22-2005, 11:15 PM
sorry, should have been more descriptive.

well if you look at the lower posts (their alright) thats how it should look. It should be set out like

title
date and time
catergory
post
comments link

in firefox the post below the wonder woman post is overlapping it, while in IE it looks alright for the most part except the comments link is right below the post text when the comments link should be below the wonder woman image (considering the image is part of the post)

evilregis
03-23-2005, 12:17 AM
Add the following to your "post" class...

clear: both;

And you may also want to add margin/padding to your .post img declarations as well. See what the above looks like then choose whether or not that is necessary for you.

roraz
03-23-2005, 12:33 AM
I added clear both to the post class. It improved abit but the comments link is still right under the text (when I want it to be under the picture) plus the post below is still quite close :confused:

roraz
03-23-2005, 02:27 AM
I think ive located the problem. I added a class for the posts images. I wanted it so that if I put an image in a post, it would automatically be aligned to the left with the text around it (i didn't want to put the html code in every time when posting an article)

so I made this class:



.post p img {border: 1px #000000 solid;
float: left;
margin-right: 10px;
position: relative;
clear: both;}


which applied to the any "post" content, the class which was:



.post {
top: 0px;
width: 460px;
left: 0px;
margin: 0px;
text-align: left;
clear: both;
position: relative;}


If it was just text in the post, or if there was a lot of text plus an image there wouldn't be a problem as the text seems to "push out" the div. But if it was just an image the comment link would shift out of place, its like it doesn't recognise the fact that the image is in the 'post' div...so thats why the comment link moves....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum