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.
Related
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.
Looking for a vertical ruler using a div tag. and I want something like this.
http://i.imgur.com/ASF8DEt.png
My code DEMO
CSS:
.acc{
float:left;
width:400px;
height:auto;
overflow:hidden;
border:#FFF solid 3px;
background-color:#319dba;
}
.acc .title{
width:100%;
height:30px;
color:#FFF;
text-align:center;
padding-top:5px;
border-bottom:3px #FFFFFF solid;
}
.acc .debit{
float:left;
width:198px;
height:auto;
}
.acc .vr{
float:left;
width:2px;
height:100%;
background-color:#fff;
border:1px solid #fff;
}
.acc .credit{
float:right;
width:198px;
height:auto;
}
.acc .row{
width:100%;
height:25px;
}
But vr does not going for 100% height.
help me.
thanks
Try like this: Demo
CSS:
.acc {
float:left;
width:400px;
height:auto;
overflow:hidden;
border:#FFF solid 3px;
background-color:#319dba;
position: relative;
}
.acc .title {
width:100%;
height:30px;
color:#FFF;
text-align:center;
padding-top:5px;
border-bottom:3px #FFFFFF solid;
}
.acc .debit {
float:left;
width:198px;
height:auto;
}
.acc .vr {
width:2px;
height:100%;
background-color:#f00;
border:1px solid #f00;
height: 100%;
position: absolute;
right: 0;
left:50%;
}
.acc .credit {
float:right;
width:198px;
height:auto;
}
.acc .row {
width:100%;
height:25px;
}
Instead of using a vr div, apply a border to the left element:
.acc .debit {
border-right: 3px solid white;
}
That is also how the upper hr has been made.
Here's a fiddle
If you don't want to bother with width, you can apply half the border from the left and half from the other side or switch box-sizing.
I have two menus floated to the left of a page.
I then have a div floated to the right with an auto height, that adjusts to the content on the page (results of the menu ).
In my example I will treat the ul's as divs since they are set to block elements anyway:
<body>
<div class="container">
<div class="div1_head"></div>
<div class="div1"></div>
<div class="div2_head"></div>
<div class="div2"></div>
<div class="div3_head"></div>
<div class="div3"></div>
</div>
</body>
Each of these elements has a separate div header that goes above them.
I cannot figure out the correct way (if there is one) to clear and float the divs, so that they will all be aligned in the correct row.
margin:0;
padding:0;
.container {
width:100%;
float:left;
height:500px;
background:#ebebeb;
}
.div1_head {
float:left;
background: #cfcfcf;
width:20%;
height:50px;
margin: 24px 0 0 0;
}
.div1 {
float:left;
background: #dedede;
width:20%;
height:200px;
clear:left
}
.div2_head {
float:left;
background: #cfcfcf;
width:20%;
height:50px;
clear:left;
margin: 24px 0 0 0;
}
.div2 {
float:left;
background: #dedede;
width:20%;
height:200px;
clear:left
}
.div3_head {
float:right;
background: #cfcfcf;
width:76%;
height:50px;
clear:none;
margin: 0 0 0 4%;
}
.div3 {
float:right;
background: #dedede;
width:76%;
height:200px;
clear:none;
margin: 0 0 0 4%;
}
Do to the nature of the web application i'm using nesting the div and header into a larger container div isn't an option.
Here is a jsfiddle: http://jsfiddle.net/Kq49s/1/
Ok, if you don't want to add in new DIVs to your current app.
Try to change your div3's css like this...
Here is the demo on jsfiddle... http://jsfiddle.net/NTX6h/
.div3_head {
position:absolute;
top:24px; /* same as your .div1_head's margin top */
right:10px; /* if you want to add some right margin */
background: #cfcfcf;
width:76%;
height:50px;
}
.div3 {
position:absolute;
top:74px; /* .div3_head's margin top + .div3_head's height */
right:10px; /* if you want to add some right margin */
background: #dedede;
width:76%;
height:200px;
}
I have this CSS Code for my website:
#charset "UTF-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
html, body, #wrap {
width:100%;
height:100%;
margin:0;
padding:0;
font-family:Calibri;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -580px; /* the bottom margin is the negative value of the footer's height */
border:4px solid #000000;
}
.push {
height: 580px; /* .push must be the same height as .footer */
}
/* header stuff */
#header-topbar {
width:100%;
height:40px;
/* padding:10px 10px 10px 10px; */
background-color:#666666;
}
#header-topbar2 {
width:100%;
height:100px;
/* padding:10px 10px 10px 10px; */
background-color:#eeeeee;
}
#phone-tel {
float:right;
margin-right:16%;
margin-top:5px;
font-size:20px;
}
#logo {
position:absolute;
float:left;
margin-left:15%;
margin-top:15px;
}
/* main body/content */
#body-content {
padding-bottom:200px;
width:80%;
margin:120px auto 0 auto;
padding:10px 10px 10px 10px;
border:solid 1px #a79494;
border-top:solid 4px #a2cd3a;
}
/* homepage-boxes */
#homepagebox {
width:80%;
margin:0 auto 0 auto;
}
#homepagebox .column {
float: left;
width: 25%;
}
#homepagebox .column div {
margin: 5px;
min-height: 350px;
background: #eeeeee;
}
/* FOOTER */
#footer {
width:100%;
height:580px;
border-top:4px solid #666666;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
#enquiryForm { clear:both; padding:8px 40px 0 0; }
.enquiryField { clear:both; padding:5px 0; }
.enquiryField label { clear:none; float:left; }
.enquiryField input { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
.enquiryField textarea { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }
.enquiryError { clear:both; color:#fff; font-family:Calibri; }
#enquirySent { color:#fff; font-family:Calibri; }
the footer displays at the bottom of the page but if the main page content is too long the footer doesnt move down at all. the content just displays over the footer.
for example, in my HTML I have 4 divs aligned next to each other and they are displaying over the footer
i have created a fiddle here: http://jsfiddle.net/rwqjH/1/
You need to clear your floating elements, add the below line before <div class="push"></div>
<div style="clear: both;"></div>
Demo
Note: I've not fixed your footer alignments, they are pretty messed
up, I would suggest you to learn CSS positioning
try adding overflow:auto; to #wrap. When you float elements they get removed from the layout and #wrap no longer resizes to fit them by default.
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; }