Кнопки на CSS
Помогите кто-нибудь сделать кнопки только на CSS, желательно без использования таблиц :) http://gero.in надо чтобы было так, только на CSS а не на JS, JS код генерировала программу SourceTec Sothink DHTMLMenu, код ужасен и монстроиден, да, может он конечно и сойдет для каких-нибудь навороченных выпадающих меню, но меня такой расклад совсем не устраивает. Вот если пригодиться, жалкие потуги сделать что-то:
http://gero.in/test_menu.html и http://gero.in/test_menu2.html. Разумеется такой ужас ведет себя во всех браузерах по разному :( Во втором примере я просто попытался использовать стиль применительно к a (IE же не любит hover для других элементов) :mad:
Спасибо большое, если кто-то сможет помочь!
http://gero.in/test_menu.html и http://gero.in/test_menu2.html. Разумеется такой ужас ведет себя во всех браузерах по разному :( Во втором примере я просто попытался использовать стиль применительно к a (IE же не любит hover для других элементов) :mad:
Спасибо большое, если кто-то сможет помочь!
Цитата: dukzcry
только на CSS а не на JS
Встречный вопрос: как ты себе планируешь обрабатывать нажатие на кнопку без JS? Есть конечно мегаизвращенческий вариант каждую кнопку делать сабмитом и садить в отдельную форму, но это просто кошмарный вариант.
И еще: какое отношение к кнопкам имеют таблицы?
Короче, я не знаю зачем ты все сделал таким образом, но лучше все переписать - потом меньше проблем будет.
Цитата: shine
Встречный вопрос: как ты себе планируешь обрабатывать нажатие на кнопку без JS? Есть конечно мегаизвращенческий вариант каждую кнопку делать сабмитом и садить в отдельную форму, но это просто кошмарный вариант.
И еще: какое отношение к кнопкам имеют таблицы?
Короче, я не знаю зачем ты все сделал таким образом, но лучше все переписать - потом меньше проблем будет.
И еще: какое отношение к кнопкам имеют таблицы?
Короче, я не знаю зачем ты все сделал таким образом, но лучше все переписать - потом меньше проблем будет.
Обрабатывать нажатия? Вы про смену бэкграунда кнопки в зависимости от того, на какой странице находишся? Мне это не нужно.
Цитата: dukzcry
Спасибо большое, если кто-то сможет помочь!
чем помочь то? не вижу постановки задачи. только паника )
на-ко вот, посмотри:
Цитата: foxweb
чем помочь то? не вижу постановки задачи. только паника )
на-ко вот, посмотри:
на-ко вот, посмотри:
Проблему я описал, у меня не получается сделать также как при JS, то цвета накладываются, то едут, даже с вашим примером
Цитата: dukzcry
Помогите кто-нибудь сделать кнопки только на CSS, желательно без использования таблиц
Да пожалуйста. Только кнопки пришлось сделать фиксированной ширины.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color:#222222;
color: #fff;
width: 100%;
}
div#header {
color: #fff;
background-color: #057;
}
div#topnavwrp {
width: 100%;
height: 20px;
color: #fff;
background-color: #222;
overflow: hidden;
}
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
}
ul#topnav li {
float: left;
}
ul#topnav li a {
display: block;
height: 20px;
width: 76px !important;
white-space: nowrap;
text-align: center;
font-family:Arial;
font-size:8pt;
color:white;
background-color: #222;
text-decoration:none;
border-left: 1px solid #444444;
border-bottom:1px solid #000000;
border-top:1px solid #212121;
border-right:1px solid #000000;
margin: 0;
padding: 2px 0 0 0;
}
ul#topnav li a.last {
border-left: 1px solid #444444;
border-bottom:1px solid #000000;
border-top:1px solid #212121;
border-right: none;
}
ul#topnav li a:hover {
color: #fff;
background-color:#005577;
border-left: 1px solid #006598;
border-bottom: 1px solid #005577;
border-top: 1px solid #006598;
border-right: 1px solid #003265;
}
div#header h1 {
clear: both;
font-family: Georgia,'Times New Roman',Times,serif;
font-size:48px;
font-weight: normal;
line-height:70px;
margin: 0;
padding: 0 0 0 5%;
}
div#header p {
border-bottom:#000 1px solid;
line-height:2em;
margin: 0;
padding: 0 0 0 5%;
}
</style>
</head>
<body>
<div id="header">
<div id="topnavwrp">
<ul id="topnav">
<li><a href="#">Главная</a></li>
<li><a href="#">Навигация</a></li>
<li><a href="#">TODO</a></li>
<li><a href="#">Творчество</a></li>
<li><a href="#">Почта</a></li>
<li><a class="last" href="#">Об авторе</a></li>
</ul>
</div>
<h1>ГЕРО.ИН</h1>
<p>самосовершенствование как наркотик</p>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color:#222222;
color: #fff;
width: 100%;
}
div#header {
color: #fff;
background-color: #057;
}
div#topnavwrp {
width: 100%;
height: 20px;
color: #fff;
background-color: #222;
overflow: hidden;
}
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
}
ul#topnav li {
float: left;
}
ul#topnav li a {
display: block;
height: 20px;
width: 76px !important;
white-space: nowrap;
text-align: center;
font-family:Arial;
font-size:8pt;
color:white;
background-color: #222;
text-decoration:none;
border-left: 1px solid #444444;
border-bottom:1px solid #000000;
border-top:1px solid #212121;
border-right:1px solid #000000;
margin: 0;
padding: 2px 0 0 0;
}
ul#topnav li a.last {
border-left: 1px solid #444444;
border-bottom:1px solid #000000;
border-top:1px solid #212121;
border-right: none;
}
ul#topnav li a:hover {
color: #fff;
background-color:#005577;
border-left: 1px solid #006598;
border-bottom: 1px solid #005577;
border-top: 1px solid #006598;
border-right: 1px solid #003265;
}
div#header h1 {
clear: both;
font-family: Georgia,'Times New Roman',Times,serif;
font-size:48px;
font-weight: normal;
line-height:70px;
margin: 0;
padding: 0 0 0 5%;
}
div#header p {
border-bottom:#000 1px solid;
line-height:2em;
margin: 0;
padding: 0 0 0 5%;
}
</style>
</head>
<body>
<div id="header">
<div id="topnavwrp">
<ul id="topnav">
<li><a href="#">Главная</a></li>
<li><a href="#">Навигация</a></li>
<li><a href="#">TODO</a></li>
<li><a href="#">Творчество</a></li>
<li><a href="#">Почта</a></li>
<li><a class="last" href="#">Об авторе</a></li>
</ul>
</div>
<h1>ГЕРО.ИН</h1>
<p>самосовершенствование как наркотик</p>
</div>
</body>
Ну спасибище вам огромное :-) Прям спасли!
ничё не понял! всё смотрел на всех браузерах. всё одинаково, всё работает. мне как пользователю всё понравилось.
хотя конечно лестно, что всё больше и больше людей переходят на цивилизованную вёрстку, вылзывают всё до байта и стало одним качественно сделанным сайтом больше ) пятёрка за стремление!
хотя конечно лестно, что всё больше и больше людей переходят на цивилизованную вёрстку, вылзывают всё до байта и стало одним качественно сделанным сайтом больше ) пятёрка за стремление!
Недавно лазил в инете, наткнулся на сервис по созданию кнопок на css вот адрес http://webcity.bz/servis/button-maker пользуйтесь.))
Хреновый какой-то сервис, бегунки не работают, выбор цвета не работает. Вам похоже самому не мешало бы подучить CSS и JS
не, кстати в хроме всё работает))) и бегунки, и выбор цвета)
только при активации кнопки и при наведении цвет статичный, хорошо бы было тоже градиент))
в плане кнопок гораздо полезнее (правда без автоматики) http://www.rusdigi.org/css3/6-poleznykh-css-knopok.html там есть поинтереснее варианты
только при активации кнопки и при наведении цвет статичный, хорошо бы было тоже градиент))
в плане кнопок гораздо полезнее (правда без автоматики) http://www.rusdigi.org/css3/6-poleznykh-css-knopok.html там есть поинтереснее варианты
В хроме работает, а в опере не работает.