nf76 Posted March 16, 2011 Share Posted March 16, 2011 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 More sharing options...
scout1idf Posted March 16, 2011 Share Posted March 16, 2011 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 More sharing options...
nf76 Posted March 17, 2011 Author Share Posted March 17, 2011 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 More sharing options...
scout1idf Posted March 18, 2011 Share Posted March 18, 2011 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 More sharing options...
cousineaug Posted March 18, 2011 Share Posted March 18, 2011 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 boxit 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 cssa: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 More sharing options...
scout1idf Posted March 19, 2011 Share Posted March 19, 2011 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 cssa: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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.