Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Помогите поправить сайт. Сконструировал сайт, но есть проблемы... 
V
    Опции темы
maskarad
Дата 15.12.2010, 16:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 7
Регистрация: 15.12.2010

Репутация: нет
Всего: нет



Здравствуйте!
Возникла необходимость сделать портфолио, решил показывать свои работы при помощи сайта. 
Взялся делать не имея опыта и представления, как все устроено и работает. Скрутил, спаял из уже имеющегося, меняя начинку. Благодаря Dreamweaver смог (что понятно было) сконструировать, что-то похожее на портфолио.

После теста сайта уже на хостинге выяснилось, что он работает, но не совсем корректно. Осталось дело за малым, отладить. Вот за этим я здесь, обращаюсь к вам.

Возникли трудности в таких вещах:

1) Если разрешение монитора не большое (должно быть, как у меня 1680х1050) иначе все обрезается за рамки. Это еще можно повторить загрузив сайт и сузить одну или несколько сторон окна браузера, будет видно, как все содержимое исчезает (срезается). 
Условие: Обязательно нужно, если разрешение монитора не большое, то ничего не обрезается, сайт остается быть, как был, но в окне браузера появляются полосы прокрутки по горизонтали и вертикали (от случая). Сейчас края сайта автоматически адаптируются под разрешение монитора или окно браузера. Это красиво, но начинка сайта от этого страдает. Поэтому думаю лучше сделать одного определенного разрешения и пускай появляются полосы прокрутки, но зато все чисто и первоначально, никаких изменений.

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

Вот прошу милости сюда: www.veresov.99k.org

Тестирую в основном в Opera, еще в Google Chrome и IE. гугл Хром и Опера работают схожим образом, а вот Эксплорер совершенно по своему. Хотелось бы, что бы на всех браузерах было максимально одинаково. Адаптировать, отрегулировать.

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

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

Спасибо!






PM MAIL   Вверх
_Y_
Дата 17.12.2010, 23:32 (ссылка)    | (голосов:2) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1651
Регистрация: 27.11.2006

Репутация: нет
Всего: 34



Я взглянул код. Там построено на CSS с абсолютный позиционированием. Четстно говоря, не мой стиль. Поправить не смогу хорошо. А переписать по-моему - так ты потом ничего поменять не сможешь в Dreamweaver - все рухнет.

Кто хорошо знает CSS с абсолютный позиционированием - взгляните. Там код коротенький.


--------------------
Я вот в этом поучаствовал: http://sbor-nik.appspot.com/kick.jsp?id=sbor5737960678883328 (на правах саморекламы:)
PM MAIL WWW   Вверх
maskarad
Дата 18.12.2010, 20:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 7
Регистрация: 15.12.2010

Репутация: нет
Всего: нет



_Y_ - благодарю за ответ и подсказку.

Уважаемые администраторы, можно вас попросить перенести данную тему в раздел "Верстка сайтов".
Спасибо!
PM MAIL   Вверх
IgorIV
Дата 19.12.2010, 14:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 642
Регистрация: 7.9.2009

Репутация: нет
Всего: 8



maskarad, я так думаю, что ширину body и right надо привести к одной системе измерения.
PM MAIL   Вверх
maskarad
Дата 19.12.2010, 22:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 7
Регистрация: 15.12.2010

Репутация: нет
Всего: нет



Цитата(IgorIV @ 19.12.2010,  14:18)
maskarad, я так думаю, что ширину body и right надо привести к одной системе измерения.

Спасибо за ответ!
Если вас не затруднит, можно подробнее?

Вот здесь сдедать одинаковые параметры для ширины? Я почему спрашиваю, покрутил как вы сказали, попытался это сделать, но ничего не получилось, только правая полоса съехала и отображается криво.

Код

body {
    font:100% arial, sans-serif;
    height:100%;
    position:relative;
    /*background-color:#2d1e1f;*/
    background-color:#271b1c;
    min-width:980px;
    width:expression(document.childNodes[1].offsetWidth<980?'980px':'auto');

#right_h {
    position:absolute;
    height:100%;
    width:20px;
    background-color:#292D32;
    right:0;
    top:0;
    }

PM MAIL   Вверх
smartov
Дата 22.12.2010, 09:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259



maskarad, 
чтобы поправить легко в стиле для #right поменяй width: 1430px на width: 100%. У меня сразу всё стало на место. Если я что-то не заметил или на других страницах расходится - пиши.

Единственно что - сам понимаешь это не поможет от того что при маленьком разрешении экрана картинки размером 1200 пикселов будут вылазить вправо. Если хочешь чтобы даже вокруг картинок background оставался - пиши, ну или сам уже подумай smile

Добавлено через 2 минуты и 52 секунды
Когда я пишу поменять, я имею в виду относительно того, что сейчас есть реально на сайте. То что в этой теме я не вдавался в подробности.

Proof: http://imgur.com/kjTBk.png
PM MAIL   Вверх
maskarad
Дата 22.12.2010, 17:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 7
Регистрация: 15.12.2010

