Test platform IE 6.0 and XP pro.
I'm trying to create a horizontal image toolbar. Basically, I have two versions that almost work and being a week old newbie to web design I cannot seem to tweak them to work.
This solution ignores the display: inline; and my picture (yes thats me) displays vertically twice.
________________________________________________________ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";> <title></title>
<head> <meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style type="text/css"> /*<![CDATA[*/
/* 1. Use border: 1px solid <some color> to distinguish each item; */ /* 2. The red Ul contains all blue li's; */ /* 3. Each blue li contains one green a; */ /* 4. Each green a contains one inline text or picture; */
ul a{ /*remove the text underline*/ text-decoration: none;
}
a{
border: 1px solid green;
}
/*remove this left-indentation consistently across all browsers*/ ul { padding: 0; margin: 0; }
ul {
border: 1px solid red;
display: inline;/*remove the HTML list bullets*/ list-style-type: none;
/*the length of screen*/ width: 59em; height: 1.6cm;
/*text-align: left; Is this the default??*/ }
li {
/*force the list into one line*/
border: 1px solid blue;
display: inline;}
.photo_link {
background: url("cf.tiny.jpg") center center no-repeat;
border: 1em solid black;
display: block;
width: 70px;
height: 82px;
font-size: 0;
}/*]]>*/ </style> </head>
<body> <br /> <br /> <div id="navcontainer"> <ul> <li><a href="#" class="photo_link"></a></li> <li><a href="#" class="photo_link"></a></li>
</ul> </div> <br /> </body>
</html>
-----------------------------------------------------
So I started over...made a new file ..
Inspired by the fact that this worked for one picture...
#sample
{
width: 80px;
height: 100px;
background-image: url(cf.jpg);
background-repeat: no-repeat;
background-position: center;
font-size: 0px;
color: red;
border: 10px solid green;} </style> </head>
<body> <h1 id="sample4"> Heading here </h1>
I tried a third time..
this time my image displays horizontally (funny how display:inline works now) but I cannot get it to show the whole picture and the size seems
to be determined by the text not the size I give... font-size: 0;
is IGNORED AS WELL.
I'd appreciate any hints and a big thanks to max design's excellent tutorials that got me started super fast and made me aware of this forum :-)
my last try:___________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";> <title></title>
<head> <meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style type="text/css"> /*<![CDATA[*/
/* 1. Use border: 1px solid <some color> to distinguish each item; */ /* 2. The red Ul contains all blue li's; */ /* 3. Each blue li contains one green a; */ /* 4. Each green a contains one inline text or picture; */
ul a{ /*remove the text underline*/ text-decoration: none;
}
/*remove this left-indentation consistently across all browsers*/
ul {
padding: 0;
margin: 0;
}ul {
border: 1px solid red;/*remove the HTML list bullets*/ list-style-type: none;
/*the length of screen*/ width: 59em; height: 1.6cm;
/*text-align: left; Is this the default??*/ }
li { border: 1px solid blue; margin-left: .2em; margin-right: .2em; margin-bottom: .2em; /*margin-top: -20em; ignored*/
/*force the list into one line*/ display: inline;
}
.link{
border: 1px solid green; width: 80px; height: 100px;
margin-left: .2em; margin-right: .2em; margin-top: -2em; margin-bottom: .2em;
padding: 2em -.15em; background: url(cf.tiny.jpg) no-repeat;
color: red;
width: 70px;
height: 82px;
fontsize:1 em;}
/*]]>*/ </style> </head>
<body>
<ul> <li><a href="#" class="link">Che</a></li>
<li><a href="#"class="link">Cheese</a></li>
<li><a href="#" class="link">Cheese</a></li>
<li><a href="#" class="link">Cheese</a></li>
<li><a href="#" class="link">Cheese</a></li> </ul>
<br /> </body>
</html>
<<inline: cf.tiny.JPG>>
