Hi everyone,
I am learning css now and when i am trying to apply navigation bar with css only I have 2 problems:
1- text inside box goes out of box does not wrap
2-text inside box is not in center so there is space in top & bottom of box
here is my css code:
ul
{
list-style-type:none;
float:left;
width:100%;
padding:0;
margin:0;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#;
background-color:#fff;
width:120px;
height:60px;
text-align:center;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
border-style:outset;
border-color:#fof8ff;
margin-left:2px;
margin-right:2px;
padding:4px;
color: #Ffd700;
}
a:hover,a:active
{
color:#000000;
background-color:#E9967A;
border-style:inset;
}
and here is my html code:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css button
style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
</head>
<body>
<ul>
<li><a href="homepage.html" target="_blank">home</a> </li>
<li><a href="rooms.html" target="_blank">rooms</a> </li>
<li><a href="plan.html" target="_blank">Plan Meetings & Events</a></li>
<li><a href="services_amenities.html" target="_blank">Services & Amenities</a> </li>
<li><a href="aboutdestination.html" target="_blank">About Destination</a> </li>
<li><a href="reservation.html" target="_blank">Reservation</a>
</li>
</ul>
</body>
so what have i done wrong? what is missing?help me
3 Votes


Answers