Floating question (solved)

[CraigC]

NooB here needing help (again). I’m trying to make a grid with 3 graphics each centered, each with a link and possibly an icon centered underneath. I’ve been trying to float them, and I got the first column positioned but I’m stuck. I thought it would be simpler to make a single background image to position it over, but now I’m not so sure. You can see my current state of affairs at http://craigcurry.com/menu/index3.html. I keep wondering if this would have been an appropriate time to use a table vs. trying to float this stuff. I’m unable/unsure how to position my 2nd column.

Thanks.

[CraigC]

Thanks so much! That really does help me get going again. And just so I can learn from this, what were my mistakes? I take it setting height/widths was part of the problem, but why should I not have done that? You fixed that so fast…what made you think "here’s the problem…"?

Should I apply bottom padding to the images to push the "learn more" links down, or is there a better way? Thanks again for the help.

Thanks for the compliment on the menu also.

[CraigC]

Thanks for offer to help and teach me a thing or two.

Here’s the old code:

Code:

#primary_content {
background: url(images/featured_bg.jpg) repeat-x;
height: 350px;
width: 960px;
}

#featured {
background: url(images/featured_box.jpg) no-repeat;
height: 350px;
width: 764px;
margin: 0 auto;
}

#featured h1 {
text-indent: -9999px;
}

#featured .column1 {
float: left;
height: 315px;
width: 243px;
margin-left: 32px;
text-align: center;
}
.column1 img {
padding:90px 0 40px;

}
.column1 h2, a:link {
padding-top: 35px;
color: white;
font-weight: normal;
text-decoration: none;
clear: both;
}

.column1 a:hover, .column2 {
color: #9db1fb;
}
.coloumn1 a:visited{
color: #c93636;

#featured#column2{
float: left;
}
#featured#column2 img {
padding-left: 80px;
}
#featured#product_three {
float: left;
}

Now I’m trying to add a drop shadow to the images but it’s covering the width of the column instead of only the width of the image. I’ve got to be close… Any ideas?

The code for this area:

Code:

.photo {
position:relative;
top: -2px;
left:-3px;
text-align:center;
}

.dropshadow {
background: url(images/shadow.png) bottom right no-repeat;
padding: 0 2px 3px 0;
}

[CraigC]

Thanks again for your time; I appreciate the help. Photoshop to the rescue! :D

[Author]

Posts