Помоготе с версткой

@grandhoste1 · Регистрация: 02.12.2012

Студворк — интернет-сервис помощи студентам

Всем привет, извините, что обращаюсь.
Решил сделать сайт-портфолио, занимаюсь проектами в автокаде.
Дело вот в чем:
Нарисовал psd макет сайта, далее решил написать в html, но столкнулся с такой проблемой
на моем разрешении 1920x1080 изображается так:

А когда отдаляю на 2 прокрутки колесиком то вот что:

Все изображения прописывал в html таким образом:

HTML5
1
2
<img src="img/coffee.png" alt="order" style="position: absolute; z-index:4; top: 330px; left: 375px;">
<img src="img/pencil.png" alt="order" style="position: absolute; z-index:1; top: 430px; left: 375px;">

Помогите сделать так, чтобы на разных разрешениях нормально отображалось :-(

Комментарий модератора

Загружайте изображения и файлы на форум и прикрепляйте к сообщению.
https://www.cyberforum.ru/abou... post594251

@censor · 15.06.2013, 22:44

Вот бы увидеть весь код хтмл страницы

@grandhoste1 · 15.06.2013, 22:49 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Site</title>
    <link href="style/style.css" rel="stylesheet" type="text/css">
 
    </head>
<body>
   
    <div id="wrapper">
       <div id="header">
       
       </div>
       <div id="gallery">
               
               <img src="img/notebookv4.png" alt="Notebook" style="margin-left:391px; position: absolute; z-index:3; margin-top:0px;">
               <a href="index.html"><img src="img/home.png" alt="Home" style="position: absolute; z-index:3; top: 500px; left: 600px"></a>
               <a href="portfolio.html"><img src="img/portfolio.png" alt="Portfolio" style="position: absolute; z-index:3; top: 500px; left: 770px"></a>
               <a href="news.html"><img src="img/news.png" alt="News" style="position: absolute; z-index:3; top: 500px; left: 985px"></a>
               <a href="contacts.html"><img src="img/contacts.png" alt="contacts" style="position: absolute; z-index:3; top: 500px; left: 1160px"></a>
               <a href="order.html"><img src="img/zakazat.png" alt="order" style="position: absolute; z-index:3; top: 500px; left: 1370px"></a>
               <img src="img/sahar.png" alt="order" style="position: absolute; z-index:4; top: 440px; left: 1510px">
               <img src="img/pink.png" alt="order" style="position: absolute; z-index:2; top: 400px; left: 1510px;">
               <img src="img/stiker.png" alt="order" style="position: absolute; z-index:1; top: 510px; left: 1530px;">
               <img src="img/coffee.png" alt="order" style="position: absolute; z-index:4; top: 330px; left: 375px;">
               <img src="img/pencil.png" alt="order" style="position: absolute; z-index:1; top: 430px; left: 375px;">
               <img src="img/gradient.png" alt="order" style="position: absolute; z-index:4; top: 570px; left: 595px;">
               <img src="img/iphone5.png" alt="order" style="position: absolute; z-index:8; top: 730px; left: 1400px;">
               <img src="img/peper.png" alt="order" style="position: absolute; z-index:8; top: 430px; left: 20px;">
               <img src="img/slide.png" alt="order" style="position: absolute; z-index:8; top: 600px; left: 600px;">
               <img src="img/slide.png" alt="order" style="position: absolute; z-index:8; top: 600px; left: 820px;">
               <img src="img/slide.png" alt="order" style="position: absolute; z-index:8; top: 600px; left: 1045px;">
               <img src="img/slide.png" alt="order" style="position: absolute; z-index:8; top: 600px; left: 1270px;">
    </div>
       
       <div id="footer"></div>
    </div>   
       
       
       
       
       
       
</body>
</html>

Добавлено через 41 секунду
пока что все грязно и тд, но этим потом займусь, как разберусь с отображением(

@censor · 15.06.2013, 23:23

А можно как нибудь эти вот объекты: кружка, листочки, карандаш сделать фоном?
Согласитесь проще же позиционировать несколькими квадратиками нежели кучей обьектов

@grandhoste1 · 16.06.2013, 00:17 **[ТС]**

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

Добавлено через 12 минут
и какого размера тогда должен быть фон с блокнотом и кружкой и тд?

Добавлено через 24 минуты
я в css разбил на несколько блоков. В один из блоков вставил как фон, но он отображается в углу блока из за размера(

@censor · 16.06.2013, 01:37

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

как быть с "главная" "портфолио" и т.д?

Это же можно сделать с помощью шрифта и списка ul подчеркивание можно сделать фоном каждого элемента списка.

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

он отображается в углу блока из за размера(

можно позиционировать фон

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

как избежать таки "разбеганий по экрану"

не точное позиционирование а относительное надо использовать имхо

@grandhoste1 · 16.06.2013, 02:34 **[ТС]**

1)по поводу шрифта, я ставил Assesor шрифт + наложение делал для красоты, это в css можно сделать?
2) вот я случайно весь макет сделал размером 2500х1600 можно ведь все оставить и сделать в css поправки, чтобы отображалось нормально?
просто дело в том, что если я поставлю ширину 1200 пикселей то у меня блокнот маленький получится наверное, а я хочу, чтобы заходил на сайт и был блокнот почти фулл скрин

Добавлено через 33 минуты
и как лучше фон позиционировать в пикселях или процентах?

@censor · 16.06.2013, 12:02

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

Assesor шрифт

этот шрифт вряд ли есть у большинства пользователей. нужно назначать несколько через запятую.

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

это в css можно сделать?

можно. могу показать

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

я поставлю ширину 1200 пикселей то у меня блокнот маленький получится

Делай его резиновым, то есть фон левая правая верхняя нижняя граница. Или растягивать рисунок можно только не в css.

Новые блоги и статьи Все статьи Все блоги /
wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .
К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .

@censor 8 / 8 / 1 Регистрация: 05.06.2013 Сообщений: 60
	15.06.2013, 22:44
	Вот бы увидеть весь код хтмл страницы 0

@censor 8 / 8 / 1 Регистрация: 05.06.2013 Сообщений: 60
	15.06.2013, 23:23
	А можно как нибудь эти вот объекты: кружка, листочки, карандаш сделать фоном? Согласитесь проще же позиционировать несколькими квадратиками нежели кучей обьектов 0

@grandhoste1 0 / 0 / 0 Регистрация: 02.12.2012 Сообщений: 12
	16.06.2013, 00:17 [ТС]
	ну сделаю фоном, но карандаш нужно не фоном, я хочу сделать карандаш-ссылкой на главную страницу. ОК это я сделаю, а как быть с "главная" "портфолио" и т.д? как избежать таки "разбеганий по экрану" Добавлено через 12 минут и какого размера тогда должен быть фон с блокнотом и кружкой и тд? Добавлено через 24 минуты я в css разбил на несколько блоков. В один из блоков вставил как фон, но он отображается в углу блока из за размера( 0

@grandhoste1 0 / 0 / 0 Регистрация: 02.12.2012 Сообщений: 12
	16.06.2013, 02:34 [ТС]
	1)по поводу шрифта, я ставил Assesor шрифт + наложение делал для красоты, это в css можно сделать? 2) вот я случайно весь макет сделал размером 2500х1600 можно ведь все оставить и сделать в css поправки, чтобы отображалось нормально? просто дело в том, что если я поставлю ширину 1200 пикселей то у меня блокнот маленький получится наверное, а я хочу, чтобы заходил на сайт и был блокнот почти фулл скрин Добавлено через 33 минуты и как лучше фон позиционировать в пикселях или процентах? 0