X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> CSS слои
Barkas_hb
Barkas_hb
Topic Starter сообщение 24.12.2010, 17:51; Ответить: Barkas_hb
Сообщение #1


Всем привет подскажите как в CSS накладываются слои ,хочу сделать что бы логотип немного наезжал на другое .
:sarcastic:
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 24.12.2010, 18:18; Ответить: FightInGlory
Сообщение #2


Необходимо использовать position:relative или position:absolute все зависит от того, что и как вы хотите. Вот пример.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
html,body{
height:100%;
width:100%;
}
.block{
position:relative;
width:100%;
height:300px;
background:#fafafa;
}
.left,.right,.right1{
position:relative;
width:300px;
height:300px;
float:left;
}
.left{
background:red;
}
.right{
background:green;
left:-50px;
top:50px;
}
.right1{
background:blue;
left:-100px;
top:100px;
}
</style>
</head>
<body>
<div class="block">
<div class="left"></div>
<div class="right"></div>
<div class="right1"></div>
</div>
</body>
</html>

А это уже с использование с z-index если необходимо какой-то слой опустить или поднять.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
html,body{
height:100%;
width:100%;
}
.block{
position:relative;
width:100%;
height:300px;
background:#fafafa;
}
.left,.right,.right1{
position:relative;
width:300px;
height:300px;
float:left;
}
.left{
background:red;
z-index:1;
}
.right{
background:green;
left:-50px;
top:50px;
z-index:1;
}
.right1{
background:blue;
left:-100px;
top:100px;
z-index:0;
}
</style>
</head>
<body>
<div class="block">
<div class="left"></div>
<div class="right"></div>
<div class="right1"></div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 24.12.2010, 21:33; Ответить: locky-yotu
Сообщение #3


Я честно, от всего сердца не понимаю, почему люди рассчитывают, что на форуме им ответят быстрее и понятнее, чем О, Великий
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Krusnik_hb
Krusnik_hb
сообщение 25.12.2010, 3:50; Ответить: Krusnik_hb
Сообщение #4


очень удобно с position:relative или position:absolute исользовать z-index:R Где "R" это числовой номер слоя, может быть задан от 1 до скольки угодно)
таким образом можно как в фотошопе накладывать один слой на другой;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Barkas_hb
Barkas_hb
Topic Starter сообщение 1.1.2011, 23:46; Ответить: Barkas_hb
Сообщение #5


скажите а как зафиксировать слой что бы при масштабирование в браузере он остовался на своем месте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
www3_hb
www3_hb
сообщение 2.1.2011, 0:00; Ответить: www3_hb
Сообщение #6


Пишешь слой токо left и top ну или right и bottom пишешь не в % а в пикселях тогда он постоянно будет появляться в одном месте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Barkas_hb
Barkas_hb
Topic Starter сообщение 2.1.2011, 15:09; Ответить: Barkas_hb
Сообщение #7


А Css кодировать надо если да то где в Dreamweaver 8 не найду
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Barkas_hb
Barkas_hb
Topic Starter сообщение 7.1.2011, 19:48; Ответить: Barkas_hb
Сообщение #8


ребята не получается зафиксировать слой, прописываю расположение в пикселях TOP ,right все ровно наченаешь уменьшать в браузере ,слой с изоброжением уезжает в лево ПОЧЕМУ!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Malganus
Malganus
сообщение 8.1.2011, 10:52; Ответить: Malganus
Сообщение #9


а по конкретней можно? Что именно прописано для слоя и как именно он зафиксирован?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Barkas_hb
Barkas_hb
Topic Starter сообщение 8.1.2011, 17:33; Ответить: Barkas_hb
Сообщение #10


[CSS] log{
position: absolute;
left:304px;
top:285px;
z-index:2;
width: 126px;
height: 160px;
}
[/CSS] вот,что тут не так?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
 9 malamut 3488 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
 5 CULA 3421 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
 1 ViktoriaFE 6459 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
 0 kozak199110 1668 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
 2 zaiko 1437 29.12.2020, 23:49
автор: zaiko


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 2:22

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet