How to get the text wrapped under the points?
https://codepen.io/neginbasiri/pen/ZEGReRZ
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3
pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt">
Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13">
<span>3</span></sup> </span></p></div>
In the example switch should show under 16,000.
.bUhvVh {
display: flex;
margin-bottom: 20px;
width: 300px;
}
.iBQvHK {
color: #e40000;
font-size: 24px;
margin-right: 10px;
border: 1px solid red;
width: 20px;
}
.icon--icon--base--17 {
height: 1em;
min-width: 1em;
vertical-align: middle;
fill: currentColor;
}
.cPwDGx {
font-family: Ciutadella Regular;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
.enMiay {
float: left;
font-family: Ciutadella Medium;
margin-right: 4px;
position: relative;
color: #323232;
}
.dufgDt {
margin: 0;
font-family: 'Ciutadella Regular',sans-serif;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3 pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt"> Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13"><span>3</span></sup> </span></p></div>
</div>
Remove display: flex; flex: 1 from .cPwDGx.
Remove display: inline-block from .enMiay and add float: left for this element.
Update width to min-width for icon--icon--base--17. It will not shrink if text is larger.
Refer : https://codepen.io/bala_tamizh/pen/WNvyEPg
Related
hej there.
i created an svg from a complex image, showing a city map. including tiny green boxes to mark certain houses, etc. with A,B,C or other. (can be seen in screenshot)
on mouseover, a div box should appear (with more than a tooltip-line - as shown in the screenshot and by code) - positioned within the viewbox and next to the pointer.
alternatively it could be an overlay - centered within the viewbox - that disappears when moving the pointer away from the anker.
i was not able to achieve this with plain css, working with combined #C .mark #markc (for example) and visibility.
SVG-'box':
<g id="C">
<rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
<g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
</g>
DIV to appear:
<div class="mark" id="markc">
<div class="thead">
<div class="pin">C</div> <div class="label">culpepper crescent</div>
</div>
<div class="tdetail">
<p class="descrp">Bewohner</p>
<p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
</div>
</div>
CSS code:
#karte {
width: 90%;
position: relative;
margin: auto;
margin-top: 70px;
border: #fff solid 10px;
outline: #ceccc4 solid 1px;
}
.mark {
width: 250px;
min-height: 100px;
position: relative;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
line-height: 110%;
font-weight: normal;
z-index: 1;
border: 10px solid #fff;
}
.thead {
display: inline-flex;
background-position-y: bottom;
font-family: Roboto Slab;
letter-spacing: .5px;
text-transform: uppercase;
}
.pin {
background-color: #4e9295;
width: 10%;
text-align: center;
font-size: 15px;
color: #fff;
padding: 8px;
}
.label {
background-color: #D6EBEC;
width: 90%;
font-size: 12px;
text-align: left;
padding: 8px;
}
.tdetail {
background: #E9E9E9;
color: #4d4e52;
font-family: calibri;
min-height: 75px;
text-align: left;
padding: 0px 10px 10px 10px;
border-top: 8px solid #fff;
}
.tdetail .descrp {
color: #4d4e52;
text-transform: uppercase;
margin-bottom: -10px;
font-weight: 600;
font-size: 15px;
}
.tdetail .peops {
font-weight: 300;
font-size: 12px;
padding: 8px;
}
it is supposed to be a 'present'. i have nearly no experience with javascript - i am happy to use it as a solution, but might need a 'clear' instruction. it is up to 25 'pins' on the complete map.
many thanks!
screenshot
Here's a very simple example implementation to get you started.
You'll need to do a little more work to make it work with more than one tooltip. Not also that it assumes your map is at 1:1. If your SVG has a viewBox or is otherwise scaled, you need to do some work to get the correct coordinates to show the tooltip at. You can find out how to do that by searching Stack Overflow.
var C = document.getElementById("C");
// Add an event handler to C that fires when the mouse moves over it
C.addEventListener("mousemove", function(evt) {
let markc = document.getElementById("markc");
// Position the tooltip element near the mouse
markc.style.left = (evt.offsetX + 10) + "px";
markc.style.top = evt.offsetY + "px";
// Show the tooltip element
markc.classList.remove("hidden");
});
// Add an event handler to C that fires when the mouse leaves the element
C.addEventListener("mouseout", function(evt) {
hideElement("markc");
});
// Hide the element with given id
function hideElement(id) {
document.getElementById(id).classList.add("hidden");
}
// Start out with the tooltip hidden
hideElement("markc");
#karte {
width: 90%;
position: relative;
margin: auto;
margin-top: 70px;
border: #fff solid 10px;
outline: #ceccc4 solid 1px;
}
.mark {
width: 250px;
min-height: 100px;
position: absolute; /* changed to absolute so we can position it where we want */
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
line-height: 110%;
font-weight: normal;
z-index: 1;
border: 10px solid #fff;
}
.thead {
display: inline-flex;
background-position-y: bottom;
font-family: Roboto Slab;
letter-spacing: .5px;
text-transform: uppercase;
}
.pin {
background-color: #4e9295;
width: 10%;
text-align: center;
font-size: 15px;
color: #fff;
padding: 8px;
}
.label {
background-color: #D6EBEC;
width: 90%;
font-size: 12px;
text-align: left;
padding: 8px;
}
.tdetail {
background: #E9E9E9;
color: #4d4e52;
font-family: calibri;
min-height: 75px;
text-align: left;
padding: 0px 10px 10px 10px;
border-top: 8px solid #fff;
}
.tdetail .descrp {
color: #4d4e52;
text-transform: uppercase;
margin-bottom: -10px;
font-weight: 600;
font-size: 15px;
}
.tdetail .peops {
font-weight: 300;
font-size: 12px;
padding: 8px;
}
.cls-245 {
fill: green;
}
.cls-6 {
fill: white;
}
/* Needs to be position relative so we can later position the tooltip relative to it. */
.container {
position: relative;
}
/* class used to hide the tooltip when we don't want it showing */
.hidden {
display: none;
}
<div class="container">
<svg width="400" height="700">
<g id="C">
<rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
<g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
</g>
</svg>
<div class="mark" id="markc">
<div class="thead">
<div class="pin">C</div>
<div class="label">culpepper crescent</div>
</div>
<div class="tdetail">
<p class="descrp">Bewohner</p>
<p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
</div>
</div>
</div>
I followed Creating CSS3 Circles connected by lines to create circles-connected-by-lines as row elements of a HTML Table. I have also enabled row highlighting on hover.
My code can be found here:
`https://codepen.io/bhaktaonline/pen/XzoVPr`
The problem is when I hover and the row is highlighted, I am loosing the lines that are connecting the circles. (in this case, the line connecting the two circles vanishes in the highight color).
Appreciate some insight on the problem.
This behaviour is a result of the negative value you have specified for the z-index property of the pseudo-element li::before.
Remove this z-index property declared on li::before, instead declare a z-index value on the list items (li.data), since it is a positioned element already (position: relative), a z-index property value will apply, .eg:
li.data {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
/* additional */
z-index: 1;
}
Code Snippet Demonstration:
ul.bigger {
font-size: 1.3em;
}
ul.highlight-active li.active::before {
font-size: 1.6em;
background: green;
}
li.data {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
/* additional */
z-index: 1;
}
li.ack {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: MediumSeaGreen;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before {
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: Gray;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active~li {
background: lightblue;
}
.active~li::before {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
.table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
.row1 {
border: 1px solid #ddd;
padding: 8px;
}
.retransmission {
background-color: #0;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ffff99;
}
.row2 {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
<h2 id="ack_summary">Summary</h2>
<table style="width: 100%;">
<tr>
<th>Data/Ack Distribution - transfer 1, Packets 17 - 25</th>
</tr>
<tr>
<td>
<br>
<ul class="bigger highlight-active">
<li class="data">3</li>
<li class="ack">3</li>
</ul>
<br>
<h4>Cumulative Ack's distribution</h4>
<div id="chartContainer121" class="chartContainer"></div>
</td>
</tr>
</table>
Edit
In light of recent developments (as mentioned in the comments), rather declare the z-index property on the nested table cell tag, e.g:
td {
z-index: 9;
position: relative; /* required */
}
This way, any nested element will not be obscured by the containing element's background-color property. (expand updated code snippet below to observe this behaviour).
In addition, you can restore the negative z-index value initially declared on li::before.
ul.bigger {
font-size: 1.3em;
}
ul.highlight-active li.active::before {
font-size: 1.6em;
background: green;
}
li.data {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li.ack {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: MediumSeaGreen;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before{
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: Gray;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active ~ li {
background: lightblue;
}
.active ~ li::before {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
.table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
.row1 {
border: 1px solid #ddd;
padding: 8px;
}
.retransmission {
background-color: #0;
}
tr:nth-child(odd){background-color: #f2f2f2;}
tr:hover {background-color: #ffff99;}
.row2 {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
/* Additional */
td {
z-index: 9;
position: relative;
}
<h2 id="ack_summary">Summary</h2>
<table style="width: 100%;">
<tr>
<th>Data/Ack Distribution - transfer 1, Packets 17 - 25</th>
</tr>
<tr>
<td>
<br>
<ul class="bigger highlight-active">
<li class="data">3</li>
<li class="ack">3</li>
<li class="data">5</li>
<li class="ack">2</li>
</ul>
<br>
<h4>Cumulative Ack's distribution</h4>
<div id="chartContainer121" class="chartContainer"></div>
</td>
</tr>
</table>
I'd recommend further reading to understand the stacking context and how this generally applies to the z-index property:
Understanding CSS z-index - CSS | MDN
z-index - CSS | MDN
The stacking context - CSS | MDN
Here is a snippet from some generated html I am trying to style. Why does the date align to the top but the link inside the h3 doesn't?
Using dev tools I can see the link is centrally aligned to the h3 vertically but I cant alter it in any way I have tried with vertical-align or by adjusting height.
article {
width: 400px;
}
article .date_posted {
float: right;
font-size: 12px;
}
article div.thumbnail {
margin-right: 10px;
width: 100px;
height: 75px;
float: left;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px red;
vertical-align: text-top;
}
article div.title h3 {
display: inline;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
}
article:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<article>
<div class="uposts-part thumbnail" data-resize="1">
<img width="288" height="230" src="http://site3.wpmu-subdomain.dev/wp-content/uploads/sites/3/2015/10/0f02bd48-7efe-3934-8f4b-093c81560333.jpg" class="attachment-post-thumbnail wp-post-image" alt="" style="margin-top: -2.5px; height: auto; width: 100%;">
</div>
<div class="uposts-part date_posted">
<span class="date">23</span>, <span class="time">October</span></div>
<div class="uposts-part title">
<h3>Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f sd fsd d</h3>
</div>
</article>
JS fiddle: https://jsfiddle.net/xdfc8vnm/
article div.title {
float: left;
width: 233px;
line-height: 1
}
article div .title h3 {
display: inline;
margin: 0;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
display: block;
}
article .date_posted {
float: right;
font-size: 12px;
line-height: 1;
}
For your class: article .date_posted you need to set same Font Family, Font Size and Font Weight that you used on post title. So it should go like this:
article .date_posted {
float: right;
font-size: 14px; /* from 12px changed to 14px */
text-decoration: underline; /* this line added */
font-family: Lato, sans-serif; /* this line added */
font-weight: 900; /* this line added */
}
Here is an example: https://jsfiddle.net/LddvoLaL/2/
I'm following this SO post here and the p element is not centering.
Basically I gave the containing div a width and height and then set text align attribute to center for the p element inside the div. No go.
What can I try next?
The containing div is id=Y1aa
I only need horizontal centering for now.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
}
.top {
color: #000000;
display: inline;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">Foo</p>
</div>
</div>
</div>
Change display:inline to display:block in your top class, or delete the display style all together.
You can remove from your .top class this: display: inline;.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
}
.top {
color: #000000;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
</div>
Alternatively, you could add text-align: center to #Y1aa if you need to keep the p as an inline element.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
text-align: center;
}
.top {
color: #000000;
display: inline;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
</div>
</div>
</div>
To center a paragraph inside a div you will have to use the margin attribute in the CSS style for the paragraph
In this example i am centering the first paragraph inside the div with class 'wrap'
.wrap p:first-child {
text-align:center;
margin: 0 auto;
}
<div class="wrap">
<p>Some p tag</p>
</div>
HTML
<div>
<div></div>
</div>
CSS
div > :first-child:after {
background-color: orange;
color: #fff;
font-family: sans-serif;
font-size: 50px;
line-height: 50px;
text-align: center;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
content: "hello world";
display: block;
font-size: 50px;
height: 160px;
line-height: 160px;
margin-top: 14px;
font-weight: normal;
}
div > :first-child:after:hover {
background-color: #44b800;
}
Fiddle
http://jsfiddle.net/VSBr6/
Basically, all I want to do is change the background-color on hover but it doesn't seem to work.
You can do it like this:
div:first-child:hover::after {
background-color: #44b800;
}