+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: CSS - How to reduce this? Rewriting CSS out 5 times (/showthread.php?tid=5385019)
CSS - How to reduce this? Rewriting CSS out 5 times - Skidy - Aug 24, 2016
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;
}* - Jowan - Aug 24, 2016
CTRL + H - Makes you able to search something, and replace it all.
* - i3urn - Aug 24, 2016
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">
* - .trigious - Aug 26, 2016
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.
* - DJW09 - Aug 26, 2016
Use SASS and extend the original class
http://sass-lang.com/guide