Jump to content

css navigation bar ...still learning & have questions with my application of it


nf76
 Share

Recommended Posts

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 wrap2-text inside box is not in center so there is space in top & bottom of boxhere 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

Link to comment
Share on other sites

Try this. The only thing I changed (besides putting the style sheet in the document) was a strict doctype. The doctype you posted is incomplete, I assumed it's a copy and paste error.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type='text/css'>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;}</style><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></html>

Edited by scout1idf
Link to comment
Share on other sites

Thanks but that does not solve the 2 issues i mentioned above.

Try this. The only thing I changed (besides putting the style sheet in the document) was a strict doctype. The doctype you posted is incomplete, I assumed it's a copy and paste error.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type='text/css'>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;}</style><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></html>

Link to comment
Share on other sites

Something for you to try.....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type='text/css'>ul{list-style-type:none;float:left;width:100%;padding:0;margin:0;}li{float:left;}[color="#FF0000"].single{line-height: 3.75em;}.double{line-height: 1.75em;}[/color]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;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Untitled Document</title></head><body><ul>[color="#FF0000"]<li class='single'>[/color]<a href="homepage.html" target="_blank">home</a> </li>[color="#FF0000"]<li class='single'>[/color]<a href="rooms.html" target="_blank">rooms</a> </li><li><a href="plan.html" target="_blank">Plan Meetings & Events</a></li>[color="#FF0000"]<li class='double'>[/color]<a href="services_amenities.html" target="_blank">Services & Amenities</a> </li>[color="#FF0000"]<li class='double'>[/color]<a href="aboutdestination.html" target="_blank">About Destination</a> </li>[color="#FF0000"]<li class='single'>[/color]<a href="reservation.html" target="_blank">Reservation</a></li></ul></body></html>

It worked for me...

Link to comment
Share on other sites

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 wrap2-text inside box is not in center so there is space in top & bottom of box
it is not necessary to code for single and double line entries - this can get tedious and prone to errors. Instead, you resort to displaying like TABLE CELLS whicha llow vertical centering.Just one change in your css
a:link,a:visited{display:table-cell;	/*was display block*/font-weight:bold;etc...

should do the trick.I also noticed that you did not assign a colour to the border on a:active. This lets each browser assign an arbitrary colour based on "unknown" parameters...possibly inherit.which brings me to the other problemborder-color:#fof8ff;your colour name has an o instead of a zero. This also leads to inconsistencies among browsers..Good Luck.......Guy

Link to comment
Share on other sites

it is not necessary to code for single and double line entries - this can get tedious and prone to errors. Instead, you resort to displaying like TABLE CELLS whicha llow vertical centering.Just one change in your css
a:link,a:visited{display:table-cell;font-weight:bold;color:#;background-color:#fff;width:120px;[color="#FF0000"]height:75px;[/color] etc....

And thanks Guy Cousineau for the tip about "display:table-cell;". I never noticed that option before. (still learning myself)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...