Here I am again.
http://new.kingdm.com
css:
Code:
@charset "utf-8";
* {
margin: 0;
outline:none;
}
html, body {
background-color:#000;
background-image:url('../../images/earth.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom right;
height: 100%;
width:100%;
text-align:center;
font-family:Helvetica, Verdana, Arial, sans-serif;
font-size:12px;
font-weight:bold;
color:#fff;
}
h1.username {
font-size:11px;
text-align:center;
margin-top:8px;
color:#d6d6d6;
}
a {
color:#adcedb;
text-decoration:none;
}
input {
width:80px;
color:#000;
font-size:10px;
margin:0px 0px 0px 0px;
height:14px;
border:1px solid #4d4d4d;
background-color:#fff;
}
#username {
color:#8d8d8d;
}
.clear {
clear:both;
}
/*************** DIVS *****************/
#horizon {
width:100%;
height:1px;
position:absolute;
top:50%;
left:0;
}
#holder {
margin:-75px auto 0 auto;
position:relative;
width:auto;
min-width:870px;
max-width:870px;
height:150px;
}
.icon_main {
width:130px;
height:auto;
margin:0px 22px;
float:left;
position:relative;
}
.icon_glow {
/*background-image:url(../images/iconBorder.png);
background-repeat:no-repeat;*/
width:100px;
height:83px;
padding:15px 0px 0px 2px;
position:relative;
top:0;
margin:0 auto;
}
/**************************************/
img.icon_border {
position:absolute;
left:50%;
margin-left:-50px;
}
.icon_gloss {
position:absolute;
top:0;
}
#loginput_main {
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
width:auto;
height:auto;
max-width:107px;
margin:0 auto;
}
#loginput_form {
padding-top:0px;
margin:0;
}
#loginput_submit {
float:left;
margin:0px 0px 0px 5px;
padding:0px 0px 0px 0px;
}
#input_pword {
float:left;
width:80px;
color:#000;
font-size:10px;
margin:0px 0px 0px 0px;
height:14px;
border:1px solid #4d4d4d;
background-color:#fff;
}
I need to figure out a way to center all the .icon_main divs within #holder.
It seems like it should be simple but I just can't figure it out right now.
Since the AMOUNT of icons will be dynamic and I will be dynamically changing width of certain icon_main divs to 0 in order to center the focused icon, I can't use floats.
Help please!
I went through this before with a couple people but I never actually resolved it.
In short, I basically need a cross-browser inline-block. (inline-block works in ff3 fantastically)
Last edited by soap; 07-21-2008 at 03:30 PM..
|