I am trying to style a classic blockquote, where the bottom and top border contain a special character such as ≋ ≍ ≡ ∼ ⨌ ⫗ ⁗ ∾ ∿ centered on its own box with a background color that goes over the top and bottom border.
This is where I am right now. This may be a difficult question to solve but after years of dreaming about such a classical blockquotation styling, I have finally decided that I'm willing to dedicate time and my own points in one or multiple bounty awards to give awy to achieve this for the community.
blockquote{
margin: 1em -1em 0 -1em;
padding: .5em 1em .5em 1em;
border-left: 4px double #CCC;
border-right: 4px double #CCC;
border-top: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;
background: hsla(0,0%,0%,0.025)
}
blockquote > p{ display:inline; }
blockquote:before {content: '“';margin-right: 0em}
blockquote:after {content: '”'; margin-left: -.25em}
<blockquote><p>
I love you not only for what you are, but for what I am when I'm with you.
I love you not only for what you have made of yourself, but for what you are making of me.
I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities of the good in me.
I love you for helping me to construct of my life not a tavern, but a temple.
</p></blockquote>
The HTML structure cannot be changed for two reasons: 1) most CSM websites do not allow for it anyways and 2) because changing the HTML just for layout has no semantical meaningful advantage so just to style this classic blockquote, all the styling should be possible within current or future CSS releases.
In summary: I would like to solve the classic blockquote challenge in CSS only, and for this any and all answers that solve one, or all, of the following bullets helps a great deal:
Place a special character like ∿ over the top and bottom border;
Center the character horizontally automatically, regardless of blockquote width;
Allow for a background box to be colored in to hide the border behind the character.
Photoshoped end result could look something like this:
Demo
If you're stuck with the the <blockquote><p>...</p></blockquote> structure, I'd recommend using pseudo-elements on the <p> for the quotation marks, and pseudo-elements on the <blockquote> for the ornamentation.
blockquote {
position: relative;
border: 1px solid gray;
margin: 1rem;
padding: 1rem;
}
blockquote:before,
blockquote:after {
content: '∿';
display: block;
position: absolute;
width: 1em; /* set height/width based on font-size */
height: 1em; /* set height/width based on font-size */
line-height: 0.8; /* '∿' character is not naturally vertically centered; adjusting line-height can compensate */
text-align: center;
top: -0.5em; /* move it up half its height */
left: calc(50% - 0.5em); /* move it left half its parent's width, minus half its width */
background: white;
}
blockquote:after {
top: unset; /* unset the previously declared "top" property because now we're styling the bottom one and dont want it to have a height derived from the "top" and "bottom" values, which is what would happen if it weren't unset */
bottom: -0.5em; /* move it down half its height */
}
p {
margin: 0;
}
p:before {
content: '“'
}
p:after {
content: '”';
}
<blockquote>
<p>I love you not only for what you are, but for what I am when I'm with you. I love you not only for what you have made of yourself, but for what you are making of me. I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities of the good in me. I love you for helping me to construct of my life not a tavern, but a temple.</p>
</blockquote>
just use fieldset tag, and legend tag for the text
docs : https://www.w3schools.com/tags/tag_fieldset.asp
example :
<fieldset>
<legend>~</legend>
<p>
I love you not only for what you are, but for what I am when I'm with you.
I love you not only for what you have made of yourself, but for what you are making of me.
I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities of the good in me.
I love you for helping me to construct of my life not a tavern, but a temple.
</p>
</fieldset>
Related
How do I create distance between the text and the border below the text as shown in the image attached using sass/css?
I want the distance to be 5px and the font-size of the text to be 15px.
I tried doing
.selected {
color: #284660;
}
.selected:after {
content: '';
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: 5px;
border-bottom: 2px solid #284660;
}
but that created a border that was too wide.
I feel couple of things which can be improved in the above snippet.
You may not need psuedo element for desired effect
You should not use absolute positioning for that , in case you want to use psuedo element
In any case you can try this out.
&.selected {
color: #284660;
border-bottom: 2px solid #284660;
padding-bottom:10px ; // this should give you some spacing.
}
Try a negative
{
bottom: -5px;
}
Besides the complete lack of knowledge of your DOM profile or what element the & refers to, if you just slap a border and padding on an inline element, you'll have the effect you want.
No need to play with pseudoelements.
<span style="padding-bottom:5px; border-bottom:2px solid black;">Some Text</span>
Obviously, you should put that styling info in the css file, I merely inlined it for the example.
Oh and next time, please include sample HTML with your sample CSS. Only reason I even bothered was because the solution was as simple as "What is padding for 15, Trebek?"
I'd like to display a read-only block of text as part of an HTML page - as it happens, it will be the monospaced text of the user's Git commit message - and while I want to display the text without wrapping, I would like to display a vertical line-length guide at 72 characters, so it's clear to the user when their lines have gone over the recommended length.
In some cases, the user will have entered lines of text much wider than the viewport.
Can I achieve this kind of effect with CSS?
(as an aside, I'm not drastically in favour of the text-wrapping guidelines, but my users need to be aware of them)
It's not really that practical to do it via CSS, as css doesn't give you any type of an nth-character selector. You could only draw a line at a fixed width which would be a best guess at your font character width.
However, if you're ok using a small amount of javascript, it could easily be done.
Here is a code sample I made for you showing how: http://codepen.io/beneggett/pen/GJgVrp
SO wants me to paste the code here as well as codepen, so here it is:
HTML:
<p>Example of syntax highlighting code at 72 characters w/ minimal javascript & css.</p>
<pre>
<code>
Here is my really awesome code that is nice
and it is so cool. If you are actually reading this, well I praise you for bearing with me
as you can see there is some short code
and some really, really, really, really, really, really, really, really, long boring code that is longer than 72 characters
it just goes on forever and ever and ever and ever and ever and ever and ever and ever and ever
The nice thing is we can tell our users when the code is short
or when it is getting way way way way way way way way way way way way way way way way way way way too looonggggg
oh wait, this isn't really code, it's just some gibberish text. but that's ok; the point is well made
i could go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on, but you'd get tired of it
That's it for now
</code>
</pre>
<p> This is just a simple example using tools that I'm comfortable with. There may be better methods to suit your needs, but it's a good start</p>
CSS:
pre{
white-space: pre;
background: #ececec;
border: 1px solid #c3c3c3;
overflow: auto;
}
pre .long{
border-left: 1px dotted red;
color: red
}
JS (CoffeeScript):
$(document).ready ->
lines = $('pre code').text().split('\n') # First we'll find all the lines of code
$('pre code').text('') # then, remove the old code, as we're going to redraw it with syntax highlighting
$.each lines, (n, elem) -> # Loop through each line
if elem.length > 72 # If it's longer than 72 characters, we'll split the good_code and the long_code then add some html markup to differentiate
good_code = elem.substring(0,71)
long_code = elem.substring(71)
$('pre code').append "#{good_code}<span class='long'>#{long_code}</span>\n"
else # otherwise we will just keep the original code
$('pre code').append elem + '\n'
This was just a simple illustration using tools that are simple for me; but the point is to illustrate it's pretty simple code that could easily be adapted to what you're trying to do.
Use a monospaced typeface like courier new, figure out how wide 72 characters is and lay a div underneath your text with that width and dashed right border.
As said by Ben Eggett use Monospaced fonts because
"A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space."
Even 'l' and 'm' occupy the same space. So find out how much width each char occupies based on the font size you are using and the vertical line at that place of the container.
For other fonts the widths for each characters are different and since CSS is static you cannot do with just css.
Below jsfiddle link provides example of implementation using monospaced font "Courier New"
http://jsfiddle.net/mnLzyy2x/
<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<div class="separator"></div>
</div>
Css is
.git-msgs-container {
width: 900px;
border: 1px solid red;
font-family: 'Courier New';
font-size: 15px;
position: relative;
}
p {
margin: 0;
padding: 0;
}
.separator {
height: 100%;
border-left: 1px solid blue;
position: absolute;
top: 0;
left: 648px;
}
Enhancing Kalyan Kumar S's recipe.
Here is fiddle: http://jsfiddle.net/4mu5Lwex/
HTML:
<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<p>_________1_________2_________3_________4_________5_________6_________7_________</p>
<p>1234567890123456789012345678901234567890123456789012345678901234567890123456789</p>
</div>
It looks that for a font-size of 10pt, the width of the each character is 6pt so the vertical line is at 72x6 = 432pt.
CSS:
.git-msgs-container {
width: 900px;
border: 1px solid red;
font-family: 'Courier New';
font-size: 10pt;
position: relative;
}
.git-msgs-container p::after {
display:block;
position: absolute;
left: 432pt;
top: 0;
margin-top: 0;
height: 100%;
border-left: 1px solid blue;
content: '';
}
Many of these suggestions will work most of the time. But positioning at absolute pixels will break if the user has set their default font size to something other than what you had intended.
Use a scalable unit like em or rem to set your font size. Then figure out how many ems or rems a single character width is, and position your vertical line marker at 72 x the character width.
example:
div#container {
position: relative;
font-size: 1rem;
}
if you haven't changed your default font size, 1rem will equal 16px. (If you have, reset you font-size to default in your browser before continuing) Now measure a single character, or a line of characters and average it out. (take a screenshot and pull it into Photoshop or Gimp to do this) Divide the single character width by 16, and you'll get the character width in rem.
eg:
character width = 9px;
9 / 16 = 0.5625rem;
multiply by 72 to figure out positing:
72 characters = 0.5625 * 72 = 40.5rem
now position your vertical line:
div#container .verticalLine {
position: absolute;
top: 0rem;
left: 40.5rem;
}
This sets up the positioning based on font size, not pixels. So it will scale with the font size accordingly.
If you want a large font-size (say 1.5rem), then multiply your calculated 72 character by the desired font size.
40.5rem * 1.5 = 60.75rem
n.b. If you don't want to measure exactly, or you don't have a graphics program, then you can just adjust the positioning by trial and error until it's positioned in the right spot.
You definitely want a monospaced font. You can include one like Paul Hunt's Source Code Pro (Google Fonts) with the following CSS:
#import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
Then, structure your commit message in a div like the one below. (Note the empty guide div):
<div class="commit-message">
Commit message goes here.
<div class="guide"> </div>
</div>
..and apply this CSS:
.commit-message {
font-family:"Source Code Pro", sans-serif;
font-size: 12px;
position: relative;
}
.commit-message .guide {
position: absolute;
top: 0;
height:100%;
width: 43em;
border-right: 2px dashed red;
}
Depending on the font-size you apply in the first rule, you may need to adjust the width in the second rule.
Here's a fiddle showing it in action: http://jsfiddle.net/yjjybtLu/4/
A pre-calculated distance for the "red line" doesn't seem reliable to me.
A background with 50 characters in exactly the same font as used in the textarea might do the trick.
This suggestion still relies on a fixed height for the background, which is not good if the height of the textarea needs to be flexible.
<style type="text/css">
* {
font-family: monospace;
}
.textarea-wrapper {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
background-color: #fff;
}
textarea {
position: absolute;
width: 600px;
height: 400px;
background-color: transparent;
border-width: 2px;
}
span {
position: absolute;
top: 2px;
left: 2px;
display: block;
width: auto;
height: 100%;
border-right: 2px dotted #fcc;
color: #fff;
}
</style>
<div class="textarea-wrapper">
<span>01234567890123456789012345678901234567890123456789</span>
<textarea readonly="readonly">01234567890123456789012345678901234567890123456789 - 50 characters and more
</textarea>
</div>
Thanks for the feedback, and sorry for the hasty post yesterday.
I have some divs, each containing an h3 a div, and an image that needs to be behind them. I'm using position:absolute on the h3 and div instead of background-image
because the cms correctly sets the image size, and I want the wrapper to match it automatically.
<div class="give-box">
<h3>heading</h3>
<div class="give-now-button">give now</div>
<img src="donate-image.jpg" />
</div>
CSS looks like this:
.give-box h3 {
position: absolute;
top: .2em;
left: .2em;
font-size: 5em;
color: #fff;
text-shadow: 2px 2px 2px #808080;
text-transform: uppercase;
line-height: .8em;
border-bottom: 8px solid #e09e19;
}
.give-now-button {
position: absolute;
bottom: 2em;
right: 2em;
}
Short headings look fine, but headings that break to 2 lines automatically fill the width of the container, so I get:
heading
-------
long
heading
-------------
I made a jsfiddle
Any ideas how I can shrink this down to the width of the text? I've tried every combination I can think of margin, display:inline, display:inline-block, float, etc.
Also, I can't break this heading up, e.g.
<h3>Longer</h3>
<h3>Heading</h3>
because it is dynamically generated by my cms.
Thanks
display: inline without the absolute positioning will do the trick: http://codepen.io/pageaffairs/pen/jxopH
However, having a heading as display: inline isn't so convenient, so perhaps wrap it in a div ... although this is where design decisions can become more trouble than they are worth.
I am currently finishing a site that the client wants to work on all browsers. However, there seems to be a CSS issue which I can not get around. The border around this page seems to start from the middle of the page, as opposed to surrounding the entire page. It works on all other browsers though. I am guessing that it is a float problem, but the #contact-form underneath has basically the same CSS applied to it but the border still surrounds it, while the #info seems to have broken out of the border.
The webpage in question is http://lunaskymoda.co.uk/contact-us/
The only validation error is with an unregistered keyword "Nextgen", but i doubt that is the problem. I have spent an entire day tackling this and cannot seem to come up with a reasonable explanation as to why this is happening.
the CSS for the possible HTML elements producing the error are:
#main #main-content {
border: 1px solid white;
display: block;
margin: 12px 0;
background: black;
}
.contact #main-content .info {
margin: 10px;
width: 300px;
font-size: 14px;
color: white;
float: right;
display: block;
}
You're not the first one to have issues with ie6 :)
The problem is of course the "clear: both" of the clear class not being honoured, so you need to hack it.
Here's a possible approach:
http://damienhowley.wordpress.com/2009/04/01/ie6-hack-replacing-clearboth/
You may also try to replace the <div class="clear"></div> by <br clear="all">.
i would like to create a single page where:
1) The top, 100px, fixed
2) The bottom, 100px, fixed
3) Between top and bottom there is dynamic content
I was able to create exactly that but i have an issue, when i am scrolling the dynamic content, the elements go under and over the top and bottom and the same elements are visible thru the fixed top/bottom.
I tried clear: both; on the top and bottom div, but since they are fixed, the clear: both; did'nt works.
I would like to keep the dynamics elements inside the content div between top and bottom and if possible still use the main document scroll bar to scroll inside it.
Here is an example, assume the lines represent the top and bottom fixed div, and the 'element' are the dynamic contents.
element - not correct
element - not correct
element
element
element
element
element
element - not correct
element - not correct
Hope i am clear enough and thanks in advance!
I guess this is what you're looking for.
See this fiddle.
HTML
<header>
This is the header!
</header>
<article>
<p>Goodness one unimaginative rooster some that circa much jay goodness gosh pessimistic scantly dark some modest gasped where unexplainable some before about that a hello firefly macaw ethereally indecisive panda lorikeet where a peskily jellyfish a since lied factiously in and that after but falteringly so worm flabbily yet hey gladly more versus much precarious because a the boisterous quiet fed one alas hawk flawlessly thanks some.</p>
<p>Squirrel much krill regarding before contrary jeez outdid warthog immaturely articulately valiant hey suggestive thus far won darn wow scorpion portentously more hotly miraculous jeepers meagerly since excluding that however pinched yet whale adoringly floppy tenably wow and after via for unproductively as one prior the more on urchin rang much because some more approving near oh a as far lion some lucky far much frog far and beneath underlay far after nosy jaguar subconscious after this far input frequently distant the much positively gagged jeez unobtrusively far sank less before babbled far by when this the this sensible outside.</p>
<p>That far qualitatively intrepid vulture a ferret disgraceful moaned therefore easy much and curt insincerely dachshund notwithstanding yikes and dragonfly and patted until much jeez close fumed divisive copiously wherever near near far perceptible shrewdly ground yikes opened as elaborate adversely spilled that creepy imaginative by in hello groundhog magnificently jeez hence crud versus desperately caterpillar checked one wicked far some yikes.</p>
<p>And darn dependent that urchin upon much jeez ably sniffed a less in far darn far incorrect between inept caterpillar man-of-war manta hence ironically into more amenable negative sanctimoniously tortoise eagle far spoiled clapped tepid yikes irresistibly testy warthog hugged immense much immense alas thus paid therefore agitatedly about well following the hey aboard and that after and condescending seagull because alas slept hey this went dove far much far considering raccoon witless under ungraceful.</p>
<p>Emptied much gosh circuitously inside along a far pointed fanatic hey bravely with far yikes capybara meadowlark sedulous some lion squid floated darn drolly underwrote loving spat maliciously coaxing unwilling goodness seagull elephant snickered balked sloth for kookaburra inside untactfully so the where much human then because pungently cracked heard overtook firm skeptically reverently much some jeez less and hey towards.</p>
</article>
<footer>
This is the footer!
</footer>
CSS
body {
font-family: sans-serif;
}
header, footer {
position: fixed;
height: 100px;
text-align: center;
width: 100%;
background: #ff0450;
color: #fff;
text-transform: uppercase;
line-height: 6em;
}
header {
top: 0;
}
footer {
bottom: 0;
}
article {
margin: 100px 50px 0;
}
article p {
margin: 20px 0;
}
article p:first-line {
font-variant: small-caps;
}
Update
body {
font-family: sans-serif;
}
header, footer {
position: fixed;
height: 100px;
text-align: center;
width: 100%;
background: #ff0450;
color: #fff;
text-transform: uppercase;
line-height: 6em;
}
header:before {
content: "";
position: absolute;
height: 20px;
background: #fff;
z-index: 999;
top: -20px;
width: 100%;
left: 0;
}
footer:before {
content: "";
position: absolute;
height: 20px;
background: #fff;
z-index: 999;
bottom: -20px;
width: 100%;
left: 0;
}
header {
top: 0;
margin-top: 20px;
}
footer {
bottom: 0;
margin-bottom: 20px;
}
article {
margin: 120px 50px 0;
}
article p {
margin: 20px 0;
}
article p:first-line {
font-variant: small-caps;
}
Updated the fiddle too.
here, take a look at this.
http://jsfiddle.net/PxabT/47/
update
http://jsfiddle.net/R4SV5/7/
Give the top and bottom elements a background-color or background image. Also it is probably a good idea to give top and bottom a z-index of 3 or higher.