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

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

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

Ответ
 
Опции темы
Старый 23.10.2018, 08:57   #1
Piters
Новичок
 
Регистрация: 23.10.2018
Сообщений: 4
Репутация: 10
По умолчанию

Всем привет!
Только начал изучать программирование и хочу сделать страницу так сказать имитация профиля для тренировки. Как то я видел на каком-то форуме профиль выполнен виде водительского удостоверения вот как можно сделать что то подобное что бы при изменении расширения всё оставалось на своем месте фото и все данные имя фамилия и тд. . Помогите подсказками где и что нужно почитать что бы такое сделать. Спасибо заранее.

Не кто не может подсказать как правильно делать надо?

Последний раз редактировалось Вадим Мошев; 24.10.2018 в 21:07.
Piters вне форума   Ответить с цитированием
Старый 23.10.2018, 22:02   #2
ADSoft
Профессионал
 
Регистрация: 25.02.2007
Адрес: Татарстан
Сообщений: 3,266
Репутация: 912

icq: 303-206-418
skype: ad-soft.info
По умолчанию

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

Последний раз редактировалось ADSoft; 23.10.2018 в 22:07.
ADSoft вне форума   Ответить с цитированием
Старый 23.10.2018, 22:05   #3
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,692
Репутация: 2205
По умолчанию

Сделай как получится, покажи, подскажем как и что лучше сделать.
Тут не возможно по расплывчатому ТЗ, да еще и без дизайна, однозначно сказать "верстай таблицами или дивами, плавающими элементами или инланй-блоками, флексом или гридом".
Сделай, показывай. По коду уже можно будет понять как ты мыслишь и что нужно подтянуть, подкинем идей, статей, книг.
Серебряной пули не существует, есть техники общепризнанные и холиварные. Что выбрать, надо исходить из задачи. Задача не ясна, не декомпозирована, и вообще нималейшего чиха на ТЗ в ней нет.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 23.10.2018, 22:12   #4
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,692
Репутация: 3715
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
верстай таблицами или дивами, плавающими элементами или инланй-блоками, флексом или гридом
А первый вариант нынче имеет права на существование?
Вадим Мошев на форуме   Ответить с цитированием
Старый 23.10.2018, 23:10   #5
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,692
Репутация: 2205
По умолчанию

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
А первый вариант нынче имеет права на существование?
Разумеется!
1. Табличные данные, тут без вопросов верстка таблицей
2. Различные расписания, где во временную шкалу надо вписать несколько событий, или, к примеру, диаграмму Ганта верстануть, это таблица (или гриды, если скилл позволяет)
3. Верстка писем обязательно делается таблицей
Это что я навскидку вспомнил, наверняка есть и другие области полезного применения.
Для каждой вещи свой инструмент.

п.с. Думаю, ты саркастировал на тему, того, как очень давно под пивко я обсерал табличную верстку, так это скорее было реакцией на то, что тогда 99% верстали таблицей сайты полностью, а не отдельные кусочки, для которых она бы подошла. Тогда и инструментов полноценно заменяющих их в художественном плане не было и приходилось так или иначе обходиться костылями. Хоть и тут технически таблица — такой же костыль. Сейчас все изменилось, старые браузеры умерли и разметку можно делать миллионом способов. Так что за таблицей можно оставить только те места, где она конкретно нужна и будет применяться семантически верно.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 24.10.2018, 13:47   #6
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,692
Репутация: 3715
По умолчанию

Я имел в виду вёрстка сайта, а не отдельных его элементов.

Цитата:
Сообщение от Naive Посмотреть сообщение
1. Табличные данные, тут без вопросов верстка таблицей
Это очевидно.

Цитата:
Сообщение от Naive Посмотреть сообщение
2. Различные расписания, где во временную шкалу надо вписать несколько событий, или, к примеру, диаграмму Ганта верстануть, это таблица (или гриды, если скилл позволяет)
Ну, здесь тоже понятно. С гридами не знаком, правда.

Кстати, ещё один способ могу назвать. Вёрстка форм отправки данных.


Цитата:
Сообщение от Naive Посмотреть сообщение
3. Верстка писем обязательно делается таблицей
Вот об этом не знал.


