Расхождение колонок макета в Dreamvweavr

ksonline · April 20, 2012

Всем привет!

Подскажите где я допустил ошибку при верстке макета, в браузерах отображается нормально, а в dreamweaver почему то правая колон

ка отспупает от левой на ширину левой колонки. Да и в правой колонке стали появляться проблемы с расположением элементов.Сам проверял не один раз но увы...


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<style type="text/css">
 BODY {
    margin : 0; 
 	padding: 0;
 }
.box {
	width:1146px;
	color: #FFF;
	height:980px;
	margin-left: auto;
	margin-right: auto;

	margin-top :0;

	}

#banner {
	line-height: 0;
	margin-bottom:0;


	}

#v_menu
{
	height:665px;
	width:270px;
	float:left;
	margin-left:11px;
	padding-top:0;
	margin-top:0;
	background:white;

}
a img {
    border: none;  
   }

a.link_main
{
 background: url(images/bt_h_main.gif);  
    display: block;  
    width: 111px; 
    height: 48px; 
    }
   a.link_main:hover {
    background: url(images/bt_h_on_main.gif);  
}

a.link_arhierey
{
	background: url(images/bt_h_arhierey.gif);  
    display: block;  
    width: 111px; 
    height: 48px;  
   }
  a.link_arhierey:hover {
    background: url(images/bt_h_on_arhierey.gif);  
}


a.link_eparhiya
{
	background: url(images/bt_h_eparhiya.gif);  
    display: block;  
    width: 95px; 
    height: 48px;  
   }
  a.link_eparhiya:hover {
    background: url(images/bt_h_on_eparhiya.gif);  
}

 a.link_struktura
{
	background: url(images/bt_h_struktura.gif);  
    display: block;  
    width: 175px; 
    height: 48px;  
   }
  a.link_struktura:hover {
    background: url(images/bt_h_on_struktura.gif);  
}

 a.link_katehiz
{
	background: url(images/bt_h_katehiz.gif);  
    display: block;  
    width: 135px; 
    height: 48px;  
   }
  a.link_katehiz:hover {
    background: url(images/bt_h_on_katehiz.gif);  
}

a.link_konferen
{
	background: url(images/bt_h_konferen.gif);  
    display: block;  
    width: 145px; 
    height: 48px;  
   }
  a.link_konferen:hover {
    background: url(images/bt_h_on_konferen.gif);  
}



a.link_konkursy
{
	background: url(images/bt_h_konkursy.gif);  
    display: block;  
    width: 110px; 
    height: 48px;  
   }
  a.link_konkursy:hover {
    background: url(images/bt_h_on_konkursy.gif);  
}

a.link_video
{
	background: url(images/bt_h_video.gif);  
    display: block;  
    width: 80px; 
    height: 48px;  
   }
  a.link_video:hover {
    background: url(images/bt_h_on_video.gif);  
}

 a.link_voprosy
{
	background: url(images/bt_h_voprosy.gif);  
    display: block;  
    width: 187px; 
    height: 48px;  
   }
  a.link_voprosy:hover {
    background: url(images/bt_h_on_voprosy.gif);  
}

#info_area
{
width:auto;
height:659px;
margin-left:277px;
margin-top: 0;
background:grey;
padding-top:4px;

}
#slideshow {
	height: 296px;
	width:822px;
	background-color:white;
	border: 4px solid #debd8a;
	margin-left:10px;
    padding-top:7px;
}

#bottom_panel
{
 height:45px;
 background-color:#6799ca;
 margin-left:11px;
 margin-top:8px;
}
#news_area {
width:830px;
height:332px;
margin-left:10px;
margin-top:18px;
background-color:white;

}
#head_news {
	background-color: #8bbbf1;
	height: 48px;
}
#anons_head {
	background-color: #8bbbf1;
	height: 47px;
}
#search
{
margin-top:10px;
margin-left:75px;
}
</style>
</head>

<body background="images/background.gif" topmargin="0">
<div class="box" id="box">
<div class="banner" id="banner"><img src="images/upper_banner.gif" width="1148" height="188">
<table  border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td><a href="index.html"   class="link_main"></a> </td>
    <td><a href="arhierey.html" class="link_arhierey"></a> </td>
    <td><a href="/eparhiya.htm" class="link_eparhiya"></a> </td>
    <td><a href="/struktura_otdela.htm" class="link_struktura"></a> </td>
    <td><a href="/katehizacia.htm" class="link_katehiz"></a> </td>
    <td><a href="/konferen.htm" class="link_konferen"></a> </td>
    <td><a href="/konkursy.htm" class="link_konkursy"></a> </td>
    <td><a href="/video.htm" class="link_video"></a> </td>
    <td><a href="/voprosy.htm" class="link_voprosy"></a> </td>
  </tr>
