CSS Text Formatting

Question

I am trying to get some text to nicely float over some images. The problem is that I feel like what I am doing is both way too much work/cluttered, and it is not formatting correctly.

Looking for help in making this layout smoother, and simpler. I also need to be able to reference the first number of each section so that I can update it on click via AngularJS.

What I want is the text to appear like this

enter image description here

This is what I am attempting thus far: PLUNKER DEMO

Again, I am trying to find a way to position this text over all the icons nicely like the above example, along with being able to reach the first number for events.

The "end look" is the following, I just need help formatting the first row so that I can see how it should be done for the rest.

enter image description here

Raw code: PLUNKER DEMO

HTML

  <div ng-controller="ImagesCtrl">
  <span class="section" style="background:rgba(178, 0, 0, 0.7)">
    <img id="offense1-0" src={{pictures[0]}}>
    <img id="offense1-1" src={{pictures[1]}}>
    <img id="offense1-2" src={{pictures[2]}}>
    <img id="offense1-3" src={{pictures[3]}}>
    </span>
    <span class="section" style="background:rgba(30, 154, 225, 0.7)">
    <img id="offense1-4" src={{pictures[4]}}>
    <img id="offense1-5" src={{pictures[5]}}>
    <img id="offense1-6" src={{pictures[6]}}>
    <img id="offense1-7" src={{pictures[7]}}>
    </span>
    <span class="section" style="background:rgba(30, 154, 54, 0.7)">
    <img id="offense1-8" src={{pictures[8]}}>
    <img id="offense1-9" src={{pictures[9]}}>
    <img id="offense1-10" src={{pictures[10]}}>
    <img id="offense1-11" src={{pictures[11]}}>
    </span>
    <div class="number"><span id="1-0">0</span>/3</div>
    <div class="number"><span id="1-1">0</span>/3</div>
    <div class="number"><span id="1-2">0</span>/3</div>
    <div class="number"><span id="1-3">0</span>/3</div>

    <div class="number"><span id="1-4">0</span>/3</div>
    <div class="number"><span id="1-5">0</span>/3</div>
    <div class="number"><span id="1-6">0</span>/3</div>
    <div class="number"><span id="1-7">0</span>/3</div>

    <div class="number"><span id="1-8">0</span>/3</div>
    <div class="number"><span id="1-9">0</span>/3</div>
    <div class="number"><span id="1-10">0</span>/3</div>
    <div class="number"><span id="1-11">0</span>/3</div>
  </div>

CSS

div {
  background:black;
  height:500px;
}

.section {
  text-align:center;
  padding:0px 15px 0px 15px;
  height: 100%; 
  display: inline-block;
}

img {
  margin-left:3px;
  margin-top:3px;
      -webkit-box-shadow: 0px 0px 7px #7FFF00;
    -moz-box-shadow: 0px 0px 7px #7FFF00;
    box-shadow: 0px 0px 7px #7FFF00;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;  
    border-radius: 8px;
}

.number {
  color:yellow;
  margin:0px;
  padding:0px;
  padding-right:30px;
  background:transparent;
}

I suggest you look at what was already made (as what you are trying to achieve (LoL masteries page) was already done **multiple** times on many websites). You can look at the other HTML pages to have an idea if what you are doing is on track or not. — Sifu, Aug 08 '14 at 13:48
@Sifu True, but I am learning AngularJS for the first time and I don't know of any pages that use that language. Most other sites probably just implement JQuery or something right off the bat. — Austin, Aug 08 '14 at 13:49
Would you consider swapping `img` for divs with `background-image` set? — SW4, Aug 08 '14 at 13:54

ondObno · Accepted Answer · 2014-08-08T14:36:07.943

2

Try considering your html. This would be the option I would go for:

 <div>
     <img id="offense1-0" src="" alt="pic">
     <span>1/1</span>
 </div>

with the css:

div{
  position: relative;
  float: left;
  padding:0px 15px 0px 15px;
}

div span{
  position: absolute;
  left: 25%;
  width: 50%;
  margin: -15px auto 0 auto;
  background: black;
  color: white;
  text-align: center;
}

Check the result: http://jsfiddle.net/tralala/mj51kx42/1/

edited Aug 08 '14 at 14:36

answered Aug 08 '14 at 14:27

ondObno

91
5

What would you recommend I wrap the numbers in so that I can read them during events? or would I just parse it by the `/`? – Austin Aug 08 '14 at 14:52

score 0 · Answer 2 · answered Aug 08 '14 at 14:25

Just put your images in spans's and add the "x/y" text in span's ..then you can position them absolutely inside, placing them all in the correct spot with some simple css rules.

  <span class="img">
    <img id="offense1-0" src={{pictures[0]}}>
    <span>0/3</span>
  </span>
  <span class="img">
    <img id="offense1-1" src={{pictures[1]}}>
    <span>1/3</span>
  </span>
  <span class="img">
    <img id="offense1-2" src={{pictures[2]}}>
    <span>2/3</span>
  </span>
  <span class="img">
    <img id="offense1-3" src={{pictures[3]}}>
    <span>2/3</span>
  </span>

I forked your plunker and simplified it a bit here: http://plnkr.co/edit/oKUcipF1VXo8MZEPAt7g

score 0 · Answer 3 · edited May 23 '17 at 10:33

If you don't want to have to change your html code, combine your code with the following

Note: Your span ids in the number class are invalid. Ids cannot begin with a number (view this link for more information: What are valid values for the id attribute in HTML?)

If you look below at the code, I have added "num" before your number ids. This changes the id format from id="0-1" to id="num0-1". I then remove "num" from the id in jquery to locate the associated image.

jsfiddle

HTML

<div id="container">
    <img id="iconImg0-1" class="iconImg" src="http://upload.wikimedia.org/wikipedia/commons/0/0e/App-icon.png">
    <img id="iconImg0-2" class="iconImg" src="https://www.bellbanks.com/wp-content/uploads/2013/02/mobile-app-icon.jpg">
    <div id="num0-1" class="iconNumber">0/3</div>
    <div id="num0-2" class="iconNumber">2/3</div>
</div>

CSS

#container {
    width:200px;
    height:100px;
}
.iconImg {
    height:50px;
    width:50px;
    position:relative;
}
.iconNumber {
    position:absolute;
    background-color:rgba(180, 180, 180, 0.7);
    text-align:center;
}

JS

var numIconNumber = $(".iconNumber").length;
for (var i = 0; i <= numIconNumber; i++) {
    var myId = $(".iconNumber:eq(" + i + ")").attr("id");
    var myIdNum = myId.replace("num", "");
    var myImg = $("#iconImg" + myIdNum);
    var myNum = $("#" + myId);
    myNum.css({
        width: myImg.width() + "px",
        left: myImg.offset().left + "px",
        top: (myImg.offset().top + myImg.height()) - myNum.height() / 2 + "px"
    });
}

CSS Text Formatting

3 Answers3