I have a "maincontent" div that contains, well, my content. There's some javascript (Fancybox) in it to show images. I'm trying to have the height of the div automatically change to accompany whatever's in it so that the div itself doesn't scroll, but the entire webpage does.
Here's a page I'd like to fix: http://willryan.us/content/photo.html
I've tried messing with min-heights, height:auto, overflow:auto, etc, with no result. Height:auto acts as thought the text is the only thing in the div, like its completely ignoring the javascript images.
Here's my css as it is now:
div#content {
overflow:auto;
width:958px;
height: 800px;
position:absolute;
top:50px;
left:0px;
background-color:#C0CACE;
border:1px solid;
border-color:#616161;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
z-index:1;
}
The problem has to do with photobox div, if you turn off position absolute, it works to its height, turn off height and it fits.
This problem could be avoided if you didn't use absolute positioning when you don't need it.
You should rebuild your page using relative positioning. It should be quite easy considering you just need to center the div's you are using with text-align:center; on their parents.
Your problem lies with using absolute positioning. Use static positioning (default) for regular document flow and you won't have this problem.
UPDATE
You don't use relative positioning either.
Regular document flow (without explicitly specifying it) is position: static; you use absolute. Absolute positioning basically takes the element out of the regular flow of the document and places it based it's nearest relatively positioned parent.
What you should be doing...
If you need your wrapper positioned in the "center". Set "wrapper" to positon:relative with margin: 0px auto; and remove absolute positon from all inner elements. If you need to indent elements inside wrapper use padding/margin.
I'll suggest you to use position: relative to not use position:absolute in your maincontent children. You don't really need absolute here.
Remove #content height (or use min-height)
Remove #photobox height (or use min-height)
Remove #content overflow
Set all #content children position to relative (use margins if necessary)
.
div#header {
background-image:url(content/assets/elements/header.png);backround-repeat:none;
width:960px;
height:50px;
z-index:2;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
}
div#footer {
background-image:url(content/assets/elements/footer.png);
backround-repeat:none;
width:960px;
height:50px;
z-index:2;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
}
div#content {
width:958px;
background-color:#C0CACE;
border:1px solid;
border-color:#616161;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
z-index:1;
overflow: visible;
}
div#photobox {
width: 769px;
margin-left: 95.5px;
}
Related
I have created a HTML table with a fixed header and scrollable body. I want to style the scrollbar to look like the attached image.table design
Using webkit, I have changed to colour of the scrollbar but i don't know how add the circle.
::-webkit-scrollbar {
width: 15px;
background-color: #00467f; }
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb {
background-color: #00bce4;
outline: 1px solid slategrey;
z-index: 10; }
Can this be achieved using only HTML, CSS and Pure Javascript?
With a width: 30px; and height: 30px;, border-radius: 30px; gives you a circle, maybe that helps in getting creative.
I used
// make main container visible
$( window ).load(function() {
$( "#video-container" ).css( "visibility", "visible" );
});
but no luck. I figured the css would have already been applied to the div on load, but maybe I'm missing something.
CSS is as follows:
#video-container {
background-color: #191919;
border: 3px solid #999;
box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
left: 50%;
margin-left: -13%;
margin-top: -13%;
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
vertical-align: middle;
visibility: hidden;
width: 26%;
z-index: 2;
}
There is no border-radius declaration in your CSS so it's likely that this is set somehwere else,
I suggest that you check your other CSs/JS/JQ functions to ensure that this is added at the appropriate time.
Try using this...
$( "#video-container" ).show();
I am using backbone.js views.
i have a list of expandable backbone views and inside which i have table. One of the column have dropdown div.
this div get partially hidden behind another view.
in above picture there is a dropdown view hidden behind the list view.
So i just want to ask how to force the div to display, not get overlapped.
I don't want to use fixed position as it will fix the position for all the position.
to be noted : using mozilla developer tool, in 3D view i found, the div view is on the TOP MOST layer.
my html after loading in browser :
<div class="dropdown open" >
<ul class="dropdown-menu" role="menu">
<li><div class="menuitem"><label class="checkbox"><input type="checkbox" value="res" style="opacity: 0.0; position: absolute; left: -9999px">Response</label></div></li>
<li><div class="menuitem"><label class="checkbox"><input type="checkbox" value="req" style="opacity: 0.0; position: absolute; left: -9999px">Request</label></div></li>
</ul>
</div>
css over the dropdown div:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: white;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
The problem was with z index of parent list div. z index of this parent list div was more than the z index of dropdown div.
So i simply reduced the z index of dropdown div to less than the parent list div. and the problem is solved.
One more conclusion can be drawn that : Mozilla 3D developer view, does not deal with z index. It simply display the nested 3D view. Parent div will always be shown behind the child div in mozilla 3D view irrespective of its z index. Kindly correct me if i am wrong somewhere.
So I'm pretty new to CSS. I know there is some inheritance, but besides font, I'm not always sure where it applies. So what I'm trying to do, is modify the twitter bootstrap modal class. There is a backbone view that is being shown currently with these classes:
modal hide fade
What I want to do is extend the width and height of the modal view but keep all of the other modal CSS properties in tact. Is there a way to do this? In my own local.less file for my project, I first tried doing what I googled which was How can I change the default width of a Twitter Bootstrap modal box?
But my view wasn't modal anymore. It wasn't centered and didn't have a darkened backdrop. So I then thought I could just copy the .modal class from twitter bootstrap into my local.less file, and then change the width/height. So I tried that with this:
.modal-width-half (#modalWidth: 50%) {
top: 50%;
left: 50%;
z-index: 1050;
overflow: auto;
width: #modalWidth;
margin: -250px 0 0 -#modalWidth / 2;
background-color: white;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
And again, the style isn't modal. Is there something I'm missing or doing incorrectly? Thanks.
I just did this and can share the line you're missing.
In my commit to change the width of the modal I had to change the width property and also the margin-left property. By changing both of these you will keep the form centered.
.modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
of course this will apply to all modals on your site, if you want to apply it to just one modal then you can customise the class name e.g.
.my-modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
You can then refer to this in your html like:
<div class="modal fade open my-modal">...</div>
Just make sure the definition for .my-modal comes after .modal in your less/css file or the definition will be overridden by the bootstrap style.
Can CSS be used to make a left and right edges of a content container look like this image? I have been trying to figure out a way to do this without using an image, if that is possible.
Here is jsFiddle that I have been working on. The CSS for the "top" class never gets applied. The CSS for the "bottom" class seems to work ok though.
http://jsfiddle.net/kXuQY/
HTML:
<div class="drop-shadow top bottom">
Content here.
</div>
CSS:
.drop-shadow {
/** Create container. Box-shadow here is to color the inside of the container **/
position:relative;
width:50%;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding:3em;
margin: 2em 20px 4em;
text-align:center
}
.top:before,
.top:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-1;
top:20px;
left:0;
width:40%;
height:1em;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
.top:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
transform:rotate(-70deg);
}
.bottom:before,
.bottom:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-2;
top:90px;
left:0;
width:10%;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(99deg);
-moz-transform:rotate(99deg);
-o-transform:rotate(99deg);
transform:rotate(99deg);
}
.bottom:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-99deg);
-moz-transform:rotate(-99deg);
-o-transform:rotate(-99deg);
transform:rotate(-99deg);
}
You can use ::before and ::after pseudo elements to achieve the effect, see here.
Example: (Demo)
HTML:
<div id="box">
<h1>css-3-box-shadow</h1>
<p>some text</p>
</div>
CSS:
#box:before, #box:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
content: "";
left: 10px;
max-width: 300px;
position: absolute;
top: 80%;
transform: rotate(-3deg);
width: 50%;
z-index: -1;
}
#box:after {
left: auto;
right: 10px;
transform: rotate(3deg);
}
#box {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 4px 4px 4px 4px;
color: rgba(0, 0, 0, 0.8);
line-height: 1.5;
margin: 60px auto;
padding: 2em 1.5em;
position: relative;
text-shadow: 0 1px 0 #FFFFFF;
width: 60%;
}