- 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:
And here's what my imitation looks like so far:
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:
How do I make it look like the cnn.com task bar I'm trying to imitate?
And here's what my imitation looks like so far:
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:
How do I make it look like the cnn.com task bar I'm trying to imitate?
