DIV-ка с изображением внутри

Stutzer · December 23, 2007

Здравствуйте, такой вопрос:

Сайт сверстан слоями. На сайте три колонки. Верстка резиновая.

В центральной колонке нужно разместить блок (дивку), в которой размешено большое (2000px по ширине) изображение.

При этом это изображение должно быть отцентровано в этой дивке. Т.е., если к примеру центральная колонка сайта получилась шириной 800px, то от изображения должно обрезаться справа 600px и слева столько же, а центральная часть отобразится.

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

Я попробовал применить к дивке вот такие стили

overflow: hidden;
text-align: center; 
width: 95%;

в таком случае картинка обрезается, но не центрируется

Может кто сталкивался?

Vlad · December 24, 2007

Думаю, что никто не сталкивался с картой шириной 2000 пикселов. Мониторы у нас маленькие, куда нам такие размеры.

Stutzer · December 24, 2007

Ну суть то не в этом. Эта картинка - это карта, на которой по центру находится определенный город. А весь этот трюк с центрированием нужен для того, чтобы посетители с разными разрешениями мониторов видели центр города, но при этом на очень больших мониторах, где центральная колонка будет широкой, карта бы занимала все колонку по ширише

Scrum · December 24, 2007

возможно, но не уверено что именно то

<!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" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 body {
 overflow: hidden;
 width: 100%;
 text-align: center;
 }
 #carrier {
 width: 200%;
 margin-left: -50%;
 background: silver;
 }
 img {
 width: 2000px;
 height: 100px;
 }


 /*]]>*/
 </style>
</head>

<body>
 <div id="carrier">
 <img src="SplashScreen.bmp" />
 </div>
</body>

</html>

Sign In

DIV-ка с изображением внутри

Question

Stutzer

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Stutzer

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information