Sent by David Laakso on 23 July 2010 23:11
Steve Caramia wrote:
> I think this is a simple one:
>
Oh, sure... simple for you and "Lady Gaga." In the meantime we mere
mortals still struggle with the meaning and origin of the "one-eyed jack."
> Across the bottom of this page I want a row of logos on a background
> that extends 100%. I was able to do it with a table. Is there a way to
> do it in CSS?
>
> http://www.caramiadesign.com/kemly/
>
>
This one way you might do it...
-- markup
/* Note: The first id is plural: #logos. The remaining ids are singular:
#logo. */
<div id="logos">
<div id="logo">
<div>
<a
href="http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge">
<img class="c1" src="car_files/ssa_2009.png" alt="Angie's List Super
Service Award Winner" width="130" /></a>
<p><a
href="http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge">Electrical
in Seattle</a></p>
</div>
<div>
<img src="car_files/ABCMembe.jpg" alt="Associated Builders and
Contractors Logo" width="126" height="96"/>
</div>
<div>
<img src="car_files/logo_bbb.png" alt="Safety Alliance" width="64"
height="94"/>
</div>
<div>
<img src="car_files/logo_mba.png" alt="logo" width="94" height="82" />
</div>
<div>
<img src="car_files/lowerlin.gif" alt="Safety Alliance"/>
</div>
<div>
<img src="car_files/leadsafe.png" alt="logo" />
</div>
</div><!--/#logo-->
</div><!--/#logos-->
--css
/* Note: The first id is plural: #logos. The remaining ids are singular:
#logo. */
#logos { background-color:#4a6060;clear:both;overflow:
hidden;padding-bottom:10px;width: 99%;}
#logo { margin: 0 auto;width: 960px;}
#logo div { float: left; }
#logo img, #logo img.c1 { float : left; padding: 10px 25px 0 25px;}
#logo img.c1 { padding: 0 25px;}
#logo p {clear: both;}
#logo a img {border: none; text-decoration: none; }
#logo a { color: aqua; text-decoration:none;}
#logo a:hover {color: #fff;}
Quick checked in IE 6/7/8, FF, Safari, Chrome, Opera.
This does not correct the problem I wrote about earlier-- the primary
content and sidebar content escaping through the logo and footer block
with font-scaling. I think for that you'll need to abandon the absolute
positioning of the content and sidebar block; and, let the content
determine height --rather than hard-coding it -- although, I did not
have time to try this...
Best,
~d
--
http://chelseacreekstudio.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
