Move up posts near header?

sandradecibell · 02-20-2012, 02:29 PM

I'm new at this and it's probably very simple, but I was trying out to put a picture in the lower left corner of my header, and everything just dropped down. Do I need to somehow overlap the picture with the posts? If you know what I mean? I'm the worst at explaining and I'm not even english so that makes this so much more complicated. Just have a look at my blog:

http://sknutsson.blogspot.com

Hope someone can help me with this!

sandradecibell · 02-20-2012, 02:37 PM

I don't know if you need to look at the coding of the picture, but here it is anyway:

<p class='pos_absolute'><a href='http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png' imageanchor='1' style='margin-left: 1cm; margin-right: 1cm;'><img border='0' height='248' src='http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png' width='300'/></a></p></div>

I might have messed it up a bit haha. But it works! Kind of.

teedoff · 02-20-2012, 03:15 PM

When you post a link to your live site, we can see all the code and css.

If you change the position:relative; to absolute, if will allow the content to move up fine, but you'll have other issues when you resize your browser.

I'm thinking your image should have been inside the region-inner main-inner div. Then using the absolute position, position it in the place you need it.

sandradecibell · 02-20-2012, 04:19 PM

So basically, I should move the code of the picture someplace else? I can't find the position:relative code anywhere near the pictrue? I'm sorry if I'm slow..

5nakne · 02-20-2012, 04:29 PM

could you post a link?

sandradecibell · 02-20-2012, 04:32 PM

Okay so I found something under the *Main section, where it said position:relative so I changed it. Nothing happened obviously, because I must put in measures somewhere, right?

.main-outer {
margin-top: $(main.cap.height);
background: $(main.background);
}

.main-inner {
padding-top: $(main.padding.top);
}

.main-cap-top {
position: absolute;
}

.main-cap-top .cap-right {
position: absolute;

height: $(main.cap.height);
width: 100%;

Now it looks something like this. the bold text is what I changed from being position: relative.
Nope, can't be it right? That has something to do with the text only right.

sandradecibell · 02-20-2012, 04:32 PM

Quote:

Originally Posted by 5nakne

could you post a link?

Link to what, my blog? I did!

teedoff · 02-20-2012, 05:23 PM

Code:

<div style="clear: both; text-align: left;" class="separator">
<a href="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png" imageanchor="1" style="margin-left: 1cm; margin-right: 1cm;">
<img width="300" height="248" border="0" src="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png"></a></div>

Thats the Rose image, right?

Then the CSS for that img is:

Code:

a img {
    border: medium none;
    position: absolute;
}

which is in the File:

static/v1/widgets/3808626252-widget_css_2_bundle.css

sandradecibell · 02-20-2012, 06:12 PM

Quote:

Originally Posted by teedoff

Code:

<div style="clear: both; text-align: left;" class="separator">
<a href="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png" imageanchor="1" style="margin-left: 1cm; margin-right: 1cm;">
<img width="300" height="248" border="0" src="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png"></a></div>

Thats the Rose image, right?

Then the CSS for that img is:

Code:

a img {
    border: medium none;
    position: absolute;
}

which is in the File:

static/v1/widgets/3808626252-widget_css_2_bundle.css

Oh my god, dude. Nailed it. Now all i need to do is move down "favoriter", and I'm done!

sandradecibell · 02-20-2012, 07:02 PM

Okay so the problem with this (I think it's because of that edit at least) is that all pictures on my blog gets really weird (see last post on the front page) how do I fix that?

teedoff · 02-20-2012, 07:06 PM

Quote:

Originally Posted by sandradecibell

Okay so the problem with this (I think it's because of that edit at least) is that all pictures on my blog gets really weird (see last post on the front page) how do I fix that?

You'll need to assign a class or id to the image you want to style. Then style that class/id

So instead of a img {some styles here}

you could do

<img id="rose" src="rose.jpeg">

then in your style sheet replace "a img" with:

#rose {
border: medium none;
position: absolute;
}

If you apply a style to the img tag, then of course every img in your site will get those css attributes applied to them. If you give a single image an id or class, and then style that id or class, then only the img with that id or class gets styles. You can read more about specificity here. Hope this helps.

sandradecibell · 02-20-2012, 07:10 PM

Quote:

Originally Posted by teedoff

You'll need to assign a class or id to the image you want to style. Then style that class/id

So instead of a img {some styles here}

you could do

<img id="rose" src="rose.jpeg">

then in your style sheet replace "a img" with:

#rose {
border: medium none;
position: absolute;
}

Okay that makes sense, do I paste <img id="rose" src="rose.jpeg"> into the HTML template? Near the code for the photo or something?

sandradecibell · 02-20-2012, 07:31 PM

I tried using the img id code but it only allowed me to save the following: <div class='rose' src=' free+digital+stamp_rose+illustration+(1).png'/>

When I put #rose {
border: medium none;
position: absolute;
} into the CSS absolutely nothing happened. I tried to put a img {
border: medium none;
position: relative;
} into it as well because I thought that would make all the other pictures position relative? Nope, I was wrong once again. haha

teedoff · 02-20-2012, 07:46 PM

No, no, you need to find that section of code in your markup where the image is coded:

Code:

<div style="clear: both; text-align: left;" class="separator">
<a href="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png" imageanchor="1" style="margin-left: 1cm; margin-right: 1cm;">
<img width="300" height="248" border="0" src="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png"></a></div>

Then give it an id="rose":

<div id="rose" style="clear: both; text-align: left;" class="separator">
<a href="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png" imageanchor="1" style="margin-left: 1cm; margin-right: 1cm;">
<img width="300" height="248" border="0" src="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png"></a></div>

Then change the:

Code:

a img {
    border: medium none;
    position: absolute;
}

to:

Code:

#rose{
    border: medium none;
    position: absolute;
}

sandradecibell · 02-20-2012, 08:02 PM

yeeessss thank you so much! It's not easy being new at this, nothing really makes any sense to me yet haha. If I could, I would hug you. I've learned a lot!