1

I am playing around with a site that has an image of a 600px by 600px grid of 9 squares in its own div. I wanted to be able to highlight each grid square on hover and I have succeeded, but I would like to know if my code could be more compact.

for instance my highlight behavior never changes, but the way I am coding it I would need to code 9 of them for each square, how can I just have one and apply it to all the grid squares?

here is the code.

#theGrid
{
margin-left: auto;
margin-right: auto;
width: 600px;
height:600px;
background-image:url("img/grid.png");
}


#square1
{

top:7px;
left:7px;
width:200px;
height:200px;
background-color:transparent;
}

#square1:hover
{

background-color: yellow;
opacity:0.2;
filter: alpha(opacity=20);

 }

Thanks all.

J p.
  • 25
  • 3

3 Answers3

1

It doesn't matter weather you use class or id or not on your solution but there is a proper way in the long run. What matters is that you can use the same style name on each square. So, it would be square and not square1, 2, 3, ect... We use class for an object that is repeated on the same page multiple time and id for an object that happens one time.

Is is a quick reference I found: http://www.htmldog.com/guides/css/intermediate/classid/

here is the code that I would start using.

You will need to use float and then use a clear:both when you are on a new row.

<div id="outterWrapper">
 <div id="theGrid">
   <div class="square"></div><div class="square"></div><div class="square"></div>
     <div class="clear"></div>
   <div class="square"></div><div class="square"></div><div class="square"></div>
     <div class="clear"></div>
   <div class="square"></div><div class="square"></div><div class="square"></div>
  </div><!-- END  THE GRID -->
 </div><!-- END OUTTER WRAPPER -->

#theGrid{
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height:600px;
    background-image:url("img/grid.png");
    }

/*Here we use class to reference all the squares*/
.square {
    margin: 7px 0 0 7px; /* play with your positioning here. Can also use padding*/
    width:200px;
    height:200px;
    background-color:transparent;
    float:left; /*This will make all the boxes move next to each other*/
    }
.square:hover {
    background-color: yellow;
    opacity:0.2;
    filter: alpha(opacity=20);
    }
.clear {
    clear:both;
    }
Shawn Altman
  • 143
  • 1
  • 10
  • Thanks so much Shawn, this is exactly what i was talking about! instead of having 9 of the same thing repeated this condenses it nicely. – J p. Apr 27 '13 at 04:30
  • Your welcome. It seems like you have a few different issues. One is the hover and the other is the layout. The above layout is based on box model in css which gives you a flexible design when laying a site out. Only other thing that might help is adding border: red 1px solid; to one of the styles to help with alignment and so forth. I use this in my designs all the time. – Shawn Altman Apr 27 '13 at 04:36
0

You could use class instead of id

Oh, sorry I misunderstood what you want, you can just do like this

#square1:hover, #square2:hover, #square3:hover.......
{
    background: yellow;
}
Þaw
  • 2,047
  • 4
  • 22
  • 39
  • Thanks for the reply. how would I go about calling a class from each individual id of the square?
    and just define a class that holds my hover attributes?     – J p. Apr 27 '13 at 03:48
  • i've updated my answer, my first answer was not the answer of your problem, if you know JQuery, its better to use **Jquery** using its `.addClass();` function. – Þaw Apr 27 '13 at 04:04
0

Instead of using # for both #square1 & #square1:hover, you could use .square1 & .square1:hover.

The # character is used for IDs ( ie. <span id="square1"></span> )

The . character is used for classes ( ie. <span class="square1"></span> )

Then apply the class ".square" to each of the nine squares. Any square with the .square class will have that style applied to it. Same goes for the hover.

Otherwise, if that doesn't work for you... you could do it in javascript by added a onmouseover and onmouseout events to each square. Then have javascript functions that handle applying the styles dynamically from code.

For example:

<div id="square1" onmouseover="handleMouseOver('square1')" onmouseout="handleMouseOut('square1')"></div> 

<script>
    function handleMouseOver(sq)
    {
        // set style
    }
    function handleMouseOut(sq)
    {
        // set style
    }
</script>
Robert Bolton
  • 667
  • 3
  • 8
  • 22
  • I think that leaves out handling the grid though. That only accounts for the hover. – Shawn Altman Apr 27 '13 at 04:09
  • The CSS solution I provided would be less lines of code. The JS is just an alternative method. – Robert Bolton Apr 27 '13 at 04:10
  • @Shawn - you could add onclick events to handle the individual cell clicks... if that is what you're talking about – Robert Bolton Apr 27 '13 at 04:11
  • The user has them in a grid pattern. So, the hover is answered but what about positioning all the divs. Would need to use float and clear. Look closer at the above positioning css. That is what I got out of it anyways. – Shawn Altman Apr 27 '13 at 04:13
  • Oh, now I see. I suppose he could use a table and have a class that draws borders on the cells (TD elements). I don't know how much of a performance hit it would be if he had to draw several hundred or thousand DIVs vs. a big table. – Robert Bolton Apr 27 '13 at 04:16
  • I think that there is only 3 rows in this example. A table is an old way of doing things. Really it is out dated unless we are doing things tabular. Should stick with Div as it is way more flexible using the Box Model theory. Stay away from Tables when possible. Using Divs also lets us get into very flexible design as the browser starts to change width. Also, is less code with Div and is the same performance. I would also think JS could be used on all the divs to do all sorts of cool things. – Shawn Altman Apr 27 '13 at 04:19
  • Tables still have their time and place for the right application. I don't entirely agree with that philosophy (obviously). I do agree however that you can do more "cool things" with DIVs. – Robert Bolton Apr 27 '13 at 04:20
  • I can agree to disagree, but in general the modern way to lay out most sites with a flexible design is with Div since we can do more with them as you mentioned. I would not use tables for web design, but possibly for reporting in tabular. Here is a stack overflow conversation on tables. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Shawn Altman Apr 27 '13 at 04:28
  • Thanks to all who replied, I've learned something from all of you! – J p. Apr 27 '13 at 04:31