The following html/css works correctly on the first and last "she loves him a lot." lines, why doesn't it draw the rounded rectangle around the entire sentence for the 3, 4, 5 iterations.
http://jsfiddle.net/xa3apsdc/16/
attention to this code:
span[class]:before {
width:100%;
text-align:center;
float:right;
font:bold 10px arial;
color:#00f;
content: attr(class) "";
}
Try like this: Demo
CSS:
span{
text-align:center;
display:inline-block;
border:1px solid black;
border-radius:15px;
padding:2px;
}
You have given rounded corner only for first and last child. thats why it was not working
that's because you are not using, Add this jsFiddle
span{
border:1px solid black;
border-radius:15px;
padding:2px;
}
Related
Switching from tables to divs for layout purposes sounds an attractive decision, yet it's very painful. I haven't still been able to use float and oveflow properly to get divs aligned properly. Here are I have the following html and css:
HTML
<div class="div-row">
<div id="divOfficers" class="div-column">DIVOFFICERS</div>
<div id="divTasks">DIVTASKS</div>
CSS
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
}
.div-column {
margin-right:3px;
float:left;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
}
Basically, I need the divTasks to stand right to the divOfficers, but without stretching over it. But here's what I get:
I've cleared the overflow in the parent div but as you can see that does not help. What else do I have to do?
just give a float:right to divtasks as well as you did float:left with divofficers. if it is what you want than your problem solved or let me know if you need something else to do and put your code on jsfiddle please as it will help a lot
Try use CSS3 code, If you use float maybe have problem with long content
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
display: table;
}
.div-column {
margin-right:3px;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
display: table-cell;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
display: table-cell;
}
Demo: http://jsfiddle.net/vsok/dqmdv7oa/
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>
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/
i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).
the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.
.button {
border:none 0;
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0;
padding-left:7px;
display:block;
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0;
display:block;
height:32px;
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top;
padding-right:7px;
display:block;
height:32px; }
and
.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }
EDIT: # mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome
Either use
<input type="button" value="Click Me"/>
which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...
a.likeAButton {
background-color:#67a0cf;
border:1px outset #2683cf;
color:#fff;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:hover {
background-color:#5788af;
border:1px outset #2683cf;
color:#fcffdf;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:active {
background-color:#67b4cf;
border:1px inset #1d659f;
color:#e0ffaf;
padding:4px 2px 2px 4px;
margin:1px;
text-decoration:none;
}
Fake Button
you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.