Results 1 to 8 of 8

Thread: Coding

  1. #1
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Coding

    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.

    HTML Code:
    <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.

    Code:
    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?
    Last edited by Snookerman; 07-30-2011 at 07:11 PM. Reason: added [html] and [code] tags

  2. #2
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    This should work for you.

    HTML:
    Code:
    <div class="vertical-bar"></div>
    <span class="title">NatGeo News Watch Blog</span>
    CSS:
    Code:
    .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.

  3. #3
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    Here's a version with the background image.

    HTML:
    Code:
    <span class="vertical-bar">NatGeo News Watch Blog</span>
    CSS:
    Code:
    .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.

  4. #4
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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-w...shion-magazine

    where it says: subscribe newsletter etc.

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

  5. #5
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    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.

  6. #6
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi,

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

  7. #7
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Learning for this


  8. #8
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    cool

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •