Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    713
    Thanks
    165
    Thanked 0 Times in 0 Posts

    Layout of my intranet website was change when I access it on different computers

    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:
    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    713
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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)
    Code:
    <!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>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It seems like you are not aware of the pitfalls of excessive use of absolute positions. 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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Tivie (10-29-2010)

  • #5
    New Coder
    Join Date
    Oct 2010
    Location
    Norwich, CT
    Posts
    35
    Thanks
    4
    Thanked 3 Times in 3 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    713
    Thanks
    165
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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….

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    713
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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.

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Last edited by teedoff; 10-29-2010 at 01:53 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •