Limit hover to the text width - html

I have these text which I added hover to them, But I want the border (border: 2px solid grey) to be limited around the text and not the entire box, how is it possible?
jsFiddle
.eachTitle {
text-align: left;
font-size: 50px;
font-family: "riesling";
color: #80FF00;
}
.eachTitle:hover {
border: 2px solid grey;
cursor: pointer;
}
<div class="eachTitle" id="menu">Our Menu</div>
<div class="eachTitle" id="gallery" style="margin-left: 80px;">Gallery</div>
<div class="eachTitle" id="map" style="margin-left: 160px;">Where are we?</div>
<div class="eachTitle" id="about" style="margin-left: 240px;">About us</div>


.eachTitle {
text-align: left;
font-size: 50px;
font-family: "riesling";
color: #80FF00;
}
.hoverspan:hover {
border: 2px solid grey;
cursor: pointer;
}
<div class="eachTitle" id="menu"><span class="hoverspan">Our Menu</span></div>
<div class="eachTitle" id="gallery" style="margin-left: 80px;"><span class="hoverspan">Gallery</span></div>
<div class="eachTitle" id="map" style="margin-left: 160px;"><span class="hoverspan">Where are we?</span></div>
<div class="eachTitle" id="about" style="margin-left: 240px;"><span class="hoverspan">About us</span></div>


Wrap each element in span and apply border to that element.
.eachTitle {
text-align: left;
font-size: 50px;
font-family: "riesling";
color: #80FF00;
cursor: pointer;
}
.eachTitle span {
border: 2px solid transparent;
}
.eachTitle:hover span {
border-color: grey;
}
<div class="eachTitle" id="menu"><span>Our Menu</span>
</div>
<div class="eachTitle" id="gallery" style="margin-left: 80px;"><span>Gallery</span>
</div>
<div class="eachTitle" id="map" style="margin-left: 160px;"><span>Where are we?</span>
</div>
<div class="eachTitle" id="about" style="margin-left: 240px;"><span>About us</span>
</div>


<div id="menu"><span class="eachTitle">Our Menu</span></div>
See jsfiddle

Related

How to centralize icon inside small bordered element?

Is there a way to centralize text inside a bordered element?
When I do border at the element, maybe because its content size is reduced, it gets decentralized.
.circle {
width: 22px;
height: 22px;
border-radius: 50%;
border: solid #00b0ff 1px;
color: #00b0ff;
}
.button-styling {
color: #00b0ff;
font-size: x-large;
}
.outline-h {
outline: thin;
outline-color: blue;
outline-style: solid;
}
<div style="max-width: 15px;">
<h3> With border </h1>
<div class="circle">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>
<div style="max-width: 15px;">
<h3> Without border </h1>
<div class="outline-h">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>

You can use flexbox to center the text element:
.circle {
width: 22px;
height: 22px;
border-radius: 50%;
border: solid #00b0ff 1px;
color: #00b0ff;
/*Add*/
display: flex;
justify-content: center;
align-items: center;
}
<div style="max-width: 15px;">
<h3>With border</h3>
<div class="circle">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>

You could try this:
.circle {
text-align: center;
line-height: 20px;
}

I was able to center it using display: flex.
Check it's browser support though: https://caniuse.com/#feat=flexbox
.circle {
width: 22px;
height: 22px;
border-radius: 50%;
border: solid #00b0ff 1px;
color: #00b0ff;
display: flex;
justify-content: center;
align-items: center;
}
.button-styling {
color: #00b0ff;
font-size: x-large;
}
.outline-h {
outline: thin;
outline-color: blue;
outline-style: solid;
}
<div style="max-width: 15px;">
<h3> With border </h1>
<div class="circle">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>
<div style="max-width: 15px;">
<h3> Without border </h1>
<div class="outline-h">
<mat-icon class="button-styling">+</mat-icon>
</div>
</div>

How to display text in the middle of div with different background color?

I want help as i cannnot do this
Please see this : https://i.imgur.com/bq9tz1i.jpg
What i get : https://i.imgur.com/24jOYhy.jpg
<style>
.Nav_bar_links div{
margin: 0% 1%;
font-weight: 500;
display:inline-table;
}
.Nav_bar_links div:hover{
background: #222222;
color: #E50000;
}
</style>
<div class="Navigation_bar">
<img src="images/w-logo-1.png" height="7%" width="7%" align="middle">
<div class="Nav_bar_links" align="right">
<div class="active">HOME</div>
<div class="add_on">ABOUT <i class="fas fa-caret-down"></i></div>
<div>SPONSORS</div>
<div>GALLERY</div>
<div>NEW & UPDATES</div>
<div>CONTACT US</div>
</div>
</div>
I want to achieve that same Please help !!!!!!

I would encapsulate your menu items in a span and then target that DOM element. Here is a snippet example:
.Nav_bar_links div {
margin: 0% 1%;
padding: 20px 10px;
font-weight: 500;
display: inline-block;
}
.Nav_bar_links div:hover {
background: #222222;
color: #e50000;
}
.Nav_bar_links div:hover span {
padding-bottom: 5px;
border-bottom: 3px solid #FF0000;
}
<div class="Navigation_bar">
<img src="images/w-logo-1.png" height="7%" width="7%" align="middle">
<div class="Nav_bar_links" align="right">
<div class="active"><span>HOME</span></div>
<div class="add_on"><span>ABOUT</span> <i class="fas fa-caret-down"></i></div>
<div><span>SPONSORS</span></div>
<div><span>GALLERY</span></div>
<div><span>NEW & UPDATES</span></div>
<div><span>CONTACT US</span></div>
</div>
</div>

Div and span with the same height

I'd like to have my span with number "30" with the same height of the vertical line of the div that contains it.
#divDay {
font-family: Arial;
font-size: 44px;
border-right: 2px solid #000;
margin-bottom: 6px;
margin-top: 10px;
height: 100%
}
#divDate {
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;
}
#divHeader{
border-bottom: 2px solid #000;
}
<div class="row">
<div id="divHeader" class="col-xs-12">
<div id="divDay" class="col-xs-2">
<span>30</span>
</div>
<div id="divDate" class="col-xs-10">
<div class="row">
<span style="margin-left: 8px">Monday</span>
</div>
<div class="row">
<span style="margin-left: 8px">April 2016</span>
</div>
</div>
</div>
</div>
https://jsfiddle.net/h1m80Lv8/
Big thanks for any help.

#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#divDay {
font-family: Arial;
height: 100%
}
#divDate {
border-left: 2px solid #000;
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;
}
#divDay span { position:absolute;font-size: 72px;margin-top:-15px;}
#divHeader{
border-bottom: 2px solid #000;
}
<div class="row">
<div id="divHeader" class="col-xs-12">
<div id="divDay" class="col-xs-2">
<span>30</span>
</div>
<div id="divDate" class="col-xs-10">
<div class="row">
<span style="margin-left: 8px">Monday</span>
</div>
<div class="row">
<span style="margin-left: 8px">April 2016</span>
</div>
</div>
</div>
</div>

Then you need to give the span "display: block;"
#divDay>span {
display: block;
}
Check Fiddle here

More options:
<span style="padding: 6px;">30</span>
Or:
<span style="display:inline-block;">30</span>

vertically center a div and keep text right for a map legend

I'm trying to make a legend for a map but I have some trouble when title is too long...
What I'm looking for is a vertically center img & .legend-block, and all the text right of them (looking like the current 3rd legend)
I try to use vertical-align:middle in .remove-btn & .legend-block but it doesn't do anything...
http://jsfiddle.net/mf44gxqv/5/
#chart-legend {
width: 200px;
padding: 10px;
border: black 1px solid;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.legend-value {
margin-bottom: 15px;
}
.legend-block {
width: 40px;
height: 20px;
float: left;
margin-right: 10px;
border: #bbb solid 1px;
background-color: #D3D3D3;
}
.remove-btn {
float: left;
height: 20px;
margin-right: 10px;
}
<div id="chart-legend" class="panel-body">
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(75, 178, 197);"></div>
hello
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(234, 162, 40);"></div>
I'm too long so I go where I should not hehe I'm shuch a bad legend
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(197, 180, 127);"></div>
It's a trap cause I'm too short</div>
</div>

Here is a method using flexbox (if you can use it in your project)
See this fiddle.
I added the following styles:
.legend-value {
margin-bottom:15px;
display:flex;
align-items:center;
}
Then added min-width's to .legend-block and .remove-btn

I did an example with your fiddle, the best is to add a "wrapper" width a vertical align each place like this :
add this CSS:
.valign{
display: table-cell;
vertical-align: middle;
}
and then the HTML (did it only for the orange one)
<div class="legend-value">
<div class="valign">
<img class="remove-btn" src="/images/remove.png" alt="rmv"/>
</div>
<div class="valign">
<div class="legend-block" style="background-color: rgb(234, 162, 40);"></div>
</div>
<div class="valign">
I'm too long so I go where I should not hehe I'm shuch a bad
</div>
</div>
http://jsfiddle.net/mf44gxqv/6/
The "table-cell" is very useful for vertical align.
Here is additionnal suggestion for vertical align: https://css-tricks.com/centering-css-complete-guide/

