• Locked
2 replies [Last post]
Mon, 2011-11-28 21:51
6FEARS7
6FEARS7's picture
Offline
Last seen: 1 year 24 weeks ago
newbie
Timezone: GMT+1
Joined: 2011-11-28
Posts: 2
Points: 3

Hi all!

I'm encountering a problem in CSS. I've a logo DIV, underneath of that i've a menu div and so on. At the right I want an overlayed image of some vintage pictures. I've two monitors, the one is 1280x and the other is 1920x. The code of my overlaying DIV is: 

div.diaimage{
width: 202px;
height: 178px;
background-image:url('img/dias.gif');
position: absolute;
right: 100;
top: -50;
z-index: 1;

And the problem is, on my 1280x screen the position is good, but on my 1920x screen the div moves to the right. I've added some image to clarify the problem;

1280x monitor (result as I want it):

1920x monitor (when the div is getting messed up) :

How to solve this problem and get the div static??

My HTML code is : 

<html>
<head>
<title>DiaDigitalisatie.nl | Al uw dia's digitaal!</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
		 <div class="diaimage"></div>
		 <div class="logo"></div>
		 <div class="menu"><p class="menutext">home voorbeelden tarieven offerte contact</p></div>
		 <div class="menuspacer"></div>
		 <div class="content"><p class="regulartext">Lorep ipsum del sol elmar.</br>Appel.</p></div>
		 <div class="footer">© DiaDigitalisatie.nl 2011 - 2012 | Alle rechten voorbehouden</div>
</div>
</body>
</html>

My CSS code is:

body{
text-align: center;
margin: 0px auto;
padding: 0px;
}
/*############ DIV CLASSES ############*/
div.container{
width: 891px;
height: auto;
margin: 0px auto;
}
div.logo{
width: 292px;
height: 116px;
background-image:url('img/logo.gif');
}
div.menu{
text-align: left;
width: 891px;
height: 49px;
background-color: #5cb514;
}
div.menuspacer{
width: 891px;
height: 10px;
}
div.content{
width: 891px;
height: auto;
background-color: #5cb514;
}
div.diaimage{
width: 202px;
height: 178px;
background-image:url('img/dias.gif');
position: absolute;
right: 100;
top: -50;
z-index: 1;
}
div.footer{
width: 891px;
height: auto;
text-align: center;
font-family: Calibri;
font-size: 11pt;
color: #5cb514;
padding: 5px 0px;
}
/*############ TEXT STYLES ############*/
p.menutext{
font-family: Calibri;
font-size: 25pt;
font-style: italic;
color: #ffffff;
margin: 0px 0px;
padding: 18px 10px;
word-spacing: 30px;
}
p.title{
font-family: Calibri;
font-size: 25pt;
font-style: italic;
color: #255200;
margin: 0px 0px;
padding: 3px 25px;
text-align: left;
}
p.regulartext{
text-align: left;
font-family: Calibri;
font-size: 11pt;
color: #ffffff;
margin: 0px 0px;
padding: 10px 10px;
}

Cheers!
Bas

Top
Tags:
Mon, 2011-11-28 21:55
#1
6FEARS7
6FEARS7's picture
Offline
Last seen: 1 year 24 weeks ago
newbie
Timezone: GMT+1
Joined: 2011-11-28
Posts: 2
Points: 3

Pictures did not came

Pictures did not came through:

1280x monitor:
1280x monitor

1920x monitor:
1920x monitor
**Click on the links**

Cheers!
Bas

Top
Thu, 2011-12-08 06:51
#2
Bhuvani
Bhuvani's picture
Offline
Last seen: 4 weeks 2 days ago
Regular
Timezone: GMT+5.5
Joined: 2011-05-18
Posts: 16
Points: 16

In container div add

In container div add position:relative;

Top
  • Locked