Images keep changing their position depending on comuter

sandradecibell · 11-13-2012, 09:06 PM

Hi!

I'm a rookie at HTML/CSS so this might be easy, but I certainly can not get it to work.

I've been wanting titles above two link lists (widgets from blogger. I use blogspot.) and chose to make two PNGs, and managed to get them in place so they looked good on my computer (a macbook pro, using google chrome): http://tinypic.com/r/2ep83gn/6
(I'm talking about the "find me" and "blogs I love" images on the right)

But when I check my blog on other computers (PC) with firefox, chrome or explorer the images keep changing their position, and it's always different. Here's a screenshot of my friend's PC:
http://tinypic.com/r/jq11g4/6

And uh, here are the codes I used, if you can somehow see what I need to change (I know I can't)

Code:

h20 {
position: absolute;
top: 10px;
left: 900px;}
h19
{
position:absolute;
left:803px;
top:170px;
}
h18
{
position:absolute;
left:809px;
top:112px;
}

Code:

<h20><img align='right' alt='none' src='http://i46.tinypic.com/kbzv34.png' style='max-width:100%'/></h20>

<h19><img align='right' alt='none' src='http://i50.tinypic.com/10q9h83.png' style='max-width:100%'/></h19>

<h18><img align='right' alt='none' src='http://i47.tinypic.com/b6v97k.png' style='max-width:100%'/></h18>

Or has it something to do with the width of the different computer screens? If so, where/how do I change so my blog remains with the same width on every computer?

Hope someone can help! I've been googling forever and ever.. Peace

Excavator · 11-13-2012, 10:44 PM

Hello sandradecibell,
Your absolute positioned images are probably relative to the top left corner of the browser window.
To make them stop moving around with different screen resolutions, they should be relative to a containing element instead.

Have a look at this quick positioning tutorial that will show how that works.

sandradecibell · 11-14-2012, 05:41 PM

Thank you for your answer! Yes, I think they are relative to the top left corner. I checked out the guide but I couldn't find out what I have to do? Can I make them relative to the container's(the post area) left corner, because the container remains the same width on all screen resolutions, right? Where and how would i change the element which the images are going to be relative to?

Excavator · 11-14-2012, 05:55 PM

Quote:

Originally Posted by sandradecibell

Where and how would i change the element which the images are going to be relative to?

Put the images in that container and make it position: relative;

Excavator · 11-14-2012, 06:01 PM

You should also have a look at the links about validation in my signature line. The code snippet you've posted is invalid.

h20, h19 and h18 are not HTML elements. They can be id's or classes of a div element though. Would look more like this:
<div id="h20">stuff</div>
and

Code:

#h20 {
position: absolute;
top: 10px;
left: 900px;
}

sandradecibell · 11-14-2012, 06:57 PM

Okay, so I put the code in the container section and changed to relative but it ended up looking like this:
http://tinypic.com/r/i3huvk/6

I guess I need the images to be positioned "in front" of the text? Should I use the float position somehow?

Excavator · 11-14-2012, 07:06 PM

There's really no way to tell what's going on by looking at your screencaps. I would always recomend floats before using absolute positioning but who knows what blogger lets you do?

A link to the test site would help. At least then we'd see your code.

sandradecibell · 11-14-2012, 07:15 PM

http://www.sknutsson.blogspot.com

There you go!

Excavator · 11-14-2012, 07:44 PM

<h20> could just go away. A containing element for that image isn't really necessary, the image does need to be moved into #container since that's what you want it positioned relative to.

You can still use that as an id on the image so you can specifically style it from your CSS. Like this -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#container {
    background: none repeat scroll 0 0 #E6E6E6;
    border-top-right-radius: 0;
    box-shadow: 0 0 0 #C1BFBF;
    margin-bottom: 0;
    margin-top: 0;
	position: relative;
}
.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}
img#h20 {
	position: absolute;
	left: 900px;
	top: 10px;
}
</style>
</head>
<body>
    <div id="container" class="container_12">
        <img src='http://i46.tinypic.com/kbzv34.png' alt='none' width="304" height="470" id="h20">
    </div>
</body>
</html>

align='right' is deprecated under your DocType and should not be used
style='max-width:100%' ...I think full width is a given

sandradecibell · 11-14-2012, 08:10 PM

Ok, I feel like I'm retarded, but I've tried to do what I think you wanted me to do.. but it got severely messed up. http://www.sknutsson.blogspot.com

Blogspot won't let me use the <div id="container" class="container_12">
<img src='http://i46.tinypic.com/kbzv34.png' alt='none' width="304" height="470" id="h20">
</div> code.

Excavator · 11-15-2012, 12:04 AM

Quote:

Originally Posted by sandradecibell

Blogspot won't let me use the <div id="container" class="container_12">
<img src='http://i46.tinypic.com/kbzv34.png' alt='none' width="304" height="470" id="h20">
</div> code.

Yes, it's always some limitation in trade for a prepackaged blog. I'm sure there is some way to do it but without seeing how blogspot is making you edit your code... I can't really help much.

Someone here probably has a lot more experience with a CM than I do. There may be some blogspot forum too? I don't know.

And don't feel retarded, we all started somewhere!