SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Bangalore, India, India
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confusion with position and z-index

    Hi there everyone!

    I am having a serious brain-whacking problem... There might me an easy solution for this, but it's nowhere in my sight!

    Well, the thing is that I want to display a textarea and a select option inside a div which has inset box-shadows. I need to give a white bgcolor to the textarea and a bluish one to the area after that. If i apply a color to the background of the elements, it overlaps the box shadows.
    Here's my HTML
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<!--TITLE-->
    	<title>Paste stuff</title>
    	<!--STYLES-->
    	<link rel="stylesheet" href="styles/test.css" />
    	<link rel="stylesheet" href="styles/htmlreset.css" />
    </head>
    <body>
    <div class="wrapper">
    
    	<div class="prettybox">
    		<div class="textarea">
    			<textarea name="code" class="codesnip" placeholder="Write something..."></textarea>
    		</div>
    		<div class="langselect">
    			<label for="langselect">Select language</label>
    			<ul>
    				<li data-value="html"><a href="#">HTML</a></li>
    				<li data-value="css"><a href="#">CSS</a></li>
    				<li data-value="javascript"><a href="#">JavaScript</a></li>
    			</ul>
    			<input type="hidden" id="langInput" name="codelang" value="plain" />
    		</div>
    	</div>
    			
    </div>
    </body>
    </html>

    Now I tried applying a negative z-index to the child elements, and the shadows are displaying alright. But since I used -ve z-index, textarea is inaccessible and select buttons are not clickable! What can be the solution?

    You can have a looksie here : http://tinkerbin.com/oevsUN4K

    Code:
    * { margin:0; padding:0; }
    body {
    	background:#b3dbf0 ;
    }
    
    .wrapper {
    	margin:0 auto;
    	width:960px;
    	text-align:center;
    }
    
    
    .prettybox {
    	border:5px solid #eef8fd;
    	-webkit-border-radius: 20px;
    	-moz-border-radius: 20px;
    	border-radius: 20px;
    	-webkit-box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3);
    	-moz-box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3);
    	box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3);
    	position:relative;
    	margin-top:40px;
    }
    .textarea {
    	position:inherit;
    	min-height:300px;
    	max-height:600px;
    	z-index:-1;
    }
    textarea  {
    	outline: none !important;
    	min-height:300px;
    	max-height:600px;
    	width:100%;
    	border:0;
    	overflow:hidden;
    	background:#fff;
    	resize:none;
    	position:inherit;
    	z-index:12;
    }
    
    .langselect {
    	background:#e2f3fb;
    	border-top:1px solid #d6e9f2;
    	z-index:-10;
    	position:inherit;
    
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    One thing you could do, instead of the z-indices, is put a 10px margin on the textarea and langselect boxes, and then remove the bg colors and put a bg image on the prettybox that is blue on the bottom and white at the top.

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Bangalore, India, India
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a really good idea ralph.m! I'll have a look into it.


Bookmarks

Posting Permissions

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