Featured / Category Blog
We already have styled a lot of elements that are present on the featured or category blog page.
Print screen of the featured blog page without additional CSS.
Structure of the featured blog page without the elements we already styled
div.blog-featured h1 div.items-leading div.leading-0 h2 a div.items-row.cols-2.row-0 div.item.column-1 h2 a p div.item.column-2 h2 a p div.items-row.cols-2.row-1 div.item.column-1 h2 a p div.item.column-2 h2 a p
CSS
We first float the articles 2 and 3 next to each other and we want to have the icons on the same line as the title of the artcle.
/* ---------------------
Intro / subitems
---------------------- */
div.items-row {
clear: left;
float: left; /* IE 6/7 Fix */
width: 100%; /* IE 6/7 Fix */
}
div.cols-2 {
overflow: hidden;
}
div.item h2 {
display: block;
float: left;
width: 70%;
margin: 0 0 5px 0;
}
div.column-1 {
width: 265px;
float: left;
padding: 0 9px 9000px 0;
margin: 20px 0 -9015px 0;
height: 100%;
border-right: 1px #999 solid;
}
div.column-2 {
width: 265px;
float: left;
padding: 0 0 9000px 10px;
margin: 20px 0 -9015px 0;
height: 100%;
}
Print screen after applying CSS
Note
The difficult part was to style a vertical border between the articles 2 nd 3. De div's of the articles have a different length, because of the difference in length of the content. To resolve this, give both div's a large padding-bottom (9000 pixels) and a negative margin-bottom of the same value (-9000 pixels) + the heigth of the row separator (15 pixels). Total margin-bottom will be -9015 pixels. Now both div's have an equal length.
Additional CSS for the headings
/* Leading article heading and title */
div.blog-featured h1 {
margin: 0 0 15px 0;
}
div.items-leading div.leading-0 h2,
div.items-leading div.leading-1 h2 {
display: block;
float: left;
width: 80%;
}
div.items-leading div.leading-0 h2 a,
div.items-leading div.leading-1 h2 a {
text-decoration: none;
}
div.items-leading div.leading-0 h2 a:hover,
div.items-leading div.leading-1 h2 a:hover {
text-decoration: none;
}
Print screen after applying CSS
Category blog
The category blog page has a view extra elements that are not present on the featured blog page. These are a subheading and a category description.
Structure with classes and id's
div.blog h1 h2 span.subheading-category div.category-desc p div.clr
Print screen of the category page without additional CSS
CSS
/* Blog category */
div.blog h1 {
margin: 0 0 15px 0;
}
/* Subheading & description blog category */
span.subheading-category {
clear: both;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 11px;
color: #666;
margin: 10px 0 0 0;
}
/* Category description */
div.category-desc p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 11px;
color: #666;
padding: 3px 0 10px 0;
}
div.category-desc div.clr {
clear: both;
}
Print screen after applying CSS
-
1901-12-13 20:45:52 |Unregistered| Luke - ul.actions same line as h2Hey Rob!
I don't know, if this maybe is another change from 1.6 to 1.7, but I found the following lines not working for the solution you want to achieve:
div.item h2 {
display: block;
float: left;
width: 70%;
margin: 0 0 5px 0;
}
The problem: the class of the leading article is named "item-page" in J!1.7. And because of this, your code doesn't float the title of the leading paragraph. The floating for the coloumns below that article works just fine.
To solve the issue with the leading article just right
div.item h2, div.item-page h2{ .... }
The rest of your css works perfectly - as always :)
Thank you for your comment.
The "item-page" is a class that belongs to a single article and not to a blog page. If you go to the single article styles on the next page, you see that the class: "item-page" is floated just like the class: "item". In your CSS document you put them together ofcourse, just like you suggested.