Непонятное отображение во всех браузерах.

blackoverdose · March 13, 2012

Здравствуйте уважаемые гуру форума =)

Пришел к вам с вопросом, сейчас на практике переношу шаблон сайта техникума, на другую CMS... Работаю естественно на компах которые стоят в учебном заведении. Когда делаю верстку там, и проверяю, то что сделано отображается так как нужно (проверялось только на ИЕ 6-7, другие там ставить нельзя), я так и думал что все отлично... но вот решил посмотреть на сайт уже на домашнем компьютере, и ужаснулся! большая часть CSS стиля просто не применяется (смотрел в ИЕ 8, хром, фф), причем такая проблема есть везде, где бы не открывался сайт (это я уже про компьютеры, попросил открыть всех своих знакомых...), НО, на компах в техникуме, сайт отображается отлично. Как это понимать?)

сам сайт http://www.collegeglass.ru/

Ах да, верхнее меню нигде кроме компов в техникуме не работает. Скажу сразу, CMS они купили какую то странную))) выкладываю содержимое файла шаблона и файлов CSS.

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" xml:lang="ru" lang="ru">
<head><!--FRAME_HEAD--></head>
<body id="start">
	<ul id="base"><li><span>Домой</span></li><li><a href="/sitemap/" title="Карта сайта">Карта сайта</a></li><li><a href="/send_to_admin/" title="Написать администратору">Письмо</a></li><li><form id="search" name="search" action="/search/" method="get" ><fieldset><input class="field" name="q" value="Поиск по сайту" /><input class="but" type="submit" value="Поиск" /></fieldset></form></li></ul>
	<div id="head">
		<img src="images/logo.jpg" alt="Логотип" style="position:absolute; overflow:visible; z-index:2;"/>
		<div id="topedit" class="content" ><!--FRAME_TOPEDIT--></div>
		<div id="topeditright" class="content" style="z-index:2; overflow:hidden; position:absolute; left:90%; float:left;"><a href="http://www.collegeglass.ru/"><img src="http://www.collegeglass.ru/images/top_right.jpg"></a></div>


	</div>
	<div id="topmenu">
		<!--FRAME_TOPMENU--> 
	</div>
	<table id="wrapper">
		<td id="nav"><!--FRAME_MENU--></td>
		<td id="content" class="content">
			<!--FRAME_SPECIAL-->
			<!--FRAME_CONTENT-->
		</td>
		<td id="sidebar" class="content">
			<!--FRAME_SHORTNEWS-->
			<div class="rotation rot1"><!--FRAME_ROTATION--></div>
			<div class="rotation rot2"><!--FRAME_ROTATION2--></div>	
		</td>
	</table>

	<div id="footer">
		<div id="copy"  class="content">
			<a href="http://www.collegeglass.ru/" target="_blank" title="Гусевский стекольный колледж - обучение, филиалы, поступление, курсы, студенты">Гусевский стекольный колледж</a><br/>
			<a href="http://www.ultersuite.ru/" target="_blank" title="Система управления контентом сайта CMS UlterSuite">Система управления сайтом CMS Ulter Suite</a>
		</div>
		<div id="footeredit" class="content"><!--FRAME_FOOTEREDIT--></div>
	</div>
</body>
</html>

base.css:

*{
  margin:0;
  padding:0;
  border-collapse:collapse;
}
html{
  height:100%;
 max-width:1024px;
}
body{
  position:relative;
min-height:100%;
width:100%;
}
td{
  vertical-align:top;
}
#base{
  height:24px;
  padding-left:30px;
  padding-right:20px;
  padding-top:3px;
}
#base *{
  display:inline;
}
#base a, #base span{
  position:relative;
  top:-5px;
  padding-right:1.6em;
  vertical-align:bottom;
  line-height:1.4em;
}
#search .field{
  width:200px;
  height:18px;
  margin-right:5px;
  line-height:1.2em;
}
#search .but{
  width:50px;
  height:20px;
}
#head{
  height:80px;
  width:100%;
max-width:100%;
}

#topmenu{
  height:50px;
  font-size:1.5em;
}
#topmenu ul{
  list-style:none;
  padding-left:100px;
  padding-top:8px;
  padding-bottom:8px;
  border-top:1px solid #000000;
  border-bottom:1px solid #000000; 
   background-color:#e9e9e9;
}
#topmenu li{
  display:inline;
  padding-right:15px;
  padding-left:15px;
  background-image:url("http://www.collegeglass.ru/images/ar1.gif");
  background-repeat:no-repeat;
  background-position:left; 

}
#topmenu li:hover{
display:inline;
  padding-right:15px;
    padding-left:15px;
  background-image:url("http://www.collegeglass.ru/images/ar2.gif");
  background-repeat:no-repeat;
  background-position:left;}
#wrapper{
  width:100%;
}
#nav{
  width:165px;
  padding-left:5px;
  padding-bottom:0px;
  padding-right:0px;
}
#nav ul{
  width:165px;
  padding-top:0px;

}
#nav li{
   padding-left:10px;
  padding-bottom:0px;
}
#nav li.selected ul{
  margin-bottom:-5px;
}
#nav li a, #nav li span.active{
  font-size:1.1em;
}
#content{
  min-width:60%;
  padding-left:34px;
  padding-bottom:90px;
  padding-right:30px;

}
#start #content{
  padding-left:30px;
  padding-right:30px;
}
.content{
  font-size:1.3em;
  font-family: Arial;
}
.content blockquote.news h4{
  padding-bottom:1.09em;
}
.content p, .content ul, .content ol, .content .tablelist caption, .content .photo{
  padding-bottom:0.455em;
}
.content h1{
  margin-bottom:0.45em;
}
.content h1.section{
  margin-top:0.4em;
}
.content h2{
  margin-bottom:0.45em;
}
.content h3{
  margin-bottom:0.45em;
}
.content h4{
  margin-bottom:0.37em;
}
.content h5{
  margin-bottom:0.37em;
}
.content h6{
  margin-bottom:0.37em;
  letter-spacing:0.2em;
}
.content .tablelist{
  width:98%;
  margin:0 auto 0.5em;
}
.content .tablelist td, .content .tablelist th{
  padding:0.3em 0.5em;
}
.content .tablelist th{
  text-align:left;
}
.content table.stuff{
  width:98%;
  margin-bottom:-0.5em;
  margin-top:0.6em;
}
.content table.stuff td{
  padding-bottom:1.2em;
  padding-right:1.5em;
  text-align:center;
  vertical-align:top;
}
.content table.stuff td p{
  margin-top:0.5em;
}
.content ul{
  padding-left:1.4em;
}
.content ol{
  padding-left:1.8em;
}
.content .ImageLeft{
  margin-right:0.7em;
  margin-bottom:0.2em;
} 
.content .ImageRight{
  margin-left:0.7em;
  margin-bottom:0.2em;
}
.content .ImageCenter{
  display:block;
  margin:0 auto 0.5em;
}
.content .photo{
  float:left;
  padding-right:10px;
}
.content .photo p{
  padding-top:0.2em;
  text-align:center;
}
.content .gallery ul{
  padding:0;
}
.content .gallery li{
  float:left;
  margin-right: 10px;
}
ul.sub{
  padding-left:0;
}
ul.sub li{
  display:inline;
}
.content form td input{
  display:block;
  width:250px;
}
.content input.quantity{
  width:60px;
}
.content form td input.but{
  display:block;
  width:auto;
}
.content input.radio, .content input.checkbox{
  display:inline;
  width:auto;
}
.content form td textarea{
  width:300px;
  height:120px;
}
.content form td{
  padding-bottom:0.5em;
  padding-right:2em;
}
#sidebar{
  width:204px;
  margin-right:-240px;
  padding-left:20px;
  padding-bottom:90px;
  padding-right:15px;
}
#start #sidebar{
  width:324px;
}
.rotation{
  width:204px;
  margin-top:10px;
}
#start .rotation{
  width:324px;
}
#footer{
  position:absolute;
  left:0;
  bottom:0;
  clear:both;
  width:100%;
  height:50px;
  overflow:hidden;
}
#footeredit{
  margin-right:320px;
  padding-left:34px;
  padding-top:0.8em;
}
#copy{
  float:right;
  width:300px;
  padding-top:0.9em;
  padding-right:20px;
  text-align:right;
}
/*Р“Р°Р»РµСЂРµСЏ*/
#content .gallery{
  clear:both;
  margin:0 25px 20px;
}
#content .gallery.v{
  position:relative;
  padding:0 100px 0 0;
}
#content .mainGallery{
  margin:0 0 7px;
  text-align:center;
}
.content .gallery p, #content .gallery p{
  min-height:1.5em;
  margin:0 0 5px;
  text-align:center;
}
#content .gallery ul{
  margin:0;
  padding:0;
}
#content .gallery.v > ul{
  position:absolute;
  top:0;
  right:0;
}
#content .gallery li{
  padding:0;
  overflow:hidden;
}
#content .gallery.g li{
  display:inline-block;
  margin:0 10px 70px 0;
  vertical-align:middle;
}
#content .gallery.v li{
  display:table;
  margin:0 auto 5px;
}
#content .gallery .list{
  position:relative;
}
#content .gallery.g .list{
  padding:0 30px;
}
#content .gallery.v .list{
  position:absolute;
  top:0;
  right:0;
  padding:0;
}
#content .gallery .list div{
  position:relative;
  overflow:hidden;
}
#content .gallery p.prevArr, #content .gallery p.nextArr{
  position:absolute;
  top:12px;
}
#content .gallery p.prevArr{
  left:0;
}
#content .gallery p.nextArr{
  right:0;
}
#content .gallery p.upArr{
  padding:0 0 5px;
}
#content .gallery p.downArr{
  padding:5px 0 0;
}
#content .gallery.g .list ul{
  height:74px;
  margin-right:-300px;
}
#content .gallery.v .list ul{
  margin-bottom:-300px;
}

decor.css

*{
  border:none;
}
html{
  background:#fff;
}
body{
  font-family:'Tahoma', 'Arial', 'Verdana', sans-serif;
  font-size:62.5%;
  background:#fff;
  color:#000;
}
a, a:link, a:visited, {
  text-decoration:none;
color:#666666;
}


#base{
  list-style:none;
  background:#eaedee;
}
#base a, #base span{
  font-size:1.1em;
  color:#666;
}
#base span{
  color:#000;
}
#search .field{
  font-size:1.4em;
}
#search .field, #search .but{
  border:1px solid #666;
}
#head{
  background:#167ebd;
  height:80px;
}
#head a{
  color:#fff;
}
#topedit{
  color:#fff;
  background-image:url('http://www.collegeglass.ru/images/fon_top.jpg');
  background-repeat:repeat-x;
position:absolute;
float:left;
left:0px;
width:100%;
    top:27px;
  height:120px;
  padding-top:0.5em;
  overflow:hidden;
  z-index:1;
}
#topmenu a:hover{
color:#ff9c00;
}
#nav{
border-right:1px solid #000;
background-color:#fffff;
}
#nav a:hover{
display:block;
background-color:#F7F7F7;
border-left:5px solid #FF8000;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
#nav a{
display:block;
border-left:5px solid #5E71AA;
padding-left:3px;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
padding-top:5px;
padding-bottom:5px;
}
#nav ul{
  list-style:none;

}
#nav li a, #nav li span.active{
  font-size:1.4em;
}
#nav li span.active{
display:block;
background-color:#F7F7F7;
border-left:5px solid #FF8000;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
font-size:1.5em;
}
.content blockquote.news h4{
  font-weight:bold;
}
.content blockquote.news a{
  font-weight:bold;
}

ul.sub{
  list-style:none;
}
ul.sub li{
  color:#7f7f7f;
}
ul.sub li span{
  color:#000;
}
.content h1{
  font-size:1.5em;
}
.content h2{
  font-size:1.3em;
}
.content h3{
  font-size:1.2em;
  color:#618aa8;
}
.content h4{
  font-size:1em;
}
.content h5{
  font-size:1em;
  color:#618aa8;
}
.content h6{
  letter-spacing:0.2em;
  font-size:1em;
}
.content .tablelist td, .content .tablelist th{
  border:solid #000 1px;
}
.content .tablelist th{
  font-weight:bold;
  color:#618aa8;
}
.content .gallery li{
  list-style:none;
}
.content input, .content form textarea{
  border:1px solid #000;
}
.content input.radio, .content input.checkbox{
  border:none;
}
.content form sup{
  font-weight:bold;
  color:#C00;
}
#sidebar{
  border:solid #000 0;
  border-left-width:1px;
}
#footer{
  background:#167ebd;
  color:#fff;
}
#footer a{
  color:#fff;
}

/*gallery*/
#content .mainGallery{
  background:url('/images/xsl_images/loader.gif') no-repeat 50% 50%;
}
#content .gallery ul{
  list-style:none;
  list-style-image:none;
}
#content .gallery .active img{
  border:2px solid #618aa8;
}
#content .gallery li img{
  border:2px solid #fff;
}
.gallery .control{
  cursor:pointer;
}

И напоследок вопрос) Вы наверно заметите что вверху картинка уехала за основной каркас, как ее на место вернуть, и вообще сделать шаблон более резиновым? уж извиняюсь что я такой глупенький, если что то я накосячил) но я не профи в веб дизайне, и сайтом занимаюсь лишь из за практики... но всеравно буду рад полученным знаниям.

br3t · March 13, 2012

Разные годы в футере на разных страницах на оффсайте этой мегацмс уже как бы намекает на её крутость.

Если это в ваших силах - поспособствуйте переходу на что-то более популярное

По поводу верхнего меню - #topedit слишком высок, ему надо пикселей 80

По шаблону - тут посмотрите http://htmlbook.ru/layout/rezinovaya-shirina-navigatsiya-sleva

blackoverdose · March 14, 2012

Спасибо за ответ) то что ЦМСка убогая я сразу сказал) но меня там слушать никто не будет... да и смысла уже нету переделывать, практики осталось 3-4 дня, так что нужно хоть это в более менее нормальный вид привести. Сегодня после долгих проб методом тыка, сайт начал отображаться более менее правильно, НО ссылки всеравно еще подчеркиваются, хотя не должны. И как мне сделать так чтобы верхнее меню (сами слова) сжимались, по мере уменьшения ширины окна браузера? а то они стоят на месте, в то время как все остальное сжимается, при этом появляется полоса прокрутки нижняя и если прокрутить ее вправо, пункты меню выезжают за сам каркас.

Edited March 14, 2012 by blackoverdose

Sign In

Непонятное отображение во всех браузерах.

Question

blackoverdose

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

br3t

Link to comment

Share on other sites

blackoverdose

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information