- This topic is empty.
-
Hi,
I’m coding a table for a friend and I know just enough html/css to get myself in trouble :)
I have a couple of questions, if no one minds answering.
1) Is this the most optimal way to code this table (why or why not)? If not, what is?
2) I’m using sprites for the first time, but for some reason even after saving as a .png, my images with shadows aren’t displaying right (with ugly white bg). Do I need a separate image for this?
3) I’m having an issue with my span.col-13 — if there is no text in the box, the little line separator won’t go all the way to the bottom of the box. It only goes as far as the image. I’ve tried to set a height for the separator, but if/when I do that it throws all of them off, along with the padding/margins I have setup.
Side note: My separator lines in my black list bar isn’t showing up in IE for some reason, although the ones in the main box are?!?4) Although it’s not noticeable now, for some reason my darkrow and lightrow didn’t line up. They both required different margins to align inside the .table correctly. This has made it a pain in the ass for all things inside of each row (lining up stuff).
Any thoughts on the above? Please feel free to tear this apart. I’m not totally “new” to this, but my biggest troubles now are knowing what’s the best way to code something (divs, spans, tables, ul/li, etc) and then figuring out tiny problems like I have now.
CSS:
body {
font:12px Trebuchet, sans-serif;}
.table {
float:left;
background:#41618c url('images/table-bg.jpg') repeat-x top;
width:580px;
min-height:130px;
overflow:hidden;
margin:0px;
padding:0px;}
.table ul li {
list-style:none;}
.table a {
color:#ffff00;
text-shadow:1px 1px 0px #253750;
text-decoration:underline;}
.table a:hover {
text-decoration:none;}
a.review {
font-size:9px;
color:#aeb8c1;
text-shadow:1px 1px 0px #253750;
text-decoration:none;}
a:hover.review {
text-decoration:underline;}
.sprites {
background:url('images/table8.png') no-repeat; }
.header {
width:580px;
height:35px;
background-position:-5px -130px; }
.header h3 {
font-size:14px;
color:#fff;
text-shadow:1px 1px 0px #3c5a7b;
padding-top:9px;
text-align:center;}
ul.list-header {
width:570px;
height:25px;
background-position:-5px -280px;
margin:4px 0px 12px 5px;
padding:0px;}
ul.list-header li.categories {
font-size:11px;
color: #a5c1dd;
text-shadow:1px 1px 0px #0a0f16;
line-height:25px;
text-align:center;}
ul.list-header li.categories span.number {
display:block;
width:20px;
float:left;}
ul.list-header li.categories span.casino {
display:block;
width:182px; /*226 normal w/out padding*/
float:left;
padding-right:44px;}
span.sep {
background:url('images/sep.png')no-repeat right;}
ul.list-header li.categories span.us {
display:block;
width:37px;
float:left;}
ul.list-header li.categories span.bonus {
display:block;
width:146px; /*163 normal w/out padding*/
float:left;
text-align:left;
padding-left:17px;}
ul.list-header li.categories span.play-now {
display:block;
width:123px;
float:left;}
ul.darkrow {
width:574px;
height:65px;
background-position:-0px -0px;
display:block;
float:left;
margin:-12px 0px 0px 1px;
padding:0px 0px 0px 4px;
line-height:60px;}
ul.lightrow {
width:574px;
height:65px;
background-position:-4px -65px;
display:block;
float:left;
margin:-4px 0px 0px 5px;
padding:0px;
line-height:55px;}
ul.darkrow, ul.lightrow li.info {
color:#fff;
text-shadow:1px 1px 0px #253750;
text-align:center;}
span.col-11 {
display:block;
width:20px;
float:left;}
span.col-12 {
display:block;
width:226px;
float:left;}
li.info span.col-12 span.logo {
display:block;
width:120px;
height:47px;
float:left;
margin-left:3px;
-moz-box-shadow:1px 1px 4px 0px #000;
-webkit-box-shadow: 1px 1px 4px 0px #000;}
ul.darkrow span.logo {
margin-top:7px;}
ul.lightrow span.logo {
margin-top:3px;}
.betonline {
background-position:-5px -311px;}
.winpalace {
background-position: -135px -311px;}
.titan {
background-position:-395px -311px;}
.slotland {
background-position: -135px -365px;}
.rome {
background-position:-265px -311px;}
.diceland {
background-position: -5px -365px;}
.manhattan {
background-position:-265px -365px;}
.luckyred {
background-position: -395px -365px;}
.bet365 {
background-position: -5px -421px;}
span.col-13 {
display:block;
width:37px;
float:left;}
li.info span.col-13 img.icon {
width:24px;
height:25px;
margin:35px 0px 0px 0px;}
span.col-14 {
display:block;
width:163px;
float:left;}
span.col-15 {
display:block;
width:123px;
float:left;}
span.table-sep {
background:url('images/table-sep.png') no-repeat right;}
HTML:
Best Online Casinos Accepting USA Players
#
Casino
US
Bonus
Play now
1
Bet Online
100% up to $5,000
Full Review
2
Diceland
100% up to $5,000
Full Review
3
Bet Online
100% up to $5,000
Full Review
4
Diceland
100% up to $5,000
Full Review
- The forum ‘CSS’ is closed to new topics and replies.