Absolute с отступом

czp · 29.06.2012

подскажите как сделать

Код:

div {
position:absolute;
width:100%;
margin-left:150px;
}

что бы с отступо от левого края было 150px а дальше на всю ширину моника, если сделать как выше привел пример, то вылазит в бока, тоесть грубо говоря сделать ширину абсолютного дива в 80%, но только ширина должна быть полный моник - 150px, как такое при помощи css реализуется? на js можете не упоменять и так знаю как на нем

Volter9 · 29.06.2012

с Absolute, тебе ничего не напоминает: top, left, bottom, right?

делаешь так:

Код:

div {
position: absolute;
left: 150px;
width: 100%;
}

tigra60 · 29.06.2012

Volter9 сказал(а):
с Absolute, тебе ничего не напоминает: top, left, bottom, right?

делаешь так:

Код:

div { position: absolute; left: 150px; width: 100%; }

А мозги включить, или хотя бы проверить свое решение?
Это называется "что в лоб, что по лбу"!

Весьма сомнительно выглядит идея абсолютного позиционирования блока шириной 100%.
Но если вы уж такой мазохист, то придется вам использовать подложку, например, так:

Код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
body {margin:0; padding:0}
.wrapper {
position:absolute;
width:100%;
top:100px;
}
.inner {
height:300px;
background:#33FFCC;
margin-left:150px;
}
</style>
</head>

<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>
</html>

Volter9 · 29.06.2012

tigra60 сказал(а):
Volter9 сказал(а):

с Absolute, тебе ничего не напоминает: top, left, bottom, right?

делаешь так:

Код:

div { position: absolute; left: 150px; width: 100%; }

Нажмите, чтобы раскрыть...

А мозги включить, или хотя бы проверить свое решение?
Это называется "что в лоб, что по лбу"!

Весьма сомнительно выглядит идея абсолютного позиционирования блока шириной 100%.
Но если вы уж такой мазохист, то придется вам использовать подложку, например, так:

