Web Analytics Made Easy -
StatCounter layers - catch 22 or is there a way around it - CodingForum

Announcement

Collapse
No announcement yet.

layers - catch 22 or is there a way around it

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • layers - catch 22 or is there a way around it

    If I use percentage to define width of a layer etc and make the browsers width narrower the content shrinks but if I use pixels and make the browsers width narrower the content doesnt shrink. I want to use percentages so appearance will be centered on all types of monitors.

    e.g.
    Code:
    <div id="PageLocation" style="position:absolute; width:70%; left: 15%; height:50px; z-index:1; background-color:#990000; top: 200px;">Page location Page location Page location Page location Page location Page location</div>
    if i make the browser narrow it will appear like

    Page location
    Page location
    Page location
    Page location etc

    instead of Page location Page location Page location Page location etc

    Is there a way of stopping this?

    P.S have attached current code with layout
    Attached Files
    join a lotto syndicate http://www.v-w-d.com/156964ED
    the smarter way to play

  • #2
    You can use min-width:

    Code:
    #container {
     min-width :20em; /* adjust to the necessary width */
    }
    IE doesn't support this but IE7 will; for IE6 you can use this javascript.
    drums | web

    Comment


    • #3
      min-width works well, tried the javascript for IE but doesnt seem to work. anyone know any reasons why.
      join a lotto syndicate http://www.v-w-d.com/156964ED
      the smarter way to play

      Comment


      • #4
        We need to see your code for us to tell you why. You should also read this thread. http://www.codingforum.net/showthread.php?t=97590
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          This is my CSS
          Code:
          /* CSS Document */
          
          body
          {
           background-color:#EEEEEE; 
          }
          
          #heading 
          {
            position:absolute; 
            width:70%; 
            left: 15%; 
            min-width:44em; 
            max-width:50em; 
            min-height:100%; 
            z-index:1; 
            height:100px; 
            background-color:#00CC00; 
            top: 50px;
            overflow:auto;
          }
          
          #links
          {
          	position:absolute; 
          	width:70%; left: 15%; 
          	min-width:44em; 
          	max-width:50em; 
          	min-height:100%; 
          	z-index:1; 
          	height:50px;
          	background-color:#003366; 
          	top: 150px;
          }
          
          #page_location
          {
          	position:absolute; 
          	width:70%; 
          	left: 15%; 
          	min-width:44em; 
          	max-width:50em; 
          	min-height:100%; 
          	z-index:1; 
          	height:50px;
          	background-color:#990000; top: 200px;
          	overflow:visible;
          }
          
          
          
          #main
          {
          	position:absolute;
          	width:70%;
          	left: 15%; 
          	min-width:44em; 
          	max-width:50em; 
          	min-height:100%; 
          	z-index:1; 
          	height:400px;
          	background-color:#9900CC;
          	top: 250px;
          }
          
          #end
          {
          	position:absolute; 
          	width:70%; 
          	left: 15%; 
          	min-width:44em; 
          	max-width:50em; 
          	min-height:100%; 
          	z-index:1; 
          	height:50px;
          	background-color:#FFFF00;
          	top: 650px;
          }
          
          #end_border
          {
          	position:absolute; 
          	width:70%;
          	left: 15%;
          	min-width:44em; 
          	max-width:50em; 
          	min-height:100%; 
          	z-index:1; 
          	height:50px;
          	background-color:#EEEEEE; 
          	top: 700px;
          }
          This is my index page layout:
          Code:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
          <html>
          <head>
          <title>Untitled Document</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <link rel="stylesheet" type="text/css" href="cssfile.css">
          </head>
          <script type="text/javascript" src="minmax.js"></script>
          <body>
          <div id="heading">heading</div>    <!-- heading -->
          
          <div id="links">links</div>            <!-- links layer -->
          
          <div id="page_location">             <!-- page location info layer -->
          Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page
          </div>
          
          <div id="main">MAIN</div>         <!-- main content -->
          
          <div id="end">End</div>          <!-- end -->
          
          <div id="end_border"></div>       <!-- end border -->
          </body>
          </html>
          the JavaScript i got from the link above doesnt seem to be working for IE6

          is there any other way of stopping the shrinking other than something like
          Code:
          * html #main{width:800px};
          join a lotto syndicate http://www.v-w-d.com/156964ED
          the smarter way to play

          Comment


          • #6
            Did you read that thread?
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              yeah had a read thru it got the
              Code:
              * html #main{width:683px};
              from it. that works. it just means my page isnt exaclty centered if i view it on my laptop.
              i picked up the container div from the thread. Should i be using one.
              Also should i be using this bit of code.
              Code:
              <!--[if lte IE 6]>
              		<style type="text/css">
              		#outer { padding-left: 900px; float: left; }
              		#inner { margin-left: -900px; }
              		#container { position: relative; width: 100%; }
              		#content { width: 630px; height: 100%;}
              		#right { width: 225px; }
              		</style>
              	<![endif]-->
              join a lotto syndicate http://www.v-w-d.com/156964ED
              the smarter way to play

              Comment


              • #8
                You read the wrong thing. Yes the thing above is a variation of what you should be using. http://www.pmob.co.uk/temp/min-width-ie.htm (view the source).
                ||||If you are getting paid to do a job, don't ask for help on it!||||

                Comment


                • #9
                  have it working
                  added:
                  Code:
                  <!--[if IE]>
                  <style type="text/css">
                  #inner{padding-left:1000px;float:left;}
                  #content{margin-left:-1000px;}
                  </style>
                  <![endif]-->
                  to my code.

                  thanks fir the help.
                  join a lotto syndicate http://www.v-w-d.com/156964ED
                  the smarter way to play

                  Comment

                  Working...
                  X