• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по HTML » Проблема с выравниванием слоя (Слой надо привязать к нижнему правому углу)
Проблема с выравниванием слоя
RavenCore
Дата: Четверг, 08.04.2010, 21:54 | Сообщение # 1
молчун
Группа: Пользователи
Пользователь №: 2612
Сообщений: 5
Надо привязать небольшой уголок в правый нижний угол, что бы он текст контента обрамлял. Ну вот уголок выравнивается по окну браузера, а надо , что бы по содержимому окна. Помогите пожалуйста, просто я больше дизайнер, чем программист :) Код ниже.
Code
#Layer1 {
  position:absolute;
  left:20px;
  top:20px;
  width:100%;
  height:100%;
  z-index:1;
  background:url(corner_up.png) top left no-repeat;
}
#Layer2 {
  position:absolute;
  right:20px;
  bottom:20px;
  width:100%;
  height:100%;
  z-index:2;
  background:url(corner_back.png) bottom right no-repeat;
}
</style>
</head>
  
Raiderr
Дата: Пятница, 09.04.2010, 01:11 | Сообщение # 2
болтун
Группа: Проверенные
Пользователь №: 673
Сообщений: 349
Получено оценок: 26
Code
#Layer1 {
  position:fixed;
  left:20px;
  top:20px;
  width:100%;
  height:100%;
  z-index:1;
  background:url(corner_up.png) top left no-repeat;
}
#Layer2 {
  position:fixed;
  right:20px;
  bottom:20px;
  width:100%;
  height:100%;
  z-index:2;
  background:url(corner_back.png) bottom right no-repeat;
}
</style>
</head>

или я не так понял?! O_o


Новый кавер Jar of Hearts: http://www.youtube.com/watch?v=OLkXQMHVRhI
  
RavenCore
Дата: Пятница, 09.04.2010, 08:04 | Сообщение # 3
молчун
Группа: Пользователи
Пользователь №: 2612
Сообщений: 5
fixed привязывает эти уголки к окну браузера, а контент можно двигать за ними. Мне не так надо.
Может этот эффект совсем и не слоями осуществим, но я больше ничего придумать к сожалению немогу :(


Сообщение отредактировал RavenCore - Пятница, 09.04.2010, 08:05
  
WRC
Дата: Пятница, 09.04.2010, 10:10 | Сообщение # 4
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11
RavenCore, просто на всего перемести тэги с айдидами (#Layer1 && #Layer2) в контент...

Устраняем баг при просмотре материала
  
RavenCore
Дата: Пятница, 09.04.2010, 11:25 | Сообщение # 5
молчун
Группа: Пользователи
Пользователь №: 2612
Сообщений: 5
Сейчас я имею вот такую картину
Прикрепления: 2483859.jpg (195.4 Kb)
  
RavenCore
Дата: Пятница, 09.04.2010, 11:30 | Сообщение # 6
молчун
Группа: Пользователи
Пользователь №: 2612
Сообщений: 5
А надо вот так:

НО Проблема в том, что нижний правый уголок, нехочет вязаться правильно :(

Вот весь код документа:

Code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>content</title>
<style type="text/css">
#Layer2 {
    position:absolute;
    right:20px;
    bottom:20px;
    width:50px;
    height:50px;
    z-index:1;
    background:url(corner_back.png) right bottom no-repeat;
}

#Layer1 {
    position:absolute;
    left:20px;
    top:20px;
    width:50px;
    height:50px;
    z-index:1;
    background:url(corner_up.png) left top no-repeat;
}
</style>
</head>

<body>
<div class="content" style="padding:30px 35px 20px 35px">
<div id="Layer1"></div>
<p>Текст контента </p>
<div id="Layer2"></div>
</div>
</body>
</html>
Прикрепления: 4186874.jpg (191.7 Kb)


Сообщение отредактировал RavenCore - Пятница, 09.04.2010, 12:48
  
RavenCore
Дата: Пятница, 09.04.2010, 11:35 | Сообщение # 7
молчун
Группа: Пользователи
Пользователь №: 2612
Сообщений: 5
Или дайте совет каким другим способом сделать подобную вещь.
  
WRC
Дата: Пятница, 09.04.2010, 12:48 | Сообщение # 8
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11
а ну понятно... делать нужно по другому...
примерно таким способом:
Code
<style>
#Layer1 {background: left top no-repeat url(corner_up.png); margin: 30 35px 20 35px}
#Layer2 {background: right bottom no-repeat url(corner_back.png); padding: 10px;}
</style>

<div id="Layer1">
<div id="Layer2">
Текст контента
</div>
</div>


Устраняем баг при просмотре материала
  
Форум Studio AD » Сайтостроение » Общий форум по HTML » Проблема с выравниванием слоя (Слой надо привязать к нижнему правому углу)
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.