I have a numbered list in a div on the left side of the screen. Just to the right of that div, I have another div with items that correspond with the numbered list. When the screen is minimized so the text in the first line wraps to the second line, I'd like the 2 from the numbered list move to the third line to match up with the Second Item entry.
I've tried out a couple different things (using actual numbered lists, using a single div, etc...) and couldn't get anything to work. Using a single div makes the most sense, but I want the numbered list in a separate bar on the left side. this can be seen in the linked fiddle. Any help is appreciated!
Below is how it views when not wrapped.
1 First Item
2 Second Item
Below is how it views currently when wrapped.
1 First
2 Item
Second
Item
Below is how I'd like it to view when wrapped.
1 First
Item
2 Second
Item
Here is the code:
<div class="xml-block">
<div id="xml-sidebar">
<p class="xml-number">1</p>
<p class="xml-number">2</p>
</div>
<div id="xml-group">
<p class="xml-symbol xml-list">Position of the first entry.</p>
<p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
</div>
In the following example, when the window is small enough that the text wraps, the number 2 from the list is not adjusted to stay with the Second Entry.
https://jsfiddle.net/b1Lpeffw/2/
You could use CSS counters for the line numbers instead. Not only will the number align with the code, but it simplifies your code quite a bit so you don't have to have a separate element with line numbers in your markup.
html {
background-color: #272822;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#xml-group {
padding: 0;
counter-reset: count;
}
#xml-group:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3em;
height: 100%;
background-color: #1C1C18;
margin: 0;
padding: 0;
border-right: 1px solid #505050;
}
.xml-list {
font: 18px Monospace;
color: #FFFFFF;
text-decoration: none;
padding: 0;
margin: 0;
position: relative;
padding: 0 0 0 4rem;
}
.xml-list:before {
counter-increment: count;
content: counter(count);
font: 18px Monospace;
color: #505050;
text-decoration: none;
position: absolute;
left: 0;
width: 3em;
text-align: center;
}
.xml-text {
color: #EA9200;
}
li.xml-text-indent1 {
margin-left: 1.5em;
}
li.xml-text-indent2 {
margin-left: 3em;
}
li.xml-text-indent3 {
margin-left: 4.5em;
}
li.xml-text-indent4 {
margin-left: 6em;
}
.xml-symbol {
color: #C177FF;
}
.xml-list li p {
margin: 0;
padding: 0;
}
<body>
<div class="xml-block">
<div id="xml-group">
<p class="xml-symbol xml-list">Position of the first entry.</p>
<p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
</div>
</div>
</body>
Related
I have some HTML generated from a text editor macro. The output looks something like this:
<div class='source-block'>
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
The only CSS I currently have applied to any of these elements so far is on the pre:
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
I am trying to place my copyBtn directly to the right of the <pre>. Because of the way this text editor macro works, I cannot put the button inside the src-container, which is "automagically" generated. However, I can move the button before or after the src-container div.
Can I achieve this with CSS? I've tried some stuff using float with :last-child and z-index but no success... Is this even possible given the macro limitation (i.e., I cannot easily place HTML inside this src-container class)?
Thanks!
You can use flexbox to position the flow of the child element within the source-block (parent). You can use this to put them next to each other and position the vertical position with align-items: center;
More about flexbox here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Can I use Flexbox (browser support):
https://caniuse.com/#feat=flexbox
/* changed CSS */
.source-block {
display: flex;
align-items: center;
align-content:flex-start;
}
/* provided CSS*/
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
/* misc styling */
.copyBtn {
margin-top: 2px;
}
<div class="source-block">
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
Set all the class named src-container.
<style>
.src-container {
dispay:inline;
}
</style>
Or, set the single button.
button[name="******"] {
position: absolute;
}
Easiest solution: move the button before the .src-container and float it.
.copyBtn {
float: right;
}
Second solution: don't need to move the button, just position it absolutely, adjusting the top position to where you see fit. Only requirement is making sure the element that contains all these (typically the body) should have position set (usually so, but not always).
.copyBtn {
position: absolute;
top: 10px; right: 10px;
}
There are more advanced techniques, like auto aligning the button, but as your layout is clearly known, this should do enough for your purpose.
A simple solution would be to use float: left on the src-container to make the button go to the right of it. You could also use float:right on the copyBtn. These make the block elements go next to each other.
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
}
.src-container {
float: left
}
<div class='source-block'>
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
So currently when I add a new entry to my kind of list it goes like this:
[entry] -> [new entry]
and then starts on the line beneath. How do I do so it first fills the first line straight down and then creates a second line and fills that one straight down.
To easier show what I mean. I will give every entry a number and show how it works.
How it works right now:
1 2
3 4
5 6...
And I want it to work like:
1 4
2 5
3 6
Anyone know how I should do?
Code comes here.
HTML
<div id="staffs">
<h5>The Management</h5>
<p>
<div class="staff_box">
<img src="/images/users/1.png" class="staff_img" />
<h3 class="staff_name">Sarah Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
<text class="staff_pos">CEO, Founder, Owner</text>
</div>
<div class="staff_box">
<img src="/images/users/1.png" class="staff_img" />
<h3 class="staff_name">David Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
<text class="staff_pos">CEO, Founder, Owner</text>
</div>
<!--Same boxes are repeated-->
</p>
</div>
CSS:
#staffs {
width: 530px;
height: 275px;
float: left;
clear: left;
overflow-y: hidden;
}
h5 {
text-align: center;
background: #222;
color: #888;
padding: 5px;
width: 510px;
font-weight: bold;
border-radius: 4px;
}
.staff_country {
height: 12px;
width: 12px;
}
.staff_box {
width: 175px;
height: 50px;
margin-left: 5px;
margin-top: 5px;
clear: left;
display: inline-block;
}
.staff_img {
height: 50px;
width: 50px;
float: left;
margin-right: 3px;
border-radius: 4px;
border: 1px solid #BBB;
}
.staff_name {
font-size: 13px !important;
margin: 0 !important;
padding: 0 !important;
padding-top: 2.5px !important;
}
.staff_pos {
font-size: 11px;
color: #777;
}
To see it in action, here is a JSFiddle: http://jsfiddle.net/7MfLU/4/
I would also need some help on how to move the top entries higher up, closer to the titlebar.
Probably the easiest way, since you're just using divs anyway, is to just reorder them in your HTML. You could also create two diva inside staff_box, a left and a right, and put your diva in the appropriate column that way. To move the entries closer to the title bar, change the margin-top to something smaller (you can go negative if you need to).
I am trying to use the <hr> tag to style and include different headings for parts of my website. I am using CSS pseudo elements to add the heading text to the <hr> element.
My HTML looks like:
<div id="steps">
<div id="step1"><hr class="stepheading">contentcontent</div>
<div id="step2"><hr class="stepheading">contentcontent</div>
<div id="step3"><hr class="stepheading">contentcontent</div>
<div id="step4"><hr class="stepheading">contentcontent</div>
</div>
My CSS looks like:
hr.stepheading{
padding: 0;
border: none;
border-top: medium double #333;
text-align: center;
color: #333;
margin: 130px 0px;
}
hr.stepheading:after{
content: "The First Step";
position: relative;
top: -0.7em;
display: inline-block;
padding: 0 0.25em;
background: white;
}
So, I can see that the problem is that every single one of my headings will contain "The First Step" instead of other headings for other steps.
Demo
I want each heading to have a different title: "The First Step," "The Second Step," etc...
How do I go about doing that and what technology do I use? Can this be done in purely HTML and CSS or do I have to use Javascript/JQuery to achieve what I want?
Use nth-child() on the div element:
hr.stepheading:after{
content: "The First Step";
position: relative;
top: -0.7em;
display: inline-block;
/* Other details */
}
div:nth-child(2) hr.stepheading:after{
content: "The Second Step";
}
div:nth-child(3) hr.stepheading:after{
content: "The Third Step";
}
div:nth-child(4) hr.stepheading:after{
content: "The Fourth Step";
}
Demo: http://jsfiddle.net/bQBgL/4/
Check this demo : http://jsfiddle.net/gLQ37/
HTML:
<div id="steps">
<div id="step1"><h1 class="stepheading"id="hr1"></h1>contentcontent</div>
<div id="step2"><h1 class="stepheading" id="hr2"></h1>contentcontent</div>
<div id="step3"><h1 class="stepheading" id="hr3"></h1>contentcontent</div>
<div id="step4"><h1 class="stepheading" id="hr4"></h1>contentcontent</div>
</div>
CSS:
h1.stepheading{
padding: 0;
border: none;
border-top: medium double #333;
text-align: center;
color: #333;
margin: 130px 0px;
}
h1.stepheading:after{
position: relative;
top: -0.7em;
display: inline-block;
padding: 0 0.25em;
background: white;
}
#hr1:after{content: "The First Step";}
#hr2:after{content: "The Second Step";}
#hr3:after{content: "The Third Step";}
#hr4:after{content: "The Fourth Step";}
#step2 hr.stepheading:after { content: "The Second Step"; }
#step3 hr.stepheading:after { content: "The Third Step"; }
etc...
There is some text whose formatting I would like to render in HTML. Here is an image:
Note the gray lines with the bullet points and the paragraph numbers. The bullets should be centered on the page and the numbers should be justified right.
I've been trying to think of how to do this in HTML and am coming up blank. How would you capture this formatting?
You can use the :before and :after psuedo-elements to great effect here:
http://jsfiddle.net/yNnv4/1/
This will work in all modern browsers and IE8+. If IE7 support is required, this answer is not for you :)
#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}
About the counter properties:
https://developer.mozilla.org/en/CSS_Counters
http://www.w3.org/TR/CSS21/syndata.html#counter
http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
It's not possible to (automatically) increment the bullets.
However, it can be done with some dubious repetition:
http://jsfiddle.net/N4txk/1/
p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */
(alternatively, :nth-child can be repeated in the same way: http://jsfiddle.net/N4txk/ - but it won't work in IE8; there will only be two bullets)
There is an upper limit on the number of bullets it would be sensible to have, so I think it would be acceptable to copy and paste that as many times as required.
How about something like this?
http://jsfiddle.net/6eTCf/
<div class="separator">
* <div class="page_number">1</div>
</div>
.separator{
margin: 5px 0 5px 0;
color:gray;
position:relative;
text-align: center;
}
.page_number{
position:absolute;
right: 3px;
top: 0;
}
I would float the number right and center the remaining contents (the bullet points). If you give the remaining contents an equal left and right margin larger than the numbers are wide, the contents will be centered.
I would wrap the whole thing in a div, then use relative/absolute positioning between the wrapper and the paragraph number div to get the numbers on the right-hand side like that.
Here's a fiddle showing how to do it.
There are a couple ways I can think of.
Add a <div> between the paragraphs, then add two <p>'s: <p class="dot"></p> and <p class="pnum">1</p>.
Style the <div> to the width of the the paragraphs, and set in the CSS the following:
.dot{ text-align: center; }
.pnum{ float: right; }
There are several ways I can think of:
Float + absolute position (I'll let the purists explain this one)
Old style table (I'll explain this since it's the easiest):
If the total width of the area is, say, 300px
<table><tr>
<td width="30"></td>
<td width="240" align="center">bullets</td>
<td width="30" align="right">number</td>
</tr></table>
Many people prefer using pure CSS, but I like my tables, they just work for me
`#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;``
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}`