I have the following HTML:
<div id="pager">1
2
3<span class="elip">...</span>
4</div>
And CSS:
.elip
{
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a{
BORDER-BOTTOM: #E6E6E6 1px solid;
BORDER-TOP: #E6E6E6 1px solid;
BORDER-RIGHT: #E6E6E6 1px solid;
BORDER-LEFT: #E6E6E6 1px solid;
color: #585858;
padding: 7px;
padding-top:30px;
text-decoration: none;
color: #808080;
}
No matter what I do, I cannot get the '...' to be aligned down the bottom at the bottom. When testing in JSFiddle, all works, but not outside it as the shot below (red X is what it is, green tick is what I would like):
Padding, text size, alignment, line height, nothing seems to work.
Try this:
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
position:relative;
bottom:-10px;
}
You could use relative positioning, I also cleaned up your css a bit: http://jsfiddle.net/ptriek/LfUDB/2/
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a {
border: #E6E6E6 1px solid;
color: #808080;
padding:30px 7px 7px 7px;
text-decoration: none;
}
#pager span {
top: 9px;
position:relative;
}
Related
I have a button with border on the right and the bottom, when I hover that, both border is hidden, and show border on the top and the left with color same as background-color on parent that button, i want to make like a 3D button effect, but its not working.
Here's look like my button when i hover it
What i want is the border-color is red, and if the parent background-color is green the border-color is green
And here's my code
.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
color:#fff;
border:3px solid #0b527a;
border-top:0;
border-left: 0;
border-radius:3px;
text-transform:uppercase;
display: block;
overflow: hidden;
white-space: nowrap;
}
.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;
color:#fff;
}
Here's my fiddle https://jsfiddle.net/evpsthx3/
Problem is your parent has no border color set. So just set the border color to the parent. Something like this: https://jsfiddle.net/evpsthx3/9/
<div class="parent red">
<a class="cta">BUTTON</a>
</div>
<div class="parent green">
<a class="cta">BUTTON</a>
</div>
.parent.red {
background-color: red;
border-color: red;
}
.parent.green {
background-color: green;
border-color: green;
}
You can give that effect by adding the below css code, Hope it wrks.
.cta:hover {box-shadow: #000 5px 5px 5px;}
you can try this one:
.parent {
width:300px;
height:60px;
padding:30px;
}
.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
color:#fff;
border:3px solid #0b527a;
border-top:0;
border-left: 0;
border-radius:3px;
text-transform:uppercase;
display: block;
overflow: hidden;
white-space: nowrap;
}
.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;
color:#fff;
box-shadow: #242729 6px 6px 6px;
}
DEMO HERE
I've created a "tag" shape using CSS (the rectangular base + triangle). Since I have more than one tag shape I wanted to add the hover property to the class which defines that shape and that way automatically attach hover to all tags. However, it appears its not working and the only way to apply hover is by id. Why is that? There surely must be an easier way to apply hover to several elements at once.Second question, since tag shape is built using two shapes, how should the hover color transition should be made?
JSfiddle
#q{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
#q:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: background 0.3s;
}
#q:hover{
background: green;
border-left:18px solid lightblue;
}
HTML:
<span class="pricetag-right" id="q">tag is here!</span>
DEMO PAGE
#q{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
#q:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#q:hover{
background: green;
}
#q:hover:after{
border-left-color:green;
}
You needed to set the transition of the :after to border and not background, since it's the border property being transitioned.
Here's a fiddle based on vsync's with class selectors:
https://jsfiddle.net/ajanini/9z3Lvp90/
.pricetag-right{
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height:65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background:#f3f3f3;
transition: background 0.3s;
}
.pricetag-right:after{
position:absolute;
content:"";
right:-19px;
width: 1px;
height:0px;
border-left:18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
.pricetag-right:hover{
background: green;
}
.pricetag-right:hover:after{
border-left-color:green;
}
I have a triangle made with CSS for a dropdown menu.
HTML:
<span class="top-link link-bar-link">Affiliate Content
<span class="caret"></span>
</span>
CSS:
#top-links-bar{
padding:30px;
border:0px solid black;
background: linear-gradient(gray, white);
}
.caret{
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid black;
display:inline;
}
The triangle is showing up, but it's above the text instead of next to it, as I intended.
.caret {
...
display: inline-block;
vertical-align: top; /* or 'middle' */
margin-top: 5px;
}
Demo
FIDDLE:
Try this:
CSS:
#top-links-bar {
padding:30px;
border:0px solid black;
background: linear-gradient(gray, white);
}
.top-link {
position:relative;
}
.caret {
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid black;
display:inline-block;
vertical-align:middle;
}
I am attaching two division's border and remove the border where two division intersect but its not remove. I have tried this code.
<div style="border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:none;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;">
<strong style="font-size:18px; color:#000">ABC</strong>
</div>
<div style="width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;">
Hello
</div>
Can anybody help me to solve this error.
jsFiddle: http://jsfiddle.net/9XFDp/1/
Just nudge the top div by 1px from top and use some background-color or even border-bottom is fine
Demo
Added the below properties to the header div
position: relative;
top: 1px;
background: #fff;
z-index: 1;
Note: Don't use inline CSS, create classes instead.
Demo 2 (Without using background-color, used border-bottom: 1px solid #fff; instead)
Like this
DEMO
CSS
.title{
border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:1px solid #ffffff;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;
font-size:18px; color:#000
font-weight:bold;
position:relative;
top:1px;
}
.content{
width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;
}
I have a div that contains links (a href). All other margins are working with a href but Top margin is not working with a href. I want to place links in middle but because of not working of top margin it is not being possible. I heared by setting position or display it can work. Please suggest a cross broswer solutions for it.
div.MainContainer div.Links
{
height: 57px;
width: 100%;
border-top: solid 0px #404040;
border-left: solid 2px #404040;
border-right: solid 2px #404040;
border-bottom: solid 2px #404040;
background-image: url("../Images/links_background.png");
}
div.MainContainer div.Links a
{
font:12px verdana;
color:White;
margin:10px;
border:dashed 1px white;
margin:15px 20px 20px 20px ;
width:100px;
}
You need to float element to make margin working or use padding instead.
div.MainContainer div.Links a
{
float: left;
font:12px verdana;
color:White;
margin:10px;
border:dashed 1px white;
margin:15px 20px 20px 20px ;
width:100px;
}
Height of inline elements can't be changed, just use display:inline-block; on your links.
Try below. I added overflow: hidden to the top definition and display: block and float: left to the bottom definition. The first addition clears the float being added, and the last two allow the margin on the links to work correctly.
div.MainContainer div.Links
{
height: 57px;
width: 100%;
border-top: solid 0px #404040;
border-left: solid 2px #404040;
border-right: solid 2px #404040;
border-bottom: solid 2px #404040;
background-image: url("../Images/links_background.png");
overflow: hidden;
}
div.MainContainer div.Links a
{
font:12px verdana;
color:White;
margin:10px;
border:dashed 1px white;
margin:15px 20px 20px 20px ;
width:100px;
display: block;
float: left;
}
Try padding-top on the div.Links rather than margin-top on the div.Links a.
use padding-top: 1px (at least) for the div.Links and you don't need to use float on the div.Links a