Example:
<style type="text/css">
.outer {
width:1500px; /*1500*/
border: 0px solid #000000;
background-color: #565a5c;
margin: 0 auto; /* top+bottom left+right */
}
p {
font-style: normal;
font-size: 22px;
font-family: georgia;
text-align: center;
padding-top: 63px; /*102 */
padding-bottom: 230px; /*500 */
margin-top: 0;
margin-bottom: 0;
}
.hr3 {
color: #333344;
}
.hr4 {
color: #995588;
}
.hr5 {
color: 99bbdd;
}
.hr6 {
color: #5599cc;
}
.hr7 {
color: #dd99aa;
}
</style>
</head>
<body>
<div class="outer">
<p>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
</p>
</div>
</body>
</html>
Rubble
August 30, 2017, 9:05pm
3
I would guess you would need to start using php or similar where you can dynamically create the spans or use variables.
I assume the OP is talking about all the span opening and closing tags.
I looked at your Fiddle and couldn’t determine what the purpose of this code might be, unless of course you’re planning on knitting a scarf…
3 Likes
ronpat
August 30, 2017, 9:58pm
5
It is always helpful if we understand the purpose of isolated snippits of code.
Would you mind including a verbal description of WHAT your code is supposed to do and WHY?
A drawing or pseudoscreenshot might help, too.
Sorry to ask these busy questions of you, but my crystal ball is leased out to the political party with the most money to spend. A cat’s gotta pay for his vices, you know.
Is there a way I can post a Span multiply times without having to put the code in multiply times?
Like, if I wanted to post it 5 times, is there any such way to put in, X5 and then it repeats the same code that many times?
Like how when you do, background-repeat:, it repeats it multiple times, Is there a way I can do that same thing with a Span class?
<span class="hr3">example</span><span class="hr4">example</span><span class="hr5">example</span><span class="hr6">example</span><span class="hr7">example</span>
asasass:
Like, if I wanted to post it 5 times, is there any such way to put in, X5 and then it repeats the same code that many times?
Not using just HTML or CSS there isn’t. You’d need to use either a server-side language, like PHP, or JavaScript in the browser.
Really, wow, I didn’t think it would be that complex.
Hi there asasass,
I assume that you aren’t doing PHP as yet.
So here is a “JavaScript”
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Loads of span elements</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% verdana, arial, helvetica, sans-serif;
}
#header {
font-size: 1em;
text-align:center;'
}
.nojs::before {
content: 'JavaScript is required to view this page.';
}
.js::before {
content: 'Loads of span elements.';
}
.hide {
display: none;
}
.show {
display: flex;
}
#loads-of-span-elements {
flex-wrap: wrap;
justify-content: center;
max-width: 62.5em;
padding: 5em;
margin: auto;
box-sizing: border-box;
background-color: #565a5c;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
font-family: georgia, serif;
font-size: 1em;
}
#loads-of-span-elements span {
margin: 0 0.25em;
}
#loads-of-span-elements span:nth-child( 5n+1 ) {color: #334;}
#loads-of-span-elements span:nth-child( 5n+2 ) {color: #958;}
#loads-of-span-elements span:nth-child( 5n+3 ) {color: #9bd;}
#loads-of-span-elements span:nth-child( 5n+4 ) {color: #59c;}
#loads-of-span-elements span:nth-child( 5n+5 ) {color: #d9a;}
#loads-of-span-elements span:nth-child( 5n+6 ) {color: #fff;}
@media ( max-width: 65em ) {
#loads-of-span-elements {
max-width: 46.75em;
}
}
@media ( max-width: 50em ) {
#loads-of-span-elements {
max-width: 38.25em;
}
}
@media ( max-width: 38.5em ) {
#loads-of-span-elements {
max-width: 30.375em;
}
}
</style>
</head>
<body>
<h1 id="header" class="nojs"> </h1>
<div id="loads-of-span-elements" class="hide"></div>
<script>
(function(d) {
'use strict';
var div = d.getElementById( 'loads-of-span-elements' );
div.classList.remove( 'hide' );
div.classList.add( 'show' );
d.getElementById( 'header' ).classList.remove( 'nojs' );
d.getElementById( 'header' ).classList.add( 'js' );
var quantity = 48;
for ( var c = 0; c < quantity; c ++ ){
var span = d.createElement( 'span' );
span.appendChild( d.createTextNode( 'example' ) );
div.appendChild( span );
}
}(document));
</script>
</body>
</html>coothead
1 Like
ronpat
August 31, 2017, 4:42am
10
I know you haven’t explained why you want to do this, but, what’s wrong with copy-and-paste?
The last time I looked, background-repeat does not allow one to specify a number of times to repeat an image. Basically, it’s ON or OFF.
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
What would be gained if your wish could be granted? The HTML still has to be presented “x” number of times in the web page on the server to be displayed “x” number of times in a browser. At this stage in the evolution of HTML and CSS, that’s how browser’s work. Even using PHP or JS, they would add multiple copies of the chosen code to the page on the server so the browser could read and render them. If we believe that the user is an important part of a web site, there would be no difference in the speed of loading a page. Where/What would be the gain?
curious
PS: Perhaps you would benefit from learning and using SASS?
I was just curious, that’s all.
ronpat
August 31, 2017, 7:37am
12
The title doesn’t ask “Is it possible” or say “Just curious”, it says “How can I do it?”. You are placing an order.
It would be respectful of you to tell us up front that you are just curious instead of allowing us to believe that this is some kind of requirement.
1 Like
HTML is a mark-up language used to mark up the content of your page and give it semantic meaning. After all the content of the page is what is important, so the assumption is that you start with the content and then add the correct HTML tags to give your page its structure. I can’t think of any real-world circumstances in which your particular requirement would come up (and apparently neither can you, as you were unable to supply one), so it’s hardly surprising (to me, at any rate) that there is no provision to do this.
CSS is about adding styles and changing the appearance of the page, not about adding content. It’s true that small amounts of content can be added via CSS, but this should only be used for decorative effects. Your real content should be in your HTML.
Scripting languages such as PHP or JavaScript can be used to dynamically insert or change content (among other things).
You need to understand and think about the role of each language, and you will be able to work out for yourself which is appropriate for your task.
PaulOB
August 31, 2017, 8:46am
14
You could use a preprocessor like Jade which handles loops and many other things. Codepen has a number of preprocessors baked in so you can try them out easily.
I don’t use any of them as I find copy and paste still quicker
1 Like
Have you tried the code that was provided in post #9
If so then this…
span:nth-child( 5n+1 )
span:nth-child( 5n+2 )
span:nth-child( 5n+3 )
span:nth-child( 5n+4 )
span:nth-child( 5n+5 )
span:nth-child( 5n+6 )…should have been…
span:nth-child( 6n+1 )
span:nth-child( 6n+2 )
span:nth-child( 6n+3 )
span:nth-child( 6n+4 )
span:nth-child( 6n+5 )
span:nth-child( 6n+6 )coothead
You’re absolutely right, I will heed your advice next time.
1 Like
system
December 14, 2017, 3:00pm
18
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
