CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Page 2 - Gamebox: image with valign middle but floating? anchored div?

Page 2 - Discuss Gamebox: image with valign middle but floating? anchored div? in the CSS Help forum on Dev Shed.
Gamebox: image with valign middle but floating? anchored div? Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 2 of 2 < 1 2
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #16  
Old May 8th, 2008, 06:59 PM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
ok, that question still stands, but i found something wicked out.

if i make the height of .gamebox auto, then it is sized exactly as i want it, EXCEPT, because there is more than one on the row, if the first one gets a larger height, then the second one will be higher than it and it is uneven.

how can i make it so that if i use height:auto that both gameboxes on the same row get the height of the bigger of the two?

EDIT:

also, i'm having a problem where the page sometimes randomly screws up my gameboxes and shows only the image and then the title under it. if you refresh the page then its fine. whats up with that?

EDIT AGAIN:
screw the height:auto. i'll make a cooler gamebox when i learn javascript. the question in the first edit is valid though, and weird, because it only happens sometimes.
__________________
Last edited by gsquare567 : May 9th, 2008 at 10:50 AM.
Reply With Quote
  #17  
Old May 11th, 2008, 01:31 AM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
****. this is such a weird thing, and nobody can identify the problem. this is a major thing. why are the gameboxes perfectly aligned (image then text) and other times just ****ed up (image then title on next row).
Reply With Quote
  #18  
Old Yesterday, 09:49 PM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
css Code:
Original - css Code 
  1. /* Game Boxes */
  2.  
  3. .gamebox {
  4.     height:75px;
  5.     overflow:hidden;
  6.     color:#665637;
  7.     display:block;
  8.     margin-bottom:4px;
  9.     /*
  10.     border: 1px solid #665637;
  11.     */
  12. }
  13.  
  14. .gamebox:hover {
  15.     background-color:#665637;
  16.     color:#B39760;
  17. }
  18.  
  19.     .gamebox .outer {
  20.         display: table;
  21.         position: static;
  22.         /*
  23.         border: 1px solid blue;
  24.         */
  25.     }
  26.  
  27.         .gamebox .outer .inner {
  28.             display: table-cell;
  29.             vertical-align: middle;
  30.             position: static;
  31.             /*
  32.             border: 1px solid red;
  33.             */
  34.         } 
  35.         
  36.         .gamebox .outer .image{
  37.             width:80px;
  38.             margin:0;
  39.             padding:0;
  40.             text-align:center;
  41.         } 
  42.             .gamebox .outer .image img:hover{
  43.                 border: 1px solid #B39760;
  44.             } 
  45.         
  46.         .gamebox .outer .description{
  47.             overflow: hidden;
  48.         } 


so why does it screw up on the page sometimes? the image sometimes takes a whole row, even though i float it, and all images are set to 60x50.
Reply With Quote
  #19  
Old Yesterday, 11:46 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Click here for more information.
  
Join Date: Jul 2004
Location: USA
Posts: 15,149 Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Months 2 Weeks 2 Days 2 h 47 m 18 sec
Reputation Power: 1294
Try giving ".gamebox" display:table and ".gamebox .outer" display:table-row.

You could also try giving ".gamebox .outer" a height.

By the way, I suggest you start a separate thread about the clickable area thing in the JavaScript forum. That way perhaps someone will help you with it before I get around to it.
__________________
Spreading knowledge, one newbie at a time.

Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

IE7: the generation 7 browser new in a world of generation 8 browsers.
Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
Reply With Quote
Reply
Page 2 of 2 < 1 2

Viewing: Dev Shed Forums > Web Design > CSS Help > Gamebox: image with valign middle but floating? anchored div?

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

 Free IT White Papers!
 
Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.
 
Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.
 
Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.
 
Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.
 
Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.
 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway.