Верстаю сайт на css
Вобщем сижу и не знаю как сделать. Хочу сделать горизонтальное меню над контентом.
Идея такая.
Есть блок фиксированной ширины в нем находятся кнопки, нужно сделать так чтобы кнопки рапределялись таким образом как распределяет таблица свои ячейки по ширине. Вот допустим создаешь ещё один столбец в таблице и все ячейки немного делятся своей шириной для того чтобы пустить новый столбец. Понимаете идею? Вот и я хочу расположить свои кнопки чтобы через уже админку можно было оперативно создавать новые кнопки или удалять и дизайн при этом не страдал. Но проблема в том что я использую прозрачные кнопки и хочу чтобы картинки налегали друг на друга, поэтому таблицы использовать не могу. В таблицах каждая ячейка жестко отделяет backgroand между ячейками. А вот если использовать список + float то можно поставить margin в отрицательных значениях и кнопки будут напрыгивать друг на друга, но вот как сделать такое выравнивание как в таблицах я не знаю... Возможно ли сделать это с помощью свойства float или position или ещё как-то? голову ломаю уже долго
Спасибо
Вот так выглядит меню:
Спустя 1 час, 15 минут, 16 секунд (16.11.2011 - 13:47) inpost написал(а):
position:absolute , и далее просто растояние выставляй 
Спустя 8 минут, 42 секунды (16.11.2011 - 13:55) scar написал(а):
фиксированно получится
Спустя 1 минута, 21 секунда (16.11.2011 - 13:57) inpost написал(а):
scar
да, и?
да, и?
Спустя 21 минута, 41 секунда (16.11.2011 - 14:18) bodja написал(а):
то что вы показали прекрасно верстается и на таблице,просто добавте 2 картинки отступов.
Спустя 1 час, 34 минуты, 52 секунды (16.11.2011 - 15:53) sebastjan написал(а):
Резины с таким бграуедом врядли получеться 
Бгфон кнопки получаеться фиксированный, потому что фон косой,растояние между кнопок тоже фиксированое получается, а значит что ширина ячейки под контент ,будь то таблица или див тоже должны быть фиксированны.
Если фиксировано размер ячеки под кнопку устраивает, то просто -делаешь див, фон кнопки в верх, внутрь ещё один див или спан или сразу[ <a href="" ] со стилем для надписи кнопки,а ниже див с контентом.
Всё позиционируешь жостко как и сказал inpost.
Бгфон кнопки получаеться фиксированный, потому что фон косой,растояние между кнопок тоже фиксированое получается, а значит что ширина ячейки под контент ,будь то таблица или див тоже должны быть фиксированны.
Если фиксировано размер ячеки под кнопку устраивает, то просто -делаешь див, фон кнопки в верх, внутрь ещё один див или спан или сразу[ <a href="" ] со стилем для надписи кнопки,а ниже див с контентом.
Всё позиционируешь жостко как и сказал inpost.
Спустя 9 минут, 25 секунд (16.11.2011 - 16:03) scar написал(а):
да, запарился, но так и сделал. если конечно правильно понял вас. сделал вообще чтобы все кнопки начинались с левой стороны и зафиксировал расстояние между ними. размер кнопок зависит от текста на ней. а вот расстояние справа заполнил заглушечкой. ну вроде более или менее. вообще изначально так и задумывал тока когда задумал не знал что эта штука будет использоваться как заглушечка =)
кстати вопрос. сейчас делаю выпадающее меню. стало просто интересно. написано в статье вот что
кстати вопрос. сейчас делаю выпадающее меню. стало просто интересно. написано в статье вот что
| Цитата |
| left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) |
почему лучше не знаете?
Спустя 5 минут, 21 секунда (16.11.2011 - 16:08) inpost написал(а):
Думаю, что ему так захотелось Захотелось сказать, что так лучше
Захотелось сказать, что так лучше Спустя 4 минуты, 31 секунда (16.11.2011 - 16:13) scar написал(а):
ну он вроде умный
http://ruseller.com/lessons.php?rub=2&id=941
http://ruseller.com/lessons.php?rub=2&id=941
Спустя 1 час, 3 минуты, 58 секунд (16.11.2011 - 17:17) inpost написал(а):
scar
Ну он вроде умный и ссылку на ПОПОВА?! Самого неудачного кодера всего рунета, продвигателя в массы ГОМНОКОДДИНГА?!
Знаешь особенности всех примеров на руселлере? Они работают лишь в 50% случаев и лишь у 50% людей Как ты себе представляешь это в жизни? У этого работает, а у того не работает, у Пети хорошо, а у Даши плохо, и всё, абсолютно всё у него сделано так...
Ну он вроде умный и ссылку на ПОПОВА?! Самого неудачного кодера всего рунета, продвигателя в массы ГОМНОКОДДИНГА?!
Знаешь особенности всех примеров на руселлере? Они работают лишь в 50% случаев и лишь у 50% людей
Как ты себе представляешь это в жизни? У этого работает, а у того не работает, у Пети хорошо, а у Даши плохо, и всё, абсолютно всё у него сделано так... Спустя 26 минут, 20 секунд (16.11.2011 - 17:43) scar написал(а):
50%? что думаете он ксс не правильно объясняет? я посмотрел видео курсы по ксс и хтмл и мне очень понравилось. доходчиво и просто. а что с примером не так? ну я знаю что ксс3 может не у всех будет работать но он это объяснил изначально. не вижу причин осуждать человека
Спустя 5 минут, 12 секунд (16.11.2011 - 17:48) inpost написал(а):
scar
Обойди 50% тем форума и поймешь, почему осуждаем его. Потому что он АБСОЛЮТНО всё неправильно рассказывает.
Сколько надо, чтобы быть профи? Десятки лет, чтобы в среднем понимать язык - пару лет. Его курсы в 2006-2007 годах содержат самые популярные ошибки НОВИЧКОВ, о которых расписывал Котеров в своих статьях ещё в 2003 году. 50% вопросов на форуме, потому что Попов неправильно то, неправильно сё рассказал. Он уже ассоциируется с самым худшим программистом на нашем форуме.
А он объяснил, что статистика показывает, что css3 будет работать только у 25-30% посетителей? А он объяснил о бизнес-политике сайта, когда даже 10% людей, которые не могут работать с сайтом - это плохо? Всё это и многое другое -нет, нет, нет.
Он никогда толком ничего и не умел. Изучил программирование за 10 лекций в университете от дедка какого-нибудь (который изучал ПХП ещё в 2000-х годах) и сразу побежал делать видео-курсы.
Ну и в заключение: да, доходчиво, и просто, но неправильно, абсолютно неправильно
Обойди 50% тем форума и поймешь, почему осуждаем его. Потому что он АБСОЛЮТНО всё неправильно рассказывает.
Сколько надо, чтобы быть профи? Десятки лет, чтобы в среднем понимать язык - пару лет. Его курсы в 2006-2007 годах содержат самые популярные ошибки НОВИЧКОВ, о которых расписывал Котеров в своих статьях ещё в 2003 году. 50% вопросов на форуме, потому что Попов неправильно то, неправильно сё рассказал. Он уже ассоциируется с самым худшим программистом на нашем форуме.
А он объяснил, что статистика показывает, что css3 будет работать только у 25-30% посетителей? А он объяснил о бизнес-политике сайта, когда даже 10% людей, которые не могут работать с сайтом - это плохо? Всё это и многое другое -нет, нет, нет.
Он никогда толком ничего и не умел. Изучил программирование за 10 лекций в университете от дедка какого-нибудь (который изучал ПХП ещё в 2000-х годах) и сразу побежал делать видео-курсы.
Ну и в заключение: да, доходчиво, и просто, но неправильно, абсолютно неправильно
Спустя 51 секунда (16.11.2011 - 17:49) inpost написал(а):
Когда говорят "не у всех" - подразумевают меньшинство от общей массы, а в данном случае лучше сказать "у большинства"
Спустя 4 минуты, 48 секунд (16.11.2011 - 17:54) scar написал(а):
| Цитата |
| А он объяснил, что статистика показывает, что css3 будет работать только у 25-30% посетителей? А он объяснил о бизнес-политике сайта, когда даже 10% людей, которые не могут работать с сайтом - это плохо? Всё это и многое другое -нет, нет, нет. |
да пох. он просто сделал прозрачность ксс3 а сами выпадающие меню работают и так. все что он объяснил в своих курса по ксс - работает и я этим пользуюсь и доволен
Спустя 31 секунда (16.11.2011 - 17:54) scar написал(а):
тока голос задрота у него =)
Спустя 6 минут, 14 секунд (16.11.2011 - 18:00) inpost написал(а):
scar
Ну твой выбор, не хочешь учиться - не надо. Хочешь, чтобы люди не могли на твоём сайте быть - тоже твой выбор.
Когда я учился - мне так не разжевывали...
Ну твой выбор, не хочешь учиться - не надо. Хочешь, чтобы люди не могли на твоём сайте быть - тоже твой выбор.
Когда я учился - мне так не разжевывали...
Спустя 4 минуты, 34 секунды (16.11.2011 - 18:05) scar написал(а):
не ну что там может быть не правильно в ксс там ведь все просто
Спустя 4 часа, 27 минут, 17 секунд (16.11.2011 - 22:32) sebastjan написал(а):
| Цитата |
| не ну что там может быть не правильно в ксс там ведь все просто |
Да уж, молодо зелено.
Сверстай сначало а потом покажешь как всё просто.
Покажи линк на своё творение, может адекватной критикой помогут.
Спустя 2 часа, 10 минут, 21 секунда (17.11.2011 - 00:43) scar написал(а):
я понял понял я мудак. кстати по пхп я книжку читаю Джанета Валейда. для чайников. и после всего что прочитал про попова не собираюсь смотреть больше его уроки. но по ксс узнал основы от него. все таки я сидел и конспектировал его уроки несколько дней и каждый раз он объяснял новые селекторы и атрибуты и показывал на примере всякие фишки и возможности. я понимаю что он делает бабки и объясняет все очень поверхностно.но начальное знание он мне дал. дело в том что с видеоуроков информация усваивается лучше чем с книжки поэтому люди и выгораживают его. это ведь почти то же самое что преподаватель на дому. я не защищаю его не подумайте.
сайт доделаю и покажу. я 2ой день верстаю его, хотя он очень простенький. это ведь попов виноват да? . все таки это мой первый сайт. но как доделаю - покажу.
сайт доделаю и покажу. я 2ой день верстаю его, хотя он очень простенький. это ведь попов виноват да?
. все таки это мой первый сайт. но как доделаю - покажу. Спустя 45 минут, 33 секунды (17.11.2011 - 01:28) inpost написал(а):
scar
Скажу тебе так, я и сам по нём учился, и он мне помог стать программистом. Но но не программист, он такая - фея-мотиватор!
Скажу тебе так, я и сам по нём учился, и он мне помог стать программистом. Но но не программист, он такая - фея-мотиватор!
Спустя 1 час, 43 минуты, 22 секунды (17.11.2011 - 03:12) sebastjan написал(а):
Не знаю какой Попов, вокруг да около всё о нём говорят.Честно говоря не появилось желание смотреть его фильмы, мне как то ближе маны читать, форум отслеживать, у многих участников форума вопросы очень интересные, я по ходу всё в свою копилочку, складываю, переробатываю. А книжек по ЦСС я честно говворя не имел,всё в инети всякие вопросы отслеживаю, НТМЛБУК онлайн постоянно пользуюсь, и постояно нахожу всё новые и новые решения.
А моделировать сам сайт я начинаю с бумаги и карандаша. Продумываю какие будут Бг фоны, как оптимальней использоввать саму графику под сайт чтоб не картинна получилась в мегатонну.
Продумываю какие эфекты применить и где, чтоб было не навязчиво и в тоже время динамично.
Уже правило выробатол, обязательно под старичок ИЕ6 верстать, уж если на нём пошло ,так на всех последущих ИЕ и подавно пойдёт. Ну и конечно фарефокс и опера.
Как на мой взгляд самый прогрессивный способ набить руку, - это ставить перед собой задачу и практически её решать.
Смотря мультики - это не прививаеться, в процессе производства лучше всего.
Успехов в начинании, не забудь показать свою работу.
А моделировать сам сайт я начинаю с бумаги и карандаша. Продумываю какие будут Бг фоны, как оптимальней использоввать саму графику под сайт чтоб не картинна получилась в мегатонну.
Продумываю какие эфекты применить и где, чтоб было не навязчиво и в тоже время динамично.
Уже правило выробатол, обязательно под старичок ИЕ6 верстать, уж если на нём пошло ,так на всех последущих ИЕ и подавно пойдёт. Ну и конечно фарефокс и опера.
Как на мой взгляд самый прогрессивный способ набить руку, - это ставить перед собой задачу и практически её решать.
Смотря мультики - это не прививаеться, в процессе производства лучше всего.
Успехов в начинании, не забудь показать свою работу.
Спустя 9 часов, 49 минут, 11 секунд (17.11.2011 - 13:01) scar написал(а):
спасибо, вот тока не пойму. в ие7 свойство паддинг отличается от остальных браузеров на один 2 пикселя. при отображении страдают многие элементы. даже свойство позишин страдает. сделал шапку новостей а она съезжает на пару пикселей в ие. не знаете как с этим бороться? про ие6 я молчу. тупо поставлю заглушку
Спустя 1 час, 35 минут, 15 секунд (17.11.2011 - 14:36) bodja написал(а):
Учи,учи-одни двойки 
качаем архив,а то показать не начем ,опять хост упал,и смотрим.
Будет работать на растягивание и даже кроссбраузерно.
качаем архив,а то показать не начем ,опять хост упал,и смотрим.
Будет работать на растягивание и даже кроссбраузерно.
Спустя 8 минут, 15 секунд (17.11.2011 - 14:44) sebastjan написал(а):
bodja
Почти супер, осталось сделать одинаковый размер ячейки.
scar Дело конечно вкуса, на мой взгляд кособокое меню-бар самое не наесть недоразумение, ни куда не впишешь, ну если только весь дизайн не перекособочишь.
Да и то так - чтоб как то гармонично колаж смотрелся.
Почитай в инете про виды дизайна, абстракция тоже несёт некоторый психологический отпечаток.
Всё что косое - оно и есть косое.
Почти супер, осталось сделать одинаковый размер ячейки.
scar Дело конечно вкуса, на мой взгляд кособокое меню-бар самое не наесть недоразумение, ни куда не впишешь, ну если только весь дизайн не перекособочишь.
Да и то так - чтоб как то гармонично колаж смотрелся.
Почитай в инете про виды дизайна, абстракция тоже несёт некоторый психологический отпечаток.
Всё что косое - оно и есть косое.
Спустя 6 минут, 23 секунды (17.11.2011 - 14:51) bodja написал(а):
П
| Цитата |
| очти супер, осталось сделать одинаковый размер ячейки. |
Ну говорилось про растягивание.
Если хотим одинаково ,делаем длину по той ячейке ,которая максимальна.
.menu {
height:36px;
width:72px;<<<<<<<<<<вот здесь указываем ширину.
background:url('./bgout.jpg');
text-align:center;
color:#fff;
}
Спустя 2 минуты, 5 секунд (17.11.2011 - 14:53) sebastjan написал(а):
bodja А почему такое вычисление ID + 1 в яваскрипт, мне казалось проще по событию менять адрес картинки для бгфона.
Навёл - получил такой то стиль.
Да - без всяких там критик -всё классно сделал.
Навёл - получил такой то стиль.
Да - без всяких там критик -всё классно сделал.
Спустя 8 минут, 27 секунд (17.11.2011 - 15:01) bodja написал(а):
Мы меняем бгфон самого меню,слева скос и справа скос(посмотрите картинки),идешники -у них разные естественно,вот и вычисляем вызывая для каждого события свою функцию.
Просто для минимализма сделал вызов одних и тех же функций,что бы не копипастить для каждого идешника отдельную функцию.
Просто для минимализма сделал вызов одних и тех же функций,что бы не копипастить для каждого идешника отдельную функцию.
Спустя 1 час, 35 минут, 33 секунды (17.11.2011 - 16:37) scar написал(а):
парни я разобрался с этим =) вы не знаете можно ли в ксс при наведении на объект курсором изменять атрибуты другого? свойство ховер как я понял работает тока внутри самого себя.
адд. с этим тоже разобрался)
теперь проблема тока с инетэксполером. не могу понять почему он двигает границы
адд. с этим тоже разобрался)
теперь проблема тока с инетэксполером. не могу понять почему он двигает границы
Спустя 4 часа, 14 минут, 50 секунд (17.11.2011 - 20:52) scar написал(а):
пишу в в коде
разница между ие и остальными браузерами примерно в 2 пикселя, хотя если убрать значение полностью то есть не писать топ то разницы нету. почему так?
position:absolute;
top:0;
разница между ие и остальными браузерами примерно в 2 пикселя, хотя если убрать значение полностью то есть не писать топ то разницы нету. почему так?
Спустя 1 час, 22 минуты, 28 секунд (17.11.2011 - 22:14) sebastjan написал(а):
| Цитата (bodja @ 17.11.2011 - 12:01) |
| Мы меняем бгфон самого меню,слева скос и справа скос(посмотрите картинки),идешники -у них разные естественно,вот и вычисляем вызывая для каждого события свою функцию. Просто для минимализма сделал вызов одних и тех же функций,что бы не копипастить для каждого идешника отдельную функцию. |
Я почему спрашиваю про такую конструкцию, меня эта тема раньше интересовала, но немного в другом плане.
Вот конструкция укороченной функции и смена стилей у двух одновременно блоков.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>xxxxxxx</title>
<style>
#aaa{height: 100px;width: 100px;background-color: #0099CC;}
#bbb{background-color: #6699FF;height: 100px;width: 100px;}
</style>
</head>
<body>
<div id="aaa"></div>
<br><br>
<div id="bbb"></div>
<br><br>
<a href="#" onMouseOver="ccc()">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
</body>
</html>
<script>
function ccc(){
document.getElementById('aaa').style.background="#033786";
document.getElementById('bbb').style.background="#033786";
}
</script>
Но меня всегда мучал другой вопрос в этой теме, искал в инети но не нашол - а именно
- почему то нельзя применить сразу два АйДи через запятую
getElementById( 'aaa' , 'bbb' )
Срабатывает только первый АйДи. Вот и прихлдиться писать в функции два раза.
Спустя 14 минут, 51 секунда (17.11.2011 - 22:29) bodja написал(а):
| Цитата |
| свойство ховер как я понял работает тока внутри самого себя |
И не только,и в ИЕ это свойство тоже работать не будет.
| Цитата |
| почему то нельзя применить сразу два АйДи через запятую getElementById( 'aaa' , 'bbb' ) |
Потому что getElementById - это функция,а функции можно передать несколько аргументов,а вернуть она может только одно значение.
getElementById возвращает ссылку на элемент.
Спустя 26 минут, 13 секунд (17.11.2011 - 22:55) sebastjan написал(а):
bodja Но фигня какая то получаеться, было хорошо еслиб можно было обработать два
значения в этой функции.
Кода было бы ещё на пловину меньше.
Ну это так мысли вслух.
значения в этой функции.
Кода было бы ещё на пловину меньше.
Ну это так мысли вслух.
_____________
ай кенн ту зэ ооорфф оо май факиин оооррфф факин стайл лайк ююю!! энд барии тутутут вретмияндеерр. . ес май соллл ес май солллл ту би и ес коллдд ес май солл ес май солллллллллл мээээрриии!!!!!!!!!
я сейчас приду и убью тебя.
вот прямо сейчас приду и убью тебя!!!!!
-давай еби его. вот так, да. еби его.