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:
    50
    Likes Received:
    6
    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:
    26
    Likes Received:
    6
    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

Ask a Question

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.