Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 28.09.2018, 06:24   #1
OmegaBerkut
Спокойный псих
Профессионал
 
Аватар для OmegaBerkut
 
Регистрация: 19.03.2013
Адрес: Украина
Сообщений: 1,004
Репутация: 204
По умолчанию Вёрстка табличная vs. CSS

Здравствуйте.
Сегодня мне потребовалось решить несколько проблем при вёрстке собственной простенькой формы авторизации для моего очередного проекта. Сразу скажу, что в проекте о дизайне речи не идёт, лишь бы быстрее сделалось, и проще выглядело. Главное наполнение.
Предо мной стояло всего две задачи:
1 - форма должна быть отцентрирована по горизонтали и по вертикали;
2 - поля ввода логина и пароля должны быть выровнены относительно друг друга, а лейбы с подписями должны "обтекать" эти поля ввода.

При решении первой задачи я нарвался на помесь CSS и использования тегов <table> и <div> ... Использованные мною ссылки доставать из истории лень.
При решении второй задачи я наткнулся на такую вот статью.
Когда я реализовал то что приведено в статье - у меня не получилось отцентрировать полученное по горизонтали. В итоге я полез в комментарии, и "додумал", что поля ввода и лейбы нужно внести в очередную вложенную таблицу соответствующим образом. Без использования CSS.
В итоге вот что получилось ...
Но я сюда не хвастаться пришёл ... CSS я вообще считай не знаю, при этом без него у меня не получилось выполнить центрирование по вертикали.
Что же до остального - я так и не понял, как реализовать поставленную задачу, разумеется поиски по интернету мне ничего полезного не дали. Ну разве что кроме вот этой статьи, которая и побудила меня прийти сюда.

Сюда я пришёл узнать: как можно реализовать поставленную мною задачу более "правильно" что ли ?
__________________
Подпись ? Не, не слышал ...

Последний раз редактировалось OmegaBerkut; 28.09.2018 в 06:26.
OmegaBerkut вне форума   Ответить с цитированием
Старый 28.09.2018, 09:12   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,709
Репутация: 2205
По умолчанию

Чем меньше лишних тегов, тем лучше.
На данный момент самый кошерный способ для такой задачи — это гриды. А отцентрировать можно любым удобным способом, но чтобы не вводить новые блоки, удобнее всего флексом.
https://jsfiddle.net/naiveMan/89huL36y/
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 28.09.2018, 10:02   #3
Javany
Форумчанин
 
Регистрация: 15.05.2018
Сообщений: 75
Репутация: 129
По умолчанию

Можно например так:
Код:

<!DOCTYPE html>

<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
form{
	width: 15%;
	margin:50vh auto;
	display: table;
}

input{
	display: table-column;
	text-align: right;
}

span{
	display: table-row;	
}

label{
	display:table-cell;
	text-align: left;
}

</style>
</head>

<body>                
    <form action="index.php" method="post">
        <span>
        	<label>Логін:</label>
			<input name="login" type="text" size="15" maxlength="15">
		</span>
		<br>                             
    	<span>
    		<label>Пароль:</label>
        	<input name="password" type="password" size="15" maxlength="15">
        </span>
        <br> 	
        <input type="submit" value="Увійти">
    </form>                  
</body>
</html>

Посмотрел Ваш код, не писали бы Вы стилевые атрибуты и CSS одновременно, лучше чистый CSS.
__________________
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума   Ответить с цитированием
Старый 28.09.2018, 10:40   #4
OmegaBerkut
Спокойный псих
Профессионал
 
Аватар для OmegaBerkut
 
Регистрация: 19.03.2013
Адрес: Украина
Сообщений: 1,004
Репутация: 204
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
но чтобы не вводить новые блоки
На счёт "новых блоков" ... Попытался присобачить уведомление аля ашыбка логина или пароля, и у меня поехали все размеры ...
Не обессудьте, я в CSS совсем уж новичок =)
Код:

.login-form_error
{
	padding:3px 3px 3px;
	color:#FF0000;
}

Код:

<input class="login-form_value" name="password" id="password" type="password" size="15" maxlength="15">
<label class="login-form_error">Невірно вказано логін або пароль</label> <!-- это будет выдаваться по соответствующему условию -->
<input class="login-form_submit" type="submit" value="Увійти">

Что сюда нужно добавить ?
Я очень надеюсь, что такие вещи я смогу быстро осознать, дабы потом не доставать местное окружение =)
__________________
Подпись ? Не, не слышал ...
OmegaBerkut вне форума   Ответить с цитированием
Старый 28.09.2018, 10:57   #5
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,709
Репутация: 2205
По умолчанию

