Позиционирование дивов

guvatara · December 10, 2007

Есть такая проблема.

Есть центральная часть страницы есть логотип (спозиционированый относительно центральной части)

И есть куча пнг картинок в дивах (их много в центральный див они не влезают).

причем позиционирование от центральной части расчитано что при разных разрешениях будет видно разное количество картинок. Т.е. при 1024х768 5, при 1280х1024 9, при большем больше.

Так вот проблема в том что если позиционировать в правую сторону, то появляется скролинг.

Пытался через overflow:hiden не помогает.

Т.е. если назначать всему сайту этот параметр то скролинг упорно не хочет появляться, даже при усттановке overflow:visible внутреней части сайта.

А если только дивам то скролинг все равно появляется. Подскажите в какую сторону рыть траншею в поисках решения.

html

<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="obl-cont">
<table class="tabl" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td class="top-l"> </td>
	<td class="otb"><img src="../blank.gif" alt="otb" width="1" height="138" /> </td>
	<td class="top-r"> </td>
  </tr>
  <tr>
	<td class="l"> </td>
	<td align="center" valign="top" class="center iePNG">
		<div class="main">
		<img src="../logo.png" alt="logo" width="344" height="233" class="logo" />
		<a href="#">
		<img name="menu2_02" src="../game-2.jpg" alt="game" width="94" height="43" border="0" class="game" /></a>
		<a href="#">
		<img name="menu2_04" src="../sob-2.jpg" alt="sob" width="120" height="33" border="0" class="sob" /></a>
		<a href="#">
		<img name="menu2_06" src="../art-2.jpg" alt="art" width="64" height="27" class="art" /></a>
		<form class="news" action="" method="get" name="news">
			<input class="email" name="email" type="text" />
			<input class="sub" onclick="this.form.submit" name="" type="image" src="../blank.gif" alt="subm" width="29" height="20" />
		</form>
		<div class="obl-1"><img src="../obl-1.png" alt="obl-1" width="199" height="193" /></div>
		<div class="obl-2"><img src="../obl-2.png" alt="obl-2" width="132" height="88" /></div>
		<div class="obl-3"><img src="../obl-3.png" alt="obl-3" width="147" height="96" /></div>
		<div class="obl-4"><img src="../obl-4.png" alt="obl-4" width="86" height="57" /></div>
		<div class="obl-5"><img src="../obl-5.png" alt="obl-5" width="136" height="76" /></div>
		<div class="obl-6"><img src="../obl-6.png" alt="obl-6" width="199" height="112" /></div>
		<div class="obl-7"><img src="../obl-7.png" alt="obl-7" width="155" height="71" /></div>
		<div class="obl-8"><img src="../obl-8.png" alt="obl-8" width="282" height="143" /></div>
		<div class="obl-9"><img src="../obl-9.png" alt="obl-9" width="103" height="67" /></div>
		<div class="obl-10"><img src="../obl-10.png" alt="obl-10" width="112" height="81" /></div>
		<div class="obl-11"><img src="../obl-11.png" alt="obl-11" width="87" height="63" /></div>
		<div class="obl-12"><img src="../obl-12.png" alt="obl-12" width="127" height="99" /></div>
		<div class="obl-13"><img src="../obl-13.png" alt="obl-13" width="108" height="91" /></div>
		<div class="obl-14"><img src="../obl-14.png" alt="obl-14" width="87" height="83" /></div> 
		</div>
	</td>
	<td class="r"> </td>
  </tr>
</table>
	</div>
</body>
</html>

css

body {
	background-color: #aedae6;
	background-image: url(../bg-1.jpg);
	background-repeat:repeat-x;
	background-position:0% 28%;
	margin:0px;
	padding:0px;
	position:relative;
	height:100%;
	font-size:1%;
}

*+html body {
background-image: url(../bg-1e.jpg);
	background-position:0% 46%;
}

img {
border:0px;
}

html {
height:100%;
}

.obl-cont {
height:100%;
width:100%;
position:relative;
background-image:url(../bg_div.jpg);
background-position:50% 46%;
background-repeat:no-repeat;
}

.tabl {
position: absolute;
height:100%;
width:100%;
z-index:90;
}

.center {
width:980px;
background-image: url(../b-c-bg.png);
background-repeat:no-repeat;
background-position:0px 459px;
}

.main {
height:614px;
width:980px;
background-image:url(../center-bg.png);
background-repeat:no-repeat;
background-position:0px -2px;
position:relative;
}

.cont {
height:459px;
width:980px;
background-image:url(../center-bg.jpg);
background-repeat:no-repeat;
position:relative;
}

.logo {
position:absolute;
top:-132px;
left:340px;
z-index:99;
}

.otb {
height:23%;
background-image:url(../top-bg.png);
background-position:0% 100%;
background-repeat:no-repeat;
}

.but {
background-color:#FFFF00;
}

.top-l {
background-image:url(../top-l-bg.png);
background-position:bottom right;
background-repeat:no-repeat;
}

.top-r {
background-image:url(../top-r-bg.png);
background-repeat:no-repeat;
background-position:bottom left;
}

.l {
background-image:url(../l-bg.png);
background-position:right top;
background-repeat:no-repeat;
}

.r {
background-image:url(../r-bg.png);
background-position:left top;
background-repeat:no-repeat;
}

.game {
position: absolute;
top:101px;
left:41px;
}

.sob {
position:absolute;
top:149px;
left:40px;
}

.art {
position:absolute;
top:192px;
left:52px;
}

.obl-1 {
position:absolute;
left:-289px;
top:90px;
z-index:1;
overflow:hidden;
}

.obl-2 {
position:absolute;
left:-181px;
top:-72px;
z-index:1;
overflow:hidden;
}

.obl-3 {
position:absolute;
left:-270px;
top:-308px;
z-index:1;
overflow:hidden;
}

.obl-4 {
position:absolute;
top:-290px;
left:-75px;
z-index:1;
overflow:hidden;
}

.obl-5 {
position:absolute;
left:200px;
top:-263px;
z-index:1;
overflow:hidden;
}

.obl-6 {
position:absolute;
left:238px;
top:-37px;
z-index:1;
overflow:hidden;
}

.obl-7 {
position:absolute;
left:536px;
top:-237px;
z-index:1;
overflow:hidden;
}

.obl-8 {
position:absolute;
left:644px;
top:-113px;
z-index:1;
overflow:hidden;
}

.obl-9 {
position:absolute;
left:904px;
top:-157px;
z-index:1;
overflow:hidden;
}

.obl-10 {
position:absolute;
left:738px;
top:65px;
z-index:1;
overflow:hidden;
}

.obl-11 {
position:absolute;
right:-80px;
top:-95px;
z-index:1;
overflow:hidden;
}

.obl-12 {
position:absolute;
right:-140px;
top:-260px;
z-index:1;
overflow:hidden;
}

.obl-13 {
position:absolute;
right:-34px;
top:60px;
z-index:1;
overflow:hidden;
}

.obl-14 {
position:absolute;
top:39px;
z-index:1;
overflow:hidden;
}

.news {
position:absolute;
top:378px;
left: 560px;
}

.email {
background-color:#dfcf84;
width:150px;
border:0px;
color:#876f49;
}

.sub {
margin-left:20px;
}

maddogrts · December 10, 2007

ммм а если запихать картинки в бакграунд дивов? тогда они будут обрезаться ?

Sign In

Позиционирование дивов

Question

guvatara

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

maddogrts

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information