I'm trying to get the "div.transbox table" to not have the opacity from "div.transbox".
If I try removing the table from the main transbox CSS then I can't get the table to sit on top of "div.transbox".
Any help much appreciated
div.transbox
{
width:1000px;
height:1500px;
margin-left: auto;
margin-right: auto;
background-color:#ffffff;
border:1px solid black;
opacity:0.8;
z-index:-1;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
z-index:-1;
}
div.transbox table
{
margin:30px 40px;
font-weight:bold;
color:black;
background-color:#cccccc;
z-index:99;
}
You cannot make child elements "more visible" when the parent element has an adjusted opacity.
opacity's value ranges from 0 to 1, and the properties stack. In the example below, the "real" opacity of the <p> element is not 0.5, but 0.8 * 0.5 = 0.4:
.transbox { opacity: 0.8; }
.transbox p { opacity: 0.5; }
Related
I am using pre tags to display some php and javascript code of a project but the code shows outside the border of the containing element. In the console I am trying to find where the element is getting its width from or what the container div width is. In the css file the parent wrapper div has a width of 100% but some of the containing elements show a much more narrower width but I don't see it in the console when inspecting the element. The pre spills over outside the the border as can be seen here: https://www.z1labs.com/
CSS
body {
font:1.1em 'Source Sans Pro';
}
h1,
h2,
h3,
h4,
h5 {
font-weight:400;
}
.hidden {
display:none;
}
.wrapper {
width:100%;
max-width:600px;
margin:0 auto;
}
.upload-console {
background:#fefefe;
border:2px solid #eee;
padding:20px;
}
.upload-console-header {
padding:0 0 20px 0;
margin:0;
border-bottom:2px solid #eee;
font-weight:600;
margin-bottom:20px;
}
.upload-console-drop {
height:200px;
border:2px dashed #ccc;
line-height:200px;
color:#ccc;
text-align:center;
margin-bottom:20px;
}
.upload-console-drop.drop {
border-color:#222;
color:#222;
}
.upload-console-body {
margin-bottom:20px;
}
.bar {
width:100%;
background:#eee;
padding:3px;
border-radius:3px;
box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
box-sizing:border-box;
margin-bottom:20px;
}
.bar-fill {
height:30px;
display:block;
background:cornflowerblue;
width:0;
border-radius:3px;
-webkit-transition:width 0.8s ease;
transition:width 0.8s ease;
}
.bar-fill-text {
color:#fff;
line-height:30px;
margin-left:5px;
}
.upload-console-upload {
border-bottom:2px solid #ccc;
margin-bottom:10px;
padding-bottom:10px;
}
.upload-console-upload span {
float:right;
}
pre {
border: 1px solid black;
}
I do I see where an element is getting its width and how do I keep the code inside the pre tag? Thank you.
Just add overflow-x: scroll; on pre tag
pre {
border: 1px solid black;
overflow-x: scroll;
}
add white-space: pre-wrap; on pre tag & also proper formatting your code
pre {
border: 1px solid black;
white-space: pre-wrap;
}
Give the overflow: auto for your pre tag so that content will set inside the border.
pre {
overflow-x: auto;
}
I am building webpage with school events. On my webpage I am trying to create div(eventContainer) in which I got another div(eventImgContainer) with an image, and this image when hover do an action, e.g. blur or opacity.
The problem is that it does not respond to hover when div with img is inside any other div.
I was looking at syntax related to hover like ">" or "+" or ', '... nothing seams to work. Any ideas why?
I really want to use only css for this/
html:
<div class="eventContainer">
<div class="eventDescription"><!-- here code with event description--></div>
<div class="eventImgContainer">
<img src="1_Zdjecia/event_1/1.jpg" id="Photo1" title="football">
<p class="hidedText">Go to Gallery</p>
</div>
</div>
CSS:
.eventContainer{
z-index: -1;
position:relative;
margin:auto;
left:0;
right:0;
width:700px;
height:270px;
background-color: #E6E6E6;
border: 4px solid white;
}
.eventImgContainer{
position:relative;
width:375px;
height:217px;
top:20px;
left: 305px;
margin:0;
}
.eventImgContainer img {
position:absolute;
width:100%;
display:block;
}
.eventimgcontainer:hover #Photo1 {
opacity:0.5;
width:400;
}
You last css rules is wrong
.eventImgContainer:hover #Photo1 {
opacity: 0.5;
width: 400px;
}
CSS is case sensitive !
And you shouldn't have negative z-index (you should remove the z-index property or set a positive value).
It works for me when I just change z-index: -1; to z-index: 1;
And your last selector (eventimgcontainer) is wrong, should be "eventImgContainer". But your example works also with this lower case selector. The problem is only your z-index.
.eventContainer{
z-index: 1;
position:relative;
margin:auto;
left:0;
right:0;
width:700px;
height:270px;
background-color: #E6E6E6;
border: 4px solid white;
}
.eventImgContainer{
position:relative;
width:375px;
height:217px;
top:20px;
left: 305px;
margin:0;
}
.eventImgContainer img {
position:absolute;
width:100%;
display:block;
}
.eventImgContainer #Photo1 {
opacity:0.5;
width:400;
}
first of all remove the z-index
.eventContainer{
position:relative;
margin:auto;
left:0;
right:0;
width:700px;
height:270px;
background-color: #E6E6E6;
border: 4px solid white;
}
and then correct the name of the class
.eventImgContainer:hover #Photo1{
opacity:0.5;
width:400;
}
Hello I have a question about centering a frame div inside a parent div.
I would like to center the frame inside the page, which is 70% wide, but I just cant make it work. I woud like the frame to be inside the parent div WRAP and the WRAP div inside the MAINWRAPPER which is 70% wide.
Please help :)
html{
background-color:#EEE;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-size:16px;
color:#888;}
body{
position:absolute;
width:100%;
margin:0px;
padding:0px;
}
#MAINWRAPPER {
min-height:100%;
position:absolute;
right: 0;
left: 0;
margin:0 auto;
padding:0;
width:70%; /* page width */
background-color: #39f;
border:1px solid #959595;
}
#WRAP {
position:relative;
display:block;
margin:0 auto;
border:1px solid red;
}
.frame {
width:100%;
height:300px;
position:relative;
float:left;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
.frame a{
display:block;
width:100%;
height:100%;
color:#333;
}
.frame a:hover{
display:block;
color:#FFF;
}
.title {
display:block;
position:absolute;
overflow:hidden;
top:0;
background-color:#ccc;
padding:3px 0;
width:100%;
height:auto;
border-bottom:1px solid #959595;}
div.price {
display: block;
position: absolute;
bottom: 1px;
right: 0;
height: 1.6em;
width: 3em;
background-color: #33CCFF;
border-radius:5px;
border:2px solid #FFF;
color:#FFF;
font-size:1.2em;
font-weight:bold;
text-align:center;
}
<body>
<div id="MAINWRAPPER">
<div id="WRAP">
<div class="frame"><a href="#">
<object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>
</body>
Remove width and float from .frame and try like this: Demo
.frame {
height:300px;
position:relative;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
How to center a div inside a page container in your HTML page :-
Just add following bootstrap class to do this in your HTML page :-
text-center col-md-offset-2
Description :-
Here offset value is the margin from the left hand side so by increasing decreasing the value of the offset you can set the margin.
bonus props to whoever can figure out why this isn't working. for some reason, my text "ie content, menu, footer" is inheriting the opacity and not sitting at 1 opacity and being fully visable.
I have it set to both be a class and ID as I have tried both ways, and am fairly beginner with CSS actually
<style type="text/css">
div#page {
border:0px solid purple;
width:700px;
margin:0 auto;
padding:5px;
text-align:left;
background-image:url('images/layout.jpg');
}
div {
text-align:center;
}
div#header {
border:2px solid red;
width:695px;
height:30px;
}
div#mostpop {
border:2px solid black;
width:195px;
float:Right;
margin:10px 0px 10px 5px;
height:245px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#recent {
border:2px solid black;
width:195px;
float:Right;
margin:10px 0px 10px 0px;
height:245px;
position: relative;
left: 204px;
top: 255px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#content {
border:2px solid black;
width:495px;
margin:10px 0 10px 0px;
min-height:500px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#footer {
border:2px solid black;
width:695px;
height:30px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=60); /* For IE8 and earlier */
div.recent p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
div.content p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
div.mostpop p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
div.footer p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
div.header p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
</style>
<div id="page">
<!--<div id="header">Header</div>-->
<div class="mostpop" id="mostpop"><p>Menu</p></div>
<div class="recent" id="recent"><p>Menu</p></div>
<div class="content" id="content"><p>Content</p></div>
Opacity should always inherit from its parent. If you have a div with 50% opacity, and then you set some content within the div to 50% as well, then the resulting inner div will be 25% overall, I'm not completely sure, but I don't think it's possible to make the child elements LESS transparent than its parents.
If you just want the div to have a transparent background, then you don't need to use opacity at all, you can use background: rgba(255, 255, 255, 0.5); for half transparent white, while leaving the foreground text colour intact. There are also workarounds for older versions of IE for this as well, but it should work fine for ie9.
CSS opacity is a bit wonky - once you set a particular opacity on an element, all children of that element are forced to assume at least the same opacity. You can't get around this with child style overrides.
The standard workaround is to create two elements, and position the second absolutely 'over' the first one with a z-index. The lower element gets your partial transparency, the higher one gets your opaque style.
<div style="position: relative">
<div id="transparency" style="position: absolute; top: 0; left: 0">... transparent stuff here </div>
<div id="regular_content" style="position: absolute; top:0;left:0;z-index:1">...</div>
</div>
I have a drop down list and I have a footer, when I pull down the drop down list... the footer always is in front of the list blocking the view, how can I eliminate this:
My css for the footer is:
#footer {
height:45px;
padding:10px 0;
position:relative;
}
#footer .inner {
position:relative;
z-index:2;
}
#ie6 #footer .inner {
}
#footer .bg {
background:url("http://jqueryui.com/images/footer_bg.png") no-repeat scroll left top transparent;
height:65px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:1;
}
#ie6 #footer .bg {
background:none repeat scroll 0 0 transparent;
}
#footer p {
color:#5E5E5E;
font:9px 'Arial','Helvetica',sans-serif;
margin:0;
padding:0;
text-transform:uppercase;
}
#footer p a {
color:#BBBBBB;
}
#footer span.first {
display:block;
float:left;
padding:6px 0 0 16px;
}
#footer .block {
display:block;
float:left;
}
#footer .block span, #footer span.empty {
display:none;
}
#footer .liferay {
background:url("http://jqueryui.com/images/icon_liferay.gif") repeat scroll 0 0 transparent;
border:0 none;
height:22px;
margin:3px 10px 0;
width:98px;
}
#footer .filamentgroup {
background:url("../images/oracle.png") ;
border:0 none;
height:18px;
margin:3px 22px 0 3px;
width:90px;
}
and here's the actual footer code:
Set your menu's z-index style higher than your footer's. I can only see footer styles there so we can't know which styles have you applied to your popup menu.