Hi guys…
I am having some issues with a specific design that i have been given from a client.
the enclosed attachment shows the design that I need. The other requirement which is not in the design is that while there is a minimum of two rows to be shown even if there are no events. each date section can expand by more rows. also the date on the left needs to be always horizontally aligned in the middle.
Below is my code i managed so far but i am having problems…i am using some background images, but this needs to be completely cross browser right back to IE6.
Thank you in advance sitepointers
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
/*
==============================
==== RESET & BASE STYLES =====
==============================*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption
{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
height:100%;
color:#333;
background:#5e7d91;
margin:0;
padding:0;
position:relative;
}
html
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
height:100%;
color:#333;
margin:0;
padding:0;
position:relative;
}
html,* html #wrap
{
height:100%;
}
div
{
border:none;
}
object
{
margin:0;
padding:0;
}
form
{
margin:0;
}
img
{
border:0;
}
li
{
font-size:11px;
}
hr
{
width:100%;
border:none 0;
border-top:1px #369 solid;
height:1px;
}
h1
{
font-size:2em;
font-weight:400;
color:#000;
background:inherit;
margin:10px 5px 5px;
padding:0;
}
h2
{
font-size:1em;
font-weight:700;
color:#081355;
background:inherit;
margin:10px 5px 5px;
padding:0;
}
a
{
text-decoration:none;
color:#678796
}
a:visited
{
color:#678796
}
a:hover
{
text-decoration:underline;
}
.eventContainer
{
width:940px;
}
.eventContainer_Day
{
background-color:red;
float:left;
}
.eventContainer_Date
{
background-color:#f2f2f2;
color:#5f7e91;
width:44px;
height:44px;
font-family:Arial, Helvetica, sans-serif;
font-size:2em;
text-align:center;
vertical-align:middle;
float:left;
}
.eventContainer_Items
{
width:891px;
float:left;
background-image:url(images/events_eventsback.png);
border-top: 1px solid #92b1c2;
border-bottom: 1px solid #92b1c2;
}
.eventContainer_Event
{
width:296px;
height:20px;
float:left;
background-image:url(images/events_eventback.png);
margin-right:1px;
margin-bottom:1px;
}
</style>
</head>
<body>
<div class='eventContainer'>
<div class='eventContainer_Day'>
<div class='eventContainer_Date'>44</div>
<div class='eventContainer_Items'>
<div class='eventContainer_Event'>Event</div>
<div class='eventContainer_Event'>Event</div>
<div class='eventContainer_Event'>Event</div>
<div class='eventContainer_Event'>Event</div>
</div>
</div>
</div>
</body>
</html>