|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
28.09.2018, 05:24 | #1 |
Спокойный псих
Участник клуба
Регистрация: 19.03.2013
Сообщений: 1,538
|
Вёрстка табличная vs. CSS
Здравствуйте.
Сегодня мне потребовалось решить несколько проблем при вёрстке собственной простенькой формы авторизации для моего очередного проекта. Сразу скажу, что в проекте о дизайне речи не идёт, лишь бы быстрее сделалось, и проще выглядело. Главное наполнение. Предо мной стояло всего две задачи: 1 - форма должна быть отцентрирована по горизонтали и по вертикали; 2 - поля ввода логина и пароля должны быть выровнены относительно друг друга, а лейбы с подписями должны "обтекать" эти поля ввода. При решении первой задачи я нарвался на помесь CSS и использования тегов <table> и <div> ... Использованные мною ссылки доставать из истории лень. При решении второй задачи я наткнулся на такую вот статью. Когда я реализовал то что приведено в статье - у меня не получилось отцентрировать полученное по горизонтали. В итоге я полез в комментарии, и "додумал", что поля ввода и лейбы нужно внести в очередную вложенную таблицу соответствующим образом. Без использования CSS. В итоге вот что получилось ... Но я сюда не хвастаться пришёл ... CSS я вообще считай не знаю, при этом без него у меня не получилось выполнить центрирование по вертикали. Что же до остального - я так и не понял, как реализовать поставленную задачу, разумеется поиски по интернету мне ничего полезного не дали. Ну разве что кроме вот этой статьи, которая и побудила меня прийти сюда. Сюда я пришёл узнать: как можно реализовать поставленную мною задачу более "правильно" что ли ?
Подпись ? Не, не слышал ...
Последний раз редактировалось OmegaBerkut; 28.09.2018 в 05:26. |
28.09.2018, 08:12 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Чем меньше лишних тегов, тем лучше.
На данный момент самый кошерный способ для такой задачи — это гриды. А отцентрировать можно любым удобным способом, но чтобы не вводить новые блоки, удобнее всего флексом. https://jsfiddle.net/naiveMan/89huL36y/
Alar, верни репу!
|
28.09.2018, 09:02 | #3 |
Пользователь
Регистрация: 15.05.2018
Сообщений: 75
|
Можно например так:
Код:
Не задавай вопрос, если не знаешь что делать с ответом...
|
28.09.2018, 09:40 | #4 |
Спокойный псих
Участник клуба
Регистрация: 19.03.2013
Сообщений: 1,538
|
На счёт "новых блоков" ... Попытался присобачить уведомление аля ашыбка логина или пароля, и у меня поехали все размеры ...
Не обессудьте, я в CSS совсем уж новичок =) Код:
Код:
Я очень надеюсь, что такие вещи я смогу быстро осознать, дабы потом не доставать местное окружение =)
Подпись ? Не, не слышал ...
|
28.09.2018, 09:57 | #5 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Код:
лейбл ошибки можно зареферить на логин UPD: дети грид-разметки занимают свободное место в порядке очереди, если им не сказано иное. Их можно встроить как нужно, либо вырвать из потока.
Alar, верни репу!
Последний раз редактировалось Naive; 28.09.2018 в 10:01. |
28.09.2018, 10:07 | #6 |
Спокойный псих
Участник клуба
Регистрация: 19.03.2013
Сообщений: 1,538
|
Крутые слова ... !
Да вот пока что мне это ни о чём не говорит ... До сегодняшнего дня для меня CSS был сферическим в вакууме ... Я только начал в него вникать.
Подпись ? Не, не слышал ...
Последний раз редактировалось OmegaBerkut; 28.09.2018 в 11:11. |
28.09.2018, 10:45 | #7 |
Старожил
Регистрация: 12.01.2011
Сообщений: 19,500
|
Речь просто про атрибут for наверно. Ну и всякая валидация из HTML5 типа required, minLength.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом. |
28.09.2018, 10:56 | #8 |
Александр
Администратор
Регистрация: 28.10.2006
Сообщений: 17,512
|
OmegaBerkut, делай табличную и не парься, для старта обучения этот тип вёрстки всё равно надо поюзать, чтобы понять какие в нем недостатки и почему нужны дивы, тоесть когда div вёрстка тебе потребуется, то она уже зайдёт как надо и вопросов не будет.
форум, кстати, на табличной вёрстке, и всем норм. |
28.09.2018, 11:07 | #9 |
Спокойный псих
Участник клуба
Регистрация: 19.03.2013
Сообщений: 1,538
|
Alar, это я оставлю на случай, когда ниасилю проект по срокам из-за CSS.
Тогда табличная вёрстка моё всё. P. S. Я табличной умею верстать, раньше лет 10 назад клепал одно-двух страничные сайтики, и норм заходило. И тем не менее, в исходниках HTML форума CSS без линков пруд пруди ... =)
Подпись ? Не, не слышал ...
Последний раз редактировалось OmegaBerkut; 28.09.2018 в 11:15. |
28.09.2018, 11:19 | #10 |
Александр
Администратор
Регистрация: 28.10.2006
Сообщений: 17,512
|
увидел название темы.
вообще-то табличная верстка не исключает css css в любой вёрстке присутсвует. хотя можно и табличную вёрску сделать без css и div вёрстку сделать без css |
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
CSS вёрстка | Daniil94 | HTML и CSS | 10 | 14.03.2012 19:09 |
резиновая табличная вёрстка | DrStrangeLove | HTML и CSS | 10 | 03.12.2010 12:08 |
CSS вёрстка, вставка Google map поверх изображения, фона! | sting | HTML и CSS | 0 | 09.02.2010 22:27 |
Табличная вёрстка | psywalker | HTML и CSS | 0 | 23.06.2008 20:57 |