index.htmlstyle.css

 

These are my files for my site. I want to move both of the coat of arms to be even with the bar above them, I want them to be on top of the bar. Any Idea on how I could do this?

 

Thanks!

 

And if anyone is willing to help a beginner designer, please add me on skype: anzewx

Like this?

ul a {

    color:white;

    padding-left:100px;

    padding-right:200px;

    text-decoration: none;

    line-height: 60px;

    fint-size: 20px;

    background-image: url(line.png);

    background-repeat: no-repeat;

    clear: all;

    margin: auto;

}


ul {

    background-image:url(nav.png); height:50px; width:100%;

}


li {

    list-style-type: none;

    margin:0;

    padding:0;

    float:right

}


 .badge {

	height:100px;

	width:100px;

	line-height:150px;

 }


.left {

	float:left;

 }


.right {

	float:right;

 }


 .p {

	width:100%;

	text-align:center;

 }

<!DOCTYPE HTML>

<html>

	<head>

		<link rel = "stylesheet" type = "text/css" href = "style.css">


		<Title>San Marino Football</Title>

	</head>

	<body>

		<p class="p">

			<img src = "coatofarms.png" class = "badge left">

			<img src = "San-Marino.png">

			<img src = "coatofarms.png" class = "badge right">

		</p>

		<ul>

			<li><a href = index.html>Home</a></li>

			<li><a href = matches.html >Matches</a></li>

			<li><a href = videos.html>Videos</a></li>

		</ul>

	</body>

</html>

when coding html always check that you have opened/closed the right tags ie

<div id="coat"><img src= coatofarms.png width=100px height=100px></p>

          </ul></div>


          <div id="coats"><img src= coatofarms.png width=100px height=100px></p>

          </ul></div>

You have two closed </ul> and </p> but you have not opened the tag this would cause your html to break

Edited July 31, 201313 yr by D4Y0