Cssing »архив - сепаратори в менюто

Доста често, на практика има меню табулатори са - например:

За да научите как да се направи меню с най-малко валиден HTML код, и той ще отиде по-далеч.

HTML очевидно за тези структури е неподреден списък UL, това е така:

  1. основен | новини | указател | оценка

Както обикновено се прави

Обикновено, за да получите резултата - това е, менюто с вертикалните разделителите, трябваше да питам наляво (или надясно) граница за всеки елемент (тук аз пропуснете код меню позициониране, то е в примерите):

Така че ние получите нещо подобно:

Не е точно това, което трябва, тъй като разделители и сепаратори на факта, че за да бъдат само между точките, а сега те са просто от лявата страна на всеки елемент. Преди това, проблемът е решен за мен, за да вмъкнете клас за първа точка:

И след това добавяне на правило:

И всичко изглежда да се работи както трябва. Но. И двата подхода (с клас = "първите" и с текстови разделители "|") изисква от нас да генерира асиметрични елементи - това е необходимо да се прави разлика между първия и на останалата част от LI.

Проблем (мързелив)

От менюто ми генерира двигател, вмъкването на този клас би трябвало да промените кода на двигателя, и се изкачи обратно бях твърде мързеливи. От това се роди като решение да направи такива пломби без да се поставя на всички категории и работи само с обичайната списъка.

Идеята е проста като 5 цента. Ето целия код:

  1. #nav
  2. препълване: скрит; / * каквото и UL протегна към съдържанието носят всички браузъри освен IE, както и за нашата "прекъсването" * /
  3. ширина: 100%; / * какво да UL протегна към съдържание IE, с много Номерът е косвено свързана * /
  4. >
  5. #nav Li
  6. марж-наляво: -1px; / * измести всички елементи от лявата * /
  7. >

Долната линия е това. Зададохме преливане: скрит за UL - така че всичко, което е извън UL блок няма да бъде показан. Зададохме марж-наляво: -1px за всички елементи от списъка, който е първият елемент ще бъде пусната на 1 пиксел извън елемента UL, но това просто ще бъде първият злополучния допълнително разделител! Всички други дистанционните остават в случая - тъй като не се простира отвъд блока. И първият е скрита. Резултатът:

Вижте пример

Същата идея, само с подмяна с гранично-отгоре и марж-нагоре: -1px работата за такова меню:

Вижте пример
Освен това такъв метод може да се използва за графика и сепаратори. Независимо дали те са дори по-дебел от един пиксел - просто трябва да попитам още отрицателен списък тире предмети. Така че тя работи за сепаратори под формата на снимки.

Въпреки, че на рецепцията и доста uzkoprimenimy, но аз спестено време, и ми хареса идеята. Тествано и работи във всички браузъри ми vindoshnyh (IE5-7, FF, Opera). Мисля, че работи навсякъде.

Аз ще се радвам да чуя вашето мнение или техники, които се използват!

Вашият нахален наистина :))

Строго погледнато:
а). Аз не правя това :)
б). Ако елементът е малък, наистина най-добре чрез «|», особено когато става въпрос за вторична информация (виж старата browsing.ru колонтитул.).
в). Стилове изглежда не по-зле :)

Аз все още се създаде грешната акцент. Въпросът не, че се използва за не "циничен", но фактът, че изпълнението на циничен вариант в този случай не е по-лесно от този клас = "първи" е. В двигателя, искам да кажа.
Ако направите списък на това, което казвам - всички елементи са получени симетрично идентични. И в "циничен" версия все пак ще трябва да се прави разлика, когато първия и последния ден в двигателя, която не би стоеше на ръба | ...

"Разбира се, ако ние глупаво и цинично нарязани бихме могли да напиша нещо като плячка ..."))))))))

Браво! Публиката в страхопочитание!
Особено приятен за които можете да работите с beggraundami, но все пак интересно поплавъка: ляво, вместо обичайната дисплея: инлайн, макар че този трик работи с дисплей-инлайн, това е само възможност да играе с публиката Гранична propadaet.Esche време със страхопочитание :)

UPD: да не си играе с границата и с пълнеж на горната и долната част

Оригинален! Тя отдавна се бореше с това! Сега ще по-умен :))

Хм, интересен подход, но ако трябва да направя, уплътнения по-малко от височината на блока, а след това тази опция няма да работи = \

1) височината на блока, в този случай неясно - попитайте уплътнение на върха ще бъде по-малък и по-малък ръст. Но ако искаш да кажеш на височината на шрифта 2)
2) да използват фоновото изображение - ако това е един пиксел широк - подходът е напълно ролка. Повече пиксели? Повече марж-наляво: -X

Струва да се каже?

Maladeeets ах, сега знам колко бързо I "умира" пансионери градиент правят за новото меню и без пара, senks.

Да, да се присъединят зигзаг - обикновено искам на границата не е височината на границите, и по-малката и по-спретнат. Но начинът, по който аз се опитах веднъж.

Благодаря ви за начина, по който. Аз самият се сблъскаха с проблема на няколко пъти, но винаги правила за това HTML. Сега вече знаем.

Почти Offtopic: не ", ще трябва да" и "ще го направя." )

Така че винаги правя този трик ми изглежда очевидно. )

2Mourner: Да, без съмнение, това е просто - но ми харесва някаква елегантност, че дали тази идея. Какво е нещо в него. И както можете да видите, че не знаем всичко. Аз за обмяна на опит;)

2Michael Yakovis: За малък artinok трябва да работи без никакви граници и фонови изображения - но техниката изглежда не особено се крепи именно на границата. Просто замени границата вляво на заден план: .... 0 до 50%. И този трик се прави.

2Strannik: Благодаря ви! Наистина палав! Коригирана.

Наистина абсолютно прозрачен начин, в такава молба, тогава защо не мисля, че навън, въпреки че понякога може да стане по-лесно, благодаря.
И сега, за да потвърдите всички по-горе предложение за римейк менюто намира в долната част на блога на "не глупав чужбина Разделение тесто # долния> р> а", а обяви;)

Всички смятаха, че който е първият затворник :)

Аз просто имам фобия от някакъв вид развита - за една година не се променя всеки CSS или HTML в блога си. Само тогава крив ... перфекционизъм веднага ме унищожи :)

Точно в началото на това, че е точно това малко средно и не генерирани от двигателя от менюто

но версията с "|" табулатори и CSS3 съвет:
добри браузъри:

Бих CSS2 цена:
#nav> Li + Li
:)
Но благодаря за inteersno вариант за IE)

препълване: скрит като оформлението на страницата инструмент - дори и нещо полезно. ;-)

Въпреки това, сте забравили _polozhitelnom_ поле на противоположната страна на всеки елемент от списъка - за компенсиране на циклични елементи на смени и свързаното с "снопове" ги един до друг:

Супер идея! Особено като "автоматично" отнемат допълнителните дистанционните отляво в случая, ако връзките не се побират на един ред. Това не се постига нито какво CSS3!
5+

MT: Благодаря за върха! Аз презирам един пиксел :)

> Как да направите меню с минимум валиден HTML код

Подадох за дълго време: това е "правилния код, което е малко" или "минимално правилен код"?

Вероятно трябваше pisanut:
"Колкото е възможно с най-малко право"
:-)

как да се изравнят хоризонталното меню в дясно. /

плаваш: точно за LI
или
езика: Пътека за LI
и текст-приравни: право на UL
или
поплавък: ляво за LI
и плава: точно за UL

да. мързел е проблем на всички проблеми.

SW. Seryoga мързел е двигател на прогреса, ако хората, поради мързел не са се опитвали всеки възможен начин да се опрости работата си по никакъв напредък средство е спряло ... :)

