I simply want .work-description to have a bottom border also when .project-link is hovered.
.work-description { padding-top:50px; width:50%; margin:0 auto;}
.project-link { font-size:3em; text-decoration:none; }
.project-link:hover { border-bottom: 3px solid #000; }
.project-link:hover + .work-description {
border-bottom: 3px solid #000;}
I am not sure if you are aware that the + is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, the element having work-description class has to immediately after the project-link class.
If you have the right html (as shown below in the example), your code just works fine.
.work-description {
padding-top:50px;
width:50%;
margin:0 auto;
}
.project-link {
font-size:3em;
text-decoration:none;
}
.project-link:hover {
border-bottom: 3px solid #000;
}
.project-link:hover + .work-description {
border-bottom: 3px solid #000;
}
<input type="button" value="abcd" class="project-link">
<div class="work-description">some random text here</div>
Hope this helps!!!
Related
I have a Bootstrap list-group that looks like:
This is my CSS:
$border: 1px solid rgba(0, 0, 0, 0.125);
.customer-orders-filters {
.list-group {
box-shadow: $card-box-shadow;
color: $text-color;
font-weight: bold;
.list-group-item {
border-left: none;
border-right: none;
border-bottom: $border;
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: none;
}
&.active {
border-left: 5px solid $blue;
}
}
}
}
As you can see, the border-left bottom is not very right.
I tried to remove the border-bottom on the first-child, then add a border-top to the nth-child(2) but that doesn't work, the border-top is not present. I also tried to set a border-style: outset to the border-bottom of the first-child but without effect.
I would like that the border-left be totally above or totally under the border-bottom, but not half...
Do you know how could I fix it? Should I use a pseudo-element?
Consider using a background and border like below:
.box {
width:200px;
height:50px;
padding-left:5px;
border-bottom:2px solid red;
background:linear-gradient(blue,blue) left/5px 100% no-repeat;
}
<div class="box"></div>
Or the opposite:
.box {
width:200px;
height:50px;
padding-bottom:2px;
border-left:5px solid blue;
background:linear-gradient(red,red) bottom/100% 2px no-repeat;
}
<div class="box"></div>
You can also do with box-shadow:
.box {
width:200px;
height:50px;
padding-left:5px;
border-bottom:2px solid red;
box-shadow:5px 0 0 blue inset;
}
<div class="box"></div>
It looks like the problem is being caused by Bootstrap adding "margin-bottom: -1px;" to the .list-group-item class. Overwriting that rule (and moving the border line to the bottom) seems to fix the issue. (At least in Chrome, I didn't test other browsers.)
Ex:
.list-group-item {
border-left: none;
border-right: none;
border-top: $border !important;
border-bottom: 0;
margin-bottom: 0;
... etc ...
Pen: https://codepen.io/anon/pen/moyOGg
Note that making this change may have other consequences (the Bootstrap devs must have put that -1px margin rule in there for a reason) so you'll need to do some more testing!
I work in a new project, I´m doing the "chat part" a one-to-one chat.. with php and ajax.
I´m new of css stuff.. while I was testing the code, I found a problem:
The text does not go down and continues skipping over design, I put an image for better understanding.
The css code:
.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}
Hope u can help me, I think it´s a simple error design that I don´t know because I´m new in design stuff.
Use exact words instead of spam words like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa this is not a word that why you are facing this issue.
Even If you want to use like this then you can use overflow-wrap: break-word;
You can use word-break:break-all; property or word-wrap:break-word; property:
For example :
div {
width: 200px;
border: 2px solid #CCC;
word-wrap: break-word;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
I'm trying to create in a single box, two arrows, one as a pointer and the other one into the box just behind.
Can not find the way to get the arrow right behind.
Someone can help me??
here i post the link with the sample: http://jsfiddle.net/7Esu2/
CSS:
.arrow {
width:210px;
height:40px;
background-color:#CBCBCB;
border: 1px solid #CBCBCB;
position:relative;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
}
.arrow:after {
content:'';
position:absolute;
top:-1px;
left:210px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
.arrow:before {
content:'';
position:absolute;
top:-1px;
left:211px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
HTML:
<div class="arrow">
FLECHA
</div>
I prefer using inline-blocks over absolute positioning. Also, :before and :after create child elements (inside) the element you specify them on (at the beginning and end). For this, it would probably be best to have a wrapper (or inner) block, like so:
<div class="arrow">
<div class="inner-arrow">
FLECHA
</div>
</div>
Then the inner block is going to get most of the styling, as the wrapper is primarily there to contain the :before and :after. The wrapper (.arrow) needs to have font-size: 0 (or some other method to make the white-space around the inner block, .inner-arrow, go away).
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:40px;
display: inline-block;
background-color:#CBCBCB;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
vertical-align: middle;
}
Most of the styles for .arrow:before and .arrow:after will be the same, so we'll group those. Then specify the differences below (they have to be below to override the common styles).
.arrow:before,
.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:20px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: #CBCBCB;
border-bottom-color: #CBCBCB;
border-right-color: #CBCBCB;
}
.arrow:after {
border-left-color: #CBCBCB;
}
This is all in the a fiddle.
I'm making an error message, using a pointer image that should give the left side a border. You can see an example here.
My current css is:
span.arrow {
background-color:white;
background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center;
height:17px;
display:inline-block;
}
span.error {
display:inline-block;
padding-right:2px;
background-color:white;
margin-left:10px;
height:15px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
box-shadow:5px 5px 10px #888888;
position:relative;
top:-2px;
}
And html to display the error:
<span class='arrow'>
<span class='error'>
Errormessage.
</span>
</span>
Now first of all, the code seems a bit messy. Like having to position the span up two pixels is a bit strange. Nevertheless it seems to work in Chrome, FF & Opera, but not in IE9.
If it isn't clear: the box should perfectly aline with the triangle-image.
span.arrow {
background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center transparent;
line-height:17px;
padding-left:10px;
display:inline-block;
}
span.error {
padding-right:2px;
background-color:white;
line-height:15px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
display:block;
}
span.error {
display:inline-block;
padding-right:2px;
background-color:white;
margin-left:10px;
line-height: 17px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
box-shadow:5px 5px 10px #888888;
position:relative;
top:-2px;
}
Generally if you make your line-height match your content area height, the text will be vertically aligned.
http://jsfiddle.net/dshFk/3/
I looked in IE and it looked fine.
How can I style a button on IOS to look like the default active state?
I will be using touchstart, but want the button to look like a regular button that is being pressed.
HTML:
<button class="active"> I am pressed </button>
CSS:
button.active{
???
}
Images: (sorry, they are not the exact same crop-size)
EDIT: my latest attempt is:
button.active
{
border-radius: 12px;
border: 1px solid black;
background-color: #888;
box-shadow: 0 0 2px 2px #888;
}
It’s pretty close but the border shrinks in.
You could do this, faking a second border using the :before pseudo-elements
.active{
background:#e2e2e2;
font-weight:bold;
width:92px;
padding:.5em;
border:3px solid #e2e2e2;
border-radius:15px;
position:relative;
z-index:10;
}
.active:before{
content:"";
display:block;
position:absolute;
z-index:-1;
top:1px;
left:1px;
right:1px;
bottom:1px;
border:1px solid #000;
border-radius:15px;
}
Example: http://jsfiddle.net/E3jXr/