Coding

[philips]

I am trying to learn how to create an area for my blog that is similar to the right hand side of the following website where it says NatGeo News Watch Blog. Here is the website: http://www.nationalgeographic.com/

By looking at the source code of the website, I selected the following part.


<div class0"rssReader">
<h3 class="title">NatGeo News Watch Blog"</h3>
<div id="rss_natogeonewswatchblog" class="rss_results">
<ul class="bullets">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>

Now, I am trying to learn how to do the CSS.


h3 {
display: block;
color: #333;
font-size: 1.438em;
font-weight: bold;
margin-bottom; 15px;
}

I like to be able to create something similar to the small yellow vertical bar just before the text that reads: NatGeo News Watch Blog


Any help?

[JShor]

This should work for you.

HTML:


<div class="vertical-bar"></div>
<span class="title">NatGeo News Watch Blog</span>


CSS:


.vertical-bar {
background-color: #FFCC00;
display: inline-block;
width: 8px;
height: 15px;
}

.title {
font-weight: bold;
font-size: 16px;
font-family: Arial;
color: #333333;
padding: 4px;
}


FYI, you can also do this using a background image that is a yellow square. It would be much cleaner code.

[JShor]

Here's a version with the background image.

HTML:


<span class="vertical-bar">NatGeo News Watch Blog</span>


CSS:


.vertical-bar {
background: url(vertical-bar.png) center left no-repeat;
font-weight: bold;
font-size: 16px;
font-family: Arial;
padding-left: 15px;
}


...and I attached vertical-bar.png to this reply.

[philips]

Many thanks for your help.

What I am actually trying to achieve is to decrease the size of the blue bars that show to left on the following template: http://www.templatescreme.com/free-website-fashion-magazine

where it says: subscribe newsletter etc.

Once the blue bars are shorter, the text will come right after them on the same line.

[JShor]

Can you post some existing code so we can revise it?

Also, to accomplish what you're trying to do, you want to make the elements inline with everything else (you can achieve this with the display CSS property). You can also change the width of the bar by changing the width property of the container.

[philips]

Hi,

I have downloaded and extracted the template. Attachments are included.

[wodeln]

Learning for this

http://hellocg.com/jaso.jpghttp://hellocg.com/nva.jpghttp://hellocg.com/vghn.jpg

[philips]

:) cool