CODEWITHSUNDEEP
htmlcss
user3362546
user3362546

Reputation: 65

When I try to put my banner as an image, it is not displaying properly?

I am making a website for my high school robotics team. I am trying to make my banner a link but for some reason there is this little box behind the image that I cannot get rid of. I tried looking at other threads, which told me I needed to set a width for the code, that didnt work. I also read I needed to set a border property at "0", that didn't work. I cannot figure it out.

<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<title>Team 3774 Homepage</title>
</head>
<body>

<div id="page">
<div class="Banner">
<a class="Banner_Link" href="www.robotichive3774.com">
<img src="/Images/Banner.png" height="200" width="1350" border="0">
</a>
</div>

<div class="navbar">
<ul class="nav">
  <li><a class="li_nav" href="/Home">Home</a></li>
  <li><a class="li_nav" href="/Team Bio">Team Bio</a></li>
  <li><a class="li_nav" href="/Our Robot">Our Robot</a></li>
  <li><a class="li_nav" href="/Our Coach">Our Coach</a></li>
  <li><a class="li_nav" href="/Gallery">Gallery</a></li>
  <li><a class="li_nav" href="/Outreach">Outreach</a></li>
  <li><a class="li_nav" href="/Youtube">Youtube</a></li>
</ul>
</div>
</div>

<div class="body">
<h1 class="main_header">Welcome to Robotics Team 3774!</h1>
<div class="main_body">
<p class="Team_Description">Hive Voltage 3774 is the Senior 
(and Junior) 
Engineering Team at Bayonne High School. The team 
is a part of the Senior Engineering class available 
at Bayonne High School. This team has the most experienced
 students for FTC. Many of them are highly capable students 
 who had done various stem activities. We plan on learning 
 several aspects of engineering this season but we also intend to
 have fun.
 Our main goal however is to grow as a team. We plan to grow 
 as individuals and to collaborate as a unit or a team.
 Also, we plan to expose our community to the wonderful 
 applications of robotics, and to excel in many parts of real
 engineering and real world applications. Hence we are, 
 HIVE VOLTAGE 3774. #Hivevoltage #Gobees</p>
</div>
</div>
</body>
</html>

CSS

.Banner
{
height: 200px;
width: 1350px;
}

.body
{
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
margin-bottom: 100px;
}
.Banner img 
{
    vertical-align:top;
}

body
{
margin: 0;
}


.li_nav
{
float: left;
display:inline-block;
font-family: 'Roboto Slab', serif;
}

.nav 
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; 
min-width: 1350px;  
}

a:link, a:visited 
{
display:inline-block;
width: 182.7px;
padding-top: 12px;
padding-right: 5px;
padding-bottom: 14px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
text-align: center;
text-decoration: none;
font-family: 'Roboto Slab', serif;
}

a:hover, a:active 
{
background-color: #B20000;
}

#page{
    width: 1000px;
    margin-left: 0px;
    margin-right: 0px;
}


.body
{
height: 1350px;
}

.main_header
{
text-align: center;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 5px;
font-family: 'Roboto Slab', serif;
}

.main_body
{
padding-bottom: 100px;
}

.Team_Description 
{
font-size: 150%;
font-family: 'Roboto Slab', serif;
}

The site is robotichive3774.com

Upvotes: 1

Views: 59

Answers (2)

DannyTheDev
DannyTheDev

Reputation: 4173

instead of using the !important tag you could do it like this:

.Banner a {
    padding: 0;
}

You should avoid using the important tag unless absolutely necessary, instead try make your CSS rule more powerful.. see this SO answer on !important https://stackoverflow.com/a/3706876/1563558

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

It is because default anchor styles applied over there. Add the following style in your CSS.

 a.Banner_Link
 {
  padding:0 !important;
 }

Upvotes: 3

Related Questions