Верстка профиля

[Piters]

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

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

[ADSoft]

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

[Naive]

Сделай как получится, покажи, подскажем как и что лучше сделать.
Тут не возможно по расплывчатому ТЗ, да еще и без дизайна, однозначно сказать "верстай таблицами или дивами, плавающими элементами или инланй-блоками, флексом или гридом".
Сделай, показывай. По коду уже можно будет понять как ты мыслишь и что нужно подтянуть, подкинем идей, статей, книг.
Серебряной пули не существует, есть техники общепризнанные и холиварные. Что выбрать, надо исходить из задачи. Задача не ясна, не декомпозирована, и вообще нималейшего чиха на ТЗ в ней нет.

[Вадим Мошев]

Сообщение от Naive

верстай таблицами или дивами, плавающими элементами или инланй-блоками, флексом или гридом

А первый вариант нынче имеет права на существование?

[Naive]

Сообщение от Вадим Мошев

А первый вариант нынче имеет права на существование?

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

п.с. Думаю, ты саркастировал на тему, того, как очень давно под пивко я обсерал табличную верстку, так это скорее было реакцией на то, что тогда 99% верстали таблицей сайты полностью, а не отдельные кусочки, для которых она бы подошла. Тогда и инструментов полноценно заменяющих их в художественном плане не было и приходилось так или иначе обходиться костылями. Хоть и тут технически таблица — такой же костыль. Сейчас все изменилось, старые браузеры умерли и разметку можно делать миллионом способов. Так что за таблицей можно оставить только те места, где она конкретно нужна и будет применяться семантически верно.

[Вадим Мошев]

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

Сообщение от Naive

1. Табличные данные, тут без вопросов верстка таблицей

Это очевидно.

Сообщение от Naive

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

Ну, здесь тоже понятно. С гридами не знаком, правда.

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

Сообщение от Naive

3. Верстка писем обязательно делается таблицей

Вот об этом не знал.

Сообщение от Naive

Думаю, ты саркастировал на тему, того, как очень давно под пивко я обсерал табличную верстку,

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

[Naive]

Сообщение от Вадим Мошев

Вёрстка форм отправки данных.

Точно нет.

Сообщение от Вадим Мошев

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

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

Сообщение от Вадим Мошев

- оператор with в JS (оператор устарел, да и имеет другие недостатки, об этом написано на learn.javascript);

Никогда его не использовал. Да и сейчас пишу исключительно на ООП, где через this понятней что ты делаешь, а стрелочные функции позволяют сохранить контекст.

Сообщение от Вадим Мошев

- оператор goto в некоторых языках программирования (не знаю, устарел ли он, но он имеет дурную репутацию)

Для ассемблера разве что актуально))

[Piters]

Вот попробовал сделать то что я спрашивал для теста. Подскажите правильно или как-то надо по другому делать?
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;
}

[Вадим Мошев]

Сообщение от Naive

.
Точно нет

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

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

Сообщение от Naive

Можно верстать дивами через display: table, и даже использовать класснейминг вроде .table, .row (.tr), .cell (.td),

А почему именно так, если есть display: table/table-row/table/cell? Впрочем, я такой подход тоже не поощряю.

[Piters]

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