Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to make the the Content of website scale to all screen resolutions ?

Status
Not open for further replies.
c0deM0nK424

c0deM0nK424

Programmer
Oct 28, 2007
126
GB
so I created a <div> called #page { width:100%; }

and placed it inside the <body> tags, and in my stylesheet I also did body { margin 0; padding 0; border 0; }

and the rest of my website pages simply have css layed out content with div id names.


the logo and the 'call now' image scale accordingly no matter what screen resolution i change to.

but the three DIV's in my site - don't.

any ways to remedy this ?

heres my site

 
Sort by date Sort by votes
because you have set a width of the parent element (mainContent) AND you have given the child elements a [tt]position: absolute[/tt] while defining the width of each child element.

If an element has a [tt]position:absolute[/tt] and a static [tt]top:[/tt] and [tt]left:[/tt], it's position will never change. However, if you use a dynamic [tt]top:[/tt] and [tt]left:[/tt], as you did with the logo, then the elements position is relative to the window size.

-Geates
 
Upvote 0 Downvote
As Geates said, you have absolutely positioned fixed width divs. Your are defining everything and locking it in place.

If you want it to extend, you'll need to drop the absolute position, and set dimensions, and instead use floats, and no set dimensions to get divs to grow with the screen size.

If you want a site that extends and contracts with different screen resolutions you'll need to look into Fluid layouts.

Basically it comes down to designing the site without any width restrictions.

Though most of the time you'll likely want to set a minimum width so things don;t get too bunched up.


With that said, I'm not quite sure how this involves Javascript, so I suggest you post this in forum215



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
thanks you guys - agreed, this was not supposed to be have been posted in javascript - my mistake sorry.

Waht on earth is happening to me lol

I was certain I had navigated my way to html,css and posted it there...evidently that wasn't the case.

Thanks for the help you guys have provided I will read up further on fluid layouts.

Oh and any other answers, hints, tips, advice from the rest of you - will be appreciated [bigsmile]
 
Upvote 0 Downvote
okay guys - heres what my css code looks like, my stylesheet rather.


the curved white panes are .maincontent - inside of which is something called #maintext.

positioned accordingly, is a transition css3 image which is called #cf.


in services - those three boxes are called 'services1, services2, and services3'...

here goes. (#cf1) is the id for the image holder for the contacts.htm, #cf is for main. ignore that for now. unless its part of hte problem lol



body
{
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #00FFFF 200%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #00FFFF 200%);

/* Opera */
background-image: -o-linear-gradient(left, #FFFFFF 0%, #00FFFF 200%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(2, #00FFFF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #00FFFF 200%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #FFFFFF 0%, #00FFFF 200%);
font-family: Helvetica, Times, Geneva;
margin: 0;
padding: 0;
border: 0;
font-size:18px;
font-style;plain;


}

#page { width:100%; }




P
{
font-family:Moonlight, Clarendon, Comic-Sans, Comic Sans, Palatino;
font-size:12pt;
font-style:bold;
color:white;
text-indent:72px;
}


#div-Logo {
position:absolute;


}

#CallNow {
position:absolute;
left:75%;
top:2.5%


}



#cssmenu
{
position:absolute;
top:180px;
width:180px;
list-style:none;
margin:0;
padding:1px;
background-color:#FFFFFF;


}


#cssmenu ul
{
margin:0px;
padding:0px;
list-style:none;

}

#cssmenu li a

{


display:block;
height:25px;
margin-top:1px;
padding-left:15px;
background-color:white;
border-left:10px solid cyan;
font-family:arial;
font-size:12px;
text-decoration:none;
color:#909090;
line-height:25px;

}



#cssmenu li a:hover
{
background-color:cyan;

border-left:10px solid #CCCCCC;

color:#068481;
}


#csmenu a.first
{
margin-top:0;



}
.mainContent
{

padding: 8px 8px 8px 8px;
top:40%;
left:40%;
width:40%;

background-color:white;
-moz-border-radius: 15px;
border-radius: 15px;


}

#mainText

{
color:#909090;
font-size:12px;
width:auto;
height:auto;

}



#services1

{
position:absolute;
padding: 10px 10px 10px 10px;
top:176px;
left:220px;
height:200px;
width:220px;
background-color:white;
color:grey;
font-size:16;
font-weight:bold;
text-align:center;
text-shadow: 1px 1px 1px #909090;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;

}



