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/
Related
I wanted to put an image inside a text input box and tried to position the image by nesting the image tag inside the input tag and using relative position for the input and absolute positioning for the image and setting the images 'right' and 'top' value to 0. I thought this would place the image on the right hand side of the text box. Instead it placed the image on the right hand side of the webpage. I'm unsure why this is, I found a solution by changing the 'top' and 'right' values to position it where I wanted but it just seemed like the first way should have worked, could anyone explain why it didn't?
This is the HTML for the text input and image.
<input = "text" id="searchbar">
<img src ="microphone.png" id="voicebutton"/>
</input>
This is the CSS I though would work.
#searchbar{
border: 0.6px solid #dbdbdb;
display:block;
margin-left:auto;
margin-right:auto;
width:600px;
height:37.5px;
position:relative;
}
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:0;
top:0;
}
This is the CSS that worked.
#searchbar{
border: 0.6px solid #dbdbdb;
display:block;
margin-left:auto;
margin-right:auto;
width:600px;
height:37.5px;
position:relative;
}
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:395;
top:207;
}
Three ways to do it:
1- Use the properties background-size and background-position to set your background-image inside the input-box. Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:85%;
height:55px;
border: 2px solid black;
background-color: floralwhite;
background-image: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png");
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: 99% 100%;
}
input[type=text]:focus {
background-color: pink;
outline: none;
}
<input type="text" placeholder="write here" id="searchbar">
2- Use a negative margin to place the image over it (you can set the image to be a link). Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:85%;
height:55px;
border: 2px solid black;
background-color: honeydew;
vertical-align: top;
}
input[type=text]:focus {
background-color: skyblue;
outline: none;
}
img {
margin-top: 3px;
margin-left: -55px;
}
<input type="text" placeholder="write here" id="searchbar"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;">
3- Let both inputbox and image inside a container; set the container position: relative and the image position: absolute (you can set the image to be a link). Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:100%;
height:55px;
border: 2px solid black;
background-color: MintCream;
vertical-align: top;
}
input[type=text]:focus {
background-color: LightGreen;
outline: none;
}
img {
position: absolute;
top: 3px;
right: 5px;
}
#container {
position: relative;
width:85%;
}
<div id="container">
<input type="text" placeholder="write here" id="searchbar">
<image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;">
</div>
First of all, you can't have decimals in your pixels, like height: 37.5px;. This won't work. Also right: 395; does not work, because it doesn't specify what usage: pixels, ems, percentage? The input="text" is incorrect, it should be input type="text" as this can be e.g. email or radio.
That said, to achieve what you want, you can add a wrapper around your input field (like .box-wrapper) and give it a relative positioning with the same size as the input field. This will conclude to the example below.
.box-wrapper {
position: relative;
width: 600px;
height: 38px;
}
#searchbar{
border: 1px solid #dbdbdb;
display: block;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 38px;
position: relative;
}
#voicebutton{
width: 16px;
height: 23px;
position: absolute;
top: 0;
right: 0;
}
<div class="box-wrapper">
<input type="text" id="searchbar">
<img src ="http://dummyimage.com/50x50/ffff00/fff" id="voicebutton"/>
</div>
The input tag has no closing tag in HTML, you should remove the closing tag from your HTML code, additionally you can position the element over the input box changing your CSS to something like this (your CSS was almost right, the problem is the HTML) :
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:16px;
top:16px;
}
In HTML, the input tag has no end tag (as opposed to XHTML), so your a tag is outside of your input tag.
Container #666 has margin: 20px; overflow: hidden;.
Nodes #333 have margin: 20px 0 0 20px; float: left;.
Example, http://jsbin.com/owejal/3/edit or picture:
However, the intended result is:
container with 20px margin,
children with 20px margin in-between, but not with the container.
This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.
The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.
If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.
http://codepen.io/cimmanon/pen/mucDv
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo"></div>
The CSS:
.group {
overflow: hidden;
margin: -10px 0 -10px 10px;
padding-right: 10px;
position: relative;
}
.group:before {
display: block;
content: '';
position: absolute;
z-index: -1;
top: 10px;
right: 20px; /* 20px instead of 10px due to padding */
bottom: 10px;
left: 10px;
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 10px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements?
http://jsfiddle.net/SUJtd/
.foo {height:20px; background:#00f; margin:20px 20px 0;}
.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}
.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
No extra HTML tag - but a class change & No Pseudo elements
A simple trick which probably should work for you :
http://jsbin.com/owejal/65/edit
Screenshot:
Will work with all possible number of nodes :)
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:
http://jsbin.com/owejal/51/
However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.
Change the margin of the node to:
.node { margin: 0 20px 20px 0; }
See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).
The following CSS will get you the desired result, actually you will still have 2 limitations:
If you change the background of body, you need to update the border color for element .foo
The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
overflow: hidden;
margin: 20px; /* margin is required */
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 0px 20px 20px 0px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
.group + .foo {
height: 20px;
background: #00f;
margin: 20px;
position: relative;
top:-40px;
border-top: 20px solid #fff;
}
You can still find the solution here
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...
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>
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;
}