I have a bunch of html output that I receive like this
<div>
<h4>This</h4><p>Value 9.6 m.</p>
<h4>That</h4><p>Value 9.6 m.</p>
<h4>The other</h4><p>Another 7.69 m.</p>
<h4>And yet</h4><p>Another value 4.8 m.</p>
</div>
and I want to have it rendered something like this
This: Value 9.6 m.
That: Value 9.6 m.
The other: Another 7.69 m.
And yet: Another value 4.8 m.
I think it probably should have been created as a definition list, but i don't control the html generation.
I can get the first h4 p 'block' to render correctly with the following but I can't seem to get subsequent 'blocks' to render as desired.
h4:after {
content: ": ";
display: inline;
white-space: nowrap;
}
h4 {
display: block; }
h4~p {
display: block; }
h4:first-child {
display: inline;}
h4+p {
display: inline;
}
Any suggestions on how to achieve the desired output?
TIA
If you don't need a tidy column or grid layout for these, I found Ye Olde Floats worked best:
// normalize the spacing and stuff between the h4 and p
h4, p {
display: block;
line-height: 1.4;
padding: 0;
margin: 0;
}
h4 {
// honestly, this got the most sturdy result
float: left;
// add the colon and a little space
&:after {
content: ": ";
margin-right: 10px;
}
}
// break the line after each P
p {
&:after {
display: block;
clear: right;
content: "";
}
}
I also threw this into a CodePen.
Also if you would like a more tabular or column-y version, I had some luck with flexbox and css grid.
Hope this helps, happy coding!
Related
I'm trying to customize a web page for the company I work for. they give the option o use custom css to edit. They don't give the HTML, if you ask how to edit something they will provide the specific code. they provided the below code, and I'm trying to figure out how to insert a line break in the first text string. any ideas?
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed h1:after {
content: 'THANK YOU FOR APPLYING. WE WILL GET BACK TO YOU SHORTLY.';
float: left;
text-indent: 0;
width: 100%;
}
.landing .confirmation-container .application-confirmed p {
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed p:after {
content: 'If you did not receive a reply email within 48 hours, please check your spam or email us: hiring#example.com';
float: left;
text-indent: 0;
width: 100%;
}
To insert a new line / line break in that content, use the \A escape characters. In order for the new lines to work properly, you also need to set the white-space property to either pre or pre-wrap.
content: "THANK YOU FOR APPLYING. \AWE WILL GET BACK TO YOU SHORTLY.";
white-space: pre-wrap;
The \A escape sequence will insert a line break. It works the same as adding a < br /> tag to your HTML.
content: 'THANK YOU FOR APPLYING.\A WE WILL GET BACK TO YOU SHORTLY.';
You can use content:"\a" and white-space: pre to create a line break without adding a <br/> tag to your HTML
It works like this:
.landing .confirmation-container .application-confirmed h1 {
display:inline;
}
.landing .confirmation-container .application-confirmed h1:before {
content:"\a";
white-space: pre;
}
Example:
h1 {
display:inline;
}
h1:before {
content:"\a";
white-space: pre;
}
<h1>Header</h1>
\a means line break (character U+000A)
white-space: pre tells browsers to treat it as a line break in rendering.
I want to open a subbreddit in hebrew and i want to "mirror" the site using the css sytlesheet so it will fit nicely with the hebrew. I want that the tree structure of the comments will be aligned to the right.
here is an example of what i want to achieve:
before:
image1
after (with damaged text):
image2
so, i want to make the structure of the site to look like in image2, but without damaging the text.
is it possible?
update:
here is the css code that i have right now:
there could be non-relevant selections, i'm just experimenting withe the stylesheet by trial and error:
.thing {
display: inline;
}
.sitetable {
display: inline;
}
div.content {
display: block;
float: right;
}
body {
direction: rtl;
}
.midcol.likes {
float: right;
}
Update2: solved!
i added this line and it fix it:
.child {
padding-right: 25px;
}
solved! i added this line and it fix it:
.child {
padding-right: 25px;
}
I'm trying to create a definition list of term-definition pairs, each pair existing on a single, separate line. I've tried making dts and dds display:inline, but then I lose the line breaks between the pairs. How do I make sure I have a line for each pair (and not for each individual term/definition)?
Example:
<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>
yielding:
Term 1 Def 1
Term 2 Def 2
The CSS for making them inline would be:
dt,dd{display:inline;}
yielding:
Term 1 Def 1 Term 2 Def 2
...which is not what I want (line breaks between pairs missing).
Another solution:
dt:before {
content: "";
display: block;
}
dt, dd {
display: inline;
}
Try this:
dt, dd { float: left }
dt { clear:both }
Add margin-bottom to dt dd if you'd like more space between them..
I tried these answers, finally I end up with this.
Which I simplified to:
dl {
padding: 0.5em;
}
dt {
float: left;
clear: left;
width: 100px;
text-align: right;
font-weight: bold;
}
dt:after {
content: ":";
}
dd {
margin: 0 0 0 110px;
}
Another solution is to use inline-block and percentage widths. As long as the combined width of dd + dt is greater than 50%.
dt, dd {
display: inline-block;
}
dt {
width: 50%;
}
dd {
min-width: 5%;
}
I found this gave me a more consistent positioning of the dd elements.
Another simple solution
dt {
display: block;
float: left;
min-width: 100px;
}
https://jsbin.com/vumeyowana/edit?html,css,output
Andrey Fedoseev's answer does not work in old android (stock browser 4.3).
This does work for that browser and all others I have checked:
dt::before {
content: "\A";
white-space: pre-wrap;
display: block;
height: .5em;
}
dt, dd {
display: inline;
margin: 0;
}
<dl>
<dt>AM</dt>
<dd>Description for am that should span more than one line at narrow screen widths.</dd>
<dt>PM</dt>
<dd>this means afternoon.</dd>
</dl>
I wanted to be able to create a list with inline pairs, centrally aligned. Using dt:before { display; block} worked well for this, but when copying text from a browser, pseudo elements are ignored so would end up being pasted like this:
Term 1: Def 1Term 2: Def 2
This is a minor issue, but there's another approach documented at MDN:
WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.
The following solution works well for this:
dt, dd {
display: inline;
}
<dl>
<div><dt>Term 1:</dt> <dd>Def 1</dd></div>
<div><dt>Term 2:</dt> <dd>Def 2</dd></div>
</dl>
If you have a "zebra" background or border separating each DT-DD pair, then this will work nicely:
dt, dd {
padding: 8px 6px;
display: block;
}
dt {
font-weight: 600;
float: left;
min-width: 50%;
margin: 0 8px 0 0;
}
dd:nth-of-type(odd) {
background: #eee;
}
This will appear to wrap both items in a row with a grey background. As long as the DT has less vertical height than the DD - which is usually the case.
(Haven't browser tested yet.)
Anyway, I'm trying to create a toggle link, which is basically two buttons on top of each other. One of them would become display:none when it is clicked, and vice-versa.
Currently, my CSS is like this
#main-nav:target + .page-wrap {
position:absolute;
left:-80px;
#open-menu {
display: none;
}
#close-menu {
display: block;
}
}
...but the #open-menu and #close-menu display options don't seem to be showing. Any help?
EDIT:
Alright so I need a preprocessor okay ._.
EDIT AGAIN:
Got it working, thanks guys! Just wondering, is there a way for my entire page div (excluding the menu) to slide out of the page? Or is it some simple overflow-x:hidden?
If you're not using a preprocessor and you don't want to, I suspect you can rewrite your CSS like this, assuming your HTML structure actually corresponds to the selectors:
#main-nav:target + .page-wrap {
position: absolute;
left: -80px;
}
#main-nav:target + .page-wrap #open-menu {
display: none;
}
#main-nav:target + .page-wrap #close-menu {
display: block;
}
Of course, if #open-menu and #close-menu aren't descendants of .page-wrap, then this won't work at all, even if you do use a preprocessor to support writing nested style rules (as a preprocessor can't do something if it cannot already be done with plain CSS).
As mentioned, if these elements aren't related in a way that can be expressed with descendant and sibling combinators, you'll have to make use of JavaScript to achieve what you're trying to do.
As a demonstration, I tried the following:
<div class="page-wrap">
<a id="close-menu" href="#open-menu">Close</a>
<a id="open-menu" href="#close-menu">Open</a>
</div>
with the following CSS:
.page-wrap #open-menu {
display: block;
}
.page-wrap #close-menu {
display: none;
}
.page-wrap #open-menu:target {
display: block;
}
.page-wrap #open-menu:target + #close-menu {
display: none;
}
.page-wrap #close-menu:target {
display: block;
}
.page-wrap #close-menu:target + #open-menu {
display: none;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/5aSdW/
Demo Link: http://jsfiddle.net/audetwebdesign/5aSdW/show
Every time you click the Open or Close link, the alternate link is displayed.
I am not sure if this is overly useful, but it can be done.
http://forumgallery.rollinleonard.com/artists.php
I can't seem to get rid of the space before the comma in my list.
It makes no sense!
Here is the relevant part of my CSS
.artistlist {
margin: 0px;
padding: 0;
}
li.artistlist {
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.5em;
word-spacing: 1px;
}
li.artistlist:after {
content:", ";
}
.artistlist li:last-child:after {
content:"";
}
ul li{
margin:0;
}
I did a small demo with less CSS code that renders without a whitespace before the comma. Tested in Chrome and Firefox on Mac.
Looked at your updated page and found the problem with it. Read more about possible whitespace bugs within different browsers here: http://www.42inc.com/~estephen/htmlner/whitespacebugs.html
Your html looks like this:
<li class="artistlist">
Davis Cone
</li>
Try to remove the whitespace between your tags and it renders fine:
<li class="artistlist">Davis Cone</li>
For special chars like space you should use Unicode in the content. Try this:
li.artistlist:after {
content:",\00a0";
}