I’m trying to recreate cnn.com and I actually have several questions and will have more in the future.
Here is my the html for the imitation site so far:
<!Doctype html>
<html>
<title>
CNN - Breaking News, Latest News et Videos
</title>
<head>
<link href = "CNNImitationHomePageStylesheet.css" type = "text/css" rel = "stylesheet">
<link href = "https://fonts.googleapis.com/css?family=Oswald" rel = "stylesheet">
</head>
<body>
<div id= "Taskbar">
<div id= "CNN">
<img src = "http://odm.ergotron.com/Portals/0/images/cnn_logo.png" />
</div>
<div id = "HeaderLinks">
<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 = "Ad">
<img src = "http://wanna-joke.com/wp-content/forum/uploads/2014/10/funny-gif-walrus-man-pool.gif"/>
<div id = "AdText">
Got Milk?
<div/>
</div> -->
<div id = "TopStory">
<div id = "TopStoryTitle">
<h2>
Top stories
</h2>
</div>
<img src = "http://yadbw.com/wp-content/forum/uploads/2017/03/40_hqdefault.jpg"/>
<div id = "TopStoryLinks">
<li><a href = "#">"Mer I.Q. are less than a squirrel" boasts local idiot</a></li>
<li><a href = "#">Trump sends troops to Mexico to fight "bad hombres"</a></li>
<li><a href = "#">Putin calls Trump "his bitch" at U.N. conference</a></li>
<li><a href = "#">Justin Trudeau calls for a wall on the border between Canada and Alaska</a></li>
<li><a href = "#">Woman claims to be sexually harassed by a turtle</a></li>
<li><a href = "#">Meet the first gay black transgender female KKK member</a></li>
<li><a href = "#">Walmart faces backlash after selling guns as 'back to school items'</a></li>
<li><a href = "#">Police shoot unarmed white teenager wearing blackface</a></li>
</div>
</div>
<div id= "Column1">
<div id = "Column1Title">
<h1>
ISIS Reveals Its New Airforce
</h1>
</div>
<img src = "http://hellowhatsapp.in/upload_file/10/73/74/thumb-hqdefault-%20HelloWhatsapp.in.jpg" />
<div id = "Column1Links">
</div>
</div>
<div id= "Column2">
</div>
</body>
</html>
And here’s the css stylesheet:
#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;
top: 0;
left: 0;
position: fixed;
}
#HeaderLinks
{
margin-left: 0;
margin-right: 40px;
}
#HeaderLinks ul
{
margin: 0;
padding: 0;
display: block;
color: white;
}
#HeaderLinks li
{
list-style-type: none;
float: left;
display: block;
width: 95px;
color: white;
}
#TopStory
{
width: 300px;
height: 900px;
margin-top: 48px;
margin-left: 800px;
margin-right: 50px;
float: right;
}
#TopStoryTitle
{
width: 300px;
height: 30px;
background-color: #eaeae1;
}
#TopStoryTitle h2
{
font-family: Oswald;
font-size: 20px;
color: #404040;
}
#TopStory img
{
width: 300px;
height: 220px;
}
#TopStoryLinks ul
{
}
#TopStoryLinks li
{
list-style-type: none;
}
#Column1
{
width: 400px;
height: 600px;
float: left;
}
#Column1 h1
{
font-size: 40px;
}
#Column1 img
{
height: 300px;
width: 400px;
}
#Column1Title
{
height: 40px;
width: 400px;
}
My first question is how to get the Column1 div next to the TopStories div and how to get other divs next to each other in the future.
My second question is why my heading for the image in the Column1 div isn’t fully visible on the page.
My third question is how to get the subjects on the taskbar to be formatted like on cnn.com.
This is what it looks like now:
How do I get it to look like on the actual website?
If you don’t understand, feel free to ask me to clarify.