rossomachin June 16, 2007 at 08:37

We revise HTML and CSS "Habrahabra"

Hello.

Since “Habrahabr” also consists of a code, I’ll take up a light revision of the part I can control and download it dozens of times a day. We will revise the code for the Live section.

Under cat HTML and CSS listings.

Source

Let's dig into the insides. Now the section "Live" is described by the following set of elements (I take a live example directly from the blog page):

<A the href = « naz.habrahabr.ru »>
naz.habrahabr.ru »class =« live_section_nickname »> naz →
www.habrahabr.ru/blog/google » class = «live_section_navtext_title_sec»> the Google /
www.habrahabr.ru/ blog / google / 17315.html # comment217245 "class =" live_section_navtext_title "> Google accused Microsoft of monopolizing

...

What is wrong with the code?

1. The code is overloaded with class names that are too long.
2. The marker next to the username is inserted using the element , instead of being set in CSS. This piece of code is repeated next to each username on Live.
3. HTML is poorly read.
4. CSS is poorly read and spread over stylesheets.

New code

We will deal with the logic of information

What is a live recording? In fact, this is information about who, where and what commented. Additionally, the total number of commenters is indicated. Knowing this, I choose new class names for code elements.

So, I assign class = "who" to the user’s link, class = "where" to the blog link, and name the topic class as a link to a specific topic inside the blog .

It remains to deal with the total number of comments: class = "total" and the name of the common container for the entire entry - class = "entry" .

Next, immediately evaluate the behavior of the links. So, when you hover over links, they change the background color and text color. The usual thing. However, since I'm going to hide the user's marker in the background by setting it in CSS, I have to take into account the specific behavior of the marker when hovering over this link. In this case, the wallpaper cannot be hung on the element . It is imperative to wrap it in by hanging the background image exactly on , and changing the background and color of the link to the link itself. Here is the HTML you need for this:

username →
Google /
Google accuses Microsoft of monopolism 22

Now we have ready-made HTML code, more readable, easier. Decorate it with styles.

New styles

Let's start with the parent. Having rummaged a couple of minutes in styles, I still managed to put them together. Here is what we need to write so that we don’t repeat later, but use the inheritance of properties:

.live_section {
padding: 20px 20px 7px 20px;
font-family: tahoma, arial;
font-size: 12px;
}

Now we’ll set the bottom indent for the Live recordings:

.live_section .entry {
margin-bottom: 1ex;
}

We describe the general properties for all three links:

.live_section span.who a , .live_section .where , .live_section .topic {
margin-bottom: 1ex;
line-height: 1.35em;
}

And now we’ll specify specific properties:

.live_section .who {
padding-left: 16px;
background: url (i / small_default_userpic.gif) 0 50% no-repeat;
}
.live_section .who a , .live_section .where {
color: # 999;
}
.live_section .topic {
color: # 666;
}

It’s time to describe the behavior of the links:

.live_section span.who a: hover , .live_section a.where: hover {
text-decoration: none;
background: # ff6666;
color: white;
}
.live_section a.topic: hover {
text-decoration: none;
background: # 66cc66;
color: white;
}

And finally, we will decorate the total number of comments:

span.total {
color: # CC0000;
}