I want to show a search icon over the start of the a text input box.
Currently my code looks like this:
<div id="search-icon"></div>
<input type="text" name="search" id="search"/>
And my CSS:
#search-icon {
display:inline-block;
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
}
input#search {
position:relative;
top:-25px;
left:-30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;
}
It shows the div right where I want it, but below the actual text box. When I change the search icon position to absolute, it screws up my positioning.
How do I swop it?
You can solve it using relative position for both. But just change their z-index.
#search-icon {
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
position: absolute;
z-index: 2;
}
input#search {
position:absolute;
top:15px;
left:30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;}
is this what you are looking for here
Are you talking about having search-icon being on top of input#search?
Such as this: http://jsfiddle.net/52YfE/?
I dont know what you want exactly but check it out this one http://jsfiddle.net/V8AZE/
Related
I am working on CSS border properties, I have done with border-radius,border,border-width,border-color,border-collapse,border-image,etc. I want my border at the left side of my page as shown in the pic click here for the image to be shown. Can anyone teach me with this. Thank you
You can use pseudo elements to get the border same, you can play with properties to know about how it works.
Below i posted an example
.box {
width:150px;
height:150px;
border-radius:50%;
background:green;
position:relative;
}
.box:before {
content:'';
position:absolute;
top:10%;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
left:14px;
width:0;
height:0;
display:block;
border-top:10px solid green;
border-bottom:10px solid transparent;
border-right:10px solid transparent;
border-left:10px solid transparent;
}
<div class="box"></div>
For the following facebook like button, there is a # of likes bubble (?) on the right of the button (see below - the bubble with the text of '3.5k' on it)
The question is - was it drawn using css? How to create it?
Fiddle Link : http://jsfiddle.net/zEVbe/1/
Yes, that bubble can be drawn by CSS in various way. One of the way is written below.
HTML :
<div class="like">Like</div>
<div class="counter">3.5k</div>
CSS :
body{
font-family:Calibri;
}
.like{
background:#3b5998;
padding:0px 10px;
border-radius:2px;
color:#fff;
cursor:pointer;
float:left;
height:25px;
line-height:25px;
}
.like:hover{
background:#444;
}
.counter{
background:#fafafa;
border:1px solid #aaa;
float:left;
padding:0px 8px;
border-radius:2px;
margin-left:8px;
height: 23px;
line-height:23px;
}
.counter:before{
display:block;
float:left;
content:' ';
width:6px;
height:6px;
background:#fafafa;
margin-left:-12px;
border-right:10px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
margin-top:8px;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
}
I'm trying to build a button that has some notification attached to it and am trying to emulate the facebook notification styles. A little red circle in the top right corner with a number in it.
I'm having some issues with it though. I can't seem to get the circle in the right place or to get the number to actually sit inside of it.
my button looks like this
<button class="btn btn-blue" id="noteBtn">Notes <span class="notification">1</span></button>
and I've tred to do this with my css
.notification:before {
content: ' \25CF';
font-size: 5em;
color:red;
}
here is a js fiddle I was working with
http://jsfiddle.net/N8cjB/5/
<span> and I don't get along, so I changed it to a <div>
Here you go: http://jsfiddle.net/aXvqW/3/
edit moved it out of the button a little bit, as requested.
To make it simple you don't need :before.
Add border-radius to the span, and to center the number use text-align: center
.notification {
border-radius: 30px;
text-align: center;
border: red;
width:20px;
height:10px;
background: red;
padding: 2px;
}
Check this in fiddle
Change <span> to <div> and make button position:relative; and notification position:absolute; using CSS then put it wherever you want.
Check it out here: http://jsfiddle.net/N8cjB/26/
Code
.button{
margin:20px 0px;
border:1px solid #e2e2e2;
background:#f9f9f9;
padding:5px 10px;
position:relative;
cursor:pointer;
transition:all 0.4s;
}
button:hover{
background:#333;
border:1px solid #333;
color:#fff;
}
.notifications {
position:absolute;
border-radius:2px;
font-size:14px;
background-color:red;
color:#fff;
padding:2px 5px;
top:-10px;
right:-10px;
}
<button class="button">
Notes<div class="notifications">1</div>
</button>
The problem is that i have a form with different fields of different sizes. Each field is inside a div with float:left. And they distribute automaticlly in 2 columns. If they are all of the same height there is no problem but if not it happens the following:
The divs are selected in blue. I need that the last div for example goes up because if not i have a dead space there and in many other forms of my site. They are dinamic forms so i cant solve it manually. The placement must be automatic. I searched in Stack Overflow and in the internet but i couldnt find any solution.
Here is the Divs CSS
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
And the General CSS
#popup{
width:645px;
height:auto;
background-color:#e3e3e3;
border-style:solid;
border-width:1px;
border-radius:5px;
border-color:#afafaf;
padding:15px;
color:#4d4d4d;
}
#popup #titulo{
font-size:15px;
font-weight:bold;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#afafaf;
padding-bottom:10px;
}
#popup #form #input{
display:block;
width:289px;
margin-top:10px;
}
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
#popup #form .right{
float:right;
margin-right:25px;
}
#popup #form #input label{
font-size:12px;
font-weight:bold;
}
#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
font-size:12px;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
width:280px;
background-color:#f0f0f0;
}
#popup #form #input #foto{
width:191px;
height:87px;
background-image:url(images/img_background.png);
border-style:solid;
border-width:1px;
border-color:#afafaf;
border-radius:5px;
}
#popup #form input[type='button']{
text-align:center;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
font-size:12px;
color:#4d4d4d;
-moz-box-shadow: inset 1px 1px 1px #ffffff;
-webkit-box-shadow: inset 1px 1px 1px #ffffff;
box-shadow: inset 1px 1px 1px #ffffff;
}
#popup #form #input input[type='button']{
width:82px;
height:17px;
margin-left:4px;
line-height:14px;
}
#popup #form #submit_buttons{
text-align:right;
border-top-style:solid;
border-top-width:1px;
border-top-color:#afafaf;
padding-top:10px;
margin-top:15px;
}
#popup #form #submit_buttons input[type='button']{
width:82px;
height:30px;
}
#popup #form input[type='button']:hover{
background-color:#cccccc;
cursor:pointer;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#popup #form #input table{
width:284px;
margin-top:2px;
margin-bottom:5px;
}
#popup #form #input table tr{
text-align:right;
vertical-align:top;
}
#datepicker{
background-image:url(images/datepicker.png);
background-repeat:no-repeat;
background-position:right;
}
#popup #form #input textarea{
height:115px;
max-height:115px;
min-height:115px;
width:275px;
max-width:275px;
min-width:275px;
}
I'm providing a simplified version of the problem, but is simple enough to carry on to your example. You just need to alternate the float between left and right so they don't break :)
HTML Code:
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>
CSS Code:
.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}
Live example:
http://jsfiddle.net/h4kE8/
I would try throwing a position:relative; in with those two DIVs. I've found that any sort of positioning problem can usually be fixed by setting a clear position attribute.
Also helps when using position:absolute; to have it's parent's position set. If that doesn't work, don't underestimate tables. People might not like them much, but if you know how to use them, they work well for stuff like this.
Lengthy, but the best advice I can give.
The Multi-column Layout module spec has been around for a long time, but browsers have been slow to implement, so IE is almost definitely out (though there may be a polyfill that will help it limp along).
http://www.quirksmode.org/css/multicolumn.html
http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/
Note that this will change the order that your elements display, but it will eliminate the gap.
I would in your case have the id, nombre and descripcion sit in the same div, call it left div. Then have the rest of the content on the right sit on another div call it right div and have them both float left. as follows
css
.left {
float:left;
}
.right {
float:left;
}
HTML
<div id="left">
/*id, nombre and descripcion */
</div>
<div id="right">
/* the rest */
</div>
How could I wrap a border around another border and have them both use inset drop-shadows (like double matting in a picture frame)?
You can accomplish this using the :before and :after pseudo-elements. See jsFiddle demos at end of answer.
HTML
<div class="frame"><img src="../img/logo.png"></div>
CSS
.frame {
display:inline-block;
position:relative;
margin:20px;
z-index:5;
padding:10px;
background:#376b90;
}
.frame:before {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:0;
top:0;
right:0;
bottom:0;
box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:5px;
top:5px;
right:5px;
bottom:5px;
box-shadow:inset 0 0 3px 2px black;
}
Example Usage
Both shadows outside
One shadow inside, one shadow outside
Both shadows inside
Two inset shadows, one outset shadow, and custom background - Requested by OP
Inset borders - Replicating https://stackoverflow.com/a/10904061/526741
Variable length content
you could nest the divs as shown in - http://jsfiddle.net/nG4Td/2/
<div class="border">
<div class="border2">
<p>hello world</p>
</div>
</div>
css
.border{
border: 5px inset black;
background:#ccc;
width:200px;
height:200px;
padding:20px;
}
.border2{
border: 5px inset black;
background:#eee;
width:150px;
height:150px;
padding:20px;
}`
Here are my fiddle's on the topic
OPTION 1)
You can use Pseudo Classes to accomplish this
Html
<span class="doubleMatt">
<img src="http://lorempixel.com/400/200/" />
</span>
CSS
span,img{padding:0;margin:0;border:0;}
.doubleMatt{
position:relative;
display:inline-block;
font-size:0;
line-height:0;
}
.doubleMatt:after{
position:absolute;
top:1px;
left:1px;
bottom:1px;
right:1px;
border:4px solid rgba(255,255,255,0.5);
outline:1px solid rgba(0,0,0,0.2);
content:" ";
}
OPTION 2)
You can use some basic (one dimensional) goodness
CSS
.basicMatt {
background:#222;
padding:3px;
border:3px solid #666;
}
HTML
<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />
OPTION 3)
you can use an Outline
CSS
.outlinedMatt{
background:#fff;
padding:8px;
border:3px solid #222;
outline:3px solid #666;
margin:3px;
}
HTML
<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />