Working with different resolutions in HTML/CSS?

[Coplestone]

Hello there,

I’m fairly new to website design and I was wondering if anyone here would be so kind as to explain how or link me with some information on how to work with different resolutions in CSS. I’m having trouble positioning images and how they appear in resolutions that aren’t mine.

What would be the best solution to tackle this?

Thanks for your help.

Regards,

Coplestone

[Senff]

I’m not really sure what you’re after, or actually, what the actual problem is.

What do you mean by “resolutions that aren’t mine“? Can you show us a page where the issue appears so we can get a better idea?

[Coplestone]

Sorry, basically, if I change resolution on my computer to see how the page is displayed in different resolutions the images on the website appear displaced like so:

My View (1920×1080): http://gyazo.com/2c32815040b92435b9bb0667c6a5a324

Different Resolution (1600×900): http://gyazo.com/8c6e6b3972385ab78386f36ea6c26e75

I’ve read that maybe liquid/fluid layouts maybe be a potential fix? I’ve also read about possibly putting images in a container, but I’n not quite sure how. I don’t suppose you could link me to some decent articles on how I could achieve this?

Thanks for your time.

[Coplestone]

Oh I see, I understand the fact that I’m using px and absolute to position my images is quite bad. The images are links. Here’s my code:

CSS:

.javaPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url(image.png');
position:absolute;
top:50px;
left:552px;
}

HTML:

<a href="#" class="javaPic" title="Java"></a>

[Author]

Posts