Jump to content
  • 0

Выравнивание по центру блока плавающей ширины


ittsam
 Share

Question

Совершенно никак и никогда не был связан с версткой, а теперь понадобилось сделать простое, легкое и понятное решение для сайта маленькой конторки. Точнее не сделать, а показать что оно существует, дабы проект отдали нормальному верстальщику и дали на это денег.

Проблема (решена): сделать блок с кнопками выровненным по центру. При разных разрешениях в нем может быть как 8 кнопок в ряд, так и 2-3.

Спасибо:

Морда сайта представляет из себя:

Шапку:

Название, основные контактные данные, микроменю с двумя пунктами "Прайс-лист, контакты" (тоже сделал).

Основной блок:

набор кнопок 180х130 px. Каждая кнопка - понятная пользователю товарная категория ("пылеварки", "кофесосы", "стиральные камеры", "холодильные машины") с надписью и пиктограммой/иконкой (вот это точно буду не я рисовать). Кнопки в хвосте эволюции - ссылки на "договора", "статьи" и прочий не сразу нужный хлам контент. Иногда компания закупает слишком большие партии "подиумом для туалетных комбайнов" и пытается их продать побыстрее и подешевле. Для этого в основное меню (первая, четвертая, и т.д.) ручками подмешиваются кнопки "специальных предложений" которые состоят только из текста и выделяются цветом, например: "Только вчера 300 гиперштук за 100 рублей".

Подвал: всякая фигня, типа копирайтов, счетчиков и прочего.

Проблема №2(решено): Теперь начал распихивать контент, и получил странный эффект. В стандартных элементах меню (картинка+подпись) все нормально, а вот там где нет картины - кнопки специальных предложений, все куда-то едет. Расскажите, плз, в какую сторону думать? Что читать, с какой проблемой столкнулся?

needhelpe.png

Спасибо:

решение простое: на класс menuitem навешиваем


.menuitem {
display: inline-block;
vertical-align: top;}

Все это крутиться одним файлом (HTML включая стили) тут http://testalldiz1.ucoz.ru/index.html

Edited by ittsam
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Слушайте, я могу решить вашу проблему. Только напишите почему рекламные агенства представляют себя как Г.?

Да я уверен, что вы из провинции, на пример, но это не значит, что это нормально. Каждый день моя поездка в университет это борьба самим с собой, так и хочется вырвать себе глаза.

p.s. накипело.

Link to comment
Share on other sites

  • 0

у меня так получилось: пример код

извиняюсь, не так вопрос понял, чтобы при разном размере экрана было разное количество ячеек - нужно с float: left шаманить, на это времени нет уже =)

Edited by Николя223
Link to comment
Share on other sites

  • 0

Слушайте, я могу решить вашу проблему. Только напишите почему рекламные агенства представляют себя как Г.?

нука- нука, расшифруй =) что значит как Г ?? =))

Link to comment
Share on other sites

  • 0

Благодарю! Сделалось :)

Слушайте, я могу решить вашу проблему. Только напишите почему рекламные агенства представляют себя как Г.?

Да я уверен, что вы из провинции, на пример, но это не значит, что это нормально. Каждый день моя поездка в университет это борьба самим с собой, так и хочется вырвать себе глаза.

p.s. накипело.

Т.к. это явный офтопик, то вы в личку напишите, что вы имеете ввиду под "представляют себя как Г." Я вам все честно объясню, независимо от того, поможете или нет.

Edited by ittsam
Link to comment
Share on other sites

  • 0

я когда вам пробник верстал с тойже самой проблеммой столкнулся.

решение простое: на класс menuitem навешиваем


.menuitem {
display: inline-block;
vertical-align: top;}

Большое спасибо. Даже сформировалось понимание того, как это работает.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy