Jump to content
  • 0

Прижать блок к правому блоку без скрола при смене разрешения экрана


13bis
 Share

Question

Здравствуйте!

Столкнулся с такой проблемой:

Дано:

Два блока. 1-ый блок содержит контент, 2-ой как элемент дизайна.

Задача:

Прижать 2-ой блок к правому краю экрана (ширина монитора 1900px по ширине) при условии, чтобы блок оставался именно в правом блоке, без смещений и при ширине экрана, к примеру, 1200px, соответственно чтобы небыло полосы прокрутки.

Вот наглядные скрины:

http://splotnikov.ru/1.jpg

http://splotnikov.ru/2.jpg

Подскажите пожалуйста как сделать.

Заранее благодарен!

Edited by 13bis
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

это же 1 класс) блоку нужно просто задать position:absolute; right:0px; и он будет у вас всегда привязан к правой стороне что бы вы ни делали с окном браузера)

Link to comment
Share on other sites

  • 0

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

Как вариант можно сделать отступ слева, но появляется полоса прокрутки и overflow:hiden не помогает с ней справиться.

Мелочь, а хочется понять и разобраться...

Edited by 13bis
Link to comment
Share on other sites

  • 0

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

Как вариант можно сделать отступ слева, но появляется полоса прокрутки и overflow:hiden не помогает с ней справиться.

Мелочь, а хочется понять и разобраться...

так оно и не должно смещаться О_О как это? блок не смещается а фон в нем смещается? или я не понял?

Link to comment
Share on other sites

  • 0

Привожу пример кода:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {background:#000; margin:0; padding:0;}

.blog_1 {
position:absolute;
margin:80px;
float:left;
background:url('http://splotnikov.ru/images/blog.jpg') no-repeat;
width:600px;
height:190px;
}
.blog_2 {
position:relative;
float:right;
background:url('http://splotnikov.ru/images/blog-bg-right.jpg') no-repeat right;
width:100%;
height:480px;
}
</style>
</head>
<body>
<div class='blog_1'></div>
<div class='blog_2'></div>
</body>
</html>

Link to comment
Share on other sites

  • 0

А что толку? Мне нужно чтобы фон обрезался с правой стороны блока.

т.е. 1-ый блок имеет фиксированную ширину в 600px, 2-ый блок - всё оставшееся пространство, но он не должен перекрывать 1-ый блок, при смене разрешения экрана. С правой стороны фон должен обрезаться.

Можно реализовать через BODY, но как быть если у пользователя разрешение экрана 1280px? Т.е. фон в body начинается сразу автоматически обрезаться при смене разрешения экрана.

Задача в следующем: при ширине монитора 1920px фоновое изображение прижато к правому блоку, при 1280 фоновое изображение на том же месте без изменений, а начиная уменьшать ширину с 1280 - фоновое изображение начинает обрезаться именно! с правого края.

Link to comment
Share on other sites

  • 0

пользуйся @media only screen and (max-width: 1025px) { и задавай отдельные стили для соответствующих размеров экрана... честно сказать я так и не проникся тем, что ты хочешь сделать)))

Link to comment
Share on other sites

  • 0

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


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {background:#000; margin:0; padding:0;}
.clearfix:after {
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.l {
width: 450px;
height: 200px;
float:left;
background: #C90 url('http://splotnikov.ru/images/blog.jpg') no-repeat;
}
.r {
background-color: blue;
overflow: hidden;
text-align: right;
white-space: nowrap;
}
.r .inner {
background:#000;
text-align: right;
display: inline-block;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="l"></div>
<div class="r">
<div class="inner">
<img src="http://splotnikov.ru/images/blog-bg-right.jpg">
</div>
</div>
</div>
</body>
</html>

Link to comment
Share on other sites

  • 0

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

Как вариант можно сделать отступ слева, но появляется полоса прокрутки и overflow:hiden не помогает с ней справиться.

Помогает, если вешать overflow на враппер-родителя, а не body

http://jsfiddle.net/68jcP/embedded/result/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy