Резина или фиксированный?

Ergonav · April 30, 2012

Собственно начал верстать шаблон, ранее таких проблем не возникало...даже не знаю почему, В общем такой вопрос, есть макет

Сверстал я его как резину, но вот проблема - криво кажет на разных браузерах, все отступы делал в %, также проблема выявляется на маленьких мониторах -меньше (1280 x 1024), как решить собственно вопросик-то?

Вот что получилось на выходе

HTML

<html>
<head>
<link rel="stylesheet" href="style/styles.css" type="text/css" />
<title>Степлеры</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
function toggle_show(id) {
        document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none';
}
</script>
<body>

<!-- Логотип -->
<div class="logo">
</div>

<!-- Шапка -->
<div class="header">
</div>

<!-- Вверхняя менюшка -->
<ul class="solidblockmenu">
<li><a href="#">Главная</a></li>

<li><a href="#">История возникновения</a></li>
<li><a href="#">Разновидность</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Карта сайта</a></li>
</ul>
</div>

<!-- Левое меню -->
<div class="left-menu">
<ul>
	<li><a href="#home">Главная</a></li>
	<li><a href="#aboutCompany">Главная</li>
	<li><a href="#catalogue">Главная</a></li>
	<li><a href="#photogallery">Главная</a></li>
	<li><a href="#forPartners">Главная</a></li>
	<li><a href="#contact">Главная</a></li>
        <li onClick="toggle_show('bla-bla2')"><a href="#home">Вкладка</a>
		</ul>
                <ul id="bla-bla2" style="display: none; margin-top: 10px; margin-left: 30px;">
	<li><a href="#home">Меню</a></li>
	<li><a href="#aboutCompany">Меню</a></li>
	<li><a href="#catalogue">Меню</a></li>
                </ul>

</ul>
</div>


<!-- Обратная связь -->

<div id="back">
<div id="back2">

<form action="" method="post" class="form">
<div>

<input type="text" class = "text" name="user_name" value="Представьтесь" onfocus="if (this.value == 'Представьтесь') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Представьтесь';}">
</div> 

<div>

<input type="text" class = "text" name="email" value="Введите ваш e-mail" onfocus="if (this.value == 'Введите ваш e-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите ваш e-mail';}">
</div> 

        <textarea cols="40" class = "textarea" rows="5" name="text"></textarea>
    </div>

</form>

 <a href="index.html" id="an"></a>
 </div>
 </div>
 <!-- Новостная сортировка -->
 <div id="sort">
Главная » Категория » Название статьи
</div>

<div class="news">
<h2>История возникновения степлера</h2>
<img src="images/news.png" width="165px" height="130px" class="leftimages">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.delenit augue duis dolore te feugait nulla facilisi.</p>

 <a href="index.html" class="detail"></a>
  <div class="line-bottom">
 </div>
 </div>
  </div>

 <div class="news">
<h2>История возникновения степлера</h2>
<img src="images/news.png" width="165px" height="130px" class="leftimages">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.delenit augue duis dolore te feugait nulla facilisi.</p>

 <a href="index.html" class="detail"></a>
   <div class="line-bottom">
 </div>
 </div>
  </div>


 <div class="news">
<h2>История возникновения степлера</h2>
<img src="images/news.png" width="165px" height="130px" class="leftimages">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.delenit augue duis dolore te feugait nulla facilisi.</p>

 <a href="index.html" class="detail"></a>
   <div class="line-bottom">
 </div>
 </div>
  </div>


 <div class="transition">
<< Предыдущуая 1 2 3 4... 15 16 17 Слудующая >>
</div>


 <div class="search">
<form method="get" action="/search" target="_blank">
<input name="q" class="search2" id="form-query" value="" placeholder="поиск по сайту"> <input src="images/searc.png" type="image" style="vertical-align: bottom; padding-left: -3;"/></form>

 </div>
 </div>
 <div class="menu-2">
<ul>
	<li><a href="#home">Главная</a></li>
	<li><a href="#aboutCompany">Главная</li>
	<li><a href="#catalogue">Главная</a></li>
	<li><a href="#photogallery">Главная</a></li>
	<li><a href="#forPartners">Главная</a></li>
	<li><a href="#contact">Главная</a></li>
        <li onClick="toggle_show('bla-bla3')"><a href="#home">Вкладка</a>
		</ul>
                <ul id="bla-bla3" style="display: none; margin-top: 10px; margin-left: 30px;">
	<li><a href="#home">Меню</a></li>
	<li><a href="#aboutCompany">Меню</a></li>
	<li><a href="#catalogue">Меню</a></li>
                </ul>

</ul>
</div>

<div class="vote">


</div>

<div id="footer"> 
</div>
<div id="footert">
© 1Stapler.com, 2012. Все права защищены, любое копирование карается анально!









</body>
</html>

* {
margin: 0;
padding: 0;
}



body {
background-color: #e8e8e8;
background-image: url(../images/bg.png);
font-size: 16px;
max-width: 1900px;
}

/* Логотип */
.logo {
background-image: url(../images/logo.png);
width: 198px;
height: 104px;
float: left;
margin-left: 10%;
margin-top: 40px;
}


/* Шапка */
.header {
background-image: url(../images/header.png);
width: 760px;
height: 240px;
float: right;
margin-right: 10%;
}

/* Главное меню */
.solidblockmenu {
float: left;
margin-left: 10%;
font :  15px Arial;
width : 1000px;
border : 1px solid #113523;
background: url(../images/2.png) repeat-x center center;
}
.solidblockmenu li {
display : inline;
}
.solidblockmenu li a {
float : left;
color : #fff;
padding : 9px 40px;
text-decoration : none;
border-right : 1px solid #24714A;
font-size: 15px;
}
.solidblockmenu li a:visited {
color : #fff;
}
.solidblockmenu li a:hover, .solidblockmenu li .current {
color : #fff;
background : transparent url(../images/1.png) repeat-x center center;
}



