...

View Full Version : Layout of my intranet website was change when I access it on different computers



newphpcoder
10-26-2010, 09:27 AM
Good day!
I created my website on my computer and now I put it on my testing server and I found out that the size background of my website was change even I used those css code:


<style type="text/css">
html,body{
overflow:hidden;
}
BODY {
background-image: url(bground.png);
background-attachment: fixed;
}
</style>

I used those codes to fixed the background but my problem is the background was doubled the image although it is fixed. Not only was the background change also the content of my website was dislocated. I want is only one output should be display in all computers.

It is possible that my website display should be dependent on the browser or the settings of the computer? So those in all computers the display of my website are all the same like what I browse in the internet?
On my used computers my website display is good, but when
I try to other computers it was display not so good I don’t know why. I need to fix it now because all the staff wants to see my website… I hope you can help me…
Thank you

abduraooft
10-26-2010, 09:40 AM
I hope you can help me… May be , but not with the given input. We need to see your complete html+CSS or a link to your page (you could upload them to a free host)

newphpcoder
10-27-2010, 12:58 AM
May be , but not with the given input. We need to see your complete html+CSS or a link to your page (you could upload them to a free host)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Company</title>
<style type="text/css">
html,body{
overflow:hidden;
}
BODY {
background-image: url(bground.png);
background-attachment: fixed;
}
-->
</style>

<style type="text/css">

#ddcolortabs{
margin-left: 2px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 2px;
}

#ddcolortabs ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}

#ddcolortabs a{
float:right;
color: white;
background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;
margin:115px 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:right;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:6px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}

#ddcolortabs a:hover{
background-color: #678b3f;
}

#ddcolortabs a:hover span{
background-color: #678b3f ;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #678b3f;
}
</style>

<style type="text/css">

#Layer1_background_green {
position:absolute;
width:980px;
height:392px;
z-index:1;
top: 149px;
left: 0px;
}
#Layer1_vertical_line {
position:absolute;
width:3px;
height:387px;
z-index:2;
left: 170px;
top: 153px;
}
#Layer4_horizontal_line {
position:absolute;
width:980px;
height:5px;
z-index:3;
left: 0px;
top: 150px;
}
#visionmission_flash {
position:absolute;
width:644px;
height:404px;
z-index:5;
left: 270px;
top: 156px;
}
#green_frame {
position:absolute;
width:172px;
height:385px;
z-index:6;
left: 0px;
top: 156px;
}
#nav_vertical {
position:absolute;
width:165px;
height:111px;
z-index:7;
left: 10px;
top: 363px;
}

#nav_vertical ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#nav_vertical li{
display:inline;
margin:0 0 0 0;
padding:0;
text-transform:uppercase;
}


#nav_vertical a{
float:left;
color: green;
/*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#nav_vertical a span{
float:left;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:9px 9px 2px 6px;
}


#nav_vertical a:hover{
color:#00CC00;
}

#nav_vertical a:hover span{
color: #00CC00 ;
}

#nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
/*background-color: #678b3f; */
color:#FFFFFF
}
#ds {
position:absolute;
width:73px;
height:72px;
z-index:8;
left: 0px;
top: 160px;
}
</style>
</head>
<body>
<div id="visionmission_flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="650" height="406">
<param name="movie" value="VISION_MISSION.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent"/>
<embed src="VISION_MISSION.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="650" height="406" wmode="transparent"></embed>
</object>
</div>
<form id="form1" name="form1" method="post" action="">
<div id="ddcolortabs">
<ul>
<li><a href="products.php" title="Products" target="_self"><span>Products</span></a></li>
<li><a href="event.php" title="Events" target="_self"><span>Events</span></a></li>
<li style="margin-left: 1px" id="current"><a href="company.php" title="Company" target="_self"><span>Company</span></a></li>
</ul>
</div>
<div id="ddcolortabsline"></div>
<div id="Layer1_background_green"><img src="layout_image/LINE.png" width="1020" height="417" /></div>
<div id="Layer4_horizontal_line"><img src="layout_image/horizontal_line.png" width="1020" height="5" /></div>
</form>
<div id="green_frame"><img src="layout_image/vertical left v01.jpg" width="174" height="410" /></div>
<div id="nav_vertical">
<ul>
<li id="current"><a href="visionmission.php" title="VISION AND MISSION" target="_self"><span>VISION AND MISSION</span></a></li>
<li><a href="qualitypolicy.php" title="QUALITY POLICY" target="_self"><span>QUALITY POLICY</span></a></li>
<li><a href="values.php" title="VALUES" target="_self"><span>VALUES</span></a></li>
</ul>
</div>
<div id="ds"><a href="company.php"><img src="layout_image/ds.png" width="170" height="200" border="0" /></a></div>
</body>
</html>

