Вот такое, блин, творчество

mizm · June 19, 2011

Решил еще раз попробовать слои, зззззззз блд...

Читаю: "Допускается вкладывать один блочный элемент внутрь другого", значит можно и не вкладывать...

Вверху, слева картинка, с отступами, от нее 4 полосы в стороны, типа крест.

Лепил прямо в опере, нормально. Проверяю в других, каша, причем у всех разная.

"position: absolute;" - не работает, у них.

Привык, что каждая команда (функция), вещь конкретная, слои же - метод тыка, какой то.

Вот такое, блин, творчество.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sys</title>
<style type="text/css">

   body {
           border: solid 0px #A1611D; 
           background: #592411 url(img1.png);
           padding: 0px 0px 0px 0px; 
           margin: 0px 0px 0px 0px;   
   }
   #centr{
           position: absolute; 
           background: #FF0000  url(img5.png);
           width: 288px; 
           height: 320px; 
           padding: 0px 0px 0px 0px; 
           margin: 83px 0px 0px 20px; 
   }
   #verh{
           position: absolute; 
           background: #260D0A;
           width: 288px; 
           height: 83px; 
           padding: 0px 0px 0px 0px; 
           margin: 0px 0px 0px 20px;  
   }
   #niz{
           position: absolute;
           background: #260D0A;
           width: 288px; 
           height: 500px; 
           padding: 0px 0px 0px 0px; 
           margin: 403px 0px 0px 20px;  
   }
   #levo{
           position: absolute; 
           background: #260D0A;
           width: 20px; 
           height: 320px; 
           padding: 0px 0px 0px 0px; 
           margin: 83px 0px 0px 0px; 
   }
   #pravo{
           background: #000000  url(img2.png);
           height: 320px; 
           padding: 0px 0px 0px 0px; 
           margin: 83px 0px 0px 38px;   
   }

   #podval{
           background: #140605;
           padding: 50px 50px 50px 50px; 
           margin: 600px 0px 0px 0px; 
   }

</style>
<script>
</script>
</head>
<body >
  <div id="centr"> </div>
  <div id="verh"> </div>
  <div id="niz"> </div>
  <div id="levo"> </div>
  <div id="pravo"> </div>
  <div id="podval"> </div>
</body>
</html>

И что тут не так, нифига не понимаю.

Поясню. На днях, слепил это http://port.elitno.net/ на слоях, чисто на интуиции, ни чо не понял, но работает.

Вдохновленный, решил делать по науке. Нарисовал эскиз, нарезал и обломался.

Edited June 19, 2011 by mizm

Int · June 19, 2011

По поводу ссылки:

Kelenar · June 19, 2011

По поводу ссылки: не открывая код, покрутил масштаб сайта до максимума и минимума. От сайта осталось не много посмотрите на CSS свойство max-width min-width

mizm · June 19, 2011

Int, да, есть такое дело, в трех китах (опера, хром, мазила) работает и ладно, не до жиру. Когда руку набью, буду о мелочах думать, если само не получится - лотерея.

Kelenar, я про эти свойства первый раз слышу, сжимать <825 не вижу смысла.

Kelenar · June 19, 2011

По порядку. Про position: absolute; Вам хотелось просто поиграться с этим свойством или вы действительно решили так верстать сайт?

Дальше, на тему глюка макета:

#pravo{

background: url("img2.png") repeat scroll 0 0 #000000;

height: 320px;

margin: 83px 0 0 308px;

padding: 0;

position: absolute;

width: 100%;

}

#podval {

background: #140605;

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 50px;

}

Сразу делаю поправку. Футтер сделал без margin, для абсолютного позиционирования используются свойства top, left, bottom, right.

В div #pravo внес правки в Ваши теги не меняя самих свойств. Но учтите, абсолютное позиционирование не используется в том контексте как это сделали Вы.

Вы совсем не понимаете суть свойства margin. Например margin: 83px 0px 0px 20px; Не только сделает отступы у элемента вверху и слева, но и УВЕЛИЧИТ негласно блок на 83 и 20px соответственно. Почитайте внимательнее про них.

На тему сжатия меньше 825: если верстка рассыпается, то это не верстка, а подобие. Неизвестный вам тег max-width

Вы читали самоучитель на данном сайте? Смотрели примеры сделанных макетов? Или сразу методом тыка и об стену головой?

Kelenar · June 19, 2011

Открыл код сайта http://port.elitno.net/ и понял, что автор не шутит абсолютно позиционируя все и вся.... Не в обиду, но меню Принято делать списками (<ul><li></li></ul>). Про обтекания (float) тоже не слышали.... Сайт - это не набор не вложенных дивов абсолютно спозицонированных.... совсем не то. Почитайте самоучители HTML/CSS на сайте, а потом начинайте верстать.

mizm · June 19, 2011

Читал, смотрел, много раз, все на уровне рекомендаций.

Пока в башке понимание не придет, хоть зачитайся, лучше практиковаться. :dash:

Kelenar · June 19, 2011

Вы привыкните делать неправильно.... Макеты где там такое кол-во position: absolute; ?

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

По теме топика, проблема первого поста решена.

mizm · June 19, 2011

Хорошие макеты, табличная классика, авангарда хочу!

Проблема первого поста решена, нагородил огород. И что интересно РАБОТАЕТ, хоть и не по правилам сделано.

Тогда вопрос:

Если, верстка, настолько не требовательна, и если огород будет работать в любых условиях, если.

На кой эти правила? :blink:

Softlink · June 19, 2011

Хорошие макеты, табличная классика, авангарда хочу!
Проблема первого поста решена, нагородил огород. И что интересно РАБОТАЕТ, хоть и не по правилам сделано.
Тогда вопрос:
Если, верстка, настолько не требовательна, и если огород будет работать в любых условиях, если.
На кой эти правила?

чтобы не было таких мучений, когда верстаете макет.

Если все делать правильно, вопросов в процессе, обычно, мало появляется.

mizm · June 19, 2011

Ну, если так смотреть, то согласен, хоть это и не страшно, а то уж думал заговор.

Int · June 19, 2011

(опера, хром, мазила) работает и ладно

У мозиллы вроде есть файрфокс и симанки. Так вот, это скриншот из файрфокса.

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

Softlink · June 19, 2011

не дописал сразу.

А правка кода потом? Если все сделать по уму, то что-то несущественное внести на сайт не проблема. А в вашем случае, что-нибудь тронуть и поплывет вся верстка. Не говоря уже если проект дальше передается программистам. Они вас добрым словом не вспомнят.

mizm · June 19, 2011

Kelenar · June 19, 2011

Диалог заходит в тупик. Автор уже привык к своим методам, а общепринятые стандарты побоку.

Int · June 19, 2011

Вендоюзер детектед.

Сделать блок растягивающимся в высоту не проще, чем подбирать высоту, приемлемую для всех операционок?

Sign In

Вот такое, блин, творчество

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information