Код:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>test</title> <style> body {margin:0; padding:0} .wrapper { position:absolute; width:100%; top:100px; } .inner { height:300px; background:#33FFCC; margin-left:150px; } </style> </head> <body> <div class="wrapper"> <div class="inner"></div> </div> </body> </html>

А ты хоть сам понял что он имел ввиду?
На кой вообще абсолютное поззиционирование?

А так сделать не судьба:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title></title>
  <style type="text/css">
  body{
   padding: 0px;
   margin: 0px;
  }
  div {
width: 90%;
float:right;
margin: 10px 0px;
height:100px;
background:#444;
  }
  </style>
</head>
<body>
<div></div>
</body>
</html>

tigra60 · 29.06.2012

Volter! Читайте, пожалуйста, внимательнее посты! Или увеличьте яркость на вашем И-девайсе!

Volter9 · 29.06.2012

tigra60 сказал(а):
Volter! Читайте, пожалуйста, внимательнее посты! Или увеличьте яркость на вашем И-девайсе!

Хахаха... Сейчас я на компьютере.

motek · 29.06.2012

tigra60 сказал(а):
Весьма сомнительно выглядит идея абсолютного позиционирования блока шириной 100%.
Но если вы уж такой мазохист, то придется вам использовать подложку, например, так:

Код:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>test</title> <style> body {margin:0; padding:0} .wrapper { position:absolute; width:100%; top:100px; } .inner { height:300px; background:#33FFCC; margin-left:150px; } </style> </head> <body> <div class="wrapper"> <div class="inner"></div> </div> </body> </html>

если фон какого-то определенного цвета, то от подложки можно избавиться

:

Код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
body {margin:0; padding:0}
.wrapper {
position:absolute;
width:100%;
height:300px;
top:100px;
background:#33FFCC;
border-left: 150px solid #ffffff; //цвет рамки соответствует цвету фона
}
</style>
</head>

<body>
<div class="wrapper">
</div>
</body>
</html>

Volter9 сказал(а):
На кой вообще абсолютное поззиционирование?

это условие задачи!

Volter9 сказал(а):

А так сделать не судьба:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
}
div {
width: 90%;
float:right;
margin: 10px 0px;
height:100px;
background:#444;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

а где отступ слева в 150 пикселей??? :blink:
это тоже условие задачи!

Volter9 · 29.06.2012

tigra60 сказал(а):
Volter! Читайте, пожалуйста, внимательнее посты! Или увеличьте яркость на вашем И-девайсе!

Volter9 сказал(а):
tigra60 сказал(а):

Volter9 сказал(а):

с Absolute, тебе ничего не напоминает: top, left, bottom, right?

делаешь так:

Код:

div { position: absolute; left: 150px; width: 100%; }

Нажмите, чтобы раскрыть...

А мозги включить, или хотя бы проверить свое решение?
Это называется "что в лоб, что по лбу"!

Весьма сомнительно выглядит идея абсолютного позиционирования блока шириной 100%.
Но если вы уж такой мазохист, то придется вам использовать подложку, например, так:

Код:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>test</title> <style> body {margin:0; padding:0} .wrapper { position:absolute; width:100%; top:100px; } .inner { height:300px; background:#33FFCC; margin-left:150px; } </style> </head> <body> <div class="wrapper"> <div class="inner"></div> </div> </body> </html>

Нажмите, чтобы раскрыть...

А ты хоть сам понял что он имел ввиду?
На кой вообще абсолютное поззиционирование?

А так сделать не судьба:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> body{ padding: 0px; margin: 0px; } div { width: 90%; float:right; margin: 10px 0px; height:100px; background:#444; } </style> </head> <body> <div></div> </body> </html>

Tigra60, дальше почитать не судьба???

czp · 29.06.2012

всем спасибо, уже замутил

Volter9 · 29.06.2012

[member=czp], А как вы решили проблему?

czp · 30.06.2012

немного костылево, у меня слева aside c поситион фиксед, при клике появляется див абсолютный, но должен отступ 150 пикселей что бы aside не закрывал а остольное закрывал, и контент в нем должен быть отцентрирован с учетом 150 пикс

Код:

aside {
width:150px;
position:fixed;
z-index:6;
}
div { // absolute
position:absolite
padding-left:150px;
box-sizing:border-box;
z-index:3;
}

тем самым контент по средине, и а aside видно как я хотел)

Volter9 · 30.06.2012

motek сказал(а):
tigra60 сказал(а):

Весьма сомнительно выглядит идея абсолютного позиционирования блока шириной 100%.
Но если вы уж такой мазохист, то придется вам использовать подложку, например, так:

Код:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>test</title> <style> body {margin:0; padding:0} .wrapper { position:absolute; width:100%; top:100px; } .inner { height:300px; background:#33FFCC; margin-left:150px; } </style> </head> <body> <div class="wrapper"> <div class="inner"></div> </div> </body> </html>

Нажмите, чтобы раскрыть...

если фон какого-то определенного цвета, то от подложки можно избавиться :

Код:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>test</title> <style> body {margin:0; padding:0} .wrapper { position:absolute; width:100%; height:300px; top:100px; background:#33FFCC; border-left: 150px solid #ffffff; //цвет рамки соответствует цвету фона } </style> </head> <body> <div class="wrapper"> </div> </body> </html>

Volter9 сказал(а):

На кой вообще абсолютное поззиционирование?

Нажмите, чтобы раскрыть...

это условие задачи!

Volter9 сказал(а):

А так сделать не судьба:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> body{ padding: 0px; margin: 0px; } div { width: 90%; float:right; margin: 10px 0px; height:100px; background:#444; } </style> </head> <body> <div></div> </body> </html>

Нажмите, чтобы раскрыть...

а где отступ слева в 150 пикселей??? :blink:
это тоже условие задачи!

Вы пробывали запускать?
Нет, а что говорит float: right;? Ничего наверное Мотек... Вот вам и отступ за счет float.

motek · 30.06.2012

Volter9 сказал(а):
Вы пробывали запускать?
Нет, а что говорит float: right;? Ничего наверное Мотек... Вот вам и отступ за счет float.

в отличие от Вас, я не отвечаю,пока не проверю на локалке...и Ваш пример проверил и Тигры...что сказать - Тигра зачет, а вот у Вас отступ есть, да только 10%, которые Вы оставили на отступ, это ни как не 150 пикселей...увы, задача не решена

Absolute с отступом

czp

czp

Volter9

defined('SURRENDER') or die(); // StarWars

tigra60

Спасатель

Volter9

defined('SURRENDER') or die(); // StarWars

tigra60

Спасатель

Volter9

defined('SURRENDER') or die(); // StarWars

motek

злой как @

Volter9

defined('SURRENDER') or die(); // StarWars

czp

czp

Volter9

defined('SURRENDER') or die(); // StarWars

czp

czp

Volter9

defined('SURRENDER') or die(); // StarWars

motek

злой как @

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей