HTML lists problem with single-line output

Question

Hello. Pretty weird problem. When displaying the list in a horizontal line, it is displayed in my second row. Tell me how to fix this problem? Thank you in advance!

Screenshot of the site with the problem

body { font-family: Verdana, Arial, "Times New Roman"; font-size: 12pt; background-color: #333333; } @media screen and (min-width: 1060px) { body { margin: 0 auto; width: 1060px; } } @font-face { font-family: "Geneva"; src: url("../fonts/Geneva.eot"); src: local('O'), url("../fonts/Geneva.eot?#iefix") format("embedded-opentype"), url("../fonts/Geneva.woff") format("woff"), url("../fonts/Geneva.ttf") format("truetype"), url("../fonts/Geneva.svg#PT Serif") format("svg"); } @font-face { font-family: "Comfortaa"; src: url("../fonts/Comfortaa.eot"); src: local('O'), url("../fonts/Comfortaa.eot?#iefix") format("embedded-opentype"), url("../fonts/Comfortaa.woff") format("woff"), url("../fonts/Comfortaa.ttf") format("truetype"), url("../fonts/Comfortaa.svg#PT Serif") format("svg"); } #logo { background: url(../images/bg_logo.jpg); height: 155px; } #logo #logotype p { padding: 40px 0 0 60px; margin-bottom: -15px; } #logo #logotype .big_letter { font-family: Comfortaa; font-size: 38pt; color: #fff; margin-top: 0; } #logo #logotype .small_letter { font-family: Geneva; font-size: 7.5pt; color: #535353; padding-top: 0; letter-spacing: 2.2px; } #logo #topmenu table { margin: 0 auto; position: relative; top: -80px; left: 2px; padding: 0; } #logo #topmenu table td.topmenu_border_last { border-right: none; } #logo #topmenu table td a { font-size: 10pt; font-family: Verdana; text-decoration: none; color: #616161; vertical-align: text-top; } #logo #topmenu table td { border-right: 1px solid #363636; padding: 0 15px; } #topmenuright { float: right; position: relative; top: -117px; right: -6px; } #search { width: 380px; height: 37px; } #logo #search input { float: left; border: none; } input[type="text"] { width: 263px; height: 36px; padding: 0 37px 1px 15px; background-color: #121212; color: #5d5d5d; font-family: Verdana, Arial; outline: none; border-radius: 7px; font-size: 8pt; } input[type="submit"] { width: 26px; height: 29px; cursor: pointer; margin-left: -37px; background: url("../images/hwsearch_03.png") no-repeat; margin-top: 5px; } #logo #topmenuright table { padding: 0; margin: 0; } #logo #topmenuright table td img { height: 15px; width: 15px; } #logo #topmenuright table td p.tablenadpis { font-family: Verdana, Arial; font-size: 10pt; color: #6e6e6e; padding-left: 5px; vertical-align: text-top; } #logo #topmenuright table td.b1 a, #logo #topmenuright table td.b2 a { border-right: 1px solid #4b4a4a; } #logo #topmenuright table td a { font-family: Verdana, Arial; color: #a9a9a9; font-size: 70%; vertical-align: middle; text-decoration: none; padding: 0 4px; } #mainmenu { height: 43px; background: url("../images/hwbg2_02.jpg") repeat-x; } #mainmenu ul { padding: 0; margin: 0; } #mainmenu ul li { float: left; list-style: none; } #mainmenu ul li a { font-family: Arial, "Times New Roman"; color: #9c9c9c; padding: 11px 15px; text-decoration: none; display: block; font-weight: bold; font-size: 11pt; }

 <body> <div id="logo"> <div id="logotype"> <p class="big_letter">Box&amp;Cube</p> <p class="small_letter">CREATE &amp; INNOVATE SOLUTIONS</p> </div> <div id="topmenu"> <table> <tr> <td> <a href="#"><span>Home</span></a> </td> <td> <a href="#"><span>About</span></a> </td> <td> <a href="#"><span>Contact</span></a> </td> <td class="topmenu_border_last"> <a href="#"><span>Blog</span></a> </td> </tr> </table> </div> <div id="topmenuright"> <table> <tr> <td> <img src="images/hw_03.png" alt="Emblema" /> </td> <td> <p class="tablenadpis">Please subscribe to:</p> </td> <td class="b1"> <a href="#">Posts</a> </td> <td class="b2"> <a href="#">Comments</a> </td> <td> <a href="#">Email </td> </tr> </table> <div id="search"> <form action="#" method="post" id="search"> <input type="text" name="" value="Enter Search Keyword" onblur="if(this.value=='') this.value='Enter Search Keyword';" onfocus="if(this.value=='Enter Search Keyword') this.value='';" class="inputblock" /> <input type="submit" name="" value="" class="submit" /> </form> </div> </div> </div> <div id="mainmenu"> <ul> <li> <a href="#"> <span>WEB PROFESSIONALS</span> </a> </li> <li> <a href="#"> <span>BUSINESS</span> </a> </li> <li> <a href="#"> <span>WEB DESIGN</span> </a> </li> <li> <a href="#"> <span>MEDIA</span> </a> </li> <li> <a href="#"> <span>ENTERTAINMENT</span> </a> </li> <li> <a href="#"> <span>NON-PROFIT</span> </a> </li> <li> <a href="#"> <span>INSTITUTIONS</span> </a> </li> <li> <a href="#"> <span>PORTALS</span> </a> </li> </ul> </div> </body>

Judging by the picture, the menu was inside the block, which ended right in front of the search field.
But in order not to guess, add your HTML code to the question.
What is interesting is that before and after what was added.
So you need to add something from which the menu breaks down.

Accepted Answer · 2016-08-28T21:25:49

Your menu has been limited to the .topmenuright block. The fact that he is upstairs only seems to be, but in fact he has a relative positioning. Therefore, the place that he occupied in the layout, remains occupied. The menu hits this barrier and moves to the second line.

You can put this block first in <div id="logo"> and remove everything from it except float: right; :

 body { font-family: Verdana, Arial, "Times New Roman"; font-size: 12pt; background-color: #333333; } @media screen and (min-width: 1060px) { body { margin: 0 auto; width: 1060px; } } @font-face { font-family: "Geneva"; src: url("../fonts/Geneva.eot"); src: local('O'), url("../fonts/Geneva.eot?#iefix") format("embedded-opentype"), url("../fonts/Geneva.woff") format("woff"), url("../fonts/Geneva.ttf") format("truetype"), url("../fonts/Geneva.svg#PT Serif") format("svg"); } @font-face { font-family: "Comfortaa"; src: url("../fonts/Comfortaa.eot"); src: local('O'), url("../fonts/Comfortaa.eot?#iefix") format("embedded-opentype"), url("../fonts/Comfortaa.woff") format("woff"), url("../fonts/Comfortaa.ttf") format("truetype"), url("../fonts/Comfortaa.svg#PT Serif") format("svg"); } #logo { background: url(../images/bg_logo.jpg); height: 155px; } #logo #logotype p { padding: 40px 0 0 60px; margin-bottom: -15px; } #logo #logotype .big_letter { font-family: Comfortaa; font-size: 38pt; color: #fff; margin-top: 0; } #logo #logotype .small_letter { font-family: Geneva; font-size: 7.5pt; color: #535353; padding-top: 0; letter-spacing: 2.2px; } #logo #topmenu table { margin: 0 auto; position: relative; top: -80px; left: 2px; padding: 0; } #logo #topmenu table td.topmenu_border_last { border-right: none; } #logo #topmenu table td a { font-size: 10pt; font-family: Verdana; text-decoration: none; color: #616161; vertical-align: text-top; } #logo #topmenu table td { border-right: 1px solid #363636; padding: 0 15px; } #topmenuright { float: right; /* position: relative; top: -117px; right: -6px; */ } #search { width: 380px; height: 37px; } #logo #search input { float: left; border: none; } input[type="text"] { width: 263px; height: 36px; padding: 0 37px 1px 15px; background-color: #121212; color: #5d5d5d; font-family: Verdana, Arial; outline: none; border-radius: 7px; font-size: 8pt; } input[type="submit"] { width: 26px; height: 29px; cursor: pointer; margin-left: -37px; background: url("../images/hwsearch_03.png") no-repeat; margin-top: 5px; } #logo #topmenuright table { padding: 0; margin: 0; } #logo #topmenuright table td img { height: 15px; width: 15px; } #logo #topmenuright table td p.tablenadpis { font-family: Verdana, Arial; font-size: 10pt; color: #6e6e6e; padding-left: 5px; vertical-align: text-top; } #logo #topmenuright table td.b1 a, #logo #topmenuright table td.b2 a { border-right: 1px solid #4b4a4a; } #logo #topmenuright table td a { font-family: Verdana, Arial; color: #a9a9a9; font-size: 70%; vertical-align: middle; text-decoration: none; padding: 0 4px; } #mainmenu { height: 43px; background: url("../images/hwbg2_02.jpg") repeat-x; } #mainmenu ul { padding: 0; margin: 0; } #mainmenu ul li { float: left; list-style: none; } #mainmenu ul li a { font-family: Arial, "Times New Roman"; color: #9c9c9c; padding: 11px 15px; text-decoration: none; display: block; font-weight: bold; font-size: 11pt; }

 <body> <div id="logo"> <div id="topmenuright"> <table> <tr> <td> <img src="images/hw_03.png" alt="Emblema" /> </td> <td> <p class="tablenadpis">Please subscribe to:</p> </td> <td class="b1"> <a href="#">Posts</a> </td> <td class="b2"> <a href="#">Comments</a> </td> <td> <a href="#">Email </td> </tr> </table> <div id="search"> <form action="#" method="post" id="search"> <input type="text" name="" value="Enter Search Keyword" onblur="if(this.value=='') this.value='Enter Search Keyword';" onfocus="if(this.value=='Enter Search Keyword') this.value='';" class="inputblock" /> <input type="submit" name="" value="" class="submit" /> </form> </div> </div> <div id="logotype"> <p class="big_letter">Box&amp;Cube</p> <p class="small_letter">CREATE &amp; INNOVATE SOLUTIONS</p> </div> <div id="topmenu"> <table> <tr> <td> <a href="#"><span>Home</span></a> </td> <td> <a href="#"><span>About</span></a> </td> <td> <a href="#"><span>Contact</span></a> </td> <td class="topmenu_border_last"> <a href="#"><span>Blog</span></a> </td> </tr> </table> </div> </div> <div id="mainmenu"> <ul> <li> <a href="#"> <span>WEB PROFESSIONALS</span> </a> </li> <li> <a href="#"> <span>BUSINESS</span> </a> </li> <li> <a href="#"> <span>WEB DESIGN</span> </a> </li> <li> <a href="#"> <span>MEDIA</span> </a> </li> <li> <a href="#"> <span>ENTERTAINMENT</span> </a> </li> <li> <a href="#"> <span>NON-PROFIT</span> </a> </li> <li> <a href="#"> <span>INSTITUTIONS</span> </a> </li> <li> <a href="#"> <span>PORTALS</span> </a> </li> </ul> </div> </body>

Gleb Kemarsky, I did not remove, but added there: height: 1px;
If I remove what you said, how will I lift it and move that block?
@MaksIvasenko The less unexpected tricks, the easier it is to accompany the site.

HTML lists problem with single-line output

1 answer 1

More articles: