Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

CSS - How to reduce this? Rewriting CSS out 5 times

Im moving images around and I couldn't for the life of my get them to display in line. Nevertheless, I gave each one a div class. How can I reduce the amount of CSS code? All I do is increase the width slightly.

Surely in CSS I can inherit one class and override it on another?

Code
.foldericon {
  z-index: 100;
  font-family: courier, monospace;
  font-size: .8em;
  position: absolute;
  left:27.5%;
  top:70%;
  display: inline-block;
}
.foldericon2 {
  z-index: 100;
  font-family: courier, monospace;
  font-size: .8em;
  position: absolute;
  left:37.5%;
  top:70%;
  display: inline-block;
}
.foldericon3 {
  z-index: 100;
  font-family: courier, monospace;
  font-size: .8em;
  position: absolute;
  left:47.5%;
  top:70%;
  display: inline-block;
}
.foldericon4 {
  z-index: 100;
  font-family: courier, monospace;
  font-size: .8em;
  position: absolute;
  left:57.5%;
  top:70%;
  display: inline-block;
}
.foldericon5 {
  z-index: 100;
  font-family: courier, monospace;
  font-size: .8em;
  position: absolute;
  left:67.5%;
  top:70%;
  display: inline-block;
}
CTRL + H - Makes you able to search something, and replace it all.
Code
.foldericon {
    z-index: 100;
    font-family: courier, monospace;
    font-size: .8em;
    position: absolute;
    top:70%;
    display: inline-block;
}

.foldericon.one { left: 27.5%; }
.foldericon.two { left: 37.5%; }
.foldericon.three { left: 47.5%; }
.foldericon.four { left: 57.5%; }
.foldericon.five { left: 67.5%; }

So now instead of let say <div class="foldericon2"> you would have to use <div class="foldericon two">
[Image: giminur.gif]
Positioning with absolute isn't the best idea. It's going to make it hard to change things later on, is unresponsive as hell and just bad.
Don't do it.

I made a ( really bad, but quick ) example how you could for example use flexbox:
http://codepen.io/anon/pen/qNzwzm

There's a guide here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There are other ways too. You could wrap around the images in containers and position them even with float etc etc.
Use SASS and extend the original class

http://sass-lang.com/guide


Possibly Related Threads...
Thread / Author Replies Views Last Post
by N1l0cFeb 14, 2017 12:36 AM 8 222 Feb 14, 2017 12:36 AM
Last Post: N1l0c
by Mr. ManJun 29, 2016 08:32 PM 10 175 Jun 29, 2016 08:32 PM
Last Post: Mr. Man
by Wide AwakeDec 20, 2015 02:02 AM 0 84 Dec 20, 2015 02:02 AM
Last Post: Wide Awake