#services2


{
position:absolute;
padding: 10px 10px 10px 10px;
top:176px;
left:480px;
height:200px;
width:220px;
background-color:white;
color:grey;
font-size:16;
font-weight:bold;
text-align:center;
text-shadow: 1px 1px 1px #909090;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;

}



#services3

{
position:absolute;
padding: 10px 10px 10px 10px;
top:176px;
left:740px;
height:200px;
width:220px;
background-color:white;
color:grey;
font-size:16;
font-weight:bold;
text-align:center;
text-shadow: 1px 1px 1px #909090;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;

}





#GasInfo

{

position:absolute;
top:395px;
left:220px;
height:400px;
width:480px;
background-color:white;
color:#909090;
font-size:14;
margin-top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
-moz-border-radius: 15px;
border-radius: 15px;
border:1px;1px;1px;1px;
border-style:solid;
border-color:#909090;
padding:10px;10px;10px;10px;

}


#PlumbInfo

{

position:absolute;
top:395px;
left:480px;
height:400px;
width:480px;
background-color:white;
color:#909090;
font-size:14;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;


}


#ElectricInfo

{

position:absolute;
top:395px;
right:40px;
height:400px;
width:480px;
background-color:white;
color:#909090;
font-size:14;
margin-top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;
padding:10px;10px;10px;10px;

}






#cf {
position:absolute;
height:330px;
width:310px;

}
#cf img {
position:absolute;
top:-180px;
left:400px;
// left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
-moz-border-radius: 15px;
border-radius: 15px;
}

@keyframes cfFadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
50% {
opacity:0;
}
75% {
opacity:0;
}
100% {
opacity:1;
}
}

#cf img.first {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf img.second {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf img.third {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf img.fourth {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf img:nth-of-type(1) {
animation-delay: 6s;
}
#cf img:nth-of-type(2) {
animation-delay: 4s;
}
#cf img:nth-of-type(3) {
animation-delay: 2s;
}
#cf img:nth-of-type(4) {
animation-delay: 0;
}

#cf1 {
position:absolute;
height:330px;
width:310px;

}
#cf1 img {
position:absolute;
top:20px;
left:420px;
// left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
-moz-border-radius: 15px;
border-radius: 15px;
}

@keyframes cfFadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
50% {
opacity:0;
}
75% {
opacity:0;
}
100% {
opacity:1;
}
}

#cf1 img.first {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf1 img.second {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf1 img.third {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf1 img.fourth {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf1 img:nth-of-type(1) {
animation-delay: 6s;
}
#cf1 img:nth-of-type(2) {
animation-delay: 4s;
}
#cf1 img:nth-of-type(3) {
animation-delay: 2s;
}
#cf1 img:nth-of-type(4) {
animation-delay: 0;
}
 
Upvote 0 Downvote
OMG - NOOO WAIT, IGNORE THE ABOVE


IGNORE THAT (ITS EXPERIMENTAL PLAYAROUND CSS CODE...LMAO)

THIS IS THE CSS STYLESHEET IVE APPLIED TO THE SITE

bsplumbandelectric.co.uk




body
{
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #00FFFF 200%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #00FFFF 200%);

/* Opera */
background-image: -o-linear-gradient(left, #FFFFFF 0%, #00FFFF 200%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(2, #00FFFF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #00FFFF 200%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #FFFFFF 0%, #00FFFF 200%);
font-family: Helvetica, Times, Geneva;
margin: 0;
padding: 0;
border: 0;
font-size:18px;
font-style;plain;


}

#page { width:100%; }




P
{
font-family:Moonlight, Clarendon, Comic-Sans, Comic Sans, Palatino;
font-size:12pt;
font-style:bold;
color:white;
text-indent:72px;
}


#div-Logo {
position:absolute;


}

#CallNow {
position:absolute;
left:75%;
top:2.5%


}



#cssmenu
{
position:absolute;
top:180px;
width:180px;
list-style:none;
margin:0;
padding:1px;
background-color:#FFFFFF;


}


#cssmenu ul
{
margin:0px;
padding:0px;
list-style:none;

}

#cssmenu li a

