Welcome to WebmasterWorld Guest from 54.163.23.73

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Popups (Meyers) & Positioning Divs 4/Row

     

EdAROC

7:24 pm on Sep 3, 2012 (gmt 0)

10+ Year Member



I've been working on this all weekend. Got almost everything to work - just one final piece. When the css popups display the content below them are pushed down. Rats!

Objective: Display Player Profiles, like Baseball Cards. There is a #Container Div at the top of the page with width = 720px. Then some other information. Finally the Player Profiles, there should be 4 per row, and there are 64 players, so 16 rows in all. Each profile contains a photo, player name & info, followed by titles (records) and stats.

The existing code is using a Table to create the product.

I want to change 2 things:

(1) Stop using the Table to contain/manage Player Profiles. It would be great to simply construct each profile, then as players come and go I remove and add "Profile" Divs and the content flows as desire.

(2) Create a "Front" (photo, name & info) and "Back" (titles and stats) that appears when the user hovers over the photo. The Back should appear in the same position as the Front, that is, top-left for both is the same.

I removed the Table code for the first 5 player profiles to test them.
(1) The Profiles lay out 4/row as desired.
(2) I've got the Back to appear on the hover.

Problem: When the "Back" displays the Player Profile expands, pushing page content below the photo down.(starting with the player's name & info). The 1st player on the next row will move to the right of the expanded section, moving/pushing everything else that follows.

Here's the page code (css code is below this):

<div class="player">
<a class=info href="#">
<center>
<img src="photos/example.jpg" width="140" height="200" border="0" />
<span>
<b>example Player</b>
<div class="player_awards">
<br />example Ave 64.77%
<br />&nbsp;
<br />2007 example Champ
<br />2004 example Champ
<br />2004 Weekly $$
<br />2003 Weekly $$
<br />2003 example Champ
<br />&nbsp;
</div> <!-- player_awards -->
<div class="player_stats">
<table width="150" border="0">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>&nbsp;Ave</td></tr>
<tr><td>2011</td><td>10</td><td>5</td><td>2</td><td>64.45%</td></tr>
<tr><td>2010</td><td>6</td><td>10</td><td>1</td><td>60.9%</td></tr>
<tr><td>2009</td><td>6</td><td>9</td><td>2</td><td>67.1%</td></tr>
<tr><td>2008</td><td>9</td><td>8</td><td>0</td><td>68.1%</td></tr>
<tr><td>2007</td><td>10</td><td>7</td><td>0</td><td>69.5%</td></tr>
<tr><td>2006</td><td>9</td><td>8</td><td>0</td><td>60.2%</td></tr>
<tr><td>2005</td><td>10</td><td>7</td><td>0</td><td>66.8%</td></tr>
</table>
</div> <!-- player_stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />13<sup>th</sup> Season
<br /><div class="teams buf"><b>example team</b></div>
example location
</font>
</div> <!-- player -->

<div class="player">
<a class=info href="#">
<center>
<img src="photos/example.jpg" width="140" height="200" border="0" />
<span>
<b>example player</b>
<div class="player_awards">
<br />example Ave 62.63%
<br />&nbsp;
</div>
<div class="player_stats">
<table width="150">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>&nbsp;Ave</td></tr>
<tr><td>2011</td><td>8</td><td>9</td><td>0</td><td>62.11%</td></tr>
<tr><td>2010</td><td>12</td><td>5</td><td>0</td><td>62.9%</td></tr>
<tr><td>2009</td><td>6</td><td>11</td><td>0</td><td>65.8%</td></tr>
<tr><td>2008</td><td>7</td><td>10</td><td>0</td><td>63.2%</td></tr>
<tr><td>2007</td><td>8</td><td>8</td><td>1</td><td>61.7%</td></tr>
</table>
</div> <!-- player_stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />6<sup>th</sup> Season
<br /><div class="was"><b>example team</b></div>
example location
</font>
</div>

<div class="player">
<a class=info href="#">
<center>
<img src="photos/no_photo.gif" width="100" height="200" border="0" align="middle" />
<span>
<b>example player</b>
<div class="player_awards">
</div> <!-- player_awards -->
<br />example Ave 64.79%
<br />&nbsp;
<br />2011 example Champ
<br />&nbsp;
<div class="player_stats">
<table width="150">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>Ave</td></tr>
<tr><td>2011</td><td>13</td><td>4</td><td>0</td><td>68.33%</td></tr>
<tr><td>2010</td><td>9</td><td>8</td><td>0</td><td>61.3%</td></tr>
</table>
</div> <!-- player_stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />4<sup>th</sup> Season
<br /><div class="teams "><b>&nbsp;</b></div>
&nbsp; ***HomeTown?***
</font>
</div> <!-- player -->

<div class="player">
<a class=info href="#">
<center>
<img src="photos/example.jpg" width="100" height="200" border="0" align="middle" />
<span>
<b>example player</b>
<div class="player_awards">
<br />example Ave 63.74%
<br />&nbsp;
<br />2011 example Champ
<br />2009 example Champ
<br />&nbsp;
</div> <!-- player_awards -->
<div class="player_stats">
<table width="150">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>&nbsp;Ave</td></tr>
<tr><td>2011</td><td>12</td><td>4</td><td>1</td><td>68.36%</td></tr>
<tr><td>2010</td><td>6</td><td>10</td><td>1</td><td>60.1%</td></tr>
<tr><td>2009</td><td>11</td><td>6</td><td>0</td><td>68.5%</td></tr>
<tr><td>2008</td><td>7</td><td>10</td><td>0</td><td>60.3%</td></tr>
<tr><td>2007</td><td>8</td><td>9</td><td>0</td><td>62.1%</td></tr>
</table>
</div> <!-- player_stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />6<sup>th</sup> Season
<br /><div class="teams ne"><b>example team</b></div>
&nbsp;
</font>
</div> <!-- player -->

<div class="player">
<a class=info href="#">
<center>
<img src="photos/no_photo.gif" width="100" height="200" border="0" align="middle" />
<span>
<b>example player</b>
<div class="player_awards">
<br />example Ave 58.18%
<br />&nbsp;
<br />2010 example Improved Player
<br />&nbsp;
</div> <!-- player awards -->
<div class="player_stats">
<table width="150">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>&nbsp;Ave</td></tr>
<tr><td>2011</td><td>9</td><td>8</td><td>0</td><td>62.11%</td></tr>
<tr><td>2010</td><td>8</td><td>9</td><td>0</td><td>60.1%</td></tr>
<tr><td>2009</td><td>6</td><td>11</td><td>0</td><td>59.3%</td></tr>
<tr><td>2008</td><td>11</td><td>6</td><td>0</td><td>64.0%</td></tr>
<tr><td>2007</td><td>6</td><td>10</td><td>1</td><td>59.8%</td></tr>
<tr><td>2006</td><td>11</td><td>6</td><td>0</td><td>57.8%</td></tr>
<tr><td>2005</td><td>7</td><td>10</td><td>0</td><td>60.4%</td></tr>
</table>
</div> <!-- player stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />12<sup>th</sup> Season
<br /><div class="teams chi"><b>example team</b></div>
example location
<br />
</font>
</div>


Here's the css code:
a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#fff;
color:#000;
text-decoration:none}

a.info:hover{z-index:25; background-color:#fff}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:relative;
top:-15.0em; left:0em; right:0em; width:12.5em;
border:4px ridge #6699cc;
background-color:#6699cc; color:#000;}

[edited by: alt131 at 10:49 pm (utc) on Sep 3, 2012]
[edit reason] Thread Tidy - Examplifying [/edit]

alt131

12:30 pm on Sep 13, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi EdAROC, Meyer used position:absolute on his span, and you have position:relative. That makes the difference here, because position:absolute removes an element from the flow so it is drawn without affecting the other elements, or as you are seeing, without "pushing" the other elements down.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month