- “What will pollution do to us?” This statement is not getting underlined whenever you hover upon it.
- The 3 lists below “Titanic letter…” are having incorrect list-style. LIVE in red box isn’t even showing before “BBC News Channel”.
I am unable to fix them. Please help.
MY HTML:
<!doctype html>
<title>Learning CSS</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: ReithSans, Arial, Helvetica, freesans, sans-serif;
}
#topbar {
background-color: #BB1919;
width: 100%;
height: 40px;
color: white;
}
.fixedwidth {
width: 1200px;
margin: 0 auto;
}
#logodiv {
padding-top: 5px;
float: left;
border-right: 1px solid rgb(0, 0, 0);
padding-right: 10px;
}
#signin {
font-weight: bold;
font-size: 0.9em;
padding: 9px 80px 13.2px 20px;
border-right: 1px solid rgb(0, 0, 0);
float: left;
}
#signin img {
padding-right: 8px;
}
#topmenu {
float: left;
}
#topmenu ul {
margin-top: 0;
padding: 0;
}
#topmenu li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid rgb(0, 0, 0);
padding: 10px 20px 12.5px 20px;
float: left;
}
#searchbar {
float: left;
padding: 8px 0 0 20px;
}
#searchbar input {
height: 20px;
border: none;
padding-left: 5px;
font-size: 1.1em;
background-image: url("https://drive.google.com/thumbnail?id=1XQ1WOTujJGYpDStoLl3stZ_-ucTADbCJ"); /*search icon*/
background-repeat: no-repeat;
background-position: right center;
}
#newsbar {
background-color: #8C0003;
width: 100%;
height: 90px;
color: white;
}
.clear {
clear: both;
}
#newsbar p {
margin: 0;
padding: 0;
padding-top: 10px;
float: left;
}
.newsheader {
font-size: 3em;
}
#uk {
font-size: .7em;
padding-left: 20px;
}
#rss {
float: right;
margin-top: 40px;
}
#topicmenu ul {
background-color: #3A0711;
margin: 0;
padding: 5px 0 0 5px;
height: 20px;
}
#topicmenu li {
list-style: none;
font-size: .8em;
border-right: 1px solid white;
float: left;
background-color: none;
padding: 0 6px 0 6px;
}
.selected {
background-color: rgb(237, 237, 237);
color: rgb(102, 102, 102);
height: 21px;
position: relative;
top: -5px;
padding-top: 4px !important;
}
#content {
width: 100%;
color: rgb(83, 83, 83);
font-size: .75em;
}
.date {
font-weight: bold;
}
h1 {
color: #1F4F82;
font-size: 2.5em;
}
.headlineimage {
float: left;
}
.newsites {
position: relative;
left: 10px;
bottom: 15px;
width: 280px;
float: left;
font-size: 1.1em;
}
.newsites a {
color: rgb(31, 79, 130);
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.video {
background-image: url("https://drive.google.com/thumbnail?id=19LXSl7359529HxPms6ofoLVLUFJxGBT5"); /* triangle icon*/
background-size: 17px;
background-repeat: no-repeat;
background-position: left center;
padding: 20px;
}
.links {
line-height: 1.6em;
}
.sound {
background-image: url("https://drive.google.com/thumbnail?id=1WkGNgjo3EB-EdR61G-DmaRbytn1yv9-6"); /* sound icon*/
background-size: 19px;
background-repeat: no-repeat;
background-position: left center;
padding: 20px;
}
#watchlisten {
background-color: #EEEEEE;
float: right;
width: 480px;
position: relative;
bottom: 80px;
}
h2 {
color: rgb(80, 80, 80);
margin: 10px 0 10px 10px;
font-size: 1.8em;
}
.boxes {
float: right;
margin: 20px 10px 0 0;
}
.leftarrow {
float: left;
border-right: 1px solid white;
}
.wlblock {
float: left;
background-color: #D1700E;
width: 204px;
border-right: 1px solid white;
}
.wlblock a {
color: white;
}
.wlblock p {
margin: 10px 19px 16px 15px;
/* align : right; */
}
.wlblock2 {
float: left;
background-color: #D1700E;
width: 204px;
border-right: 1px solid white;
}
.wlblock2 a {
color: white;
}
.wlblock2 p {
margin: 10px 10px 16px 15px;
}
#watchlisten li {
list-style: none;
background-image: url("https://drive.google.com/thumbnail?id=1bWTaZQZgR2cUrCHRyYRvbF5BgcUIVdUK"); /*live in red box*/
background-repeat: no-repeat;
background-position: left center;
background-size: 25px;
padding: 5px 0 5px 20px;
}
</style>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="https://cdn.vox-cdn.com/thumbor/ULiFcktJYhW42omnYNr1zlkTv5A=/1400x1050/filters:format(jpeg)/cdn.vox-cdn.com/assets/1005382/bbc_logo_red.jpg"
width="40px" /> <!--bbc logo -->
</div>
<div id="signin">
<img src="https://drive.google.com/thumbnail?id=1gLIcd5CncQg9cDjVYc_ElBQ0YeYk0VBF" width="10px" /> <!--signin logo -->
Sign in
</div>
<div id="topmenu">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchbar">
<input placeholder="Search" />
</div>
</div>
</div>
<div class="clear"></div>
<div id="newsbar">
<div class="fixedwidth">
<p class="newsheader">NEWS<span id="uk">UK</span></p>
<div id="rss">RSS</div>
<div class="clear"></div>
<div id="topicmenu">
<ul>
<li>Home</li>
<li>World</li>
<li class="selected">UK</li>
<li>England</li>
<li>N. Ireland</li>
<li>Scotland</li>
<li>Wales</li>
<li>Business</li>
<li>Politics</li>
<li>Health</li>
<li>Education</li>
<li>Sci/Environment</li>
<li>Technology</li>
<li style="border-right: none;">Environment & Arts</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
<div class="fixedwidth">
<p><span class="date">2 April 2014</span> Last updated at 15:23</p>
<h1>Pollution to spread across England</h1>
<img class="headlineimage" src="https://drive.google.com/thumbnail?id=1jrUt_ZuKBeNRwIWTLX7jtkbfW8u_CIFw"
width="392px" /> <!--car mirror -->
<div class="newsites">
<p>Health warnings have been issued by the government as pollution spreading across England is
forecast to hit high levels.</p>
<p class="links"><a class="video" href="">Why are pollution levels so high?</a></br>
<a class="video" href="">Sahara dust visible on cars</a></br>
<a class="video" href="">How Saharan dust reached the UK</a></br>
<a href="">What will pollution do to us?</a><br>
<a class="sound" href="">Air pollution a 'serious issue'</a></br>
</p>
</div>
<div id="watchlisten">
<img class="boxes" src="https://drive.google.com/thumbnail?id=1owu1Yk2iq66pBlAqwXgbDJ5UHvqykq5q"
width="59px" /> <!--watchlisten right 4 boxes -->
<h2>Watch/Listen</h2>
<img src="https://drive.google.com/thumbnail?id=14NUKX4A3ZXWZcf__2jjDC00xRF9P2NAR"
class="leftarrow" /> <!--left arrow-->
<div class="wlblock">
<img src="https://drive.google.com/thumbnail?id=1XLOQfooGTFwZkDS3VY2ceStwKT6WaEcf" /> <!--Titanic letter-->
<p><a href="">Titanic letter could fetch £100,000</a></p>
</div>
<div class="wlblock2">
<img src="https://drive.google.com/thumbnail?id=1Nycz5BoDrBd-W0Pw9y-cnD-SbPiNWgNA" /> <!--Cameron defends-->
<p><a href="">Cameron defends 'Muppet' remark</a></p>
</div>
<img src="https://drive.google.com/thumbnail?id=1O2hb3lvmV8Z3wGyUN_YHH_G5gp5QiL6A"
class="leftarrow" /> <!--right arrow-->
<p>
<ul>
<li><a href="">BBC News Channel</a></li>
<li><a href="">Radio 5 Live</a></li>
<li><a href="">Osborne questioned on budget</a></li>
</ul>
</p>
</div>
</div>
</div>
</div>
![must look like|640x360](upload://tHMaRqTKhOInzteUKPSB1Y7RMYH.jpeg)