I have a div representing a lesson that is dynamically "filled up" with a green span according to the student's percentage of completion of the lesson. So the height of the span is dynamically assigned. This works perfectly in all browsers except for Internet Explorer, where the span doesn't start from the bottom of the div, but it's half way in the middle,
as you can see from the pictures where the first lesson is 100% complete and the second is 25% complete:
Chrome, Firefox, Safari, Opera:
Internet Explorer:
My HTML is:
<div style="display:table; margin:0 auto;">
<div class="detail_image">
<div class="detail_image_cont">
<img src="images/thamatho/chapters/img.png" />
</div>
<span style="height:<?php echo $completepercentage."%";?>">
</span>
</div>
</div>
My CSS is:
.detail_image{
display: table-cell;
border: 4px solid #39C;
width:48px;
height:48px;
vertical-align: middle;
text-align:center;
-webkit-border-radius: 35px 35px 35px 35px;
-moz-border-radius:35px 35px 35px 35px;
border-radius: 35px 35px 35px 35px;
position:relative;
overflow:hidden;
background-color:transparent;
}
.detail_image > span {
width: 101%;
overflow: hidden;
left: -0.4px;
position: absolute;
background-color: #CFC;
bottom: 0px;
height: 0%;
z-index:1;
}
.detail_image_cont{ /* to center image in the div */
display:block;
width:100%;
text-align:center;
margin:0 auto;
position:relative;
z-index:999;
}
Add display: block to your span, it should help.
Related
I have a div in which I'm trying to center an image. It centers perfectly if position is set to fixed, but when position is set to absolute, the image is a few pixels too much to the right.
I can't have position set to fixed because this div scrolls in from the top when the user clicks something, so I can't have it be visible until that moment. I've never had this problem before. Can anyone tell me what's wrong?
html:
<div class="header">
<img class="logo" src="img/navbar_title.jpg"/>
<img class="tab" src="img/mid_tab.png" /><!-- image to be centered -->
<div class="header_social">
<img src="img/button_pg.jpg" />
<img src="img/button_facebook.jpg" />
<img src="img/button_twitter.jpg" />
</div>
</div>
css:
.header
{
position:fixed;
top:-100px;
width:100%;
height:30px;
padding:10px;
background-color:black;
color: white;
z-index:10;
margin-top:0px;
box-shadow: gray 3px 0px 10px;
}
.header .logo
{
position: absolute;
top: 10px;
z-index: 4;
left: 20px;
}
.header .tab { /* not working right */
position: absolute;
top: 0;
z-index: 4;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.header h1
{
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size:14pt;
display:inline-block;
line-height:30px;
float:left;
margin-top: 0;
margin-left: 20px;
letter-spacing: .05em;
color: #303030;
}
.header .header_social
{
float:right;
height:30px;
line-height:30px;
width:150px;
}
This is due to box-sizing. When you position fixed, it is relative to the entire screen, period. When you position absolute, it is relative to the nearest non-static position parent. In your case, that is your div.header. Your div.header has a padding and a width 100%, so it is actually 100% + 20. Set box-sizing: border-box on your div.header and your image will move a few pixels to the left. :)
I've settle up sizes, table-cell, and stuff, yet it is not working. I need to align the girl image on the bottom of the div, the text and button are fine.
Here is my code:
<style type='text/css'>
.wrapperbannerbanner{
overflow:hidden;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
position: relative;
float: left;
left: 0px;
width: 200px;
background-color:#FF9900;
}
.toppadding {
margin-top: 5px;
margin-left: 2px;
margin-right: 2px;
}
.left2222{
position: relative;
/* float: left; */
left: 12px;
text-align:left;
}
.generalbanner001 {
background-color: #FFFFFF;
margin-top: 0.5%;
/* margin-bottom: 8px; */
margin-left: auto;
margin-right: auto;
width: 80px;
height: 35px;
position: relative;
float:left;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
}
.generalbanner001:hover {
background: #0a0d0f;
text-decoration: none;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
}
.conferir001 {
padding:8px 0 0 10px;
}
.imageleft1222{
float: left;
left: 4px;
min-width: 90px;
height:120px;
display:table;
}
.imgalign {
width:90px;
height:95px;
vertical-align:bottom;
display:table-cell;
}
</style>
<div class="wrapperbannerbanner">
<div class="toppadding">
<div class="imageleft1222"><div class="imgalign" style="background:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png) no-repeat;"></div></div>
<div class="left2222">
<span>Vai criar um site? Hospede com quem entende do assunto</span>
<div class="generalbanner001"><div class="conferir001" style="color:#FF9900;">Conferir</div></div>
</div>
</div>
</div>
The Fiddle:
http://jsfiddle.net/4SmV7/1/
The crux here is setting the background-position on .imgalign
Demo Fiddle
Change your CSS for .imgalign to:
.imgalign {
width:90px;
height:95px;
vertical-align:bottom;
display:table-cell;
background-image:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png);
background-position:bottom;
background-repeat:no-repeat;
}
And take the inline styles out for .imgalign:
<div class="wrapperbannerbanner">
<div class="toppadding">
<div class="imageleft1222">
<div class="imgalign"></div>
</div>
<div class="left2222"> <span>Vai criar um site? Hospede com quem entende do assunto</span>
<div class="generalbanner001">
<div class="conferir001" style="color:#FF9900;">Conferir</div>
</div>
</div>
</div>
</div>
More on background-position from MDN
The background-position CSS property sets the initial position,
relative to the background position layer defined by background-origin
for each defined background image.
You try to align bottom a div with a background-image. You need to set the height of this div equal to his parent height, and set the background-image alignment to bottom center
So you're using a background image that you need to align to the bottom, correct?
In that case, I would get rid of the class "imgalign" altogether, and have the below CSS on its container:
.imageleft1222{
float: left;
left: 4px;
min-width: 90px;
height:120px;
display:table;
background-image:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png);
background-repeat: no-repeat;
background-position: bottom;
}
It's better to list the background properties separately because the Firefox browser doesn't always display it properly if you group them all into 'background'.
I have an iframe inside a class in the center of my page. If you click any of the two radio buttons at the top, the form expands depending on which one you select. If the form is floated right or left, it will expand when one of these buttons is pushed and the gray area below it (the employer and freelancer text section) will move down on the page. When I align the form in the center of the page, I can't get it to have the property associated with floating that moves the rest of the page down. Instead, it simply covers up the gray background with text area. My site is up at avidest.com/new. How can I make the form stay in the center but behave like it were floating? Here is my css:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff;
border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier */
border-radius: 10px;margin-left: auto;margin-right: auto;}
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; }
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}
And here is the html:
<div class="main>
<div class="slider">
<div class="gallery">
<div class="formbox"> form is here </formbox>
</div>
</div>
<div class="body">
<div class="body_main_page">Freelancer Text is here</div>
<div class="body_main_page">Employer text is here</div>
</div>
</div>
Thanks
Try to change your CSS like this:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.slider { background: transparent; margin:0 auto; padding:0; min-height:420px;}
.slider .gallery { margin:0 auto; width:980px; min-height:420px; padding:0;}
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff;
border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier */
border-radius: 10px;margin-left: auto;margin-right: auto;}
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; }
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}
Don't provide a fixed height if you want to have e flexible height...
http://bmww.com/clients/phwm_sc_website/index.html
^ thats the link to the site being tested thus far. I took everyone's advice here and am working on removing the tables which i did for the head navigation. So now they are aligned side by side but the logo with the div needs to be higher but not the top is getting cut off.
Here is my html:
<div id="header" class="header2" align="center">
<div class="container3">
<div class="divrow"><h1><a class="ex1" href="index.html">[ HOME ]</a></h1></div>
<div class="divrow"><h1><a class="ex1" href="index.html">[ TEAMS ]</a></h1></div>
<div class="divrow1"><img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo" /> </div>
<div class="divrow"><h1><a class="ex1" href="index.html">[ STAFF ]</a></h1></div>
<div class="divrow"><h1>[ GALLERY ]</h1> </div>
</div>
</div><!--end red navigation header div-->
and here is my css:
.header1 { position:relative; top: 0px; z-index:10;
width: 100%; height:50px;
background: rgba(0, 54, 103, 0.6); /* Color white with alpha 0.9*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 54, 103) transparent;
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99003667, endColorstr=#99003667);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99003667, endColorstr=#99003667)";}
.header2 { position:relative; top:10px;
width: 100%; height:80px; z-index:50;
background: rgba(210, 6, 46, 0.4); /* Color white with alpha 0.9*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(210, 6, 46) transparent;
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99d2062e, endColorstr=#99d2062e);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99d2062e, endColorstr=#99d2062e)";}
.divrow { position: relative; display:inline; margin-top:30px;
float:left; }
.divrow1 { position:relative; display:inline; margin-top:-60px;
float:left; z-index:50; margin-bottom:-20px; }
.sponsor { position:absolute; top: 730px; z-index:10;
width: 100%; height:300px;
background-color: #FFF;
-webkit-box-shadow: 0 0 10px #FFF;
-moz-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF
}
.container1 { clear:both;
width: 960px; z-index:-1;
background-color: none; /* Color white with alpha 0.9*/
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top:60px;
}
.container2 {
width: 960px; z-index:-1;
background-color: none; /* Color white with alpha 0.9*/
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top:100px; }
.container3 {
width: 700px;
background-color: none; /* Color white with alpha 0.9*/
margin:auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
I can provide more if needed...i know this probably is a simple fix but i am still learning. Thanks in advance!
The CSS for divrow1 class has a typo. You have miss-spelled "position: absolute;" on line 134 of the CSS file. If you have the absolute spelled correctly the image will no longer be cut off.
If you remove the
overflow:hidden;
from .container3, your image will not be cut off.
This, however will distort your site. This is because the logo is too big, resize it to a height of around 190px and you'll be ok.
Add
clear: both;
to .container1
And remove
overflow:hidden;
from .container3
That should do the trick!
I notice that your .divrow1 margin need to be changed:
.divrow1 {
position: absoulte;
display: inline;
/*margin-top: -30px;*/
float: left;
}
EDIT:
You need to do little update to your layout, this is not the best approach but it might be the simple one:
<div class="container3">
<div class="divrow1">
<img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo">
</div>
<div class="divrow"><h1>[ HOME ]</h1></div>
<div class="divrow"><h1>[ TEAMS ]</h1></div>
<div class="separator"></div>
<div class="divrow"><h1>[ STAFF ]</h1></div>
<div class="divrow"><h1>[ GALLERY ]</h1> </div>
</div>
Revised CSS:
.divrow1 {
position: absolute;
display: block;
margin-top: -50px;
margin-left: 200px;
}
.separator {
float: left;
width: 150px;
margin-top: 30px;
}
In a big div I have search box which basically is a div having text box glass image and button. Requirement is to positioned this search wizard vertically in middle and on right side in div. This box is coming on top left inside div. I have tried different things but not getting how to set it. Please guide me.
Thanks
<div class="Right">
<div class="header-search" style="position: relative; top: auto; bottom: auto; right: 0 left:100%;
margin: auto 0 auto auto;">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
padding:auto 0 auto 200px;
}
div.header-search
{
overflow:auto;
display:inline;
text-align:right !important;
border:3px dashed blue;
padding:20px 0 auto 50px;
}
div.header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:2px solid #316200;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
background:white url(../images/SearchImage.png) 0 50% no-repeat;
}
div.header-search input.searchbutton
{
border-bottom-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-top-right-radius:5px;
-webkit-top-right-radius:5px;
-moz-right-radius:5px;
background:#458A00;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5D376', endColorstr='#326400'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#A5D376), to(#326400)); /* for webkit browsers */
background: -moz-linear-gradient(top, #A5D376, #326400); /* for firefox 3.6+ */
width:50px;
height:28px;
color:White;
font-size:16px;
font-weight:bold ;
border:2px solid #316200;
border-left:none;
}
The first step in understanding how positioned elements is reading an article like this one:
CSS-Tricks.com - absolute positioning inside relative positioning
you are using position: relative on the wrong div as it should be assigned to .Right- while header-search should have instead 'position: absolute;' and values for left/right and top/bottom
the article above explains it much better than I could ever do!
Perhaps this would be a good starting point:
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
div.Container div.Right {
position: relative;
width: 50%;
float: right;
border: 1px dashed green;
height: 95px !important;
padding: auto 0 auto 200px;
}
div.header-search {
position: absolute;
right: 0;
top: 0;
overflow: auto;
display: inline;
text-align: right !important;
border: 3px dashed blue;
padding: 20px 0 auto 50px;
}
remove all styling from your div's as this is bad practice. Next, convert your two styles for .Right and .header-search like this:
div.Right {
border: 1px dashed green;
height:95px;
position: relative;
}
div.header-search {
border:1px dashed blue;
position: absolute;
top: 30px;
right: 0;
}
This should accomplish what you are attempting. There isn't a clean, easy way to center vertically, but since you have a fixed height on the outter .Right div and a fixed height on the search elements, it's best just to use a fixed top position on the inner .header-search.
You can see it in action on this jsfiddle:
http://jsfiddle.net/L4sgc/