I have a vertical menu having an item "Click here to get the scientific name".
on hover it is showing like
I need to get the overflow part after the black background image to be in the next line(i cannot increase the image width at all.). How can I write the style for that.
css:
on hover
{
display: block;
background: url('/../.png') no-repeat 0px 2px #2F2F31;
text-decoration: none;
color:..;
}
This is coming under
<td>
<div id="first">
<ul id="second">
<li>Click here to get the scientific name
And css:
#first {
display: block;
width: 180px;
min-height: 50px;
float: left;
}
ul#second {
display: block;
clear: both;
margin: 50px 0px 12px 0px;
border-bottom: 1px solid
#C8C8C8;
}
ul#second li {
border-top: 1px solid
#C8C8C8;
padding: 0px;
display: block;
}
ul#second li a {
color:
#004C8E;
margin: 4px 0px 4px 0px;
padding: 4px 0px 4px 12px;
display: block;
text-decoration: none;
font-size: 12px;
background: url('/../.png') no-repeat 0px 2px;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background:
transparent;
}
On hover, you should explicitly set the width of the element to equal the width of the image.
FOr this you can use word-wrap:break-word;. Write like this:
p{
word-wrap:break-word;
}
Related
I have a text in the middle of the div block with a font size 80px. When I hover on the div block, it will change the border size from 1px to 5px with a blue color but the text will moves down.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.calendarday-number:hover {
margin: 12px 2px;
}
.calendarday-container:hover {
border: 5px solid #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Jsfiddle: http://jsfiddle.net/f0k6r9nb/
I have tried to change the margin in the calendarday-container:hover .add-day-ico but it didn't help to resolve the issue.
Can you please show me an example how I can stop the text moving down on hover?
Thank you.
Changing the width of the border from 1px to 5px and recalculating the inner parts is not a practical solution. You could use an additional element, which has 5px of transparent border and change it to 5px of colored border on hover.
Another simple solution would be to use outline instead, as it doesn't add to the elements dimensions:
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-container:hover {
outline: 5px solid #2e7ad1;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.add-day-ico {
opacity: 0;
width: 21px;
height: 21px;
position: absolute;
bottom: 0;
right: 0;
}
.calendarday-container:hover img {
opacity: 1;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" class="add-day-ico">
</a>
</div>
A typical approach to showing a border on hover is to have the non-hover state be transparent or a color that matches the background along with the width matching that of the border when hovered.
In this case, there's an existing 1px border. Here, I would change the gray border blue, then use an inset box-shadow to add the additional 4px of the border.
Note: I also removed some margin for .calendarday-number on hover so the number does not shift.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
/*
.calendarday-number:hover {
margin: 12px 2px;
}
*/
.calendarday-container:hover {
border-color: #2e7ad1;
box-shadow: inset 0 0 0 4px #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Add this:
.calendarday-container {
border: 5px solid transparent;
outline: 1px solid #ccc;
outline: none;
}
.calendarday-container:hover {
outline: none;
}
Remove this:
.calendarday-number:hover {
margin: 12px 2px;
}
You can use a pseudo element like this. I also removed lot of unnecessary css that was fighting each other
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }
/* Normal */
.calendarday-container {
width: 150px; height: 150px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.calendarday-container:after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ccc; z-index: -1;
}
.caldndarday-add { text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico { width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }
/* Hover FX */
.calendarday-container:hover:after { border: 10px solid navy; }
.calendarday-container:hover .calendarday-number { color: navy; }
<div class="calendarday-container" data-day="0" data-dropable="true">
<a class="caldndarday-add" href="/autoresponder/create_day.php?day=0" data-action="click">
<span class="calendarday-number">0</span>
<img class="add-day-ico" src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png">
</a>
</div>
The text was moving down because, There was increase in border-width from 1px to 5px while hover.
You can either maintain a outline around the box using outline property, and keeping the border: 5px solid transparent to border: 5px solid #2e7ad1 while hovering.
I've created a working fiddle for you, for better understanding: Link to Jsfiddle
I am center aligning inline-block elements by using a 50% margin and transformation.
When I add transform: translateX(-50%); it causes a thin border to appear on the left side of my divs (its a little hard to see but its on the left of 'all' and left of the 'search products').
If i try changing the translate to diffrent percentages it stays; sometimes the border gets thicker when i change the percentage. Anyone know why this could be happening?
Here is my code incase i missed something that might be important:
HTML:
<div class="tabs">
<a class="tab active">All</a>
<a class="tab">New</a>
<a class="tab">Popular</a>
<i class="fa fa-search"></i>
<div class="search-input active">
<%= text_field_tag :term, params[:term], placeholder: "Search products..." %>
</div>
</div>
CSS:
.tabs {
display: inline-block;
vertical-align: bottom;
margin-left: 50%;
transform: translateX(-50%);
}
.tabs .tab {
margin-right: 32px;
color: #92969c;
height: 40px;
line-height: 40px;
text-decoration: none;
display: inline-block;
vertical-align: bottom;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
}
.tabs .tab.active {
color: #25282c;
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
border-bottom: 2px solid #25282c;
}
.search-input {
display: inline-block;
max-width: 240px;
padding: 0 32px 0 10px;
height: 40px;
position: relative;
}
.search-input input {
outline: none;
height: 40px;
width: 100%;
border: none;
padding: 0;
}
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
EDIT: It seems like the issue is happening because of my box-shadow code:
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
But i dont want to have to remove my box shadow to fix this...
This is a known bug with translate in transforms, and the solution is the null translation hack:
.tabs {
display: inline-block;
vertical-align: bottom;
margin-left: 50%;
translateX(-50%) translate3d(0,0,0);
}
By adding translate3d(0,0,0) to your element, you can fix your box shadow problem without removing them!
It seems you want it to be a border
By changing
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
to
.search-input.active {
border-bottom: 2px solid #25282c;
padding-bottom: 0px;
}
You will get the same result without the faded line on the side.
Instead of using a shadow to make that border wider, without causing the other tabs to move down, you can add a transparent bottom border to all of them and change its color just on the active one.
Also, you can use Flexbox instead of translate to horizontally center the menu.
Any of these options alone would fix your problem. Here's an example using both:
.tabs {
display: flex;
justify-content: center;
font-family: monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
.tab {
margin: 0 16px;
color: #92969c;
height: 40px;
line-height: 40px;
text-decoration: none;
vertical-align: bottom;
cursor: pointer;
border-bottom: 4px solid transparent;
}
.tab.active {
color: #25282c;
border-bottom-color: #000;
}
.tab:hover {
border-bottom-color: cyan;
}
.search-input {
max-width: 240px;
padding: 0 32px 0 16px;
height: 40px;
position: relative;
border-bottom: 4px solid transparent;
}
.search-input.active {
border-bottom-color: #000;
}
.search-input input {
outline: none;
height: 40px;
width: 100%;
border: none;
padding: 0;
font-family: monospace;
font-size: 12px;
letter-spacing: 1px;
}
<div class="tabs">
<a class="tab active">All</a>
<a class="tab">New</a>
<a class="tab">Popular</a>
<div class="search-input active">
<input type="text" />
</div>
</div>
I had the same issue and the ticked solution didn't helped me so I used margin-left 100% - a couple of percentage for this to work
Before
transform: translateX(100%); top: 0; right: 0;
After
top: 0; margin-left: 97%;
and this worked for me
I am working on creating a custom tooltip plug-in and am having trouble with the CSS and HTML layout of it.
I would like to have something like this:
Nested inside some div container.
Here is a JSFiddle of what I have at the moment, but as you can see - I'm having some issues.
Thanks to all you CSS gurus!
Here is the updates JSFiddle I made for you: http://jsfiddle.net/Y2E36/2/ All I did was add Display:inline-block; to status-icons
Here is a basic re-creation for you.
Fixed h2 closing tag
Have a jsbin example!
HTML
<div class="contact">
<img src="http://www.placehold.it/100X120/FFFFFF" />
<div class="actions">
</div>
<div class="details">
<h1>John Smock</h1>
<h2>In since Thursday, 5/9/2013 at 9:45 AM</h2>
<p><span>Lync (Away 5 Min)</span> Lenexa</p>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica;
}
.contact {
height: 120px;
width: 450px;
background: #ccc;
border-top: solid 1px #000;
}
.contact img {
border-left: solid 12px orange;
border-right: solid 1px #000;
float: left;
}
.actions {
float: left;
border-right: solid 1px #000;
margin: 0 10px 0 0
}
.actions a {
background: url(http://www.placehold.it/20/FFFFFF) no-repeat;
width: 20px;
height: 20px;
display: block;
margin: 15px 13px;
border: none;
}
.details h1 {
font-size: 1em;
padding: 8px 0 5px;
}
.details h2 {
font-size: 0.8em;
font-weight: normal;
padding: 3px;
}
.details p {
font-size: 0.8em;
margin: 48px 0 0;
}
.details span {
padding: 0 5px 0 0;
border-right: solid 1px #000;
}
I am having a problem. My bottom border is "overlapping" my right border on the same element.
This is how it looks like: http://awesomescreenshot.com/0311z2fy84
As you can see, the green right borders bottom, is looking messed up, because of the bottom gray border. How can I fix this?
This is the css:
.side-menu{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.side-menu li{
border-bottom: 1px solid #E6E7E9;
padding: 7px;
padding-left: 0px !important;
width: 192px;
}
.side-menu li.active{
color: #CACDD0;
border-right: 6px solid #2CC588;
width: 199px;
}
Edit: Added jsFiddle: http://jsfiddle.net/wu958/
I assume the <li> elements will have an <a> link inside?
You could add the border right to the <a> elements like so:
HTML
<li class="active">Banners</li>
CSS
.side-menu li a {
padding: 7px;
display: block;
}
.side-menu li.active a {
border-right: 6px solid #2CC588;
}
Refer to this JsFiddle which shows a better working example.
try this:
.side-menu{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.side-menu li{
border-bottom: 1px solid #E6E7E9;
padding: 7px;
padding-left: 0px !important;
width: 192px;
}
.side-menu li.active {
color: #a2a7ad;
border-right: 6px solid #2CC588;
width: 204px;
}
I simply changed the width of the class. "side-menu li.active" and seems to work.
You can use the ::after pseudo-element to avoid this kind of problems :
.side-menu li{
line-height: 35px;
padding-left: 18px !important;
width: 210px;
color: #37434f;
}
.side-menu li::after {
content: ' ';
display: block;
border-bottom: 1px solid #E6E7E9;
}
Update JSFiddle
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}