</table>
</div>


  <div class="v_menu" id="v_menu">

      <img src="images/v_menu_head.gif" width="270" height="55" alt=" "><br>
	   <a href="/voskres_shcool.htm">     
      <img src="images/bt_vosk_ school.gif" width="270" height="53"></a><br>
      <a href="/eparh_kurs">
      <img src="images/bt_eparh_kurs.gif" width="270" height="54" alt=" "></a><br>
       <a href="/prav_gimn">
       <img src="images/bt_prav_gimn.gif" width="270" height="53" alt=" "></a><br>
       <a href="/osn_prav_kultury">
       <img src="images/bt_osn_kultury.gif" width="270" height="53" alt=" "></a><br>
        <a href="/vyshee_obraz.htm ">
        <img src="images/bt_vyshee_obrz.gif" width="270" height="51" alt=""></a><br>
        <a href="/shcoll_obrz.htm">
      <img src="images/bt_shcool_obrz.gif" width="270" height="53" alt=" "></a><br>
      <a href="/do_shcoll_obrz.htm ">
    <img src="images/bt_do_shcool_obrz.gif" width="270" height="51" alt=" "></a><br> </p>

<div class="anons_head " id="anons_head"><img src="images/bt_anonsy.gif" width="91" height="66" alt=" "></div>


  </div>

  <div class="info_area" id="info_area"> 
    <div class="slideshow" id="slideshow"> </div>
    <div class="news_area" id="news_area">
      <div class="head_news" id="head_news"><img src="images/bt_news.gif" width="104" height="66" alt="Новости">




       </div>
    </div>
  </div>


      <div class="bottom_panel" id="bottom_panel">
    <input type="search" name="search" id="search" class="search">
  </div>
</div>

  </div>

</div>
</body>
</html>

Edited April 20, 2012 by Great Rash
BB-теги надо писать без пробелов

alex_anderr · April 21, 2012

Вы имеет ввиду встроенный просмотрщик дримвьювера?

Не обращайте на него внимания, он не знает даже половину того, что знают браузеры.

Если в браузерах, все ок, то значит все ок.

ksonline · April 21, 2012

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

огромное спасибо за подсказку.да я имел ввиду встроенный просмотрщик, в нем и видно это расхождение...Во всех 4 основных браузерах все ok~! Вы меня успокоили... а как быть с версткой текста и прочего контента в правой сьехавшей колонке? ее ширина сейчас около 600px это меньше положенного . А в браузерах как надо...быть может учше задать для #info_area фиксированную ширину , сейчас стоит auto.?

Edited April 21, 2012 by ksonline

alex_anderr · April 22, 2012

Результат вашего кода не смотрел.

Но лучше либо в процентах, либо в пикселях указывать ширину.

Можно через min-width и max-width.

"width:auto" можно не писать, он итак по умолчанию будет стоять.

--

UPD:

И кстать, у вас айди дублирует класс везде. Сейчас вам это удобно, но если будет чуть сложнее верстка, то взгляд будет путаться

Хотя, считаю, каждый по своему с ума сходит )

Edited April 22, 2012 by alex_anderr

ksonline · April 22, 2012

Результат вашего кода не смотрел.
Но лучше либо в процентах, либо в пикселях указывать ширину.
Можно через min-width и max-width.
"width:auto" можно не писать, он итак по умолчанию будет стоять.
--
UPD:
И кстать, у вас айди дублирует класс везде. Сейчас вам это удобно, но если будет чуть сложнее верстка, то взгляд будет путаться
Хотя, считаю, каждый по своему с ума сходит )

Благодарю! воспользуюсь вашим советом id изменю ... если не трудно поделитесь опытом , как лучше именовать id чтобы оно отличалось от свойства class ... меня всегда этот момент смущал, но я не знал как лучше поэтому писал одинково...

Edited April 22, 2012 by ksonline

alex_anderr · April 23, 2012

Айди и классы могут повторятся, просто конкретно мне это не всегда бывает удобно.

Айди на странице может быть один с одним именем, т.е. айди на странице уникальный должен быть.

Классов может быть много.

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

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

Пробовать надо самому.

Классы можно писать через пробел. Это удобно с текстом, например. <span class='big red'>Большой красный текст</span>

ksonline · April 23, 2012

Айди и классы могут повторятся, просто конкретно мне это не всегда бывает удобно.
Айди на странице может быть один с одним именем, т.е. айди на странице уникальный должен быть.
Классов может быть много.
Мне, нравится по максимуму айди использовать, а где не получается, там классы.
Но многие предпочитают обходится классами, а айди использовать для javascript или других целей.
Пробовать надо самому.
Классы можно писать через пробел. Это удобно с текстом, например. <span class='big red'>Большой красный текст</span>

Спасибо.буду писать ,а со временем выработается опыт покажет как лучше

Sign In

Расхождение колонок макета в Dreamvweavr

Question

ksonline

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

alex_anderr

Link to comment

Share on other sites

ksonline

Link to comment

Share on other sites

alex_anderr

Link to comment

Share on other sites

ksonline

Link to comment

Share on other sites

alex_anderr

Link to comment

Share on other sites

ksonline

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information