Recreating CNN.com


Joined
Jul 19, 2017
Messages
13
Reaction score
2
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?
 
Ad

Advertisements

Joined
Jul 19, 2017
Messages
13
Reaction score
2
Thiefcom, your reply has nothing to do with my question. I was asking how to make the imitation task bar look like the original.
 

Ian

Administrator
Joined
Nov 13, 2005
Messages
59
Reaction score
15
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>

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;
}
 
Ad

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. After that, you can post your question and our members will help you out.

Ask a Question

Top