Цитата:
Сообщение от Naive Посмотреть сообщение
Думаю, ты саркастировал на тему, того, как очень давно под пивко я обсерал табличную верстку,
Припоминаю что-то. Но это не было сарказмом, я говорил серьёзно. Повторюсь, я имел в виду не вёрстку отдельных элементов, а структуры страницы целиком. Вообще, я не испытываю никакой ненависти к табличной вёрстке, просто есть способы реализации задач, которые, в силу появления новых способов, являются устаревшими, либо в которых со временем просто обнаружили кучи недостатков. Могу привести примеры (с моей точки зрения), причём не только в HTML:
- табличная вёрстка;
- оператор with в JS (оператор устарел, да и имеет другие недостатки, об этом написано на learn.javascript);
- оператор goto в некоторых языках программирования (не знаю, устарел ли он, но он имеет дурную репутацию)
Вадим Мошев на форуме   Ответить с цитированием
Старый 24.10.2018, 18:14   #7
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,692
Репутация: 2205
По умолчанию

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
Вёрстка форм отправки данных.
Точно нет.

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
я имел в виду не вёрстку отдельных элементов, а структуры страницы целиком.
Точно нет.
Можно верстать дивами через display: table, и даже использовать класснейминг вроде .table, .row (.tr), .cell (.td), но лично я против такого подхода.
ИМХО, нейминг должен говорить что это за элемент, а как он будет себя вести в отображении должен решать CSS (БЭМ).

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
- оператор with в JS (оператор устарел, да и имеет другие недостатки, об этом написано на learn.javascript);
Никогда его не использовал. Да и сейчас пишу исключительно на ООП, где через this понятней что ты делаешь, а стрелочные функции позволяют сохранить контекст.

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
- оператор goto в некоторых языках программирования (не знаю, устарел ли он, но он имеет дурную репутацию)
Для ассемблера разве что актуально))
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 24.10.2018, 21:02   #8
Piters
Новичок
 
Регистрация: 23.10.2018
Сообщений: 4
Репутация: 10
По умолчанию

Вот попробовал сделать то что я спрашивал для теста. Подскажите правильно или как-то надо по другому делать?
index.html
Код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Тестовая страница</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<div id="content">
<div id="avatar"><img src="https://i.ytimg.com/vi/28mWdfsORPM/hqdefault.jpg"></div>
<div id="info">
<div id="info_content">
<p>Фамилия: Иванов</p>
<p>Имя: Иван</p>
<p>Отчество: Иваныч</p>
</div>
</div>
</div>
</center>
</body>
</html>

style.css
Код:

#content{
background:url("fon.png");
width:300px;
height:150px;
border-radius:10px;
}

#avatar{
width:70px;
height:100px;
float:left;
margin:25px 0 0 15px;
}

#avatar img{
width:70px;
height:100px;
}

#info{
width:215px;
height:100%;
float:right;
}

#info #info_content{
margin:40px 0 0 10px;
font-size:12px;
text-align:left;
}

p {
margin: 0;
}


Последний раз редактировалось Piters; 24.10.2018 в 21:04.
Piters вне форума   Ответить с цитированием
Старый 24.10.2018, 21:06   #9
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,692
Репутация: 3715
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Цитата:
Вёрстка форм отправки данных
.
Точно нет
Как нет? А что ты будешь делать, если, например, тебе надо будет ровно сверстать вот такую форму данных:
Введите ваше имя: [__________]
Введите ваш фамилию: [__________]

Быть может, есть какой-то современный способ, но известен только один - с помощью таблицы.


Цитата:
Сообщение от Naive Посмотреть сообщение
Можно верстать дивами через display: table, и даже использовать класснейминг вроде .table, .row (.tr), .cell (.td),
А почему именно так, если есть display: table/table-row/table/cell? Впрочем, я такой подход тоже не поощряю.
Вадим Мошев на форуме   Ответить с цитированием
Старый 25.10.2018, 08:39   #10
Piters
Новичок
 
Регистрация: 23.10.2018
Сообщений: 4
Репутация: 10
По умолчанию

А как правильно всё же? Я вот код то что выложил сверху правильно сделал я или есть какие-то замечания?
Piters вне форума   Ответить с цитированием
Ответ

Опции темы

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

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

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

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мобильная верстка - уехала верстка Phillbot HTML и CSS 0 13.04.2017 11:29
Редактирование профиля PHP_DELETANT PHP 7 05.02.2016 23:26
при введения в edit1 имя профиля на facebook отображать фото профиля alman12 Общие вопросы Delphi 10 05.06.2014 08:17
Нарушение профиля HellMercenariess О форуме и сайтах клуба 6 25.08.2012 11:43
PHP/просмотр профиля lost name PHP 5 07.05.2012 18:33


19:20.


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

RusProfile.ru


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