Please take a look at my fiddle:
http://jsfiddle.net/gX5r9/
I want the div to be of width 100% in the event the browser is resized however I want the icon image to be to the right of it.
<div class="theDiv">
<input type="text" /><img src="http://images.ilias.ca/Firefox-32x32.png" />
</div>
.theDiv input {
width:100%;
height 32px;
border= 1 px solid;
border-radius: 6px;
}
.theDiv img{
display: inline;
}
Here's one way to do this using background images: jsFiddle example
HTML
<div class="theDiv">
<input type="text" />
</div>
CSS
.theDiv input {
height:32px;
border: 1px solid #999;
border-radius: 6px;
width:100%;
vertical-align:bottom;
}
.theDiv {
background:url(http://images.ilias.ca/Firefox-32x32.png) 100% 0% no-repeat;
padding-right:38px;
height:40px;
}
.theDiv input {
width:100%;
height 80px;
border= 1 px solid;
border-radius: 6px;
padding-top:10px;
padding-bottom:10px;
display:block;
background-image:url(http://images.ilias.ca/Firefox-32x32.png);
background-repeat:no-repeat;
background-position:right center;
}
About the checking if the window is resized. See this resource #media
Solution 2
.theDiv {
height:32px;
position:relative;
}
.theDiv input {
width:100%;
height 32px;
border= 1 px solid;
border-radius: 6px;
}
.theDiv img{
position:absolute;
z-index:666;
right:10px;
}
Related
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
I am not very good at CSS, the textbox has been aligned to right, I tried putting the search icon into the textbox, it just can't go in. Here are the code:
<style type="text/css">
#textbox-search{overflow:auto;}
#textbox-search input.searchkeyword {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #8e8e8e;
background-color:#f5f5f5;
height:16px;
padding:-4px;
padding-left:-48px;
color:#4a4a4a;
float:right;
}
#textbox-search input.button{
border:0;
padding:4px;
margint:0 0 0 600px;
width:24px;
height:24px;
background:transparent url('images/search.png') center center no-repeat;
float:right;
}
</style>
<form id="textbox-search">
<input type="submit" class="button" value="" />
<input type="text" class="searchkeyword" />
</form>
UPDATE :
You can simply achieve this using background property like this
input{
background: url("http://png.findicons.com/files/icons/1389/g5_system/32/toolbar_find.png") top right no-repeat;
height:30px;
padding-right:30px;
}
JS Fiddle Demo
You can change Height and padding value as per your image dimension.
you can easily do this
.searchkeyword {
width: 100%; /*textbox width*/
float: none;
background: url(your_image.png);
background-size: 20px 20px;/*background icon size*/
background-repeat: no-repeat;
background-position: 8px 10px; /*place where you wnat*/
display: block;
text-indent: 20px; /*help to indent your text on textfield*/
}
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/
How can I achieve this view with CSS:
------------------TITLE
or
TITLE------------------
I have
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
And my styles are:
#titleLine {
border-top: 1px solid black;
width: 84%;
clear: both;
height: 20px;
}
#title {
height: 10px;
float: right;
}
My approach is here: jsFiddle
However the line width is defined with percents and I need it adjust automatically with CSS.
This may be what you are after: http://jsfiddle.net/XpSWX/1/
Hope this helps
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
#titleLine {
border-top: 1px solid black;
width: 84%;
float:left;
height: 20px;
margin-top:8px;
}
#title {
height: 10px;
float: right;
}
http://jsfiddle.net/sY2SV/1
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
#titleLine {
border-top: 1px solid black;
width: 84%;
float:right;
height: 20px;
margin-top:8px;
}
#title {
height: 10px;
float: left;
}
http://jsfiddle.net/sY2SV/2
Here is a solution:
#titleBlock {
width:100%;
}
#titleLine {
background:black;
position:absolute;
z-index:1;
left:0px;
top:14px;
width:100%;
height: 1px;
}
#title {
display:inline-block;
padding:4px;
background:white;
position:relative;
z-index:2;
/* Only variable to change... Just say left and it woulb be title------- */
float:right;
}
DEMO
Hey now you can used this
HTML
<div class="hello"><span>Hello i m sony</span></div>
Css
.hello{
background:green;
text-align:left;
position:relative;
}
.hello span{
padding-right:10px;
background:green;
display:inline-block;
position:relative;
z-index:1
}
.hello:after{
content:'';
border-top:solid 5px red;
position:absolute;
right:0;
left:0;
top:7px
}
Live demo
http://tinkerbin.com/1guJzKcI
Check my answer in Horizontal Line in Background using Css3
You can do it with a 1% gradient like this
.datedAside {
background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
background: #FFF;
padding: 0 0.5rem;
}
You'll nedd the extra span to be the same background color as the background of the component to make it look like it has "deleted" the line going behind the text.
For text, it's best to use text-align