{


display:block;
height:25px;
margin-top:1px;
padding-left:15px;
background-color:white;
border-left:10px solid cyan;
font-family:arial;
font-size:12px;
text-decoration:none;
color:#909090;
line-height:25px;

}



#cssmenu li a:hover
{
background-color:cyan;

border-left:10px solid #CCCCCC;

color:#068481;
}


#csmenu a.first
{
margin-top:0;


#SafeInfo

{





}
}
.mainContent
{

position:absolute;
padding: 8px 8px 8px 8px;
top:176px;
left:220px;
height:400px;
width:760px;
background-color:white;
-moz-border-radius: 15px;
border-radius: 15px;


}

#mainText

{
color:#909090;
font-size:12px;
width:380px;
height:auto;

}



#services1

{
position:absolute;
padding: 10px 10px 10px 10px;
top:176px;
left:220px;
height:200px;
width:220px;
background-color:white;
color:grey;
font-size:16;
font-weight:bold;
text-align:center;
text-shadow: 1px 1px 1px #909090;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;

}



#services2


{
position:absolute;
padding: 10px 10px 10px 10px;
top:176px;
left:480px;
height:200px;
width:220px;
background-color:white;
color:grey;
font-size:16;
font-weight:bold;
text-align:center;
text-shadow: 1px 1px 1px #909090;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;

}



#services3

{
position:absolute;
padding: 10px 10px 10px 10px;
top:176px;
left:740px;
height:200px;
width:220px;
background-color:white;
color:grey;
font-size:16;
font-weight:bold;
text-align:center;
text-shadow: 1px 1px 1px #909090;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;

}





#GasInfo

{

position:absolute;
top:395px;
left:220px;
height:400px;
width:480px;
background-color:white;
color:#909090;
font-size:14;
margin-top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
-moz-border-radius: 15px;
border-radius: 15px;
border:1px;1px;1px;1px;
border-style:solid;
border-color:#909090;
padding:10px;10px;10px;10px;

}


#PlumbInfo

{

position:absolute;
top:395px;
left:480px;
height:400px;
width:480px;
background-color:white;
color:#909090;
font-size:14;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;


}


#ElectricInfo

{

position:absolute;
top:395px;
right:40px;
height:400px;
width:480px;
background-color:white;
color:#909090;
font-size:14;
margin-top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px;2px;2px;2px;
border-style:solid;
border-color:#909090;
padding:10px;10px;10px;10px;

}






#cf {
position:absolute;
height:330px;
width:310px;

}
#cf img {
position:absolute;
top:-180px;
left:400px;
// left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
-moz-border-radius: 15px;
border-radius: 15px;
}

@keyframes cfFadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
50% {
opacity:0;
}
75% {
opacity:0;
}
100% {
opacity:1;
}
}

#cf img.first {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf img.second {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf img.third {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf img.fourth {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf img:nth-of-type(1) {
animation-delay: 6s;
}
#cf img:nth-of-type(2) {
animation-delay: 4s;
}
#cf img:nth-of-type(3) {
animation-delay: 2s;
}
#cf img:nth-of-type(4) {
animation-delay: 0;
}

#cf1 {
position:absolute;
height:330px;
width:310px;

}
#cf1 img {
position:absolute;
top:20px;
left:420px;
// left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
-moz-border-radius: 15px;
border-radius: 15px;
}

@keyframes cfFadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
50% {
opacity:0;
}
75% {
opacity:0;
}
100% {
opacity:1;
}
}

#cf1 img.first {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf1 img.second {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf1 img.third {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf1 img.fourth {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

#cf1 img:nth-of-type(1) {
animation-delay: 6s;
}
#cf1 img:nth-of-type(2) {
animation-delay: 4s;
}
#cf1 img:nth-of-type(3) {
animation-delay: 2s;
}
#cf1 img:nth-of-type(4) {
animation-delay: 0;
}






What am i doing wrong ? how can i get the .maincontent and the services boxes to 'scale' accordingly to screen resolution ? when i go for larger resolutions than 1024 x 768 - the logo and the callnow image scale well, menu scales well - but not the maincontent or the services boxes.

what am i doing wrong ?
 
Upvote 0 Downvote
Get rid of absolute positioning, use %, em and ex NOT points or pixels.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
390
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
306
Rayj0000
Rayj0000
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
356
malpa
malpa
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
416
Kennelbloke
Kennelbloke
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
320
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top