css - screen resolution

I have made my homepage with divs and than control everything by my css.

I have defined an background in my css(that is an image) and than in other div´s placed some jpg pictures in front of the background. You know, just a white box (as jpg) where text than are written in.

But the problem is that if I change to a lower screen resolution the white boxes in front of the background is not fitting into the background anymore and is sliding to the right.

How can I control this so don´t happend and the  boxes is sliding to the right boxes is sliding to the right
rossonerisAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TonyRebaCommented:
Use % instead of Pixels in your css
0
ronan1979Commented:
put your content in a main DIV
then set a width and center this div
0
rossonerisAuthor Commented:
% to define the images ? or what ?
Can you give an example?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

rossonerisAuthor Commented:
Do I have to set the width in the html of the main div - or in the css?
0
TonyRebaCommented:
Css
0
rossonerisAuthor Commented:
hmm - nothing happends if Itry to set the width of the main content div - not if I write 10px or 1000px nothing changes
0
ronan1979Commented:
it depends of the other divs and of the attributes :overflow, position, float, width ...

do you code yourself the CSS+HTML or do you use a tool like dreamweaver ?
>>>> can you put the code online ... in a sandbox so it will be easier for us to help you? <<<<
0
rossonerisAuthor Commented:
Here is the code
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>site</title>
</head>

<body bgcolor="#000000">

<div id="menu">menu</div>

<div id="content">content</div>

</body>

</html>


CSS;
body  {
 background-repeat:no-repeat;
  background-image:url('../grafik/bagd.jpg'); 
background-color: #000000;  
z-index:-10;
background-position:center top;
position: absolute;

}


a:hover { 
   text-decoration: underline; 
   
   }



a {  
   color: #000000;
   text-decoration: none;	
   }
   
   
h5 {
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 11px;
    color: #000000;
     
}



p {
margin: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     padding-bottom: 0px;
}

#content {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
      font-weight: normal; 
     padding-top: 0px;

Open in new window

0
ronan1979Commented:
the code is very far from producing the result on your jpeg pictures
please, send the complete code - (with more data)
0
rossonerisAuthor Commented:
arh - here is first the css
body  {
 background-repeat:no-repeat;
  background-image:url('../grafik/baggrund.jpg'); 
background-color: #000000;  
z-index:-10;
background-position:center top;
position: absolute;

}


a:hover { 
   text-decoration: underline; 
   
   }



a {  
   color: #000000;
   text-decoration: none;	
   }
   
   
h5 {
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 11px;
    color: #000000;
     
}



p {
margin: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     padding-bottom: 0px;
}

#content {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
      font-weight: normal; 
     padding-top: 0px;
    
  
  
}

 }

#menu {
margin-top: 145px;
margin-left: 85px;
}

#nyheder{
background-image:url('../grafik/nyhed.jpg');
background-repeat:no-repeat;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000;
Margin-top: 70px;
margin-left: 128px;
margin-right:300px;
width: 633px;
height: 328px;
position:absolute;
   z-index:0;
   clear: both;



}
#nyhedboks{
background-image:url('../grafik/senestenyt.jpg');
background-repeat:no-repeat;
Margin-top: 25px;
margin-left: 128px;
margin-right:300px;
width: 160px;
height: 35px;
position:absolute;
z-index:1;


}



#forum {
background-image:url('../grafik/forum.jpg');
background-repeat:no-repeat;
Margin-top: 25px;
margin-left: 848px;
margin-right:0px;
width: 160px;
height: 35px;
position:absolute;
   z-index:3;

}
#forumboks {
background-image:url('../grafik/forumboks.jpg');
background-repeat:no-repeat;
Margin-top: 70px;
margin-left: 848px;
width: 259px;
height: 283px;
position:absolute;
   z-index:2;

}



#billetboks{
background-image:url('../grafik/billett.jpg');
background-repeat:no-repeat;
margin-left: 720px;
margin-top: 438px;
width: 259px;
height: 67px;
position:absolute;
   z-index:5;


}



#resultater{
background-image:url('../grafik/resultat.jpg');
background-repeat:no-repeat;
Margin-top: 385px;
margin-left: 340px;
width: 246px;
height: 35px;
position:absolute;
z-index:6;


}

#resultattekst{
Margin-top: 446px;
margin-left: 350px;
width: 313px;
height: 160px;
position:absolute;
   z-index:8;


}

#resultatboks{
background-image:url('../grafik/resultatboks.jpg');
background-repeat:no-repeat;
Margin-top: 435px;
margin-left: 335px;
width: 313px;
height: 160px;
position:absolute;
   z-index:7;
}


#andetnyttekst{
Margin-top: 444px;
margin-left: 128px;
width: 313px;
height: 160px;
position:absolute;
   z-index:10;
   }
   
   
#andetnyt{
background-image:url('../grafik/andrenyheder.jpg');
background-repeat:no-repeat;
Margin-top:385px;
margin-left: 128px;
width: 202px;
height: 35px;
position:absolute;
z-index:11;
}

#andetnytboks{
background-image:url('../grafik/andetnytboks.jpg');
background-repeat:no-repeat;
Margin-top:435px;
margin-left: 128px;
width: 313px;
height: 160px;
position:absolute;
   z-index:9;

}


#partners{
background-image:url('../grafik/partners.jpg');
background-repeat:no-repeat;
Margin-top:515px;
margin-left: 720px;
width: 259px;
height: 72px;
position:absolute;
z-index:12;
}
#partnertekst{
Margin-top:524px;
margin-left: 705px;
width: 259px;
height: 67px;
position:absolute;
z-index:13;
}

#singlenyhedboks{
background-image:url(../grafik/singlenyhed.jpg);
background-repeat:no-repeat;
Margin-top:30px;
margin-left: 0px;
width: 632px;
height: 624px;
position:absolute;
z-index:14;

}


#singlenyhedtekst {
Margin-top:38px;
margin-left: 8px;
width: 620px;
height: 580px;
overflow:auto;
scrollbar-track-color: #cccccc;
scrollbar-arrow-color: #000000;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
position:absolute;
z-index:15;
}
#csc-default {
display:none;
}

Open in new window

0
rossonerisAuthor Commented:
the 2 html templates
The main html template:

<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>site</title>
</head>

<body bgcolor="#000000">

<div id="menu">menu</div>

<div id="content">content</div>

</body>

</html>

The 2nd html template
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>content template</title>
</head>

<body bgcolor="#000000">
<div id="nyhedboks">nyhedboks</div>
<div id="nyheder">nyheder</div>

<div id="forum">forum</div>
<div id="forumboks">forumboks</div>

<div id="banner">banner</div>
<div id="billeter">billetter</div>
<div id="billetboks">billetboks</div>


<div id="partners">parntersr</div>
<div id="partnertekst">parntertekst</div>


<div id="resultater">resultater</div>
<div id="resultattekst">resultattekst</div>
<div id="resultatboks">resultater</div>

<div id="andetnyt">andetnyt</div>
<div id="andetnyttekst">andetnyttekst</div>
<div id="andetnytboks">resultater</div>


</body>

</html>

Open in new window

0
rossonerisAuthor Commented:
B y the way - another issue is that the code aboe look like crap in mozilla - but fine in explorer, besides the lower resolution problem
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rossonerisAuthor Commented:
no solution
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.