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...
Related
I have defined a Div which is 100% wide and 380 px in height. Within this Div, I want to display an image, text, and an image right in the middle and center.
I tried using this code -
<div id="mainContent">
<div class="wrapper">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1">
some random text I want to put in the middle
</div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
</div>
and the related CSS is
#mainContent {
background-color: #10AEEF;
margin: 0px auto;
border: 0px solid #000000;
width:100%;
height:380px;
text-align:center;
}
.wrapper {
text-align:center;
border:0px solid #00FF00;
}
.wrapper:before {
content:'';
height:100%;
display: inline-block;
vertical-align:middle;
}
.centered {
display: inline-block;
vertical-align:middle;
}
.g1 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
.text1 {
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 44px;
color: #FFFFFF;
border: 0px solid #FF0000;
width:50%;
float:left;
}
.g2 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
I am trying to avoid using a table to display this. But I want the centered class to be in the middle and center and within that g1 in the middle, text1 in the middle, and g2 in the middle.
Right now all are floating to left. But when I take it out, they are are aligned one on top of the other but in the middle. I think I am missing something basic.
If I understand your question correctly and you want both images and the text centred one on top of another then this is (I think) all you need:
#mainContent{
background-color:#10AEEF;
height:380px;
text-align:center;
}
Note that you specify things like border:0px solid #000000;. Essentially what you are doing is already specifying what is default, you don't need them.
EDIT
This is the code needed to center everything both vertically and horizontally:
<div id="mainContent">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1"><p>Some text here...</p></div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
And the css
#mainContent{
background-color: #10AEEF;
width:100%;
height:380px;
text-align:center;
position:absolute;
}
.centered{
position:relative;
top:50%;
transform: translateY(-50%);
}
Note: If you want to keep the wrapper div make sure you change the css from .centered to .wrapper
I have an image which is e.g. the width 450px, and a container which is only 300. Is it possible to center the image inside the container with CSS, when the width of the image isn't constant (Some images might be 450 wide, other 600 etc.). Or do I need to center it with JavaScript?
This any good? http://jsfiddle.net/LSKRy/
<div class="outer">
<div class="inner">
<img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: -50%;
}
img {
position: relative;
left: -50%;
}
Proposition 1 :
.crop {
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
border:1px solid #ccc;
}
/* input values to crop the image: top, right, bottom, left */
.crop img {
margin:-20px -15px -40px -55px;
}
Proposition 2 :
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:150px;
height:90px;
}
.crop img{
position:absolute;
top:-20px;
left:-55px;
}
proposition 3:
.crop{
float:left;
position:relative;
width:150px;
height:90px;
border:1px solid #ccc;
margin:.5em 10px .5em 0;
}
.crop p{
margin:0;
position:absolute;
top:-20px;
left:-55px;
clip:rect(20px 205px 110px 55px);
}
Proposition 4 (hold-school efficiency):
.container {
width:400px;
height:400px;
margin:auto;
overflow:hidden;
background:transparent url(your-image-file.img) no-repeat scroll 50% 50%;
}
Of course you will need to ajust the .css to suit your own needs
Carry on.
but instead of hiding part of theimage why don't you put it like
<div id="container" style="width: 300px">
<img src="yourimage" width="100%">
</div>
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/
I have some css problem. here is what I need.
No matter how many words the title have(example: title could be What's new today?, could be hello world)
it always have a background line pass through the whole div, and the word's background is white. (the word should be text-align:center; and it's background looks like broken the line)
Here is my code:
<style>
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-col: white;
margin-left: -10px;
padding: 5px;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-18px;
width: 960px;
}
</style>
<div class="ocell">
<div class="wd">Title</div>
<div class="line"></div>
</div>
also in http://jsfiddle.net/zApLA/ may be also can use a background-image instead of the line. Thanks.
This can be achieved by simply using div with border-bottom for the line, and positioning element with text on that line. Fiddle here.
Couple of problems with your CSS.
One - the .wd div spans the entire width of page (defaults to 100%)
Two - no z-index sset to say which div should be on top of which.
Try this code (worked in fiddle)
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-color: #f0f;
margin-left: -10px;
padding: 5px;
font-size:20px;
z-index:10;
border:1px solid #f0f;
display:inline;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-15px;
width: 960px;
z-index:-1;
}
I found this article and I decided that I liked the way they styled links and buttons.
So I took the CSS from the article...
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
Then I have several buttons in a row I want to use like this...
<div class="buttons">
<img src="pict1.png" class="positive" alt=""/>Button 1
<img src="pict2.png" alt=""/>Button 2
<img src="pict3.png" class="negative" alt=""/>Button 3
</div>
See this example: http://reljac.com/csstest.php
But that row of buttons may need to be aligned center, not all to the right or left. If I change the CSS to...
.buttons a, .buttons button{
/*display:block;
float:left;*/
margin:0 7px 0 0;
The buttons no longer appear correctly when there is an image, specifically in IE 6,7 & 8.
See this example: http://reljac.com/csstest_wo.php
I can change the float to right to get the buttons to align right but I can't figure out what to do to get them centered (like in a <td></td>).
So the short of it is I want to use the style as it is but I also need to be able to center justify the buttons if necessary.
Try adding this to the CSS:
.buttons
{
text-align:center;
margin: 0px auto 0px auto;
}
The auto makes the margins equal on each side. The text-align is a bodge for older browsers.
EDIT:
Add an extra div around the buttons called buttonwrapper. then apply this CSS
.buttonwrapper
{
position:relative;
float:left;
left:50%;
}
.buttons
{
position:relative;
float:left;
left:-50%;
}
Method taken (but not tested) from http://www.pmob.co.uk/temp/centred-float4.htm
I found that when you have a parent div float left and a child div you're trying to center, a lot of times people forget inheritance.
HTML:
<div class="parent">
<div class="child">
Text
</div>
</div>
CSS:
.parent {
float: left;
width: 300px;
}
.child {
float: none; /* <-- IMPORTANT! */
width: 200px;
margin-left: auto;
margin-right: auto;
}
IMPORTANT :
Inheritance states that the child div is also floated left. So, make sure that the child div has no float, then margin: auto like usual.