Left column content CSS and HTML
Update: Paceville.com is now online.
Let’s start adding some content to our columns, we begin from the left, to make it look like in the design we will need 4 new elements:
1.) Nice headline boxes with background picture.
2.) Latest pictures which will contain a picture from each newly added gallery, we will list something like 3-5 of them, below will be a black area with the name of the club where they were taken. The linking text will be white. The main challenge is that we need a folded arrow which will look as if it’s coming out from beneath the middle page/column, it will contain the abbreviated month name and the day of the month.
3.) Featured blog element which will be basically the same as the latest picture element with the addition of a link below the white text.
4.) News listing with headlines and abstract, we will have just text here but headlines and teaser will be formatted differently of course. Other than that it will be white text on a black background.
Check out the demo to see the above in action.
Let’s begin with the headline box:
<div class="headline_box"><h5>Latest pictures</h5></div>For SEO reasons we have a h5 inside the DIV.
#col1_content div{width:205px;}
h1,h2,h3,h4,h5,h6 {
font-family:'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-weight:bold;
color:#fff;
margin: 0 0 0.25em 0;
}
h1 { font-size: 200% } /* 24px */
h2 { font-size: 200% } /* 24px */
h3 { font-size: 150% } /* 18px */
h4 { font-size: 133.33% } /* 16px */
h5 { font-size: 116.67% } /* 14px */
h6 { font-size: 116.67% } /* 14px */
.headline_box{
background: url(images/headline_bkg.jpg) repeat-x;
height:33px;
padding: 8px 0px 5px 10px;
}
.headline_box h1,
.headline_box h2,
.headline_box h3,
.headline_box h4,
.headline_box h5,
.headline_box h6{
color:#000; font-family: Tahoma, sans-serif;
}
#col1 .headline_box{ width:195px; }The first line will make sure we get a proper default width on all DIVs inside the first/left column.
The initial h formatting is from YAML, I really like those default values, with some modifications.
Then we have the headline box class, of course we repeat a 1×33 image on the x-axis, and then set some margin and padding values that will result in correct positioning of the box itself and the text within the box. Finally we change the type and color on all header types inside a headline box.
Next up is the latest picture/gallery box:
<div class="latest_pic_group">
<div class="latest_pic_box">
<img src="uploads/latest_pic.jpg"/>
<h4>Empire Bar & Club</h4>
</div>
<div class="date_fold_left">
<span class="date_left_day">23</span>
<span class="date_left_month">jul</span>
</div>
</div>Not much to say about the HTML, we have a container DIV which will hold the DIV containing the image and the text, and the date arrow.
.latest_pic_group{ height:160px; }
.latest_pic_box{
background:#000;
color:#fff;
}
.latest_pic_box h1,
.latest_pic_box h2,
.latest_pic_box h3,
.latest_pic_box h4,
.latest_pic_box h5,
.latest_pic_box h6{
color:#fff;
font-family: Tahoma, sans-serif;
padding:5px 10px 5px 15px;
}
.date_fold_left{
background: url(images/date_indicator_left.png) no-repeat;
width:53px;
height:57px;
position:relative;
top:-140px;
left:-60px;
}
.date_left_day{
display:block;
font-size:24px;
font-weight: bolder;
color:#000;
position:relative;
top:-3px;
left:8px;
font-family:"Arial Black";
}
.date_left_month{
display:block;
text-transform:uppercase;
color:#000;
position:relative;
top:-8px;
left:12px;
}First we enforce a height of 160px, if we omit this line each latest pic element will grow too high (for some reason I’m still too crappy to understand).
The date arrow is the most interesting here. The key is the position: relative it will allow us to use top and left in relation to the parent element, which we do to position them. Note text-transform:uppercase; which is a good one, with it we won’t have to worry about whether the output from PHP is correctly cased since we can control that with CSS.
The featured blog elements are not very different.
<div class="featured_blog_teaser">
<div class="latest_pic_box">
<img src="uploads/latest_pic.jpg"/>
<h4>What is it about a...</h4>
<a href="">Blog - Emma</a>
</div>
</div>Neither is the CSS:
.featured_blog_teaser{margin-bottom: 10px;}
.featured_blog_teaser a{
padding:0px 10px 10px 15px;
display:block;
}Note the use of display: block here on the anchor tag, some element types need that attribute in order to be able to put stuff like padding on them.
The news listing is even simpler:
<div class="news_list">
<h4>Future event 1 headline</h4>
<p>
News abstract 1 bla bla bla bla sd asdf sdfsaasdf asdfsdfs sdfdf.
</p>
<h4>Future event 2 headline</h4>
<p>
News abstract 2 bla bla bla bla sd asdf sdfsaasdf asdfsdfs sdfdf.
</p>
<h4>Future event 3 headline</h4>
<p>
News abstract 3 bla bla bla bla sd asdf sdfsaasdf asdfsdfs sdfdf.
</p>
</div>.news_list{
background: #000;
padding-bottom: 10px;
}
.news_list h4,
.news_list p{padding: 5px 0px 0px 10px;}The next piece will be about the middle column which will contain newest articles listing, a table of thumbnails of users online right now and a simple full article box.