AND for what the finished product looks like:For the HTML side:<body> <div id="sweden"> <dl> <dt>Stockholm</dt> <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" alt="Gamla Stan" /></dd> <dd>This was taken in Gamla Stan (Old Town) in a large square of amazing buildings.</dd> </dl> <dl class="alt"> <dt>Gamla Uppsala</dt> <dd class="img"><img src="img/uppsala.jpg" width="80" height="80" alt="Gamala Uppsala" /> </dd> <dd>The first of three Swedish kings are buried here, under ancient burial mounds.</dd> </dl> <dl> <dt>Perpetual Sun</dt> <dd class="img"><img src="img/watch.jpg" width="80" height="80" alt="Wristwatch" /></dd> <dd>During the summer months, the sun takes forever to go down. This is a good thing. </dd> </dl> </div> For the CSS side: @charset "UTF-8"; /* CSS Document */ #sweden { float: left; width: 304px; padding: 10px 0; border: 2px solid #C8Cdd2; background: url(img/bg.gif) no-repeat top right; } #sweden dl { float: left; width: 260px; margin: 10px 20px; padding: 0; display: inline; /* fixes IE/Win double margin bug */ } #header:after, #sweden dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } *html #header, * html #sweden dl { height: 1% } /* ie 5 6*/ *:first-child+html #header, *:first-child+html #sweden dl { min-height: 1px; } /*ie 7*/ #sweden dt { float: right; width: 162px; margin: 0; padding: 0; font-size: 130%; letter-spacing: 1px; color: #627081; } #sweden dd { margin: 0; padding: 0; font-size: 85%; line-height: 1.5em; color: #666; } #sweden dd.img img { float: left; margin: 0 8px 0 0; padding: 4px; border: 1px solid #D9E0E6; border-bottom-color: #C8CDD2; border-right-color: #C8CDD2; background: #fff; } /*Reverse float*/ #sweden .alt dt { float: left; } #sweden .alt dd.img img { float: right; margin: 0 0 0 8px; }
http://kgphojo.aisites.com/web_based_programing/week4/chapter4/index.html
As you notice, the images do not match the description. I did not have access to the images while doing this so I just added my own. Now for some reason, my float did not work properly when I added all the code they wanted me to add so I took away and added a couple of things and worked successfully. What the code would of looked like for the CSS side would of been something like this:
@charset "utf-8";
/* CSS Document */
html, body {
margin:0;
padding:0;
}
#sweden {
float: left;
width: 304px;
padding: 10px 0;
background: url(img/bg.gif) no-repeat top left;
}
#sweden dl {
width: 260px;
margin: 10px 20px;
padding: 0;
}
#sweden dl:after { /* for browsers that support :after */
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html #sweden dl {height:1%} /* for IE5+6 */
*:first-child+html #sweden dl {min-height: 1px;} /* for IE7 */
#sweden dt {
float:right;
width: 162px;
margin:0;
padding:0;
font-size:130%;
letter-spacing: 1px;
color:#627081;
}
#sweden dd {
margin: 0 0 0 98px;
padding:0;
font-size:85%;
line-height:1.5em;
color:#666;
}
#sweden dl dd.img {
margin:0;
}
#sweden dd.img img {
float:left;
margin:0 8px 0 0;
padding:4px;
border: 1px solid #D9E0E6;
border-bottom-color:#C8CDD2;
border-right-color:#C8CDD2;
background:#FFF;
}
/*reverse float */
#sweden .alt dt {
float:left;
}
#sweden .alt dd {
margin:0 98px 0 0;
}
#sweden .alt dd.img img {
float:right;
margin:0 0 0 8px;}
As you can see, the code is very similar. I only left out a few things but works great and it is still bulletproof.
No comments:
Post a Comment