Wrap your text in a div. Then use display: inline-block with vertical-align: middle to line them up. You will also need to specify a width to the blocks as inline-block containers will stretch to its contents, breaking the inline.
#chart-legend {
width: 200px;
padding: 10px;
border: black 1px solid;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.legend-value {
margin-bottom: 15px;
}
.legend-block {
width: 40px;
height: 20px;
margin-right: 10px;
border: #bbb solid 1px;
background-color: #D3D3D3;
display: inline-block;
vertical-align: middle;
}
.legend-text {
width: 80px;
display: inline-block;
vertical-align: middle;
}
.remove-btn {
height: 20px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
<div id="chart-legend" class="panel-body">
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(75, 178, 197);"></div>
<div class="legend-text">hello</div>
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(234, 162, 40);"></div>
<div class="legend-text">I'm too long so I go where I should not hehe I'm shuch a bad legend</div>
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(197, 180, 127);"></div>
<div class="legend-text">It's a trap cause I'm too short</div>
</div>

I was just messing around with this and this is what happened...
CSS, I added a new class, gave it a width, and aligned the text.
#chart-legend {
width: 250px;
padding: 10px;
border: black 1px solid;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.legend-value {
margin-bottom: 15px;
}
.legend-block {
width: 40px;
height: 20px;
float: left;
margin-right: 10px;
border: #bbb solid 1px;
background-color: #D3D3D3;
}
.remove-btn {
float: left;
height: 20px;
margin-right: 10px;
}
.text-block {
display:block;
text-align:right;
width:25vw;
}
HTML, I put your text in a div.
<div id="chart-legend" class="panel-body">
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(75, 178, 197);"> </div>
<div class="text-block">hello</div>
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(234, 162, 40);"></div>
<div class="text-block">I'm too long so I go where I should not hehe I'm shuch a bad legend</div>
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(197, 180, 127);"> </div>
<div class="text-block">It's a trap cause I'm too short</div>
</div>

It's a lot of extra work but is this what you mean? you can change the vertical alignment in any way you would like. DEMO
HTML:
<div id="chart-legend" class="panel-body">
<div class="legend-item">
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
</div>
<div class="legend-block">
<div class="block" style="background-color: rgb(75, 178, 197);"> </div>
</div>
<div class="legend-text">hello</div>
</div>
<div class="legend-item">
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
</div>
<div class="legend-block">
<div class="block" style="background-color: rgb(234, 162, 40);"> </div>
</div>
<div class="legend-text">I'm too long so I go where I should not hehe I'm shuch a bad legend</div>
</div>
<div class="legend-item">
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
</div>
<div class="legend-block">
<div class="block" style="background-color: rgb(197, 180, 127);"> </div>
</div>
<div class="legend-text">It's a trap cause I'm too short</div>
</div>
</div>
CSS:
#chart-legend {
width:200px;
padding:10px;
border:black 1px solid;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.legend-item {
display:table;
margin-bottom:10px;
}
.legend-value {
width:55px;
display:table-cell;
margin-bottom:15px;
vertical-align:top;
}
.legend-text {
display:table-cell;
vertical-align:top;
}
.block {
height:20px;
width:40px;
border:#bbb solid 1px;
}
.legend-block {
width:55px;
display:table-cell;
vertical-align:top;
}
.remove-btn {
float:left;
height:20px;
margin-right:10px;
}

Setting the variable percentage width of HTML elements next to other variable-width elements

I have a HTML structure with given CSS.
Both caption and progress elements should be rendered in same line. caption elements should not have fixed width and progress elements should fill up the rest of the space next to caption based on their inline-set width, which means that every progress element will have a different total pixel-width but should fill up only the given percentage of available space.
HTML structure and CSS rules can be changed in any way.
Is it possible to solve this problem with CSS only?
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.caption {
float: left;
}
.progress {
height: 14px;
border: 1px solid white;
border-radius: 4px;
background-color: green;
overflow: hidden;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text: </div>
<div class="progress" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text: </div>
<div class="progress" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>

Have you considered using Flexbox?
Just add this rule:
.row {
display: flex;
}
If your are concerned about browser support, an alternative would be using display:table. You should change your markup and CSS, like this:
.table {
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
padding: 15px;
width: 280px;
}
.inner-table {
display: table;
}
.row {
display: table-row;
}
.caption {
display: table-cell;
white-space: nowrap;
width: 1%;
}
.progress {
background-color: green;
border: 1px solid white;
border-radius: 4px;
display: table-cell;
height: 14px;
}
.value {
margin-left: 5px;
display:block;
width:0;
overflow: visible;
}
<div class="table">
<div class="inner-table">
<div class="row">
<div class="caption">Short text: </div>
<div style="width:1.65%" class="progress">
<span class="value">1.65</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">A bit longer text: </div>
<div style="width:100%" class="progress">
<span class="value">100.00</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
<div class="remainder"></div>
</div>
</div>
</div>

Please try this - padding-right: 5px; display:inline; add these properties in progress class and also remove width in progress.

Well, just for the future reference, I was playing a bit with the flexbox thingie and came up with this:
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.row {
display: flex;
}
.caption {
margin: 1px 5px 1px 0;
}
.progress {
flex-grow: 1;
margin: auto;
}
.progress-content {
height: 14px;
border-radius: 4px;
background-color: green;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text:</div>
<div class="progress">
<div class="progress-content" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text:</div>
<div class="progress">
<div class="progress-content" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">X:</div>
<div class="progress">
<div class="progress-content" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
</div>
If I get a solution without flexbox, will accept it as an answer :)