But what if I wanted to add some nifty things on the page, like div based boxes etc. Say, I want to create a table using DIVs in the article page and display a bunch of images (110px*160px) in the div boxes, and then I also want to place a little arrow/banner at the top left corner of those pictures to highlight a number or something of that sort.
Here is what the code would look like if I do it in Dreamweaver
Code: Select all
<div id="year">2011</div>
<div class="clearboth"><!-- --></div>
<div class="child">
<div class="ribbon_container">
<div class="ribbonRedNew"><div class="picCount">23</div></div>
</div>
<img class="thumb" STYLE="top:-72px;"src="forIndex/picture_70_s.jpg" width="100" height="150"/>
</div>
<div class="child">
<p> </p>
</div>
<div class="child">
<p> PIC </p>
</div>
<div class="child">
<p> PIC </p>
</div>
<div class="child">
<p> PIC </p>
</div>
<div class="clearboth"><!-- --></div>
<div class="child2">
<p>PROGRAM 1</p>
</div>
<div class="child2">
<p>PROGRAM 2</p>
</div>
<div class="child2">
<p>PROGRAM 3</p>
</div>
<div class="child2">
<p>PROGRAM 4</p>
</div>
<div class="child2">
<p>OTHER</p>
</div>
</div>
Code: Select all
.ribbon_container {
position: relative;
margin-left:8px;
background-repeat: no-repeat;
border-bottom: 0px solid;
height: 70px;
width:80px;
z-index:2;
}
.ribbonRedNew {
position: relative;
margin-left:auto;
background-image:url(../forIndex/ribbonRed.png);
background-repeat: no-repeat;
border-bottom: 0px solid;
height: 70px;
z-index:2;
}
.picCount {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
color:#fff;
padding-top:20px;
letter-spacing:4px;
}
.child {
width: 180px;
height: 180px;
display: inline-block;
letter-spacing: normal;
font-size: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
margin: 0 auto auto auto;
border: solid 1px #666666;
background:#333333;
/* Do rounding (native in Firefox and Safari)
-webkit-border-radius: 5px;
-moz-border-radius: 5px;*/
}
.child{
*display: inline;
*margin: 0 1px 0 1px;
}
.child p
{
text-align:center;
vertical-align:text-bottom; !important
}
.child2 {
width: 180px;
height: 40px;
display: inline-block;
letter-spacing: normal;
font-size: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
margin: 0 auto 20px auto;
border: solid 1px #666666;
background:#333333;
}
.child2 {
*display: inline;
*margin: 0 1px 0 1px;
}
Thank you in advance.