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

@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

<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.

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

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

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

@censor 8 / 8 / 1 Регистрация: 05.06.2013 Сообщений: 60
	16.06.2013, 01:37	6
	Сообщение от grandhoste1 как быть с "главная" "портфолио" и т.д? Это же можно сделать с помощью шрифта и списка ul подчеркивание можно сделать фоном каждого элемента списка. Сообщение от grandhoste1 он отображается в углу блока из за размера( можно позиционировать фон Сообщение от grandhoste1 как избежать таки "разбеганий по экрану" не точное позиционирование а относительное надо использовать имхо 0

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

@censor 8 / 8 / 1 Регистрация: 05.06.2013 Сообщений: 60
	16.06.2013, 12:02	8
	Сообщение от grandhoste1 Assesor шрифт этот шрифт вряд ли есть у большинства пользователей. нужно назначать несколько через запятую. Сообщение от grandhoste1 это в css можно сделать? можно. могу показать Сообщение от grandhoste1 я поставлю ширину 1200 пикселей то у меня блокнот маленький получится Делай его резиновым, то есть фон левая правая верхняя нижняя граница. Или растягивать рисунок можно только не в css. 0

Опции темы