CODEWITHSUNDEEP
css
StealthRT
StealthRT

Reputation: 10552

CSS style cumbersome to clean and less code

Hey all i have some CSS code like so:

/* ROW 1 (1-8) */
#rsvpBadge0{position: absolute; top: -2px; left: -1px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge1{position: absolute; top: -2px; left: 74px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge2{position: absolute; top: -2px; left: 149px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge3{position: absolute; top: -2px; left: 224px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge4{position: absolute; top: -2px; left: 299px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge5{position: absolute; top: -2px; left: 374px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge6{position: absolute; top: -2px; left: 449px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge7{position: absolute; top: -2px; left: 524px; z-index: 2; width: 50px; height: 50px;}
/* ROW 2 (9-16) */
#rsvpBadge8{position: absolute; top: 68px; left: -1px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge9{position: absolute; top: 68px; left: 74px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge10{position: absolute; top: 68px; left: 149px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge11{position: absolute; top: 68px; left: 224px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge12{position: absolute; top: 68px; left: 299px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge13{position: absolute; top: 68px; left: 374px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge14{position: absolute; top: 68px; left: 449px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge15{position: absolute; top: 68px; left: 524px; z-index: 2; width: 50px; height: 50px;}

etc etc....

Now i have this the same way going from 1 to 207. It works but the problem i am seeing is it looks fine in FireFox (the top and left coordinates are spot on) but when i view it in IE and Chrome, they are a little off of the top value (needs to be raised a little bit more)

So my question to you all is:

1) How can i shorten the code knowing that each rsvpBadge has a different number and top value?

2) Correct the coordinates for IE and chrome without having to make 3 more 1-209 layers for each browser.

Here is a visual

enter image description here

On the left is what it looks like in Chrome and on the right, FireFox.

Upvotes: 1

Views: 119

Answers (3)

Oleg
Oleg

Reputation: 25008

Floating these elements seems appropriate:

.rsvp-badge{z-index: 2; width: 50px; height: 50px;float:left;}

After that is done, add clear:left; to every element that begins a row.

Even better: place all elements in a container of a fixed width so that every row fits 8 elements each.

Update:

A-ha! So that's what an rsvp-badge is supposed to be.

You'd get away with a couple rule using pseudo-elements:

<div class="user-photo has-rsvpd"></div>
<div class="user-photo"></div>

.user-photo {
    /*size,background etc. ommited*/
    position:relative;/*to allow position:absolude on pseudo-element*/
}
.has-rsvpd:after {
     /*size,background etc. ommited*/
     content:"";position:absolute;top:0;left:0;/*apply to top left corner*/
}

Or restructuring HTML a bit (which, depending on archtecture, could be appropriate at runtime):

<div class="user-photo has-rsvpd"><span class="rsvp-badge"></span></div>
<div class="user-photo"><span class="rsvp-badge"></span></div>

.rsvp-badge {
     display:none;/*hide when user has not rsvpd*/
}
.has-rsvpd .rsvp-badge{
     /*same as :after in the sample above, but without a content property*/
}

Upvotes: 4

scessor
scessor

Reputation: 16125

If you don't want to use javascript or floating, can you change the html? Then add classes to the elements because (instead of ids) classes don't have to be unique, e.g.:

<div class="rsvpBadgeAll rsvpBadgeLeft0 rsvpBadgeTop0">...</div>
<div class="rsvpBadgeAll rsvpBadgeLeft1 rsvpBadgeTop0">...</div>
...
<div class="rsvpBadgeAll rsvpBadgeLeft7 rsvpBadgeTop0">...</div>
<div class="rsvpBadgeAll rsvpBadgeLeft0 rsvpBadgeTop1">...</div>
...
<div class="rsvpBadgeAll rsvpBadgeLeft7 rsvpBadgeTop1">...</div>
...

And also define the css with classes instead of ids, e.g.:

.rsvpBadgeAll { position: absolute; z-index: 2; width: 50px; height: 50px; }

.rsvpBadgeLeft0 { left: -1px; }
.rsvpBadgeLeft1 { left: 74px; }
.rsvpBadgeLeft2 { left: 149px; }
.rsvpBadgeLeft3 { left: 224px; }
.rsvpBadgeLeft4 { left: 299px; }
.rsvpBadgeLeft5 { left: 374px; }
.rsvpBadgeLeft6 { left: 449px; }
.rsvpBadgeLeft7 { left: 524px; }

.rsvpBadgeTop0 { top: -2px; }
.rsvpBadgeTop1 { top: 68px; }
.rsvpBadgeTop2 { top: ...px; }
...
.rsvpBadgeTop25 { top: ...px; }

Upvotes: 1

Ganesh Bora
Ganesh Bora

Reputation: 1153

In CSS you can put only

    #rsvpBadge{position: absolute; z-index: 2; width: 50px; height: 50px;}

    #rsvpBadge0{ top:<x>, left:<x>}
    #rsvpBadge1{ top:<x>, left:<x>}
    #rsvpBadge2{ top:<x>, left:<x>}

........and so on And write a javascript for calculating the top and left as per screen size.

Upvotes: 0

Related Questions