Hello,
i have written a small HTML file for college purpose.
i m just learning HTML in college.
But its not displaying as it should be.
There is a lot of space before & after the li {audi, bmw, etc} TAGs.i want to remove it but its not getting removed. & the image in the 2nd li tag which is used as bullet has gone out of the screen.
So pls. can anybody help me fix this 2 problems
IMAGE :-
HTML code :-
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "myStyle2.css" />
<style type="text/css">
#ul1
{
list-style-image:url('1.bmp');
padding:0px;
float:left;
}
</style>
<title>CARS</title>
</head>
<body>
<div class = "container" style=width="100%">
<div class = "header" height = "20%" width = "100%">
CARS
</div>
<div class = "list" height = "10%" width = "100%">
<ul class ="ul2">
<li><a href = "#">HOME</a></li>
<li><a href = "bmw.htm">BMW</a></li>
<li><a href = "audi.htm">AUDI</a></li>
<li><a href = "pors.htm">PORSCHE</a></li>
<li><a href = "lamb.htm">LAMBORGHINI</a></li>
</ul>
</div>
<ul id = "ul1">
<li>AUDI</li>
<li>PORSCHE</li>
<li>BMW</li>
<li>LAMBORGHI NI</li>
</ul>
</div>
</body>
</html>
CSS code :-
@font-face
{
font-family: nsecthin;
src : url('nsecthin.ttf')
}
body
{
margin:10px;
background-color:green;
}
.header
{
text-align:center;
text-transform:uppercase;
color:black;
text-decoration:underline;
font-family:nsecthin,Constantia;
font-size:2.0em;
letter-spacing:3px;
font-weight:bold;
text-indent: 0;
line-height:50px;
background-color:yellow;
border:2px solid white;
}
.list
{
font-family:constantia;
font-size:2em;
padding:0;
margin:0;
border:2px solid white;
list-style-position:inside;
}
.ul2 li
{
height:2px;
list-style-type:none;
float:none;
display:inline;
border:2px solid white;
list-style-position:inside;
}
.ul2 a
{
float:none;
width:1em;
text-decoration:none;
color:white;
display:inline;
background-color:blue;
padding-left:0;
border:2px solid white;
}