Репутация: нет
Всего: нет



smartov, спасибо БОЛЬШОЕ. 

Цитата

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


Вот это очень важно, нужно чтобы картинки вообще не вылезали за пределы, пускай лучше будут ползунки. Сейчас они вылезают вправо, как сделать, чтобы было также как и слева? Нужно добавить новый атрибут или нужен новый #right(left). Хоть какую-нибудь подсказочку-наводочку.

Ну никак не получается, зараза такая! Все уже изменил, что только можно было.
PM MAIL   Вверх
smartov
Дата 22.12.2010, 23:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259



maskarad, сложно дебагать без исходного кода, но по идее надо тогда не right править на 100% как я предлагал выше, а right, content и height поставить width: 1430px.

Но видимо есть слишуом большое желание картинку прям никак не уменьшать нини. Я бы честно говоря сделал уменьшенную копию, а по клику уже открывал полный размер в отдельной вкладке. Как все делают. И сайт был бы нормального размера.
PM MAIL   Вверх
maskarad
Дата 22.12.2010, 23:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 7
Регистрация: 15.12.2010

Репутация: нет
Всего: нет



Вотъ исходники!

http://dl.dropbox.com/u/10877913/SITE.rar
PM MAIL   Вверх
smartov
Дата 23.12.2010, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259



Ты javascript-ом вставляешь блоки (минуты полторы думал что я с ума сошел, пока не догадался). А браузерр не делеает перерасчёт из-за особенностей верстки. Там все надо менять. Это не дело 5 минут. 
PM MAIL   Вверх
maskarad
  Дата 23.12.2010, 16:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 7
Регистрация: 15.12.2010

Репутация: нет
Всего: нет



Эхххх! 
PM MAIL   Вверх
smartov
Дата 23.12.2010, 17:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259



Кстати, когда javascript выносят в отдельный файл и потом подключают через script, то ему обычно дают расширение .js, а не .htm

Добавлено через 11 минут и 25 секунд
А на счет верстки. Если надо чтобы делался перерасчёт, то надо верстать соответственно. position:absolute были придуманы для статики. absolute означает, что позиция блока никогда не поменяется (по крайней мере самостоятельно). Поэтому такая верстка не подходит для случая вставки картинок очень разного размера, которые должны раздвигать или сдвигать блоки.

А если не надо раздвигать, то надо сверстать сначала без картинок статичный сайт широной 1430px и не выходить за неё уже.
Вот простейший пример такой вёрстки:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>

<div style="border: 1px solid red; min-width: 1430px;min-height: 1100px">
Hi!
</div>

</body>
</html>

Как окно не трогай - ничего не сдвинется. Сверстать остальной контект внутри такого блока - дело уже техники. Но снова таки - просто перенести то, что у тебя есть в такой блок не сработает. 

Да и наворочено у тебя там, честно говоря многое только ради того, чтобы сделать сглаженные уголки работающими в IE smile Может проще было JS под это дело заюзать? Вот например: http://davidwalsh.name/dw-content/curvy-corners.php
И не плясать с такой сложной вёрсткой.

Добавлено через 12 минут и 12 секунд
p.s. IE не поддерживает min-width, min-height
PM MAIL   Вверх
smartov
Дата 23.12.2010, 18:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259



Во. Заморочился ради прикола даже smile
Просто и сердито.



Присоединённый файл ( Кол-во скачиваний: 4 )
Присоединённый файл  example.rar 47,60 Kb
PM MAIL   Вверх
_Y_
Дата 23.12.2010, 18:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1651
Регистрация: 27.11.2006

Репутация: нет
Всего: 34



Вспомнил вот кстати. 

Для случаев когда размер контента превышал размер "дозволленного" окна раньше неплого подходил тег iframe. 

Почему-то он не часто использовался. Может это подходящее решение? Или тег этот имеет какие-то, неизвестные мне, серьезные недостатки?


--------------------
Я вот в этом поучаствовал: http://sbor-nik.appspot.com/kick.jsp?id=sbor5737960678883328 (на правах саморекламы:)
PM MAIL WWW   Вверх
smartov
Дата 23.12.2010, 18:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259



Цитата(_Y_ @  23.12.2010,  18:29 Найти цитируемый пост)
окна раньше неплого подходил тег iframe. 

Покайся пока не поздно! smile  

iframe нужно использовать тогда и только тогда, когда нужно реально вставить фрейм (то бишь кусок чужеродной информации в песочнице внутрь твоей страницы). фрейм не вписывается в layout - ведь это отдельное окно считай. он не дает нормально перемещаться по истории и линки внутри фрейма редяректят только сам фрейм. он накладывает ограничения по секьюрити на скрипты. там может быть совершенно левый скроллинг. его нельзя выделить с основным контентом - это спецобласть.

короче использовать для такого ифрейм, это как микроскопом дверь подпирать.
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0673 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.