abduraooft
10-27-2010, 07:29 AM
It seems like you are not aware of the pitfalls of excessive use of absolute positions (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/). The absolute position are useful when we need to place one or two elements at a certain position (or may be one over another). Take a look at http://bonrouge.com/3c-hf-fluid.php to see some useful layout techniques using floats.

MissPhoenix
10-27-2010, 01:11 PM
Also, used fixed widths (pixels vs percents), and keep in mind, that people will have differing monitor sizing's when choosing your background. Choose a seamless background, either a tile, or one that fades to a solid color, so that the background color blends to the image color.

newphpcoder
10-28-2010, 09:42 AM
Good day!
I research on internet about auto fit of website or adapting the resolution of the monitor or screen of computer, but I can’t find the solution. I want is in any settings/resolution/size of monitor my website appearance was not change. Because now I got a problem that I can’t upload my website in a server because I notice that in other computer my website display was change or change the location of the content of my website, After I noticed that the background was doubled I put the background no repeat and after that on the below of webpage I see a white color.

Here is my css codes:


<style type="text/css">
html,body{
overflow:hidden;
}
BODY {
background-image: url(layout_image/bgroundv09.png);
background-attachment: fixed;
}
-->
</style>

<style type="text/css">

#ddcolortabs{
margin-left: 2px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 2px;
}

#ddcolortabs ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}

#ddcolortabs a{
float:right;
color: white;
background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;
margin:115px 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:right;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:6px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}

#ddcolortabs a:hover{
background-color: #678b3f;
}

#ddcolortabs a:hover span{
background-color: #678b3f ;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #678b3f;
}
</style>
<style type="text/css">

#Layer1_background_green {
position:absolute;
width:980px;
height:392px;
z-index:1;
top: 149px;
left: 0px;
}
#Layer1_vertical_line {
position:absolute;
width:3px;
height:387px;
z-index:2;
left: 170px;
top: 153px;
}
#Layer4_horizontal_line {
position:absolute;
width:980px;
height:5px;
z-index:3;
left: 0px;
top: 150px;
}
#visionmission_flash {
position:absolute;
width:644px;
height:404px;
z-index:5;
left: 270px;
top: 156px;
}
#green_frame {
position:absolute;
width:172px;
height:385px;
z-index:6;
left: 0px;
top: 156px;
}
#nav_vertical {
position:absolute;
width:165px;
height:111px;
z-index:7;
left: 10px;
top: 363px;
}

#nav_vertical ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#nav_vertical li{
display:inline;
margin:0 0 0 0;
padding:0;
text-transform:uppercase;
}


#nav_vertical a{
float:left;
color: green;
/*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#nav_vertical a span{
float:left;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:9px 9px 2px 6px;
}


#nav_vertical a:hover{
color:#00CC00;
}

#nav_vertical a:hover span{
color: #00CC00 ;
}

#nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
/*background-color: #678b3f; */
color:#FFFFFF
}
#ds {
position:absolute;
width:73px;
height:72px;
z-index:8;
left: 0px;
top: 160px;
}
</style>


Thank you….

abduraooft
10-28-2010, 10:05 AM
I research on internet about auto fit of website or adapting the resolution of the monitor or screen of computer, but I can’t find the solution. I want is in any settings/resolution/size of monitor my website appearance was not change. Have you read any of the links in my last post? There's no short cut, we have to follow the best practices.

newphpcoder
10-29-2010, 01:46 AM
Have you read any of the links in my last post? There's no short cut, we have to follow the best practices.

Yes, I read it... Actually I used Macromedia Dreamweaver to create my website and the css code is automatically coded, so I did not change the css position coded.

teedoff
10-29-2010, 01:50 AM
Dreamweaver does not automatically create CSS code. There are templates installed in dreamweaver that you can use that have styles already created, but if you create a new blank document then you would also need to create your own stylesheet and code it yourself.



Yes, I read it... Actually I used Macromedia Dreamweaver to create my website and the css code is automatically coded, so I did not change the css position coded.

That doesnt mean its the best way to do something and it also doesnt mean it cant be changed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum