Hello is it possible to control how many dashed lines would be under the word?
I have something like this:
<p>Duza</p>
p {
border-bottom: 4px dashed #999;
display: inline;
font-size:20px;
}
And the effect that I want to have:
JSFIddle
You can not control the length of CSS dashes or the space between them. (See this question and this question)
Solutions could be:
Use more than one word to allow room for the dashes
Use dotted rather than dashed
as the links above point out, you could possibly use a gradient or an image
jsFiddle Demo
Related
Im looking to create a demosite (http://emc.ow-media.de/main)
I want to create a grey border (#eeeeee) around the Post Grid-Elements in the top and the bottom.
Where is my mistake?
I set Custom CSS for the bottom post-grids like this:
.layer-wrapper layout-105
{
background-color: #eee;
} ```
If i understand it correctly you need to change the selector to: .layer-wrapper.layout-105
You are basically trying to select an element inside the .layer-wrapper called <layout-105>, that of course does not exist. When you want to select a class don't forget the dot in front. In this case you want to select an element with two classes applied, so don't use a whitespace between the classes.
if you want to add border use border property not background
you forget to add "." in layout-105 & both class combine with "." not use space betwwen two same div classs.
Result
https://ibb.co/74hjDjK
use this:
.layer-wrapper.layout-105 {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
May i know how to add space / padding-bottom after border-bottom? Sample shown as below. I dont wish add some objects or make it, just wish to use "h2" only. For example:
< h2>h2 header< /h2>
< p>Next element< /p>
DEMO
h1 {
margin-bottom:50px; /* space from border to next element */
padding-bottom:10px; /* space from element to border */
border-bottom:1px solid #aaa;
}
CSS box model - Reference
You can use margin-bottom: in your css. Like in the code below and in the demo. I have used 50px as an example.
h2 {border-bottom:1px solid grey; margin-bottom:50px;}
DEMO
This question already has answers here:
Disable underline for lowercase characters: g q p j y?
(7 answers)
Closed 7 years ago.
I need to achieve the following layout, specifically the effect where the bottom blue line intersects the 'p', and the line 'break's around it:
http://imgur.com/tyuXXRE
The current HTML is simply:
<h2>
An unmatched fishing & boating
<span class="thick">experience</span>
</h2>
The requirements are:
Needs to be dynamic, if the text is changed and another letter intersects the line, then the same effect is required, where the blue line breaks around the text.
Has to be cross browser compatible with current versions of major browsers.
Has to be responsive. The width of the line will change at different resolutions.
What I've tried:
I first looked into the -webkit-text-stroke property, since I'm basically simulating a Photoshop stroke. Aside from the fact that it's only webkit compatible, it seems to create the stroke inwards rather than from the outside, so that won't work. Maybe I'm missing something with this property though.
I also tried text-shadow, but as it doesn't support spread like box-shadow, I can't achieve a hard line. I tried stacking multiple text-shadows, but it doesn't achieve the intended effect.
Maybe there is a way to do with it :before / :after pseudo-elements? Or am I just blanking on an easier approach?
A pretty cool challenge.
My solution is text-shadow based. So you need to change it and adjust it to your liking. i.e. How much you want your letters to cut out of the line.
So depending on your font type and size you will need to change text-shadow size. Also you can also stack more shadows on top of another if you want to make line cut bigger.
https://jsfiddle.net/1to5e8gL/
<h2>
An unmatched fishing & boating <br>
<span class="thick">experqiyencje</span>
</h2>
h2 {
background: #00008B;
color: #FFF;
font-family: sans-serif;
padding: 1em;
}
.thick {
font-size: 60px;
text-shadow: 8px 2px #00008B , -8px -2px #00008B;
}
span:after {
content: '';
width: 100%;
border-bottom: 3px solid #FFA500;
display: block;
margin-top: -7px;
}
I want to use GWT Canvas to draw a dashed border around a canvas element like Rectangle.
I like the style that the css attribute border: dashed produces, especially the way the corners are displayed, like seen here: https://developer.mozilla.org/en-US/docs/CSS/border-style
Can the "source" code of how this dashed line is produces be inspected somewhere?
Found this function in the Firefox source: nsCSSRenderingBorders. I don't understand the code, but the answer probably lies in there.
http://mxr.mozilla.org/mozilla-central/source/layout/base/nsCSSRenderingBorders.cpp
If you want that styling for your borders :
element.style {
background-color: palegreen;
border-style: dashed;
}
or
element.style {
border-style: 2px dashed #000;
}
Is this what you want ?
If you want a java function to do so, or some place to start to 'study' go here gwtcanvasdemo. and there is a link to the sources. Also, another post on SO related to the subject dotted stroke in canvas and then, there is /DashedLineRenderer.java