HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ margin: 0px; padding: 0px; background: #4c4c4c; } a{ color: #FFFFFF; } a:hover{ text-decoration: none; } div.li{ position:relative; background: #00AA00; width:100%; height:40px; } div.li1{ position:absolute; left:25%; top:0px; border: 3px solid #FFFFFF; background: #000000; } div.li2{ left:40%; top:10px; position:absolute; border: 3px solid #FFFFFF; background: #000000; } </style> </head> <body> <div class="li"> <div class="li1"> <a href="#">Новости</a> </div> <div class="li2"> <a href="#">Книги</a> </div> </div> </body> </html>
Очень большое спасибо, но остаеться одна проблема. Нужно чтоб кнопки вместе находились на одном и том же горизонтальном уровне.
Вот такой тогда вариант: HTML: <html> <head> <style> body{ margin: 0px; padding: 0px; background: #4c4c4c; } a{ color: #FFFFFF; } a:hover{ text-decoration: none; } div.li{ position:relative; background: #00AA00; width:100%; height:40px; } div.li0{ position:absolute; left:40%; top:10px; } div.li1{ height:26px; display:inline; margin-right:6px; border: 3px solid #FFFFFF; background: #000000; } div.li2{ height:26px; display:inline; border: 3px solid #FFFFFF; background: #000000; } </style> </head> <body> <div class="li"> <div class="li0"> <nobr> <div class="li1"> <a href="#">Новости</a> </div> <div class="li2"> <a href="#">Книги</a> </div> </nobr> </div> </div> </body> </html>