Да, доста добро меню. Но много често е необходимо да се направи хоризонтална меню с падащ списък, но с него и имат проблеми. Валидност постигне възможно, но адекватна работа във всички браузъри - почти няма. Ние трябва да избере една от следните две неща - или валидността или нормална работа. Лично аз избирам втората опция.

и думата "мързелив" - това не е акроним: P

И само много интересна, тя винаги се използва за присвояване на клас на първия параграф)

Не казвам, че аз съм консервативен, но ако шаблона на сайта на двигателя е налице, тогава е по-добре да се използва допълнителен клас, както tolok в този случай, ако в менюто не съдържа porosto сепаратор. Като цяло, винаги използвайте един клас, защото Тя може да се чете и по-гъвкав.

Как това меню, за да се приведе в центъра на страницата за всички браузъри?
По-специално за IE6?

За FF, Safari Opera'y и аз го направих така:

ул дисплей: маса;
марж: 0 автомобил;
>

Li езика: вградени;
марж: 0 1px 0 -1px;
>

IE започва да се проявява в първия сепаратор елемент от менюто :(

Разтворът е много елегантен
Код семантично верен

Благодаря ви, често използвате тази опция

Отличен. Аз отдавна исках да се научите как да се направи това, без преди това и продължи Ли.

Всичко това е добре. Но какво, ако сепараторите трябва да бъде графичен? Мислех, и си помислих, как да се направи, и засега само с една ужасна нарушение на семантика нещо нагоре).

Уф, съжалявам, inattentively чета.

Благодарим Ви! Помогна. Спред решението:

Хоризонтална Меню | центрирано | с вертикални разделители

#navBox плава: ляв;
левия: 50%;
позиция: относителна;
>

#navBox ул позиция: относителна;
левия: 50%;
плаваш: ляв;
списък стил: няма;
марж: 0;
подложка: 0;
препълване: скрит;
>

#navBox Li поплавък: лява;
гранично-ляво: 1px # 000 вещество;
марж ляв: -1px;
марж-нагоре: 1px;
уплътнение. 3em 1em;
>

#navBox цвят: # 000;
текстови декорация: няма;
шрифт тегло: удебелен шрифт;
>


  • основен

  • новини

  • указател

  • оценка

    • Какво byaka обърна Уф. Юра, можете да направите моя HTML, за да се види? И тогава той не знае какво се е случило фиг.

    Иска ми се един пингвин, защото не мога да разбирам нищо от това

    Е, ако искам да направя сепараторите под формата на наклонена черта, а не по права линия:
    Начало / Новини / Каталог / Рейтинг
    После се оказва, че вече не трикове са безполезни и рамки и полета? И това е един циничен хак плячката, както се вижда в началото на Великия пост.

    Е, в зависимост от ситуацията, можете да използвате едно от следните: след (той заменя с IE просто израз) Така или наклонена черта фоново изображение или педя с наклонена черта - това също може да бъде скрита чрез преливане.

    И това, което може да се направи тук, тези линии (граница: 1px твърдо сиво) ITEM | ITEM | ITEM
    Сега тези: | ,
    Как могат да бъдат от тази ситуация и да направи по-малко в средата?
    ако поставите такава височина литиево: 10px, а след това те намаляват, но остават в горната част.

    т.е. размер намаляване border1px по височина и да се уеднакви в средата

    [...] Ето един друг интересен подход: [...]

    [...] Ето един друг интересен подход: [...]

    като цяло, можете да използвате ли: първо дете, но и за Internet Explorer е функция се поддържа от версия 9

    като цяло, можете да използвате ли: първо дете, но и за Internet Explorer, този хотел се поддържа от версия 9 :)

    Между другото това, което е блогът ви е интересно и че понякога има хакове, които ще работят не само на по-стари браузъри, но и за новите. Този хак като всичко работи като стандарт описва. И въз основа на някои от тях, можете да се сетите и повече, но за съвременни браузъри бъгове (които, за съжаление, уви, са били, са и ще бъде)

    Говоря за грешки, ако чо, не за браузъри (браузъри, които точно ще съжаляват и нищо) =)

    последните 5