i have issue hiding overflow contents / div (#map_Marker_Check_Block) inside another div. The parent div position nearly mid of screen. The div "map_Marker_Check_Block" is position to right -12em. so when user click this div, jquery plays animation and slide whole div to position right 0. the functional part is working fine, is just have issue of hiding #map_Marker_Check_Block div (15em-12em). note because i need y-scrolbar to see contents in hidden div contents also.
html
<div id="map_Marker_Check_Block">
<div class="markerDiv" id="maker_school">
<label class="marker_label">School</label> <input class=
"marker_ckeckbox" name="markerType" type="checkbox" value="school">
</div><br>
<div class="markerDiv" id="maker_gym">
<label class="marker_label">Gym</label> <input class="marker_ckeckbox"
name="markerType" type="checkbox" value="gym">
</div><br>
</div>
css
#sp_tab2 {
position:relative;
}
#map_Marker_Check_Block {
display:block;
position:absolute;
width:15em;
height:400px;
top:0;
right:-12em;
z-index:10;
overflow-x:hidden;
overflow-y:auto;
}
ahhh!! late night work and this is what happened, my fault. i miss overflow: hidden property in parent tab.
#sp_tab2 {
position:relative;
overflow:hidden;
}
Related
I am trying to create an opt-in area that stretches to hold its contents when the browser is resized (less width). I am trying to duplicate the orange picture area of this theme: http://anpsthemes.com/demo/?theme=constructo (Classic demo) where it says "FAST AND RELIABLE SERVICE FOR YOUR PROJECT..." Note that the background image doesn't stretch, but when you resize the browser it shows more of the image. This is what I would like.
I had no luck with the image, so tried background color, and the same thing happened, the background image or color doesn't "stretch" behind the content. Here is my code so far:
.oi {
/*background:url(opt-bg.jpg);*/
background-color:#f46a68;
width:100%;
min-height: 100px;
}
.oi-container{
max-width: 1310px;
margin: 0 auto 0 auto;
padding-top:22px;
}
.left{
max-width:670px;
float:left;
}
.right{
max-width:570px;
margin-left:30px;
float:left;
}
<div class="oi">
<div class="oi-container">
<div class="left">
<div class="txt-top">GET FREE TIPS TO CREATE THE LIFE YOU LOVE</div>
<div class="txt-bot">+ BONUS Why most health businesses fail and how to avoid it</div>
</div>
<div class="right">
<form action="#" method="post" id="oi">
<input type="text" class="input" value="first name" />
<input type="text" class="input" value="email address" />
<input type="button" onclick="document.getElementById('oi').submit();" value"get it" class="btn-get-it" />
</form>
</div>
</div>
</div>
I did inspect the theme's code, but can't really duplicate it, I'm not good with position divs within each other. You can see the code live here: http://itlive.ca/oi
Any help or a point in the right direction would be greatly appreciated.
.left and .right are floated, and therefore the containing elements, .oi for example, won't contain them, which is why they spill over when the window is resized.
Clearing those floats somehow (adding another element below and applying the clear CSS property, or using the clearfix method) might be a solution.
I am creating a website in C# where I need to add content on top of an image. The image should not be set to a background image, except it should be set within the img tag. Whenever I try to add content, such as, a table or label to appear on top of the image, it either appears before or after the image, and not on the image itself. How do I make the content appear on the image I have added? Please help.
Here's my code :
<form id="form1" runat="server">
<div id="main">
<div id="bg2">
<img src="Pics/slide.png" style="width:100%; height:100%">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</img>
</div>
</div>
</form>
Add position:relative; to the containing element e.g. bg2 and position:absolute; to your text.
This will take the content out of the document flow and allow you to position the text, relative to the parent relatively position element, in this case bg2.
For example:
#bg2
{
position:relative;
}
#bg2 input[type="text"]
{
position:absolute;
top:50%;
left:50%;
}
Further reading
Take a look at absolute positioning:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
So, I did a search and it seems that every single person who's asked this exact same question has actually had success with an answer given by someone - I tried multiple different methods and honestly, I'm about to have a meltdown.
I've tried floating left, floating right, inline-block, etc, and none of it has seemed to work. I am at a loss as to what I'm doing wrong, but it's driving me nuts.
Here's the HTML I'm trying to get on the same line:
<div class="search-and-staff-app-button">
<div class="search-position">
<form method="get" id="sb_searchform" action="<?php bloginfo('home'); ?>/">
<div class='search-box'>
<input name="s" id="s" class='search-input' placeholder='Search' type='text' />
<img onclick="document.getElementById('sb_searchform').submit();" class='search-img' src='<?php bloginfo('template_url'); ?>/img/search.png'>
</div>
</form>
</div>
<div id="staffAppButtonPlaceholder" class="staff-app-position"></div>
</div>
and the CSS:
.search-and-staff-app-button {
width:360px;
margin:0px;
float:right;
display: inline-block;
}
.search-position {
float:left;
}
.staff-app-position {
float:left;
}
What am I doing wrong? I've tried Getting 2 divs on the same line and this doesn't work either.
Any help would be super appreciated!
-Stu
To place the search-position and staffAppButtonPlaceholder divs on the same line, first float the search-position div:
.search-position {
float: left;
}
Then add some content to the placeholder:
<div id="staffAppButtonPlaceholder" class="staff-app-position">Content</div>
Finally, increase the width of the containing div to allow the elements to fit side-by-side:
.search-and-staff-app-button {
width:760px;
Both divs will now be aligned horizontally.
http://jsfiddle.net/jzefu2j9/1/
Here is a little example, maybe it will help you. I used flexbox, which in my opinion is a great solution for aligning.
.search-and-staff-app-button{
display: flex;
background:red;
align-items:center;
}
.search-and-staff-app-button > div{
box-sizing:border-box;
display:block;
flex:1 50%;
align-self:center;
padding:1em;
}
http://jsfiddle.net/pulamc/u9nLwacs/
add style="position:relative" to your outer div. Then make the inner div's style="position:absolute;left:0". You will have to manually set the left value for each of the divs. The downside is that you will have to know the width of the other divs on the same line.
I have a structure where there is a container and there are two slides in it. There is one text input field in each slide.
When input field on the first slide is focused, if user hits TAB key, automatically focus gets shifted on the input field of the second slide and second slide gets visible. (notice that margin-left:0px !impotant is still applied but still DIV is moved)
I don't want to disable TAB key which also means using tabindex="-1" is not a solution because it will isolate the text input from navigation .
I don't mind if focus is shifted to the second input field, but second slide should not move and get visible. I tried using margin-left:0px !important it didn't work.
How do I prevent this behavior using HTML and CSS?
Live Example is here
HTML
<div class="container">
<div class="slider">
<div class="inner">
<input type="text" placeholder="please click me and hit tab">
</div>
<div class="inner" style="background:#797979">
<input type="text">
</div>
</div>
</div>
CSS
.container{
margin-top:200px;
margin-left:300px;
height:300px;
width:300px;
border:1px solid red;
overflow:hidden;
}
.slider{
margin-top:0px;
margin-left:0px;
height:100%;
width:200%;
}
.inner{
margin-top:0px;
margin-left:0px;
height:100%;
width:50%;
background:#cecece;
float:left
}
input{
width:200px;
margin-top:20px;
margin-left:46px;
height:40px;
color:black;
padding-left:2%
}
The easiest way to do this would be to add tabindex="-1" as a property to the second input field (or whichever ones are necessary, depending on your preference). It would look something like this:
...
<input type="text" tabindex="-1">
...
Hope this helps.
Does anyone know of a tutorial on how to do this, or does anyone have a little example?
example: http://hazelmade.com/projects.html
The 'lifted corners' example on this CSS drop-shadows without images demo page shows it's possible without using images. It relies on CSS3 support, specifically box-shadow and transform but this is to be expected from a pure CSS solution.
Full details of the technique can be found in the main article by Nicolas Gallagher.
The shadow on that site is a custom made image tailored to the specific width of those elements.
If you wanted to follow a similar technique that they did, you could just add a child image absolutely positioned below the div...
jsfiddle example: http://jsfiddle.net/gbFNk/
HTML:
<div id="example">
content here...
<img id="shadow" src="http://hazelmade.com/images/drop_shadow.png" />
</div>
css:
#example {
width:796px; //your tailor made shadow needs to be this long
height:100px;
position:relative;
background:grey;
}
#shadow {
position:absolute;
bottom:-15px; //this is the height of the custom image.
}
Alternatively, if you need a drop shadow like that with varying width you make 2 shadows (one for each corner) and do something like the following:
HTML:
<div id="example">
content here...
<div id="dropshadow">
<img class="left_shadow" src="leftshadow.png" />
<img class="right_shadow" src="rightshadow.png" />
<div style="clear:both"></div>
</div>
</div>
css:
#example {
width:796px;
height:100px;
position:relative;
background:grey;
}
#dropshadow {
width:796px; //needs to be the same width as the parent div
position:absolute;
bottom:-15px; //this still needs to be the height of the custom images.
}
#dropshadow img.left_shadow {
float:left;
}
#dropshadow img.right_shadow {
float:right;
}