rossoneris
asked on
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
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
Use % instead of Pixels in your css
put your content in a main DIV
then set a width and center this div
then set a width and center this div
ASKER
% to define the images ? or what ?
Can you give an example?
Can you give an example?
ASKER
Do I have to set the width in the html of the main div - or in the css?
Css
ASKER
hmm - nothing happends if Itry to set the width of the main content div - not if I write 10px or 1000px nothing changes
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? <<<<
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? <<<<
ASKER
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;
the code is very far from producing the result on your jpeg pictures
please, send the complete code - (with more data)
please, send the complete code - (with more data)
ASKER
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;
}
ASKER
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
no solution