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

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

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


Ответ
 
Опции темы
Старый 28.09.2018, 06:24   #1
OmegaBerkut
Спокойный псих
Участник клуба
 
Аватар для OmegaBerkut
 
Регистрация: 19.03.2013
Сообщений: 1,333
По умолчанию Вёрстка табличная 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,828
По умолчанию

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

Можно например так:
Код:
<!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,333
По умолчанию

Цитата:
Сообщение от 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,828
По умолчанию

Цитата:
Сообщение от OmegaBerkut Посмотреть сообщение
Что сюда нужно добавить ?
Код:
.login-form_error {
  grid-column-start: 1;
  grid-column-end: 3;
  text-align: center;
  color: #f00;
}
https://jsfiddle.net/naiveMan/89huL36y/3/
лейбл ошибки можно зареферить на логин

UPD: дети грид-разметки занимают свободное место в порядке очереди, если им не сказано иное. Их можно встроить как нужно, либо вырвать из потока.
Alar, верни репу!

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

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

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

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

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

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

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
Сообщений: 15,305
По умолчанию

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

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

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

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

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


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