Как предотвратить перемещение изображения при изменении размера окна - PullRequest
Новая
       7

Как предотвратить перемещение изображения при изменении размера окна

1 голос
/ 05 июля 2011

Я сейчас занимаюсь разработкой этого сайта http://digitalgenesis.com.au/projects/sister/music.html

Что происходит, когда я изменяю размер экрана, когда он в конечном итоге сталкивается с содержимым div, содержащим заголовок страницы, а затем перепрыгивает строку в неправильную позицию

http://digitalgenesis.com.au/projects/sister/img/screen.png


Я хотел бы, чтобы он остановился непосредственно перед попаданием текста на страницу


Может кто-нибудь предложить предложения о том, как это сделать


Вот HTML 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
       <title></title>
</head>

<body>
<div id="wrap">


<div id="musicbox">
<div id="musicheader">Music</div>

<div id="musicline"></div>
<div id="musiccontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>


</div>

<div id="musicimg"><img src="img/katrina.jpg" alt="#" /></div>



</body>
</html>




И CSS

@font-face {
    font-family: 'CodeLightRegular';
    src: url('../fonts/code/code_light_copy-webfont.eot');
    src: url('../fonts/code/code_light_copy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/code/code_light_copy-webfont.woff') format('woff'),
         url('../fonts/code/code_light_copy-webfont.ttf') format('truetype'),
         url('../fonts/code/code_light_copy-webfont.svg#CodeLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


#wrap{width:960px; margin:0 auto;}



#musicheader{font-size:120px; font-family: 'CodeLightRegular'; }
#musicbox{float:left; width:519px; }
#musicline{height:4px; background:black;  }
#musicimg{float:right; width:441px; }
#musiccontent{width:120%;}

#clear{clear:both;}

Ответы [ 2 ]

0 голосов
/ 05 июля 2011

как сказал Дэн, вы можете использовать его как background image с background-position; top:0; right:0; no-repeat и сказал, что хотите, чтобы текст не перекрывал изображение, для которого вы можете дать min-width

0 голосов
/ 05 июля 2011

решение HTML5 будет заключаться в использовании медиазапросов для стилизации страницы по-разному в зависимости от ширины: 

<link rel="stylesheet" type="text/css" media="screen" href="css/base.css" />

<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="css/main.css" />

в вашем base.css у вас будут все общие стили и любые стили для небольших экранов.В вашем main.css у вас будут переопределения для большого экрана.

(Другими словами, вам нужно сначала создать свой CSS с учетом небольшого экрана, а затем добавить CSS, чтобы он выглядел красиво набольшие экраны.)

ОБНОВЛЕНИЕ: -

Например, попробуйте: 

@media screen
{
  body{
      background-size: 0;
  }
}
@media screen and (min-width: 645px)
{
  body{
      background-size: 20%;
  }
}
@media screen and (min-width: 960px)
{
  body{
      background-size: auto;
  }
}
...