a {
font-size: 16px;
color : #fff;
}

/* Левое меню */
.left-menu {
background-image: url(../images/left-menu.png);
width: 240px;
height: 356px;
float: left;
margin-left: 10%;
margin-top: 1%;
}

.left-menu li {
background: url("../images/i-stepler.png") no-repeat left;
width: 26px;
height: 19px;
color: #3e3c3c;
font-size: 16px;
margin-left: 10px;
padding-left: 40px;
padding-top: 17px;
word-spacing: 10px;
margin-bottom: -10px;
}

#bla-bla2 li {
background:none;
color: #036f93;
font-style:italic;
text-decoration: underline;
font-size: 14px;
}

#bla-bla2 li a{
background:none;
color: #036f93;
font-style:italic;
text-decoration: underline;
font-size: 14px;
}

.left-menu ul {
color: #7d7d7d;
 line-height: 1px;
	list-style: none;
	margin-top: 50px;
}

.left-menu li a {
color: #3e3c3c;
text-decoration: none;
font-size: 16px;
}


/* Форма обратной связи */

#back {
background-image: url(../images/back.png);
width: 240px;
height: 337px;
float: left;
margin-left: -19%;
margin-top: 30%;
}

form.form{
width: 230px;
padding:4px;
}

form.form div {
margin: 4px 0;
}

form.form1 div {
margin: 4px 0;
}

form.form input.text,
.textarea {
padding:5px 10px;
height:50px;
border:1px solid #ddd;
color:#333;
background: #fff;
font-size: 16px;
}

form.form input.text {
width:230px;
}

form.form .textarea {
height:110px;
width:230px;
}

form.form label {
float:left;
width:120px;
text-align:right;
margin-right:15px;
font-weight:bold;
color:#666;
font-size: 13px;
}

form.form .btn {
display:block;
height:31px;
padding:0 10px;
color:#565e62;
font-weight:bold;
font-size:12px;
border:1px solid #e1e0df;
outline:none;
cursor: pointer;
}

/* CSS3 */
form.form .btn,
form.form .text,
form.form .textarea { 
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

#back2 {
margin-top: 50px;
}

#an {
background-image: url(../images/an.png);
width: 235px;
height: 35px;
float: left;
margin-left: 3px;
margin-top: 18px;
}

/* Сортировка */
#sort {
width: 400px;
float: left;
margin-left: 1%;
margin-top: 1%;
color: #749605;
font-size: 13px;
}

.news {
width: 38%;
height: 27%;
float: left;
margin-left: 1%;
margin-top: 2%;
margin-bottom: -1%;
}

h2 {
color: #067ba1;
font-size: 16px;
padding-bottom: 10px;
}



.leftimages{
     float:left; /* Выравнивание по левому краю */
     margin: 1px 7px 7px 10; /* Отступы вокруг картинки */
	 border-color: #e3e3e3;
border-style: solid;
border-width: 5px;
	 }

p {
color: #3e3c3c;
font-size: 14px;
}

.detail {
background-image: url(../images/detail.png);
width: 135px;
height: 25px;
float: left;
margin-left: 73%;
margin-top: 3%;
}


.line-bottom {
background-image: url(../images/line.png);
width: 500px;
height: 2px;
float: left;
margin-left: 1%;
margin-top: 3%;
}

.transition {
font-weight:bold;
width: 400px;
float: left;
margin-left: 38%;
margin-top: 30px;
color: #107393;
font-size: 13px;
}

.search {
background-image: url(../images/search.png);
width: 240px;
height: 106px;
float: right;
margin-right: 11%;
margin-top: -64%;
}

.search2
{
width: 120px;
height: 35px;
margin-top: 25%;
margin-left: 5%;
}


/** Правое меню со звездочками **/
.menu-2 {
background-image: url(../images/menu-right.png);
width: 240px;
height: 356px;
float: right;
margin-top: -54%;
margin-right: 11%;
}




.menu-2 li {
background: url("../images/star.png") no-repeat left;
width: 26px;
height: 19px;
color: #3e3c3c;
font-size: 16px;
margin-left: 10px;
padding-left: 20px;
padding-top: 17px;
word-spacing: 10px;
margin-bottom: -10px;
}

#bla-bla3 li {
background:none;
color: #036f93;
font-style:italic;
text-decoration: underline;
font-size: 14px;
}

#bla-bla3 li a{
background:none;
color: #036f93;
font-style:italic;
text-decoration: underline;
font-size: 14px;
}

.menu-2 ul {
color: #7d7d7d;
 line-height: 1px;
	list-style: none;
	margin-top: 50px;
}

.menu-2 li a {
color: #3e3c3c;
text-decoration: none;
font-size: 16px;
}

/** Голосование **/
.vote {
background-image: url(../images/vote.png);
width: 240px;
height: 233px;
float: right;
margin-top: -25%;
margin-right: 11%;
}

#footer {
background-image: url(../images/footer.png);
width: 1000px;
height: 115px;
float: left;
margin-left: 8%;
margin-bottom: 1%;
}

#footert {
color: #fff;
font-size: 13px;
float: left;
margin-left: 10%;
margin-top: -3%;
}

Radiocity · April 30, 2012

А что написано в тех. задании?

mrnobody · April 30, 2012

Осмелюсь предположить, может из-за отсутствия доктайпа?

Sign In

Резина или фиксированный?

Question

Ergonav

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Radiocity

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information