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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts

    scroll bars showing up!

    In the following code I am having trouble with scroll bars showing up what am I doing wrong?

    Code:
    <STYLE TYPE="text/css">
    .Box{
    position: absolute;
    border-style: Solid;
    border-color: Black;
    background-color: Green;
    width: 100px;
    height: 100px;
    Z-index: 1;
    }
    </STYLE>
    </head>
    
    <BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="red">
    <Div Class=Box>
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		1
    	</Div>
    </Div>
    <Div Class=Box Style="left: 50%;margin: 0 0 0 -50px">
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		2
    	</Div>
    </Div>
    <Div Class=Box Style="left: 100%;margin: 0 0 0 -100px">
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		3
    	</Div>
    </Div>
    
    <Div Class=Box Style="top: 50%;margin: -50px 0 0 0">
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		4
    	</Div>
    </Div>
    <Div Class=Box Style="left: 50%;top: 50%;margin: -50px 0 0 -50px">
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		5
    	</Div>
    </Div>
    <Div Class=Box Style="left: 100%;top: 50%;margin: -50px 0 0 -100px">
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		6
    	</Div>
    </Div>
    
    <Div Class=Box Style="top: 100%;margin: -100px 0 0 0">
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		7
    	</Div>
    </Div>
    <Div Class=Box Style="left: 50%;top: 100%;margin: -100px 0 0 -50px">
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		8
    	</Div>
    </Div>
    <Div Class=Box Style="left: 100%;top: 100%;margin: -100px 0 0 -100px">
    	<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		9
    	</Div>
    </Div>
    I know that if I do just this
    Code:
    <STYLE TYPE="text/css">
    .Box{
    position: absolute;
    border-style: Solid;
    border-color: Black;
    background-color: Green;
    width: 100px;
    height: 100px;
    Z-index: 1;
    }
    </STYLE>
    </head>
    
    <BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="red">
    <Div Class=Box>1</Div>
    <Div Class=Box Style="left: 50%;margin: 0 0 0 -50px">2</Div>
    <Div Class=Box Style="left: 100%;margin: 0 0 0 -100px">3</Div>
    
    <Div Class=Box Style="top: 50%;margin: -50px 0 0 0">4</Div>
    <Div Class=Box Style="left: 50%;top: 50%;margin: -50px 0 0 -50px">5</Div>
    <Div Class=Box Style="left: 100%;top: 50%;margin: -50px 0 0 -100px">6</Div>
    
    <Div Class=Box Style="top: 100%;margin: -100px 0 0 0">7</Div>
    <Div Class=Box Style="left: 50%;top: 100%;margin: -100px 0 0 -50px">8</Div>
    <Div Class=Box Style="left: 100%;top: 100%;margin: -100px 0 0 -100px">9</Div>
    It works fine! so I know it has to do with this part

    <Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    3
    </Div>

    on the ones on the outside so 3 6 7 8 and 9 all cause the problem but 1 2 4 and 5

    Any thoughts?

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Well for starters fix your code, make all tags and attributes lowercase and use quotes (I prefer ") on all attributes ..


    And of course USE CODE TAGS PLEASE!

    [code]YOUR CODE HERE!![/code]
    Omnis mico antequam dominus Spookster!

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like this

    Code:
    <div class="box" style="left: 100%;top: 100%;margin: -100px 0 0 -100px">
    	<code style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;z-index:1;">
    		9
    	</code>
    </div>
    or this

    Code:
    <code class="box" style="left: 100%;top: 100%;margin: -100px 0 0 -100px">
    	<code style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;z-index:1;">
    		9
    	</code>
    </code>

  • #4
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    I mean use the code tags around your actual code you're posting ...

    See http://www.codingforums.com/misc.php?action=bbcode for more information
    Omnis mico antequam dominus Spookster!

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok but I am useing code tags around the code above??

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I have updated the code as you had indicated to

    Code:
    <html>
    <head>
    <title>Box Positions</title>
    <style type="text/css">
    .box{
    position: absolute;
    border-style: solid;
    border-color: black;
    background-color: green;
    width: 100px;
    height: 100px;
    z-index: 1;
    }
    </style>
    </head>
    
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="red">
    <div class="box">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		1
    	</div>
    </div>
    <div class="box" style="left: 50%;margin: 0 0 0 -50px">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		2
    	</div>
    </div>
    <div class="box" style="left: 100%;margin: 0 0 0 -100px">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		3
    	</div>
    </div>
    
    <div class="box" style="top: 50%;margin: -50px 0 0 0">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		4
    	</div>
    </div>
    <div class="box" style="left: 50%;top: 50%;margin: -50px 0 0 -50px">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		5
    	</div>
    </div>
    <div class="box" style="left: 100%;top: 50%;margin: -50px 0 0 -100px">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		6
    	</div>
    </div>
    
    <div class="box" style="top: 100%;margin: -100px 0 0 0">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		7
    	</div>
    </div>
    <div class="box" style="left: 50%;top: 100%;margin: -100px 0 0 -50px">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		8
    	</div>
    </div>
    <div class="box" style="left: 100%;top: 100%;margin: -100px 0 0 -100px">
    	<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
    		9
    	</div>
    </div>
    
    </body>
    </html>
    But it still going over the window screen width? and height?


  •  

    Posting Permissions

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