I'm new to html, so excuse dumb questions 'n stuff. I have this page here:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<style type = text/css>
#topbar
{
position: absolute;
top: 0;
left: 0;
height: 80px;
width:100%;
background-color:black;
border-style: solid;
border-bottom-color: mediumaquamarine;
border-bottom-width: thin;
}
#login
{
position:fixed;
top: 20px;
left: 92%;
}
#latestItems
{
position: fixed;
height:90%;
width: 100%;
top: 100px;
background-color:white;
border: 2px;
border-color: black;
}
#tabs
{
position: fixed;
top: 30px;
left: 150px;
}
#tabs_search
{
position: relative;
}
#tabs_search:hover
{
}
#tabs_lists
{
position: relative;
left: 40px;
}
#tabs_cart
{
position: relative;
left: 80px;
}
#tabs_home
{
position: relative;
left: 120px;
}
#tabs_profile
{
position: relative;
left: 160px;
}
</style>
</head>
<body>
<header id = topbar>
<img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html"></img>
<a id = "login" href = "https://steamcommunity.com/login/home/?goto=0">
<img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50>
</a>
<div id = tabs>
<a href = "search.html", title = "browse items">
<img id = tabs_search src = "search.png" width = 2% height = 2% ></img>
</a>
<a href = "lists.html" title = "list items">
<img id = tabs_lists src = "lists.png" width = 2% height = 2% ></img>
</a>
<a href = "shopping_cart.html" title = "my cart">
<img id = tabs_cart src = "cart.png" width = 2% height = 2% ></img>
</a>
<a href = "index.html" title = "return home">
<img id = tabs_home src = "home.png" width = 2% height = 2% ></img>
</a>
<a href = "my_profile.html" title = "profile">
<img id = tabs_profile src = "profile.png" width = 2% height = 2% ></img>
</a>
</div>
</header>
</body>
it looks good, but i get blue pixels at the bottom of the first 3 images and purple pixels on the 4th one (images inside "tabs"). They turn red when being clicked on and i dont Know why...
Hi i have check your html code. You don't need to complete img tag. that line is because of text decoration of anchore tag
a{
text-decoration:none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<style type = text/css>
a{
text-decoration:none;
}
#topbar
{
position: absolute;
top: 0;
left: 0;
height: 80px;
width:100%;
background-color:black;
border-style: solid;
border-bottom-color: mediumaquamarine;
border-bottom-width: thin;
}
#login
{
position:fixed;
top: 20px;
left: 92%;
}
#latestItems
{
position: fixed;
height:90%;
width: 100%;
top: 100px;
background-color:white;
border: 2px;
border-color: black;
}
#tabs
{
position: fixed;
top: 30px;
left: 150px;
}
#tabs_search
{
position: relative;
}
#tabs_search:hover
{
}
#tabs_lists
{
position: relative;
left: 40px;
}
#tabs_cart
{
position: relative;
left: 80px;
}
#tabs_home
{
position: relative;
left: 120px;
}
#tabs_profile
{
position: relative;
left: 160px;
}
</style>
</head>
<body>
<header id = topbar>
<img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html">
<a id = "login" href = "https://steamcommunity.com/login/home/?goto=0">
<img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50>
</a>
<div id = tabs>
<a href = "search.html", title = "browse items">
<img id = tabs_search src = "search.png" width = 2% height = 2% >
</a>
<a href = "lists.html" title = "list items">
<img id = tabs_lists src = "lists.png" width = 2% height = 2% >
</a>
<a href = "shopping_cart.html" title = "my cart">
<img id = tabs_cart src = "cart.png" width = 2% height = 2% >
</a>
<a href = "index.html" title = "return home">
<img id = tabs_home src = "home.png" width = 2% height = 2% >
</a>
<a href = "my_profile.html" title = "profile">
<img id = tabs_profile src = "profile.png" width = 2% height = 2% >
</a>
</div>
</header>
</body>
</html>