Recreating CNN.com

Discussion in 'HTML and CSS' started by Alioune, Aug 8, 2017.

  1. Alioune

    Alioune

    Joined:
    Jul 19, 2017
    Messages:
    13
    Likes Received:
    2
    Location:
    Phoenix, AZ
    I'm trying to recreate cnn.com in order to practice my html and css skills. I'm having trouble recreating the task bar at the top. Here's what it looks like:

    CNNTaskBar.PNG

    And here's what my imitation looks like so far:

    TaskBarImitation.PNG

    Here's the html:
    <!Doctype html>
    <html>
    <title>
    CNN - Breaking News, Latest News et Videos
    </title>

    <head>
    <link href = "Practice_Css.css" type = "text/css" rel = "stylesheet">
    </head>

    <body>

    <div id= "Taskbar">

    <div id= "CNN">
    <img src = "http://odm.ergotron.com/Portals/0/images/cnn_logo.png" />
    </div>

    <ul>
    <li><a href = "#">U.S.</a></li>
    <li><a href = "#">World</a></li>
    <li><a href = "#">Politics</a></li>
    <li><a href = "#">Money</a></li>
    <li><a href = "#">Opinion</a></li>
    <li><a href = "#">Health</a></li>
    <li><a href = "#">Entertainment</a></li>
    <li><a href = "#">Tech</a></li>
    <li><a href = "#">Style</a></li>
    <li><a href = "#">Travel</a></li>
    <li><a href = "#">Sports</a></li>
    <li><a href = "#">Video</a></li>
    <li><a href = "#">VR</a></li>
    <li><a href = "#">Live TV</a></li>
    <li><a href = "#">U.S. Edition+</a></li>
    <li><a href = "#">image</a></li>
    <li><a href = "#">image</a></li>

    </ul>
    </div>

    <div id= "Top Story">

    </div>

    <div id= "Column1">

    </div>

    <div id= "Column2">

    </div>
    </body>
    </html>

    Here's the css:

    #CNN
    {
    width: 60px;
    height: 60px;
    margin-left: 100px;
    padding-bottom: 0;
    padding-top: 0;
    background-color: #cc0000;
    }

    #CNN img
    {
    height: 59px;
    width: 59px;
    }

    #Taskbar
    {
    width: 100%;
    background-color: black;
    height: 48px;
    margin: 0;
    padding: 0;
    }

    #Taskbar ul
    {
    margin: 0;
    padding: 0;
    display: block;

    }


    #Taskbar li
    {
    list-style-type: none;
    float: left;
    display: block;
    width: 150px;
    }

    I've tried putting the list tags before the div with the icon but it just made it look like this:
    BadImitation.PNG
    How do I make it look like the cnn.com task bar I'm trying to imitate?
     
    Alioune, Aug 8, 2017
    #1
    1. Advertisements

  2. Alioune

    Thiefcom

    Joined:
    Jun 1, 2017
    Messages:
    40
    Likes Received:
    3
    because the CNN website is not that hard to clone.
     
    Thiefcom, Aug 8, 2017
    #2
    1. Advertisements

  3. Alioune

    Alioune

    Joined:
    Jul 19, 2017
    Messages:
    13
    Likes Received:
    2
    Location:
    Phoenix, AZ
    Thiefcom, your reply has nothing to do with my question. I was asking how to make the imitation task bar look like the original.
     
    Alioune, Aug 8, 2017
    #3
  4. Alioune

    Ian Administrator

    Joined:
    Nov 13, 2005
    Messages:
    24
    Likes Received:
    5
    Can you try wrapping the <ul> in it's own DIV container, then add "float:left" to the CNN DIV. That should do it.

    You'll need to tweak the font colour etc... too of course.

    HTML:
    <!Doctype html>
    <html>
    <title>
    CNN - Breaking News, Latest News et Videos
    </title>

    <head>
    <link href="test.css" rel="stylesheet" type="text/css">
    </head>

    <body>

    <div id= "Taskbar">

    <div id= "CNN">
    <img src = "cnn_logo.png" />
    </div>
    <div id="links">
    <ul>
    <li><a href = "#">U.S.</a></li>
    <li><a href = "#">World</a></li>
    <li><a href = "#">Politics</a></li>
    <li><a href = "#">Money</a></li>
    <li><a href = "#">Opinion</a></li>
    <li><a href = "#">Health</a></li>
    <li><a href = "#">Entertainment</a></li>
    <li><a href = "#">Tech</a></li>
    <li><a href = "#">Style</a></li>
    <li><a href = "#">Travel</a></li>
    <li><a href = "#">Sports</a></li>
    <li><a href = "#">Video</a></li>
    <li><a href = "#">VR</a></li>
    <li><a href = "#">Live TV</a></li>
    <li><a href = "#">U.S. Edition+</a></li>
    <li><a href = "#">image</a></li>
    <li><a href = "#">image</a></li>

    </ul>
    </div>
    </div>

    <div id= "Top Story">

    </div>

    <div id= "Column1">

    </div>

    <div id= "Column2">

    </div>
    </body>
    </html>
    Code (CSS):
    #CNN
    {
    width: 60px;
    height: 60px;
    margin-left: 100px;
    padding-bottom: 0;
    padding-top: 0;
    background-color: #cc0000;
    float:left;
    }

    #CNN img
    {
    height: 59px;
    width: 59px;
    }

    #Taskbar
    {
    width: 100%;
    background-color: black;
    height: 48px;
    margin: 0;
    padding: 0;
    }

    #Taskbar ul
    {
    margin: 0;
    padding: 0;
    display: block;

    }


    #Taskbar li
    {
    list-style-type: none;
    float: left;
    display: block;
    width: 150px;
    }
     
    Ian, Aug 9, 2017
    #4
  5. Alioune

    Alioune

    Joined:
    Jul 19, 2017
    Messages:
    13
    Likes Received:
    2
    Location:
    Phoenix, AZ
    Yep, that worked, thanks.
     
    Alioune, Aug 9, 2017
    #5
    Ian likes this.
    1. Advertisements

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads
  1. Nathan Sokalski

    Automatically recreating control declarations

    Nathan Sokalski, Sep 14, 2005, in forum: ASP .Net
    Replies:
    5
    Views:
    545
    Cor Ligthert [MVP]
    Sep 15, 2005
  2. sck10

    XmlTextReader & CNN RSS Feed

    sck10, Oct 5, 2006, in forum: ASP .Net
    Replies:
    5
    Views:
    1,206
    sck10
    Oct 12, 2006
  3. buffinator
    Replies:
    2
    Views:
    387
    buffinator
    Feb 24, 2007
  4. gupta2000
    Replies:
    0
    Views:
    1,725
    gupta2000
    Aug 6, 2008
  5. Andreas Leitgeb

    recreating a BitSet from its toString()

    Andreas Leitgeb, Oct 21, 2008, in forum: Java
    Replies:
    1
    Views:
    370
    Andreas Leitgeb
    Oct 24, 2008
  6. royG
    Replies:
    3
    Views:
    772
    Mayeul
    Nov 17, 2008
  7. Merlin
    Replies:
    0
    Views:
    416
    Merlin
    Jun 18, 2010
  8. jason

    Paramater for cnn.EXECUTE?

    jason, Aug 7, 2003, in forum: ASP General
    Replies:
    3
    Views:
    216
    jason
    Aug 7, 2003
Loading...