Цитата:
Сообщение от OmegaBerkut Посмотреть сообщение
Что сюда нужно добавить ?
Код:

.login-form_error {
  grid-column-start: 1;
  grid-column-end: 3;
  text-align: center;
  color: #f00;
}

https://jsfiddle.net/naiveMan/89huL36y/3/
лейбл ошибки можно зареферить на логин

UPD: дети грид-разметки занимают свободное место в порядке очереди, если им не сказано иное. Их можно встроить как нужно, либо вырвать из потока.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587

Последний раз редактировалось Naive; 28.09.2018 в 11:01.
Naive вне форума   Ответить с цитированием
Старый 28.09.2018, 11:07   #6
OmegaBerkut
Спокойный псих
Профессионал
 
Аватар для OmegaBerkut
 
Регистрация: 19.03.2013
Адрес: Украина
Сообщений: 1,004
Репутация: 204
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
лейбл ошибки можно зареферить на логин
Крутые слова ... !
Да вот пока что мне это ни о чём не говорит ...
Цитата:
Сообщение от Javany Посмотреть сообщение
лучше чистый CSS
До сегодняшнего дня для меня CSS был сферическим в вакууме ...
Я только начал в него вникать.
__________________
Подпись ? Не, не слышал ...

Последний раз редактировалось OmegaBerkut; 28.09.2018 в 12:11.
OmegaBerkut вне форума   Ответить с цитированием
Старый 28.09.2018, 11:45   #7
Alex11223
Модератор
Заслуженный модератор
 
Регистрация: 12.01.2011
Сообщений: 17,396
Репутация: 3353

icq: 512-765
skype: alexp.frl
По умолчанию

Цитата:
Сообщение от OmegaBerkut Посмотреть сообщение
Крутые слова ... !
Да вот пока что мне это ни о чём не говорит ...
Речь просто про атрибут for наверно. Ну и всякая валидация из HTML5 типа required, minLength.
Alex11223 на форуме   Ответить с цитированием
Старый 28.09.2018, 11:56   #8
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Адрес: Химки
Сообщений: 13,566
Репутация: 2756
По умолчанию

OmegaBerkut, делай табличную и не парься, для старта обучения этот тип вёрстки всё равно надо поюзать, чтобы понять какие в нем недостатки и почему нужны дивы, тоесть когда div вёрстка тебе потребуется, то она уже зайдёт как надо и вопросов не будет.

форум, кстати, на табличной вёрстке, и всем норм.
Alar вне форума   Ответить с цитированием
Старый 28.09.2018, 12:07   #9
OmegaBerkut
Спокойный псих
Профессионал
 
Аватар для OmegaBerkut
 
Регистрация: 19.03.2013
Адрес: Украина
Сообщений: 1,004
Репутация: 204
По умолчанию

Alar, это я оставлю на случай, когда ниасилю проект по срокам из-за CSS.
Тогда табличная вёрстка моё всё.
P. S. Я табличной умею верстать, раньше лет 10 назад клепал одно-двух страничные сайтики, и норм заходило.

Цитата:
Сообщение от Alar Посмотреть сообщение
форум, кстати, на табличной вёрстке, и всем норм
И тем не менее, в исходниках HTML форума CSS без линков пруд пруди ... =)
__________________
Подпись ? Не, не слышал ...

Последний раз редактировалось OmegaBerkut; 28.09.2018 в 12:15.
OmegaBerkut вне форума   Ответить с цитированием
Старый 28.09.2018, 12:19   #10
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Адрес: Химки
Сообщений: 13,566
Репутация: 2756
По умолчанию

Цитата:
Сообщение от OmegaBerkut Посмотреть сообщение
из-за CSS
увидел название темы.

вообще-то табличная верстка не исключает css

css в любой вёрстке присутсвует.

хотя можно и табличную вёрску сделать без css
и div вёрстку сделать без css
Alar вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS вёрстка Daniil94 HTML и CSS 10 14.03.2012 19:09
резиновая табличная вёрстка DrStrangeLove HTML и CSS 10 03.12.2010 13:08
Валидная и Кроссбраузерная Вёрстка HTML/CSS черепашка Работа на постоянной основе - Вакансии 0 28.07.2010 11:43
CSS вёрстка, вставка Google map поверх изображения, фона! sting HTML и CSS 0 09.02.2010 23:27
Табличная вёрстка psywalker HTML и CSS 0 23.06.2008 20:57


20:23.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru