Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy first time css layout help

    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

    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
    Last edited by roraz; 03-23-2005 at 12:22 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Welcome roraz.

    Can you elaborate on "looks funny"?

    Quote Originally Posted by roraz
    in both firefox and IE the top post looks funny
    How do you want it to look?
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #4
    New Coder
    Join Date
    Aug 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    .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:

    Code:
    .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....
    Last edited by roraz; 03-23-2005 at 03:49 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •