Помогите разобратся. Шаблон на <DIV> + CSS

FriZZ · December 30, 2009

Привет всем.

Значит такое дело: верстал шаблон и столкнулся с такой маленькой задачкой.

А точнее 2умя маленькими задачками (:

1-ая проблема:

Есть шаблон. В нем есть главный див (.maindiv), в котором находится все содержимое. Длинна этого дива 995px. С помощью margin: auto; он располагается по центру страницы. Однако есть ещё один элемент дизайна - .provod . Этот элемент должен располагаться в верхней части страницы и вплотную прилегать к правой стороне главного дива (.maindiv) . Так же, дабы не увеличивать ширину сайта ( и смотреть его без скрола на маленьких разрешениях), надо что бы этот див (.provod) был как бэкграунд - при нехватке места на мониторе он прятался бы за его пределы, не оставляя при этом полосы прокрутки. Тоесть по сути, что б его было видно только на более высоких разрешениях. и он никак не должен "сдвигать" главный див (.maindiv) с центра.

Собственно с ним и проблема, не знаю, как реализовать. помогите, плз ))

2-ая проблема:

Не могу понять почему, но элемент .slideshow, при разрешении в 1280х800, налазит на .topshadow и закрывает половину логотипа. А он должен быть под ним и ни в коем случае не налазить, должны появится полосы прокрутки, которых, почему-то, нет.

Я уже перепробовал все доступные мне способы позиционирования, но как-то безрезультатно. =\

Заранее благодарен за помощь.

Код и схему дивов цепляю.

index.tpl

<html>
<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>
</head>
<body>
	  <div class="maindiv">
		   <div class="leftside">
				<div class="topshadow">
					 <img src="/templates/Web-Studio/images/logo.jpg" alt="Web-Studio Creative" class="logo" />
				</div>
				<div class="slideshow">
						  <a href="">
							 <img src="/templates/Web-Studio/images/buttonleft.jpg" class="buttonleft">
						  </a>
						  <div class="preview">
						  </div>
						  <div class="more">
						  blah-blah-blah
						  </div>
						  <!--
						  <a href="">
							 <img src="/templates/Web-Studio/images/buttonright.jpg" class="buttonright">
						  </a>
						  -->
				</div>
				<div class="downshadow">
				</div>
		   </div>
		   <div class="rightside" >
				<div class="light">
					 <div class="menu">
						  <ul id="topnav">
							  <li><a href="#"><strong>Main</strong></a></li>
							  <li><a href="#"><strong>Portfolio</strong></a></li>
							  <li><a href="#"><strong>Yslugi</strong></a></li>
							  <li><a href="#"><strong>Zakazat'</strong></a></li>
							  <li><a href="#"><strong>Contact's</strong></a></li>
						  </ul>
					 </div>
				 </div>
				 <div class="content">
				   CONTENT
				 </div>
				 <div class="copyrights">
					  <hr>
					  COPYRIGHTS
				 </div>
		   </div>
	  </div>
	  <div class="provod">
	  </div>
</body>
</html>

style.css

body {
	background-color: #de4d0c;
	margin: 0px;
	padding: 0px;
}
hr {
	background-image: url(../images/hr.jpg);
	width: 439px;
	height: 2px;
	border: 0px;
}
.maindiv {
	background-color: #de4d0c;
	margin: auto;
	height: 100%;
	width: 994px;
}
.leftside {
	background-color: #ddd324;
	background-image: url(../images/leftbg.jpg);
	background-repeat: repeat-y;
	width: 516px;
	height: 100%;
	float: left;
}
.rightside {
	background-image: url(../images/rightbg.gif);
	background-repeat: repeat-y;
	width: 478px;
	height: 100%;
	float: right;
}
.topshadow {
	background-image: url(../images/topshadow.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 325px;
	width: 516px;
	text-align: right;
}
.content {
	width: 439px;
	margin-top: 170px
}
.slideshow {
	background-image: url(../images/slideshowbg.jpg);
	width: 423px;
	height: 228px;
	margin-left: 93px;
	position: absolute;
	bottom: 156px;
}
.buttonleft {
	margin-top: 77px;
	margin-left: 2px;
	float: left;

}
.buttonright {
	float: right;
	margin-top: 57px;
}
.preview {
	background-image: url(../images/preview.jpg);
	width: 342px;
	height: 168px;
	margin: 20 0 0 41;	
}
.more {
	width: 342px;
	height: 40px;
	margin-left: 41px;
}
.downshadow {
	background-image: url(../images/downshadow.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 156px;
	width: 516px;
	position: absolute;
	bottom: 0px;
}
.light {
	background-image: url(../images/light.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	top: 0px;
	height: 166px;
	width: 478px;
}
.menu {
	background-image: url(../images/menu.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 93px;
	width: 539px;	
	position: relative;
	right: 60px;
	top: 57px;
}
.logo {
	padding-top: 93px;
}
.copyrights {
	height: 60px;
	width: 439px;
	position: absolute;
	bottom: 0px;	
}
ul#topnav li {
	float: left;
	margin-top: 23px;
	padding-right: 15px;
}
ul#topnav li a {
	text-decoration: none;
	padding-top: 12px;
	text-align: center;
	color: #111;
	display: block;
	width: 81px;
	height: 46px;
}
ul#topnav li a:hover {
	background: url(../images/activebg.png) no-repeat;
	color: #FFF;
	width: 81px;
	height: 46px;
	text-decoration: none;
}

Схема расположения дивов:

Вот, что должно получится:

Edited December 30, 2009 by FriZZ

Justnewone · December 30, 2009

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

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

UPD:

1. ... он далее не уезжал вправо ...

Great Rash · December 30, 2009

Сейчас сюда придет псиволкер и посоветует свое мегарешение для вашего случая с проводом.

По поводу .slideshow:

у вас этот элемент абсолютно спозиционирован, а следовательно вырван из потока. Естественно что другие элементы будут на него налазить. Да и вообще на первый взгляд верстка перемудреная и неправильная. Покажите картинку того что надо получить и готовьтесь переделывать с нуля и правильно.

FriZZ · December 30, 2009

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

1. Тоесть, как это? о_0

2. А как быть тогда?

Сейчас сюда придет псиволкер и посоветует свое мегарешение для вашего случая с проводом.
По поводу .slideshow:
у вас этот элемент абсолютно спозиционирован, а следовательно вырван из потока. Естественно что другие элементы будут на него налазить. Да и вообще на первый взгляд верстка перемудреная и неправильная. Покажите картинку того что надо получить и готовьтесь переделывать с нуля и правильно.

Скрин нужного диза повесил в первом посте.Обновил.

:unsure:

Justnewone · December 30, 2009

1. Тоесть, как это? о_0
2. А как быть тогда?

Учить CSS и HTML, как быть я Вам подробно расписал, делать за Вас не буду.

Great Rash · December 30, 2009

Картинка у вас фиговая, в том плане что не показано где будет располагаться тексть и вообще все основные элементы

FriZZ · December 31, 2009

Мда..спасибо, ребят, за помощь.

Justnewone · December 31, 2009

Мда..спасибо, ребят, за помощь.

Пожалуйста, приходите еще.

psywalker · December 31, 2009

Мда..спасибо, ребят, за помощь.

ТС вопросы:

1) Есть рисунок, http://f.imagehost.org/0095/preview.jpg на нём справа вверху рисунок, табличка с проводами, это про него базар?

2) Если я правильно понял, он вначале располагается именно справа вверху или по-середине?, но при сужении экрана должен ВЕСЬ уходить за экран или только его Часть?

Sign In

Помогите разобратся. Шаблон на <DIV> + CSS

Question

FriZZ

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

FriZZ

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

FriZZ

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information