Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Positioning text and pictures in CSS

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #45955
    slaggsten
    Member

    Hey everyone!

    I recently made my own wordpress site and need som help!

    I am trying to position som text and a picture of myself like on this website: http://www.billykick.com

    At the moment my website looks like this: Anton.stallbacka.com

    I am starting to get the absolute and realative positioning but can’t figure it out anyway. Any suggestions? :-)

    #140957
    Kuzyo
    Participant

    why use absolute position? You can make it with **float: left;** for image or **float: right;** for text but dont forget about clearfix for container in your case it #page

    #140958
    dgriesel
    Participant

    BTW: 3.5MB background-image?

    If you split the header into a JPEG background-image (the kangaroo) and a PNG for the text and the overlay at the bottom, you will be able to reduce the size a lot

    #140960
    slaggsten
    Member

    About the headr/footer and text, yeah i know ;) just have this for now, until i’ve fixed the basics.

    So, I am using absolute in order for the hover effect on the picture to work. But maybe i should skip that for now. Would i write for example .entry-content img {
    position:realative;
    top:blahblah;
    left:blahblah;
    float:left;
    }

    to fix the picture and

    .entry-content {
    position:realative;
    top:blahblah;
    left:blahblah;
    float:right;
    }

    to fix the text? isn’t there any more specific than .entry-content to target only the text?

    What do you mean about the: dont forget about clearfix for container in your case it #page. I’m a newbie ;-)

    #140961
    slaggsten
    Member

    About the headr/footer and text, yeah i know ;) just have this for now, until i’ve fixed the basics.

    So, I am using absolute in order for the hover effect on the picture to work. But maybe i should skip that for now. Would i write for example .entry-content img {
    position:realative;
    top:blahblah;
    left:blahblah;
    float:left;
    }

    to fix the picture and

    .entry-content {
    position:realative;
    top:blahblah;
    left:blahblah;
    float:right;
    }

    to fix the text? isn’t there any more specific than .entry-content to target only the text?

    What do you mean about the: dont forget about clearfix for container in your case it #page. I’m a newbie ;-)

    #140962
    slaggsten
    Member

    oh cant get the code right.. anyway you get what i mean ?

    #140963
    Kuzyo
    Participant

    if you are going to use float you don’t have to use absolute position. Here is greate article https://css-tricks.com/all-about-floats/
    Add **float: left;** to img and than add some **margin-left** for text

    #140967
    slaggsten
    Member

    to fix the text? isn’t there any more specific than .entry-content to target only the text? Chaning the position of .entry-content will also affect the picture since they are both content of the same post

    #140969
    Kuzyo
    Participant

    Do you want photo to left and text to right like one post? if Yes try what I said remove position absolute from img and set float: left; instead

    #140990
    slaggsten
    Member

    But with position:relative the hover effect wont work properly. Take a look now, all is good. But now the image’s top is cut, can’t find the reason. I will change and image-sizes and also make the text real text and not a picture. But i will save stuff like this till later :-) Thanks for fast response! So any idea why the picture is cut? and what does “but dont forget about clearfix for container in your case it #page” mean, that kuzyo told me earlier ?

    #140995
    slaggsten
    Member

    ok thanks, But would overflow:visible; work ?

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.