Jump to content
  • 0

Нужно сделать таблицу на странице


Dimkar
 Share

Question

Всем привет ;) Только начал создавать landing page. Опыта мало - пришел к вам) :unsure: такая проблема: хочу на странице сделать некий каталог продукции моей. 

Вот что-то похожее:

 Eqrlqrcwp7w.jpg

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

-картинка

-название

-цена

То есть каждый элемент находится под другим по центру ячейки. Далее, хочу сделать такое: при наведении на любую картинку каким-то образом красиво появляется какая-нибудь лупа или еще что-то. При нажатии на !ВСЮ ЯЧЕЙКУ!(будь то цена либо картинка), вылазит всплывающее окно уже с моим написанным текстом(хочу там разместить чутка побольше инфы о товаре и картинку побольше, а может и вообще туда еще пару фотографий товара). Вот вроде все. 

Подскажите, пожалуйста, как это сделать всё? Очень благодарен буду))

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Ну создавай список ( UL LI ), картинке задай max-width: 100% от её родителя (li у тебя явно фиксированной ширины, вот под неё и будут изображения подгоняться)

Что бы всё было по центру - задай блоку, где они находятся - text-align:center. Что бы было одно под другим - либо окружи их блочным элементом (например параграф <p>), либо span (и укажи в стилях им display: block;) или на худой конец вставь, куда нужно тег переноса строки <br>

 

Пока сделай хоть это.:)

Link to comment
Share on other sites

  • 0

Ну создавай список ( UL LI ), картинке задай max-width: 100% от её родителя (li у тебя явно фиксированной ширины, вот под неё и будут изображения подгоняться)

Что бы всё было по центру - задай блоку, где они находятся - text-align:center. Что бы было одно под другим - либо окружи их блочным элементом (например параграф <p>), либо span (и укажи в стилях им display: block;) или на худой конец вставь, куда нужно тег переноса строки <br>

 

Пока сделай хоть это. :)

Мне нужно это все сделать на пустой странице. Как? 

Это не через таблицу делается?

То, как делать текст по центру и после картинки я понял, спасибо. Но вот как вообще для начала сделать 5 строк допустим с 4 столбцами? А дальше уже запихать то, что нужно в конкретные ячейки. Можно так сделать? И размеры еще ячеек может чтоб подгонялись по экрану зашедшего автоматически (может как-то в процентах от экрана). Помогите пожалуйста сначала с этим. У меня вот пустая страница, нужно (выше)

Спасибо)

Link to comment
Share on other sites

  • 0

Всем привет ;) Только начал создавать landing page. Опыта мало - пришел к вам) :unsure: такая проблема: хочу на странице сделать некий каталог продукции моей. 

Вот что-то похожее:

 Eqrlqrcwp7w.jpg

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

-картинка

-название

-цена

То есть каждый элемент находится под другим по центру ячейки. Далее, хочу сделать такое: при наведении на любую картинку каким-то образом красиво появляется какая-нибудь лупа или еще что-то. При нажатии на !ВСЮ ЯЧЕЙКУ!(будь то цена либо картинка), вылазит всплывающее окно уже с моим написанным текстом(хочу там разместить чутка побольше инфы о товаре и картинку побольше, а может и вообще туда еще пару фотографий товара). Вот вроде все. 

Подскажите, пожалуйста, как это сделать всё? Очень благодарен буду))

http://jsfiddle.net/LvBQE/

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