Is it possible with CSS to set the position of a div to 8px left of center?
The reason for my asking, is that JQuery Mobile sets divs to the right by about 8px, and I would like to center an element, which would require applying a left correction of 8px.
My CSS:
.sectionMap{
width: 300px;
display: block;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
Any ideas?
Kinda hacky, but maybe something like this:
.sectionMap{
width: 300px;
display: block;
position:relative;
left:50%;
margin-left:-158px; /*Centered, minus 8px left*/
padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
DEMO
Related
I'm having trouble trying to get rid of these annoying corners. Is there any way to use border-radius without having this problem?
.buttons button{
width: 150px;
height: 65px;
border:1px solid black;
border-radius: 20px;
box-shadow: inset 0px 0px 4px 4px black;
font-size: 30px;
font-family: "Suisse Int'l";
background: #39C463;
margin-bottom: 40px;
}
How to avoid the white corner problem when using border-radius
I created an id wrapper in CSS:
#wrapper {
position: relative;
background: yellow;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width: 960px;
padding: 40px 35px 35px 35px;
margin: 0px auto;
}
class box in CSS:
float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
HTML:
<div id="wrapper"><div class="box">
<p>ini box 1</p>
</div> </div>
The problem is the box is out from the wrapper. What is the soultion?
Remove the float:left style from box css
.box {
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
}
Add overflow: auto to wrapper to clear the float of box.
I always recommend a clearing element after floats, old IE especially behaved unpredictably without them
<div id="wrapper">
<div class="box">
<p>ini box 1</p>
</div>
<div class='clr'></div>
</div>
additional CSS
.clr {
clear:both;
height:0px;
}
For the "range" input element in HTML5, there is a nice way to style the thumb and track separately. The only problem being it works differently on different browsers.
Daniel Stern has done some great work on this. Also he's written an online tool which generates the basic css styles for cross browser range input styling- range.css, I'm using these styles but I'm facing a few problems when using the z-index parameter.
In the webkit styles, its easy to give different z-index values to the thumb and track by setting the position to relative and assigning a z-index value.
This method doesn't work in the Firefox styles. Firefox would just ignore the z-index values of the track and thumb.
I am trying to draw a div element on the lower half of the range slider to make the lower and upper halves look different. So effectively i want my z-index values to be like this track < div < thumb
I have written a codepen to show this behavior. Its working perfectly in Chrome/Safari, but not in Firefox. Try opening it in Chrome/Safari to see how I it should behave in Firefox.
http://codepen.io/anon/pen/vOmQxr
How can i achieve similar behavior for Firefox? or is there any other way to style the upper and lower halves of the range slider separately for Firefox?(without external libs)
I know you asked this question a while ago but I actually spent some time to find a workaround solution for this issue.
The issue is z-index with pseudo elements of input range works differently on Firefox and Chrome. What you will have to do is to make the input range track's background to be transparent. Create a div divFill that will replicate the track and make it the lowest z-index. Then, divLowerFill is the next highest z-index. After that, put the input field as the next highest z-index. Since we made the background color for input range to be transparent, the lower elements should be visible. Of course, make the thumb pseudo element to be the highest z-index.
Although I didn't debug this on IE but the concept should work. Here's code snippet that I made some modifications on your Codepen code.
document.getElementById("rangeinput").addEventListener("input", function(e){
var rangeInput=document.getElementsByClassName("divLowerFill")[0]; rangeInput.style.width=e.target.offsetWidth*e.target.value/100 +"px";
});
.parent {
display:inline-block;
margin-left: 35px;
position:relative;
}
/* repplicating input range track background */
.divFill {
position: absolute;
width: 100%;
height: 6px;
top: 7px;
z-index: -2;
background: #00c9ff;
}
/* track fill */
.divLowerFill {
position: absolute;
height: 6px;
width: 70px;
top: 7px;
background-color: #273042;
z-index: 0;
pointer-events:none;
}
/* input range track style settings */
input[type=range] {
-webkit-appearance: none;
width: 70px;
margin: 2px 0;
vertical-align: middle;
position: relative;
background-color: transparent;
}
input[type=range]:focus {
outline: none;
}
/* Chrome, Safari track style settings */
input[type=range]::-webkit-slider-runnable-track {
width: 100px;
height: 6px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border-radius: 0px;
z-index: 1;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -2px;
z-index: 2000;
position: relative;
}
/* Firefox track style settings */
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: none transparent;
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
position: relative;
z-index: -1;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
/*cursor: pointer;*/
position: relative;
z-index: 100;
}
/* IE style settings */
input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #00c5fa;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #00c9ff;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
height: 6px;
z-index: 2000;
position: relative;
}
input[type=range]:focus::-ms-fill-lower {
background: #00c9ff;
}
input[type=range]:focus::-ms-fill-upper {
background: #05caff;
}
<div class="parent">
<div class="divFill"></div>
<div class="divLowerFill"></div>
<input id="rangeinput" type="range" min=0 max=100 value=100>
</div>
I wrote this code which appends movie posters to a selected div with an ID.
For whatever reason, appended elements end up outside (below) the div. When I check the HTML in my debugger, the elements are clearly inside the div in question.
I have no idea what's going on here, and couldn't find an answer by searching. Help would be greatly appreciated!
Here's the entire code. The DIV used is div.movieListBox_trans in the CSS. The point of all this is to margin the grid area for the posters to the center. However, since the elements end out outside, the margin-center attributes doesn't apply.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(dis) {
$("#displayBoxFind").append("<div id='movieListBox2' class='movieListBoxWatchque'><p class='box_title'>Lorem Ipsum</p><p class='box_description'>Lorem Ipsum</p></div>").slideDown();
for(var i=0; i<7; i++){
$("#movieListBox2").append("<div class='filmdiv'><img class='posterClickableNoMargin' data-movieId='dsfa' id='dsfa' src='dsfa' alt='No Poster'><div class='metadiv'><p class='film_title'>'dsfa'</p><p class='meta'>Genres: 'dsfa'</p><p class='meta'>Vote average: 'dsfa'</p><p class='meta'>Release date: </div></div>");
}
});
</script>
<style type="text/css">
div.movieListBox_trans{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
background: yellow;
opacity: 0,5;
}
div.filmdiv{
float: left;
width: 350px;
height: 180px;
margin: 15px;
}
div.metadiv{
float: right;
background: #DCDCDC;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
width: 200px;
height: 180px;
border-style:solid;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.poster{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 1px;
border-color: #D3D3D3;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.posterClickableNoMargin{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 3px;
border-color: black;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="displayBoxFind" class="movieListBox_trans"></div>
</body>
Add this style to fix the problem
div.movieListBox_trans {
overflow: hidden;
}
Fixed version http://jsbin.com/OSUkupO/2/edit
Basically you have the problem with float:left and context. Read this one How does the CSS Block Formatting Context work?
I have a parent div #modal_share with a defined height of 400px. I want it to extent its height to contain all its child divs when a new child div which is originally hidden, becomes visible.
Problem: Right now, when a hidden child div .modal_error_msg becomes visible, some divs below this newly visible div gets pushed outside its parent div.
How can I make the parent div #modal_share expand its height to contain all the visible child divs?
JSFiddle: http://jsfiddle.net/TEmGc/
CSS
#modal_share {
width: 565px;
height: 400px;
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
display: none;
}
.modal_big_hline {
width: 100%;
height: 1px;
margin-top: 25px;
border-top: 1px solid #CCC;
float: left;
}
.modal_error_msg {
width: auto;
height: 15px;
padding: 15px 25px;
margin: 0px 25px;
font-size: 12px;
color: #B79000;
border: 1px solid #E7BD72;
background: #FFF3A3;
clear: both;
display: none;
}
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
}
HTML Structure
<div id="#modal_share">
<div class="modal_error_msg"></div>
<div class="modal_big_hline"></div>
<div id="modal_big_button_container"></div>
</div>
For parent div #modal_share declare height as auto then it will automatically adjust height based on child elements.
Set the modal_share's height to auto:
#modal_share {
width: 565px;
height: auto; //<----
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
}
See Feedle http://jsfiddle.net/TEmGc/1/