I would like to center the following 2 buttons side by side rather than underneath one another. Here is an example of how it is looking at the moment on JS Fiddle
Could you advise me the best way to handle this? Any help is really appreciated.
Define display:inline-block to your anchor tags & define text-align:center to it's parent. Write like this:
a.button {
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/*For IE7*/
padding: 3px 10px 3px 10px;
width:50px;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #636363;
text-decoration: none;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
}
.parent{
text-align:center;
}
HTML
<div class="parent">
<a class="button">Test</a>
<a class="button">Test</a>
</div>
Check this http://jsfiddle.net/2ws9r/11/
add a container with fixed width and margin 0 auto;
http://jsfiddle.net/2ws9r/13/
hope it helps
JSFiddle
<div>
<a class="button">Test</a>
<a class="button">Test</a>
</div>
div{ text-align: center; }
a.button {
display: inline-block;
padding: 3px 10px 3px 10px;
width:50px;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #636363;
text-decoration: none;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
}
a.button:hover {
color: #179FD9;
}
Related
Im creating a css only tooltip for my new website project.
This tooltip shows right on touchdevises. The only problem is that touchdevises can't close the tooltip.
How can I modify the code that touchscreen users can close the tooltip if they touch somewhere around the tooltip? Or maybe if they touch on the tooltip visible text link?
I just want to use css if possible.
The CSS that I have:
a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
This is the html:
Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip.</span>
Thanks for help me out guys!
Regards, Dylan
I got no problems as u describet but i tryed this and it works even better on my device. So check it that helps you.
Fiddle
HTML:
<a href="#" class="tooltip">
Normal Text
</a>
<span>
<strong>Tooltip title</strong><br />
This would be the content of the tooltip.
</span>
CSS:
a.tooltip {
outline:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip:hover {
text-decoration:none;
cursor: help;
}
span {
z-index:10;display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:220px;
line-height:17px;
}
a.tooltip:hover + span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
span {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
I am just trying to design my Search textbox like this
and I have tried like this,
border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:5px;
and I am getting like,
I can give style and color for border-bottom, I don't know how to design that small line in both right and left sides. can anyone help me out here, thanks in advance
You can try this:
<div class="inputWrapper">
<input type="text">
</div>
and the css:
.inputWrapper {
border-bottom: solid 1px #009999;
border-left: solid 1px #009999;
border-right: solid 1px #009999;
overflow: visible;
max-height: 2px;
display: inline-block;
padding: 2px;
}
input {
outline: none;
border: none;
background: transparent;
padding-bottom: 3px;
position: relative;
bottom: 5px;
}
The idea is basically to wrap the input with a wrapper which will have the lines of your style. Here is the fiddle: http://jsfiddle.net/jBq4u/3/
Here you go: http://codepen.io/anon/pen/rjlJv
HTML
<div id="container">
<input type="text" id="something" />
</div>
css
#container {
background-color: grey;
display: inline-body;
padding: 10px;
width: 13%;
}
#something {
border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:10px;
background-color: grey;
}
create one background image like you need bottom line and put there in your class for textbox. it should work I guess.
This fiddle comes a little close.
// HTML
<span class="l"> </span>
<input type="textbox" id="tb"/>
<span class="r"> </span>
// CSS
#tb{
border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:5px;
border-right : solid 1px #33B5E5;
border-left : solid 1px #33B5E5;
}
span.l{
position:relative;
left : 10px;
top:-2px;
background-color:white;
}
span.r{
position:relative;
left : -10px;
top:-2px;
background-color:white;
}
You can also try using Pseudo element.
I'm trying to create a triangle clickable button like div, in the attached image is what I want to actually achieve. image
This is what I've reached so far,JsFiddle
HTML:
<div class="input"><</div>
CSS:
body {padding:40px;}
.input {
text-decoration:none;
padding:5px 10px;
background:#117ebb;
font-size:9px;
color:#fff;
border-radius:5.5px 0px 0px 5px;
box-shadow: 0px 5px 3px #003355;
position:relative;
width:1px;
height:12px;
}
.input:after {
position:absolute;
top:0px;
left:-10px;
content:" ";
width: 0;
height: 0px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right:13px solid #117ebb;
border-radius:0px 0px 0px 20px;
}
css pure triangle and with jquery you could add click events:
html
<div class="input"></div>
jquery
$(document).ready(function(){
$(".input").click(function(){
alert('hello arrow');
});
});
css
body {padding:40px;}
.input{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
cursor: pointer;
}
http://jsfiddle.net/TvJ6t/
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
Here is my html:
<div class="pagination">Page
«
1
2
<strong>3</strong>
4 ...
104
»
</div>
My css:
div.pagination { width: 90%; margin: 15px auto; float:right; text-align: right; }
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination strong { border: 1px solid #0667B9; background-color:#FFFFFF; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination a:hover { border: 1px solid #0667B9; background-color:#0667B9; padding: 3px 6px; color:#B4D6F2; margin: 1px; }
And what I am getting in result:
The problem you see, things are getting overlapped, what I would like to avoid.
Thanks in advance for any help. Cheers.
It's because you used float I think.
Can you get away with using display: inline instead?
EDIT:
BTW I would have used list-items to display the paginator.
add a line-height:30px; to div.pagination
I copied your code and it looks fine but try this
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 5px 10px; }
The padding pushes the border outside. So you might need some margin to push the links downward.
Add
display:block; width:10px; float:left;
to
div.pagination a