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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with z-index

    I'm a newbie to both html and css. I am trying to stack some elements in an html form. The end result needs to be input text elements on top of the stack- with their solid white backgrounds visible.

    Right now I've got:

    Background image
    div.transbox - transparent
    table to hold content - transparent
    input boxes - want a solid white background - but right now the bacground is transparent


    Following is my CSS declarations list

    Code:
    div.background
    {
    position: relative;
    width:100%;
    height:840px;
    background: url(/schedule/images/rainbow.jpg) repeat;
    border:5px solid blue;
    }
    div.transbox
    {
    position: relative;
    z-index:0;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color:#ffffff;
    border:3px solid blue;
    opacity:0.60;
    filter:alpha(opacity=65); /* For IE8 and earlier */
    }
    table
    {
    position: relative;
    z-index:100;
    border:1px solid black;
    background-color:#ffffff;
    
    }
    input[type="text"]
    {
    position: relative;
    z-index:200;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color:white;
    }
    input[type="email"]
    {
    position: relative;
    z-index:250;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color:white;
    }
    input[type="password"]
    {
    position: relative;
    z-index:300;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: solid white;
    }
    </style>
    Following is my form code

    PHP Code:
    <form action="" method="post">
    <div class="background">
        <div class="transbox" style="margin:100px 100px;">
            <table align="center" style = "width=75%; color:black; font-weight:bold">
            <tr>
            <td align="right">
            <label for="fname">First Name</label>
            </td>
            <td style="position: relative; z-index: 150;" align="left">
                <input tabindex="1" type="text" name="fname" />
                <?php if (isset($errors['fname'])): ?>
                <span class="error"><?php echo $errors['fname']; ?></span>
                <?php endif;
            </
    td>
            <
    td align="right">
                <
    label for="password">Password</label>
            </
    td>
            <
    td align="left">
                <
    input tabindex="4" type "password" name="password" />
                <?
    php if (isset($errors['password'])): ?>
                <span class="error"><?php echo $errors['password'];?></span>
                <?php endif; ?><br />
            </td>
            </tr>
            <tr>
            <td align="right">
                <label for="lname">Last Name</label>
            </td>
            <td align="left">
                <input tabindex="2" type="text" name="lname" />
                <?php if (isset($errors['lname'])): ?>
                <span class="error"><?php echo $errors['lname']; ?></span>
                <?php endif; ?><br />
            </td>
            <td align="right">
                <label for="password2">Verify Password</label>        
            </td>
            <td align="left">
                <input tabindex="5" type = "password" name="password2" />
                <?php if (isset($errors['password2'])): ?>
                <span class="error"><?php echo $errors['password2'];?></span>
                <?php endif; ?><br />
            </td>
            </tr>
            <tr>
            <td align="right">
                <label for="email">Email Address</label>
            </td>
            <td align="left">
                <input tabindex="3" type="email" name="email" />
                <?php if (isset($errors['email'])): ?>
                <span class="error"><?php echo $errors['email']; ?></span>
                <?php endif; ?><br />
            </td>
            <td align="right">
                <input style="font-weight:bold;" tabindex="6"type="submit" value="Submit" />
            </td>
            </tr>
            </table>
        </div>
    </div>
    </form>
    The layering is functioning at some level, because when I change the designated levels, the input elements drop lower in the stack and I cannot enter data, nor click the submit button.

    At this point the input elements are on top of the stack (or so I assume because I can enter data and click the submit button). So... if they are on top, why is the background of each element still transparent. I am trying to get it so the background of each element is a solid white.

    Any suggestions are welcome.

    Thanks Much:

    Pavilion

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Try assigning a class to all of your inputs and in your CSS for that class add z-index: 5000; this should bring all your input to the top of everything. Then you can set background: #ffffff for the same class
    Last edited by sean3838; 03-06-2012 at 05:42 AM.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,441
    Thanks
    23
    Thanked 630 Times in 629 Posts
    You really don't need to use z-index here at all.
    I am not going to mess with it right now, but think you need to look at this http://www.css3.info/introduction-opacity-rgba/

    But you have other problems.
    Code:
            <td style="position: relative; z-index: 150;" align="left">
                <input tabindex="1" type="text" name="fname" />
                <?php if (isset($errors['fname'])): ?>
                <span class="error"><?php echo $errors['fname']; ?></span>
                <?php endif;  // messing the ?>
            </td>
    Not sure what $errors['fname'] is, but it does not print in the input box.

    Better To see it put this
    PHP Code:
    <?php
    $errors
    ["fname"] = 'a Name here';
    ?>
    Above the <form> tag and change the above code to this:
    PHP Code:
    <td align="left">
        <input tabindex="1" type="text" name="fname" value="<?php echo isset($errors["fname"]) ? $errors["fname"]:''?>" />
    </td>
    and then comment out $errors["fname"] = 'a Name here';

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,441
    Thanks
    23
    Thanked 630 Times in 629 Posts
    OK. Look at this. Is it anywhere near what you want and if not please tell me where it needs to be corrected and how?
    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" xml:lang="en" lang="en">
    <head>
    	<title>New document</title>
    	<meta name="generator" content="TSW WebCoder 2010" />
    <style type="text/css">
    div.background
    {
    width:100%;
    height:840px;
    background: url(/schedule/images/rainbow.jpg) repeat;
    border:5px solid blue;
    }
    div.transbox
    {
    height: 81px;
    margin:100px 100px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color:#ffffff;
    border:3px solid blue;
    opacity:0.60;
    filter:alpha(opacity=65); /* For IE8 and earlier */
    }
    table
    {
    position:relative;
    top: -184px;
    border:1px solid black;
    margin: 0 auto;
    }
    input
    {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: white;
    }
    </style>
    </head>
    
    <body>
    <?php
    $errors["fname"] = 'a Name here';
    ?>
    <form action="" method="post">
    	<div class="background">
    	<div class="transbox"></div>
    		<table border="0" style = "width=75%; color:black; font-weight:bold">
    		<tr>
    			<td align="right">
    				<label for="fname">First Name</label>
    			</td>
    			<td align="left">
    				<input tabindex="1" type="text" name="fname" value="<?php echo isset($errors["fname"]) ? $errors["fname"]:''; ?>"  />
    			</td>
    			<td align="right">
    				<label for="password">Password</label>
    			</td>
    			<td align="left">
    				<input tabindex="4" type = "password" name="password" value="<?php echo isset($errors["password"]) ? $errors["password"]:''; ?>" />
    			</td>
    		</tr>
    		<tr>
    			<td align="right">
    			<label for="lname">Last Name</label>
    			</td>
    			<td align="left">
    				<input tabindex="2" type="text" name="lname" value="<?php echo isset($errors["lname"]) ? $errors["lname"]:''; ?>" />
    			</td>
    			<td align="right">
    
    			</td>
    			<td align="left">
    				<input tabindex="5" type = "password" name="password2" value="<?php echo isset($errors["password2"]) ? $errors["password2"]:''; ?>" />
    			</td>
    		</tr>
    		<tr>
    			<td align="right">
    				<label for="email">Email Address</label>
    			</td>
    			<td align="left">
    				<input tabindex="3" type="email" name="email" value="<?php echo isset($errors["email"]) ? $errors["email"]:''; ?>" />
    			</td>
    			<td align="right">
    				<input style="font-weight:bold;" tabindex="6" type="submit" value="Submit" />
    			</td>
    		</tr>
    		</table>
    	</div>
    </form>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Sunfighter (and everyone else):

    A few things - Sunfighter - the php is on track. I copied and pasted in a hurry last night - just before going to bed. I was trying to cut out some in-line comments and unintentionally deleted the closing php tag. But it is there. The php code works flawlessly - after much testing and exasperation - but it is working.

    I spent all of last week, learning basic php concepts and coding. Once I got the php working, I decided I'd format the page.

    Which brings me to all of you and my problems with stacking elements.

    Thank you all for your suggestions. Here are the results:

    • Sunfighter, the solution you gave me here - does not work. The input elements actually drop to the bottom of the stack and can not be seen, nor accessed for data entry purposes.
    • sean - I took your suggestion and assigned properties to all of my inputs. I gave the input class a z-index of 5000, it is still not working. I can enter data into an input element. But the element does not seem to be "sitting on top of the stack". There is still some opacity to it.
    • Sunfighter, I took a look at the link you provided. Thank you. It was helpful. And I did try testing this solution out as well. I inserted the following code into my first input element style attributes.
      Code:
      background-color: rgba(255,0,0,1); }
      I left the background-color as red because I wanted it to stand out if it worked. After adding that snippet, the background color did change to red, but it seemed transparent. It was still letting color through from my background image.


    Thank you everyone, for your assistance with this problem. It shouldn't be such a difficult thing. I'm not sure my syntax is correct for the z-index. Just now I set my input elements to a z-index of -5000 and I can still enter data and see the elements. So... where am I going wrong. Following is my code as it stands now.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Contact Form</title>
    	<style type="text/css">
    		span.error
    		{
    			color: #F00;
    			font-weight: bold;
    		}
    		div.background
    		{
    			position: relative;
    			width:100%;
    			height:840px;
    			background: url(/schedule/images/rainbow.jpg) repeat;
    			border:5px solid blue;
    		}
    		div.transbox
    		{
    			position: relative;
    			z-index:0;
    			border-top-left-radius: 15px;
    			border-bottom-right-radius: 15px;
    			border-top-right-radius: 15px;
    			border-bottom-left-radius: 15px;
    			background-color:#ffffff;
    			border:3px solid blue;
    			opacity:0.60;
    			filter:alpha(opacity=65); /* For IE8 and earlier */
    		}
    		table
    		{
    			position: relative;
    			z-index:100;
    			border:1px solid black;
    			background-color:#ffffff;
    		}
    		input
    		{
    			position: relative;
    			z-index:-5000;
    			border-top-right-radius: 12px;
    			border-bottom-right-radius: 12px;
    			background-color:white;
    		}
    	</style>
    </head>
    <form action="" method="post">
    <div class="background">
    	<div class="transbox" style="margin:100px 100px;">
    		<table align="center" style = "width=75%; color:black; font-weight:bold">
    		<tr>
    		<td align="right">
    		<label for="fname">First Name</label>
    		</td>
    		<td align="left">
    			<input tabindex="1" type="text" name="fname" />
    </td>
    </table>
    </div>
    </div>
    </form>
    </html>
    I only included my first input element. If we can get this element sitting on top of the stack, then the others should follow suite. You'll see that, currently, my input element z-index sits at -5000. Yet I can still see the element and enter data.

    Something is wrong with the way I'm using the z-index.

    Thanks again for your help:

    Pavilion


  •  

    Posting Permissions

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