I'm creating an alphabet tracing/writing worksheet layout. It doesn't overflow correctly.
I tried duplicating the code sample with fewer letters so it doesn't overflow. The problem is some letters are longer than others so they would continue to overflow.
I expect the excess letters to move down and recreate the top/middle/bottom border.
.wrap {
position: relative;
width: 500px
}
.top {
border-top: 2px solid #000;
height: 30px
}
.center {
border-top: 1px dashed #000;
height: 30px
}
.letter {
position: absolute;
top: 11px;
font-size: 84px;
padding-bottom: 30px
}
<div class="wrap">
<div class="top">
</div>
<div class="center">
</div>
<div class="top">
<div class="letter">A B C D E O P Q R S T U V W X Y Zs</div>
</div>
</div>
Edited to add snippet
It depends on the font-family since each one is unique in height and width. You'll get varying lengths for each letter if the font-family is serif or sans-serif type, but if it is a monospace type then all lengths for each letter is uniformly the same.
The following demo uses text-decoration: overline underline and an overlay with text-decoration: line-through dashed. There's two examples:
font-family: Arial (san-serif)
font-family: Consolas (monospace)
:root {
font: 500 9vw/1.2 Arial;
}
.alphabet {
position: relative;
height: 7rem;
max-width: 96%;
margin: 5vh 2vw;
}
.text {
position: relative;
margin: 0 auto;
width: 100%;
height: 1rem;
font-stretch: ultra-expanded
}
.line {
display: inline-block;
position: absolute;
background: transparent;
}
.edges {
z-index: 0;
top: .3rem;
left: 0;
text-decoration: overline underline rgba(255, 255, 128, 0.7);
}
.edges del {
color: transparent;
}
.middle {
z-index: 1;
top: 0;
left: 0;
word-break: break-word;
color: transparent;
text-decoration: line-through dashed rgba(0, 0, 0, 0.3);
}
h4 {
margin: 0 0 -3vw 0
}
.consolas {
font-family: Consolas;
font-size: 1rem;
line-height: 1.2;
}
.consolas h4 {
margin: 0 0 -2vh 0;
font-size: 1.1rem
}
.consolas .text {
height: 0.5rem;
}
.consolas .edges {
top: 0.2rem
}
<figure class='alphabet'>
<h4>Arial</h4>
<figcaption class='text'>
<mark class='line edges'>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz<del>XXXx</del></mark>
<mark class='line middle'>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy ZzXXXx</mark>
</figcaption>
</figure>
<figure class='alphabet consolas'>
<h4>Consolas</h4>
<figcaption class='text'>
<mark class='line edges'>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz<del>XXXx</del></mark>
<mark class='line middle'>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy ZzXXXx</mark>
</figcaption>
</figure>
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 have a which contains a gridlayout with some cells. When the div is shown or hidden it should scale gradually over time. Currently when showing, the div is initially sized to fit the contents and then scales. When hidden it is immediately hidden unless padding is set. Then it is immediately resized to the size of the padding.
Example is shown below. How to adapt the styling in such that the div resizes smoothly and text stays in place (clips and does not wrap)
function toggle() {
if (document.getElementsByClassName("ovdInfobox")[0].classList.contains("ovdInfobox--visible")) {
document.getElementsByClassName("ovdInfobox")[0].classList.remove("ovdInfobox--visible")
console.log('remove');
} else {
document.getElementsByClassName("ovdInfobox")[0].classList.add("ovdInfobox--visible")
console.log('add');
}
}
.ovdInfobox {
display: grid;
grid: 40px auto / auto auto;
z-index: 1;
position: absolute;
top: 50px;
width: 0;
height: 0;
min-width: 0;
min-height: 0;
overflow: hidden;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.98);
border-radius: 4px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
transition: all 4.2s ease-in-out;
background: green;
}
.ovdInfobox--visible {
width: unset;
height: unset;
min-width: 300px;
border: 1px solid #d1d1d1;
/* padding: 15px 15px 15px 15px;*/
}
.ovdInfobox__header {
grid-column-start: span 2;
color: #c20063;
font-size: 18px;
font-weight: normal;
}
.ovdInfobox__label {
font-weight: bold;
}
.ovdInfobox__data {}
<div>
<button onclick="toggle()">
Click Me!
</button>
<div class="ovdInfobox ovdInfobox--visible" onCLick="toggle()">
<div class="ovdInfobox__header">Details</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
</div>
</div>
New day, fresh start, fresh mind.
Changed class .ovdInfobox and .ovdInfobox--visible by replacing width, height, min-width and min-height by max-width and max-height. Resizing now works as expected.
function toggle() {
if (document.getElementsByClassName("ovdInfobox")[0].classList.contains("ovdInfobox--visible")) {
document.getElementsByClassName("ovdInfobox")[0].classList.remove("ovdInfobox--visible")
console.log('remove');
} else {
document.getElementsByClassName("ovdInfobox")[0].classList.add("ovdInfobox--visible")
console.log('add');
}
}
.ovdInfobox {
display: grid;
grid: 40px auto / auto auto;
column-gap:10px ;
row-gap: 5px;
z-index: 1;
position: absolute;
top: 50px;
max-width: 0;
max-height: 0;
overflow: hidden;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.98);
border-radius: 4px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
transition: all 4.2s ease-in-out;
background: green;
}
.ovdInfobox--visible {
max-width: 300px;
max-height: 200px;
border: 1px solid #d1d1d1;
padding: 15px 15px 15px 15px;
}
.ovdInfobox__header {
grid-column-start: span 2;
color: #c20063;
font-size: 18px;
font-weight: normal;
}
.ovdInfobox__label {
font-weight: bold;
}
.ovdInfobox__data {}
<div>
<button onclick="toggle()">
Click Me!
</button>
<div class="ovdInfobox ovdInfobox--visible" onCLick="toggle()">
<div class="ovdInfobox__header">Details</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
</div>
</div>
<body onload="load_animes()">
<div class="head">
<!-- <h1 id="head_title">Hello</h1> -->
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7206d8a9-d46d-4479-b47a-8cf6d05bc830/d7zzah3-c53850a6-5d66-437b-a581-99d84fea1923.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNzIwNmQ4YTktZDQ2ZC00NDc5LWI0N2EtOGNmNmQwNWJjODMwXC9kN3p6YWgzLWM1Mzg1MGE2LTVkNjYtNDM3Yi1hNTgxLTk5ZDg0ZmVhMTkyMy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.oSQAAL-K2KoIhZJTBTpnvqqcy2cC8QjmgsUwlsS-0Uk" id="head_bg">
<h1 id="desc">
This is a website where I post my shitty reviews about anime that I have watched. All anime are sorted based on the first alphabet of their names
</h1>
<h1 id="note">
<strong>Note:</strong> There will be spoilers in my reviews
</h1>
</div>
<div id="view">
<div id="layer"></div>
<div id="content">
<h1 id="view_title"></h1>
<h2 id="view_genres"></h2>
<p id="view_note">Note: I don't assign the genres according to MAL, I assign the genres based on my own opinion</p>
<h3 id="view_rating"></h3>
<h4 id="view_review"></h4>
<button id="back" onclick="back()">Back To List</button>
<img id="view_img">
</div>
</div>
my style:
body {
background-color: #28282B;
/* background-image: url("img_tree.gif"); */
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
*{
font-family: Arial, Helvetica, sans-serif;
}
#view{
z-index: 0;
position: relative;
height: max-content;
margin: -8px;
}
#view #layer {
background-color: black;
opacity: 0.5;
height: max-content;
width: 100%;
position: absolute;
z-index: 0;
}
#view div {
position: absolute;
}
#view #view_title{
font-size: 4rem;
color: white;
margin-left: 2%;
z-index: 1;
}
#view #view_genres{
margin-left: 2%;
}
#view #view_note{
color: rgb(243, 226, 226);
font-size: 1.5rem;
border-radius: 10px;
margin-left: 2%;
font-weight: bolder;
}
#view #view_rating{
color: white;
margin-left: 2%;
font-size: 1.5rem;
font-family: 'open sans',arial,sans-serif;
}
#view #view_review{
background-color: #18181a;
color: white;
font-size: 2rem;
margin-left: 5%;
margin-right: 5%;
border-radius: 5px;
z-index: 1;
font-weight: lighter;
}
#view #view_img{
max-height: 80%;
max-width: 70%;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
#view #back:hover{
color: #FFD700;
}
#view #back{
font-size: 3.5rem;
background-color: #18181a; /* Green */
border: none;
color: white;
text-align: center;
outline: none;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
}
i set my #view element (which is the parent element) to height: max-content but it isn't setting the height, the height is still 0, but the width is maxed and as u can see, there are no other parent elements containing #view. I've changed the body's style to height: max-content as well but it ain't working
The issue is the header: I need it to seem to be fixed on the fixed section and still be clickable.
When the first section scrolls over the header, it should cover the header.
I can move or change the header however I want:
<a href="#" class="header">
THIS IS THE HEADER
<span style="font-size: 12px;">(you can hover me)</span><br>
<span style="font-size: 14px; font-style: italic; letter-spacing: 0.05em;">which should be <br> OVER "invisible section" AND "fixed section" <br> BUT UNDER "first section", <br>WHILE maintaining fixed position</span>
</a>
and while I could add the header to the invisible section, I cannot change the overall structure of the sections:
<div class="section section-fixed">
fixed section underneath "invisible section"
</div>
<div class="wrapper">
<div class="section section-invisible">
<h2>invisible section</h2>
</div>
<div class="section section-first">
first section
</div>
</div>
I tried adding the header to the invisible section and while this works in keeping the header clickable, I cannot make it seem to be fixed the same as the fixed section.
I realise describing it might be confusing so here are some accompanying images and please check the FIDDLE
#import url("https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap");
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
font-family: 'Baloo Da 2', cursive;
}
.header {
background: floralwhite;
display: inline-block;
padding: 10px;
position: fixed;
z-index: 3;
left: 30px;
top: 30px;
color: inherit;
text-decoration: none;
line-height: 1.2;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
transition: all .5s ease;
}
.header:hover {
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5);
background-color: pink;
}
.wrapper {
border: 2px solid red;
z-index: 2;
position: relative;
}
.section {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.section-fixed {
background: gray;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
.section-invisible {
align-items: flex-end;
padding: 0;
}
.section-invisible h2 {
background: goldenrod;
padding: 50px;
margin: 0;
width: 100%;
text-align: center;
}
.section-first {
background: darkslateblue;
color: white;
}
<a href="#" class="header">
THIS IS THE HEADER
<span style="font-size: 12px;">(you can hover me)</span><br>
<span style="font-size: 14px; font-style: italic; letter-spacing: 0.05em;">which should be <br> OVER "invisible section" AND "fixed section" <br> BUT UNDER "first section", <br>WHILE maintaining fixed position</span>
</a>
<div class="section section-fixed">
fixed section underneath "invisible section"
</div>
<div class="wrapper">
<div class="section section-invisible">
<h2>invisible section</h2>
</div>
<div class="section section-first">
first section
</div>
</div>
initial:
after scroll:
Update your z-index like below. The most important is to not set any z-index to wrapper:
#import url("https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap");
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
font-family: 'Baloo Da 2', cursive;
}
.header {
background: floralwhite;
padding: 10px;
position: fixed;
z-index: 2; /* here */
left: 30px;
top: 30px;
color: inherit;
text-decoration: none;
line-height: 1.2;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
transition: all .5s ease;
}
.header:hover {
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5);
background-color: pink;
}
.wrapper {
border: 2px solid red;
position: relative;
}
.section {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.section-fixed {
background: gray;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1; /* here */
}
.section-invisible {
align-items: flex-end;
padding: 0;
position: relative;
z-index: 1; /* here */
}
.section-invisible h2 {
background: goldenrod;
padding: 50px;
margin: 0;
width: 100%;
text-align: center;
}
.section-first {
background: darkslateblue;
color: white;
position: relative;
z-index: 2; /* here */
}
<a href="#" class="header">
THIS IS THE HEADER
<span style="font-size: 12px;">(you can hover me)</span><br>
<span style="font-size: 14px; font-style: italic; letter-spacing: 0.05em;">which should be <br> OVER "invisible section" AND "fixed section" <br> BUT UNDER "first section", <br>WHILE maintaining fixed position</span>
</a>
<div class="section section-fixed">
fixed section underneath "invisible section"
</div>
<div class="wrapper">
<div class="section section-invisible">
<h2>invisible section</h2>
</div>
<div class="section section-first">
first section
</div>
</div>
Related: Why can't an element with a z-index value cover its child?
I couldn't set inline elements background like this:
My code is this:
#divMansetKategoriHaberleriContainer
{
background-color: Transparent;
margin-top: 4px;
font-size: 12px;
}
.divKategoriHaberItem
{
float: left;
background-color: White;
width: 324px;
height: 126px;
margin: 0;
padding: 0;
}
.divKategoriHaberItemImage
{
float: left;
width: 80px;
height: 80px;
border: 1px solid red;
margin: 2px;
}
.imgKategoriHaberResim_Cevre
{
width: 95%;
height: 95%;
}
.divKategoriHaberItemBaslikIcerik
{
}
.spHaberBaslik_Cevre
{
background-color: Green;
display: inline;
font-weight: bold;
padding: 5px;
height: 20px;
}
.spHaberIcerik_Cevre
{
display: block;
}
.divKategoriHaberDevami_Cevre
{
background-image: url('../images/HaberinDevami_Cevre.png');
background-repeat: no-repeat;
background-position: right;
height: 13px;
}
<div class="divKategoriHaberItem">
<div class="divKategoriHaberItemImage">
<img src='' alt='DÜNYANIN MEKANİK Dengesi Bozuldu' class="imgKategoriHaberResim_Cevre" />
</div>
<div class="divKategoriHaberItemBaslikIcerik">
<span class="spHaberBaslik_Cevre">
<a href='CevreHaber.aspx?id=2128'>DÜNYANIN MEKANİK Dengesi Bozul</a>
</span>
<span class="spHaberIcerik_Cevre">Demokratik Kongo Cumhuriyeti'n</span>
</div>
<div class="divKategoriHaberDevami_Cevre"></div>
</div>
PS: Sorry for i couldn't write with sentences :(
If i understand the question correctly, you will need to add a line-height that equals the total height of your inline element ...
in your case that would be 30px (20px for the height + 10px for the padding 5px top and 5px bottom..)
.spHaberBaslik_Cevre
{
background-color: Green;
display: inline;
font-weight: bold;
padding: 5px;
height: 20px;
line-height:30px; /*height + padding-top +padding-bottom*/
}