I'm making a website, and something is quite annoying... here's the code:
.log {
color: #FF00FC;
font-family: Josefin Regular;
font-size: 12.8pt;
outline: 3.2px solid #ff00fc;
padding: 6px;
position: relative;
top: 400px;
left: 10px;
transform: rotate(10deg);
z-index: 0;
}
<p class='log'>>_</p>
For some reason, this the <p> is so long, it takes up more than the screen. How can I make the outline: smaller to fit my liking? I want it to be much less wide. Thanks, I hope you understand.
By default p element gets displayed as block. If you set display to inline-block it should fix the issue:
.log {
color: #FF00FC;
font-family: Josefin Regular;
font-size: 12.8pt;
outline: 3.2px solid #ff00fc;
padding: 6px;
position: relative;
top: 400px;
left: 10px;
transform: rotate(10deg);
z-index: 0;
display:inline-block
}
<p class='log'>>_</p>
Change display to inline-block:
.log {
display: inline-block;
color: #FF00FC;
font-family: Josefin Regular;
font-size: 12.8pt;
outline: 3.2px solid #ff00fc;
padding: 6px;
position: relative;
top: 400px;
left: 10px;
transform: rotate(10deg);
z-index: 0;
}
<p class='log'>>_</p>
By default, display: block is applied to <p> which causes it to span the entire width of its container when its position is relative or static.
Alternatively, if .log's parent is position: relative, you can change it to position: absolute and you won't need to apply display: inline-block:
body {
position: relative;
}
.log {
color: #FF00FC;
font-family: Josefin Regular;
font-size: 12.8pt;
outline: 3.2px solid #ff00fc;
padding: 6px;
position: absolute;
top: 400px;
left: 10px;
transform: rotate(10deg);
z-index: 0;
}
<p class='log'>>_</p>
The p element is has a display: block; by default, which will take up as much width as is allowed in the flow. By adding display: inline-block; to your .log rule, this should be resolved.
Related
Hover on child element <button> without hover effect on parent <h2>
.parent {
display: block;
text-align: center;
font-weight: 700;
font-size: 31px;
letter-spacing: normal;
position: relative;
}
.parent:hover {
color: orange;
}
span {
line-height: unset;
vertical-align: baseline;
top: 0;
left: 0;
position: absolute;
color: transparent;
box-shadow: none;
z-index: 5;
}
span button {
position: absolute;
left: 0;
top: -20px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
z-index: 5;
background: #0085ba !important;
border-radius: 50%;
border: 2px solid #fff;
box-sizing: border-box;
padding: 3px;
display: inline-block;
overflow: hidden;
}
<h2 class="parent">
Title
<span class="child">
<button>+</button>
</span>
</h2>
This can be helpful
example
.html
<div class="parent1">
<div class="child1">
/*.....*/
.css
.parent1:hover{
cursor: pointer;
}
.parent1:hover .child1{
/*......*/
}
snippet
.parent:hover .child {
/* ... */
}
Add the below:
parent:hover {
cursor:pointer
}
It's a little tricky.
First you need to get the parent from the child :
const _parent = document.querySelector('selectorOfParentFromChild')
After you have to add the class on child and remove on parent. You need to do it one child event : 'onMouseOver'.
SO:
[child, parent].forEach(node=>node.addEvenListener('onmouseover', (event)=>{
event.stopPropagation();
const _parent = document.querySelector('selectorOfParentFromChild')
node.classlist.add(wanted)
_parent.classlist.remove(wanted)
})
This has been asked before, and answers seem to come within the span of: "css can't do that", "you should probably restructure your divs" and "here's a trick".
hover on child without hover effect on parent
Now I don't have the experience to say if a structure that neccesitates this is actually bad, but in either case, there is now a straight-forward solution with :has()
.parent {
display: block;
text-align: center;
font-weight: 700;
font-size: 31px;
letter-spacing: normal;
position: relative;
}
.parent:not(:has(.child:hover)):hover {
color: orange;
}
span {
line-height: unset;
vertical-align: baseline;
top: 0;
left: 0;
position: absolute;
color: transparent;
box-shadow: none;
z-index: 5;
}
span button {
position: absolute;
left: 0;
top: -20px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
z-index: 5;
background: #0085ba !important;
border-radius: 50%;
border: 2px solid #fff;
box-sizing: border-box;
padding: 3px;
display: inline-block;
overflow: hidden;
}
<h2 class="parent">
Title
<span class="child">
<button>+</button>
</span>
</h2>
This is what that selector is saying in English:
Select all elements ".parent" - except the ones who have any child elements ".child" being hovered on - when they are hovered on.
You will have to delete the CSS for parent:hover and if you only want the hover effect on the button then the parent shouldn't have a hover effect in your CSS.
.parent {
display: block;
text-align: center;
font-weight: 700;
font-size: 31px;
letter-spacing: normal;
position: relative;
}
span {
line-height: unset;
vertical-align: baseline;
top: 0;
left: 0;
position: absolute;
color: transparent;
box-shadow: none;
z-index: 5;
}
span button {
position: absolute;
left: 0;
top: -20px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
z-index: 5;
background: #0085ba !important;
border-radius: 50%;
border: 2px solid #fff;
box-sizing: border-box;
padding: 3px;
display: inline-block;
overflow: hidden;
}
button:hover {
color: orange;
}
I'm creating a small data tooltip on my website so whenever someone hovers the word Gig the data tooltip appears. I'm using ::after pseudo-element for it.
Here is my HTML:
Gigs
Here is my CSS:
a[data-tool-tip] {
position: relative;
color: #ffffff;
}
a[data-tool-tip]::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: .5em;
border-radius: .5em;
bottom: 100%;
left: 0;
}
The result coming out has a lot of line breaks. It is showing as below:
Products
are
called
as Gigs
on Fiverr
When I use white-space: no-wrap; then it whole becomes one line.
I WANT IT TO BE IN 2 LINES.
What Should I Do?
Thank You.
I'm seeing just one posibility is to had a fixed width to the ::after element like this :
a[data-tool-tip] {
position: relative;
color: black;
}
a[data-tool-tip]:hover::after {
position: absolute;
width: 80px;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: 0.5em;
border-radius: 0.5em;
bottom: 100%;
left: 0;
}
I put the width to 80px to be on 2 lines
But I don't unterstand why thewhite-space: nowrap haven't work on your side (it will be one line with it unless you add a max-width size on it and use white-space: pre-wrap)
You will either have to set the width of the tooltip-elements or use a different approach.
a[data-tool-tip] {
position: relative;
top: 2em;
font-size: 200%;
}
a[data-tool-tip]:hover::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: 'Playfair Display';
padding: 1em;
font-size: .5em;
border-radius: .5em;
min-width: 10em;
bottom: 100%;
left: 0;
}
Gigs
I am trying to achieve the following:
And I largely have. The only missing piece is the Svg of the downward arrow. I need it to be in the middle of the div (the green part) irregardless of how wide the div is. I've tried setting .listing-price:after.left to 50% but I don't think it does what it should. I also want the arrow to attach to the bottom of the main div, but I got it there by hardwiring the .listing-price:after.top property.
How do I get the arrow to be in the middle?
Is there a better way of attaching the arrow to the bottom of the div than hardwiring the .top property?
Here is what I have so far:
body {
background-color: salmon;
transform: scale(3.0);
transform-origin: 0 0;
}
.listing-price {
border-radius: 2px;
border-style: solid;
border-width: 1px;
color: white;
cursor: pointer;
display: inline-block;
font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
user-select: none;
background-color: #009934;
border-color: #F2F5F3;
}
/* Favorite Marker */
.listing-price:before {
content: url(https://rgelb.github.io/public/misc/heart_icon.svg);
display: inline-block;
position: absolute;
right: -7.8px;
top: -6px;
}
/* Downward arrow */
.listing-price:after {
content: url(https://rgelb.github.io/public/misc/arrow_border.svg);
display: inline-block;
position: absolute;
left: 50%;
top: 10px;
}
.listing-price-open-new-house {
background-color: #586371;
border-color: white;
border-radius: 2px;
border-spacing: 1px;
border-style: solid;
border-width: 1px;
color: white;
display: block;
font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 700;
left: -1px;
line-height: 10px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -11px;
width: 30px;
}
<div style="height: 25px;margin-top: 40px;">
<div class="listing-price">
<i class="listing-price-open-new-house">Open</i>
$258K
</div>
<div class="listing-price">
<i class="listing-price-open-new-house">Open</i>
$9M
</div>
</div>
You're lucky, it works just by setting left:0;width:100%; for the arrow:
body {
background-color: salmon;
transform: scale(3.0);
transform-origin: 0 0;
}
.listing-price {
border-radius: 2px;
border-style: solid;
border-width: 1px;
color: white;
cursor: pointer;
display: inline-block;
font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
user-select: none;
background-color: #009934;
border-color: #F2F5F3;
}
/* Favorite Marker */
.listing-price:before {
content: url(https://rgelb.github.io/public/misc/heart_icon.svg);
display: inline-block;
position: absolute;
right: -7.8px;
top: -6px;
}
/* Downward arrow */
.listing-price:after {
content: url(https://rgelb.github.io/public/misc/arrow_border.svg);
display: inline-block;
position: absolute;
top: 8.9px; /* a bit of fine-tuning */
left: 0;
width: 100%;
}
.listing-price-open-new-house {
background-color: #586371;
border-color: white;
border-radius: 2px;
border-spacing: 1px;
border-style: solid;
border-width: 1px;
color: white;
display: block;
font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 700;
left: -1px;
line-height: 10px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -11px;
width: 30px;
}
<div style="height: 25px;margin-top: 40px;">
<div class="listing-price">
<i class="listing-price-open-new-house">Open</i>
$258K
</div>
<div class="listing-price">
<i class="listing-price-open-new-house">Open</i>
$9M
</div>
</div>
The reason why this works lies in the nature of SVGs: if the top-level <svg> element contains a viewBox attribute defining the area to draw, and there are a width and height defined for the element where the aspect ratio does not fit that of the viewBox, the viewBox content will be scaled and positioned such that it is fitted at the largest possible size into the middle of the box defined by the svg element.
So, by setting width to the width of the div, you get the positioning in the middle for free - provided the SVG has a viewBox attribute (which it has), and no preserveAspectRatio attribute changing this behavior (which it hasn't).
I have a padding on my textarea element and I would like the content to remain padded as you scroll within the textarea. It is working as expected in Firefox but not in Chrome. The below image shows the difference in output:
CSS:
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
}
In Chrome, the top and bottom padding only appears at the beginning and end of the text content. Here is a jsfiddle to demonstrate:
http://jsfiddle.net/LkE6f/
How can I make the padding in Chrome appear/render in the same way as it does in Firefox?
You could do something like this, it's not very flexible (fixed width), but you can expand on it. It fixes the issue in Chrome and doesn't break Firefox. It uses pseudo-elements on #container, which work in IE8+
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
width: 225px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 6px;
}
Here's a jsFiddle.
Update: Added display: block to textarea to fix IE positioning issue.
Update 2: Alternative solution which takes its width from the #container div and for which you'd need to set the right value based on the width of the scrollbar of the browser, the 17px value is ok in Chrome at the moment. A pro with this solution is that you can set the width of the textarea to anything by changing the width of the #container, and the pseudo-elements will scale accordingly. jsFiddle.
#container {
width: 260px;
margin: 20px auto;
position: relative;
}
textarea {
width: 100%;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
right: 17px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 1px;
}
Best answer:
Embrace the difference between browsers; the web is not uniform and your design will never be 100% identical across browsers.
Work around answers:
If you don't care about the scrollbar having a gap at the top and bottom, you can use borders and an outline like this.
OR
This can be achieved with a pseudo element, if you are happy wrapping each textarea in a div. Should display correctly on IE8+, FF and Chrome.
Have a fiddle!
HTML
<div class="textareaWrap">
<textarea>Content</textarea>
</div>
CSS
textarea {
position: relative;
width: 250px;
height: 160px;
font-family: Arial;
padding: 15px;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
resize: none;
}
.textareaWrap {
position: relative;
}
.textareaWrap:after {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
bottom: 5px;
left: 1px;
}
.textareaWrap:before {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
top:1px;
left: 1px;
}
Try the below solution for the textarea
textarea {
-moz-appearance: textfield;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
-moz-user-select: text;
background-color: -moz-field;
border: 2px inset threedface;
color: -moz-fieldtext;
cursor: text;
font: -moz-field;
width:250px;
height:150px;
letter-spacing: normal;
line-height: normal !important;
padding: 1px 0;
text-align: start;
text-indent: 0;
text-rendering: optimizelegibility;
text-shadow: none;
text-transform: none;
word-spacing: normal;
}
Fiddle link Link
Regards
Mahadevan
I'm trying to style a blockquote to look like this:
At the moment it looks like this:
(it is supposed to be without the white spaces at the beginning of the blockquote
My HTML/CSS
<blockquote><p>Lore ipsum...</p></blockquote>
blockquote {
margin: 1em 2em;
border-left: 1px solid #999;
padding-left: 1em; }
blockquote:before {
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative; left: -15px;
}
blockquote p:first-letter {
margin: .2em .3em .1em 0;
font-size: 220%;
}
/* without unnecessary font type/color attributes*/
I'm looking for something like position: relative; left: -15px;, but it should work much more reliable than
this (more reliable means with different window sizes... oh and it should be pure css... ;-))
Do you know a solution problem that does not leave any unnecessary spaces behind?
I added a float left and changed the top/left positioning declarations.
blockquote:before{
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative;
float: left;
top: .4em;
left: -.15 em;
}
Here is the output. I didn't attempt to match your fonts and colors.
With a position: relative on the blockquote you can easily position the pseudo element with position: absolute. See this jsfiddle demo http://jsfiddle.net/VZxhH/1/
blockquote {
border-left: 1px solid #999;
position: relative;
padding-left: 1em;
margin: 1em 2em;
}
blockquote:before {
content: open-quote;
position: absolute;
font-size: 6em;
left: -38px;
top: -23px;
}