Problem with positioning elements

Hi, i am haveing some problems with positioning elements with css.

Okay so heres the problem, i am not a good with css/html but i am working in IT industry and i have experince from java and c++. My friends company wanted new web site and they hired a designer to design it and they had a programmer also for html/css but he canceled and they asked me to do it, so i tought that how hard it could be since i have some experince from html / css and java + and c++ experince? well if i had known how many issues i would have, i would have said no.

Okay now to the problems, i used absolute positioning for the elements, first i did it with % like this:

From html:
<div class="viiva1">
<img src="images/palikat/viiva5.jpg">
</div>

From css:
.viiva1 {
top: 50%;
left: 20%;
position: absolute;
}

Okay, now i got everything positioned very nicely but then i noticed that i am haveing major issues when resesizing browser elements would overlap each others and the layout changes when useing diffrent size monitor.

Then i tought that mayby if i change % to px it would look as same on every screen

new css code:

.viiva1 {

top: 500px;
left: 520px;

position: absolute;
}

Okay, now everything is fine when i look at the page with normal computer screen but with laptop and small screen the page look terrible.

I have read about liquvid layout but i dont understand how i should place the elements so it would look same with every screen / browser and what are the commands for that? The big problem is that i need to do exatly same looking page as the designer has done, so i have no clue how i can place like thise yellow lines in exact position without useing position command?

Also other big problem is with css table i have done, the table looks nice and i have divided that table to 3 columns but i would want to make that last 3 colum smaller than other two, becose in the first 2 colums there is text but the last colum is for number so it look kinda stupid when it so big. And this is not even the biggest problem, the big problem is again when resizing the browser, i have added 2 yellow lines that are jpg that go trough the table, again when i resize the browser the table text moves but ofcourse the lines stay at their place, so it looks really stupid when my lines.jpg goes over the table text

I hope that someone can help me here and tell me what i am doing wrong, Thank you!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
.viiva1 img {
display:block;
margin:auto;
}
</style>

</head>
<body>

<div class="viiva1">
<img src="images/palikat/viiva5.jpg" alt="viiva5">
</div>

</body>
</html>

Problem with positioning elements

noukheet

birdbrain

noukheet

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week