Positioning text and pictures in CSS

[slaggsten]

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? :-)

[Kuzyo]

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

[dgriesel]

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

[slaggsten]

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

[slaggsten]

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

[slaggsten]

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

[Kuzyo]

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

[slaggsten]

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

[Kuzyo]

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

[slaggsten]

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 ?

[slaggsten]

ok thanks, But would overflow:visible; work ?

[Author]

Posts