Консультации Портала - Консультация #177934

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 177934

19.04.2010, 11:52

0.00 руб.

0 3 0

Компьютеры Программирование

Здравствуйте эксперты!
Сейчас делаю дизайн для сайта. Начал изучать div, но все равно многое остается загадкой :)

Пример:
http://design.uralavdiz.ru/

При расширении 1024 появляется скроллер, хотя там ширина 990.
Если меньше, то вообще пропадает правая картинка и дизайн плывет.
Хотя min-width стоит 990.

Еще левая и правая колонка имееют фон, только где есть меню, а ниже нет.

Как это исправить?

PS
не столь важно, но все же.
Так же интересно, какие стандарты поддерживают на сегодняшний день все последние браузеры.
Как обеспечить "правильную верстку"?
Если где нибудь описание как сделать ту или иную конструкцию?

Просто в таблицах хоть все запутано(в плане кучи тегов), но можно легко понять где какой элемент, и занять 100% экрана по высоте или расположить элемент ровно в центре и тд.

Приложение:
HTML
-------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>ООО «УралАвтоТрейд» - Продажа грузовой, малотоннажной, дорожно-строительной и спецтехники. Широкий выбор китайских грузовиков, самосвалов, тягачей: FAW,HOWO,HANIA. Лизинг</title>

<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" />


<meta http-equiv="Content-Type" content="text/xml; charset=windows-1251" />
<meta name="Keywords" content="{$template["keywords"]}">
<meta name="Description" content="{$template["description"]}">

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

</head>

<body>
<div id="all">


<div class="head">
<div id="header_left"></div>
<div id="header_right"></div>

<div id="header_uat"><a href="/" title="УралАвтоТрейд" style="color:black;" id="nolink"><FONT color="#206196">Урал</font>Авто<FONT color="#206196">Трейд</font></a></div>
<div id="header_diler">Официальный Дилер<BR> Грузовых Автомобилей <a href="/faw" title="FAW" style="color:#00509c;" id="nolink">FAW</a></div>

<div id="header_lefticons">
<img src="/images/logos/faw.png" width="43" height="27">
<img src="/images/logos/sinotruck.png" width="32" height="32">
<img src="/images/logos/shaanxi.png" width="34" height="32">
<img src="/images/logos/tata.png" width="48" height="31">
</div>
</div>






<div id="container">
<div id="inner">

<div id="center_top"></div>


<div id="left">


<div id="rounded-box-3"> 
<b class="r33"></b><b class="r31"></b><b class="r31"></b>
<div class="inner-box3">
<div id="rounded-box-5">
<b class="r55"></b><b class="r53"></b><b class="r52"></b><b class="r51"></b><b class="r51"></b>
<div class="inner-box5">
<div class="inner-boxtop">
<a class="link_no_decor" href="/about"><b class="menu_left_main_text">О Компании</b></a>
</div>
<div class="inner-boxbuttom ">
<a href="/about">
<img src="images/menu_left/about.png" class="menu_left_picabout">
</a>
<b class="menu_left_submain_text">
<a class="link_no_decor" href="/faw">Контакты</a>

<a class="link_no_decor" href="/howo">Преемущества</a>

<a class="link_no_decor" href="/hania">Обслуживание</a>

<a class="link_no_decor" href="/hania">Партнеры</a>

<a class="link_no_decor" href="/hania">Поставщикам</a>

</b>
</div>
</div>
<b class="r51"></b><b class="r51"></b><b class="r52"></b><b class="r53"></b><b class="r55"></b>
</div>
</div>
<b class="r31"></b><b class="r31"></b><b class="r33"></b>
</div> 

<div id="rounded-box-3"> 
<b class="r33"></b><b class="r31"></b><b class="r31"></b>
<div class="inner-box3">
<div id="rounded-box-5">
<b class="r55"></b><b class="r53"></b><b class="r52"></b><b class="r51"></b><b class="r51"></b>
<div class="inner-box5">
<div class="inner-boxtop">
<a class="link_no_decor" href="/samosval"><b class="menu_left_main_text">Самосвалы</b></a>
</div>
<div class="inner-boxbuttom ">
<a href="/samosval">
<img src="images/menu_left/samosval2.png" class="menu_left_pic">
</a>
<b class="menu_left_submain_text">
<a class="link_no_decor" href="/faw">FAW</a>

<a class="link_no_decor" href="/howo">HOWO</a>

<a class="link_no_decor" href="/hania">Hania</a>

<a class="link_no_decor" href="/hania">HOVA</a>

<a class="link_no_decor" href="/hania">Shaanxi</a>

</b>
</div>
</div>
<b class="r51"></b><b class="r51"></b><b class="r52"></b><b class="r53"></b><b class="r55"></b>
</div>
</div>
<b class="r31"></b><b class="r31"></b><b class="r33"></b>
</div> 

<div id="rounded-box-3"> 
<b class="r33"></b><b class="r31"></b><b class="r31"></b>
<div class="inner-box3">
<div id="rounded-box-5">
<b class="r55"></b><b class="r53"></b><b class="r52"></b><b class="r51"></b><b class="r51"></b>
<div class="inner-box5">
<div class="inner-boxtop">
<a class="link_no_decor" href="/tyagach"><b class="menu_left_main_text">Тягачи</b></a>
</div>
<div class="inner-boxbuttom ">
<a href="/tyagach">
<img src="images/menu_left/tyagach2.png" class="menu_left_pic">
</a>
<b class="menu_left_submain_text">
<a class="link_no_decor" href="/faw">FAW</a>

<a class="link_no_decor" href="/howo">HOWO</a>

<a class="link_no_decor" href="/hania">Hania</a>

<a class="link_no_decor" href="/hoka">HOKA</a>

<a class="link_no_decor" href="/shaanxi">Shaanxi</a>

</b>
</div>
</div>
<b class="r51"></b><b class="r51"></b><b class="r52"></b><b class="r53"></b><b class="r55"></b>
</div>
</div>
<b class="r31"></b><b class="r31"></b><b class="r33"></b>
</div> 

<div id="rounded-box-3"> 
<b class="r33"></b><b class="r31"></b><b class="r31"></b>
<div class="inner-box3">
<div id="rounded-box-5">
<b class="r55"></b><b class="r53"></b><b class="r52"></b><b class="r51"></b><b class="r51"></b>
<div class="inner-box5">
<div class="inner-boxtop">
<a class="link_no_decor" href="/bort"><b class="menu_left_main_text">Бортовые</b></a>
</div>
<div class="inner-boxbuttom ">
<a href="/bort">
<img src="images/menu_left/tyagach2.png" class="menu_left_pic">
</a>
<b class="menu_left_submain_text">
<a class="link_no_decor" href="/faw">FAW</a>

<a class="link_no_decor" href="/howo">HOWO</a>

<a class="link_no_decor" href="/hania">Hania</a>

<a class="link_no_decor" href="/hoka">HOKA</a>

<a class="link_no_decor" href="/shaanxi">Shaanxi</a>

</b>
</div>
</div>
<b class="r51"></b><b class="r51"></b><b class="r52"></b><b class="r53"></b><b class="r55"></b>
</div>
</div>
<b class="r31"></b><b class="r31"></b><b class="r33"></b>
</div> 

<div id="rounded-box-3"> 
<b class="r33"></b><b class="r31"></b><b class="r31"></b>
<div class="inner-box3">
<div id="rounded-box-5">
<b class="r55"></b><b class="r53"></b><b class="r52"></b><b class="r51"></b><b class="r51"></b>
<div class="inner-box5">
<div class="inner-boxtop">
<a class="link_no_decor" href="/malotonnaj"><b class="menu_left_main_text">Малотоннажные</b></a>
</div>
<div class="inner-boxbuttom ">
<a href="/malotonnaj">
<img src="images/menu_left/malotonnaj2.png" class="menu_left_pic">
</a>
<b class="menu_left_submain_text">
<a class="link_no_decor" href="/faw">FAW</a>

</b>
</div>
</div>
<b class="r51"></b><b class="r51"></b><b class="r52"></b><b class="r53"></b><b class="r55"></b>
</div>
</div>
<b class="r31"></b><b class="r31"></b><b class="r33"></b>
</div> 

<div id="rounded-box-3"> 
<b class="r33"></b><b class="r31"></b><b class="r31"></b>
<div class="inner-box3">
<div id="rounded-box-5">
<b class="r55"></b><b class="r53"></b><b class="r52"></b><b class="r51"></b><b class="r51"></b>
<div class="inner-box5">
<div class="inner-boxtop">
<a class="link_no_decor" href="/prais"><b class="menu_left_main_text">Прайсы</b></a>
</div>
<div class="inner-boxbuttom ">
<a href="/prais">
<img src="images/menu_left/prais2.png" class="menu_left_pic">
</a>
<b class="menu_left_submain_text">
<a class="link_no_decor" href="/faw">FAW</a>

<a class="link_no_decor" href="/howo">HOWO</a>

<a class="link_no_decor" href="/hania">Hania</a>

<a class="link_no_decor" href="/hoka">HOKA</a>

<a class="link_no_decor" href="/shaanxi">Shaanxi</a>

</b>
</div>
</div>
<b class="r51"></b><b class="r51"></b><b class="r52"></b><b class="r53"></b><b class="r55"></b>
</div>
</div>
<b class="r31"></b><b class="r31"></b><b class="r33"></b>
</div> 


</div>



<div id="right">


<div id="rounded-box-3"> 
<b class="r33"></b><b class="r31"></b><b class="r31"></b>
<div class="inner-box3">
<div id="rounded-box-5">
<b class="r55"></b><b class="r53"></b><b class="r52"></b><b class="r51"></b><b class="r51"></b>
<div class="inner-box5">
<div class="inner-boxtop">
<a class="link_no_decor" href="/about"><b class="menu_left_main_text">Минитрактора</b></a>
</div>
<div class="inner-boxbuttom ">
<a href="/about">
<img src="images/menu_left/minitraktor2.png" class="menu_left_pic">
</a>
<b class="menu_left_submain_text">
<a class="link_no_decor" href="/faw">Dong Feng</a>

</b>
</div>
</div>
<b class="r51"></b><b class="r51"></b><b class="r52"></b><b class="r53"></b><b class="r55"></b>
</div>
</div>
<b class="r31"></b><b class="r31"></b><b class="r33"></b>
</div> 


</div>



<div id="center">



<div id="center_menu">
<img src="images/menu_top/menu_top.png" class="img_down">
Пункт Меню <img src="images/menu_top/menu_top.png" class="img_down">
Пункт Меню2 <img src="images/menu_top/menu_top.png" class="img_down">
</div>




<div id="info_int">
{$template["about"]}
</div>


</div>


<div class="clear"></div>
</div>

</div>
<div class="upfoot">
</div>
<div class="foot">Footer
</div>
</div>
</body>
</html>
--------------------------------------

CSS
---------------------------------------
/* убираем отступ у тега body */
html, body {
margin:0px; padding:0px;
background:#80827f;
position:relative;
}

body{
min-width:989px;
min-height: 100%;
height: auto !important;
background-color: #fafafa;
}

#all {
text-align:left;
min-width:em;
max-width:em;
}

/* Дизайн */

/* Голова */
.head {
display:block;
height:220px;
background:#7b9bc7;
min-width:989px;
background-image: url("/images/head/center.png")
}

/*Картинки в Хеде*/
#header_left{width:375px;height:220px;float:left;background-image: url("/images/head/left5.png");}
#header_right{width:615px;height:220px;float:right;background-image: url("/images/head/right5.png");}

/* Слова на Картинке */
#header_uat{position: absolute;top:15px;left:90px;font-weight:bold;font-size:26pt;}
#header_diler{position: absolute;top:90px;left:10px;font-weight:bold;font-size:10pt;color:#3572a4;}

/* Панель с иконками */
#header_lefticons{
position: absolute;
top:182px;left:0px;
width:231px;height:31px;
background-image: url("/images/head/left_backicon.png");
text-align: center;}

/* Голова Конец */
/*#header_down{
width:990px;
height:12px;
background-image: url("/images/head/down2.png");
}
#header_down2{
width:393px;height:12px;
float:left;
background-image: url("/images/head/down3.png");
}*/

/* Контейнер */
#container { /* Деление на блоки */
position:relative;
display:block;
background:#fafafa;
border-left:solid 250px white; /*#80827f*/
border-right:solid 250px white; /*#80827f*/
}
#inner {
display:block;
position:relative;

margin-left:-250px;
margin-right:-250px;
}
/* Правое Меню */
#right {
float:right;
position:relative;
width:250px;
right:0px;
background-image: url("/images/menu_right/right2.png");
/*background:blue;*/
}
/*left: 0px;*/

/* Левое Меню */
#left {
float:left;
position:relative;
width:250px;
left:0px;
background-image: url("/images/menu_left/left2.png");
/*background:yellow;*/
}

#center_top{
background-image: url("/images/head/down2.png");
height: 5px;
}

/* Середина */
#center {
margin-left:250px;
margin-right:250px;
position:relative;
display:block;
background:white;
/*height:1%;*/
}
/* Верхнее меню */
#center_menu{
/*background-image: url("/images/head/down2.png");*/
border-bottom: #3572a4 ridge medium;
padding:0px 4px;
/*background:purple;*/
}

/* Страница Текст */
#info_int{
padding:0.8em;
}

.clear {
clear:both;
}

/* Подвал */
.upfoot{
min-width:989px;
display:block;
height:12px;
/*background:#8b8b8b;*/
background-image: url("/images/menu_down/down_up.png");
}

.foot {
min-width:989px;
display:block;
height:33px;
background:#404d6b;
background:white;
background-image: url("/images/menu_down/down.png");
padding: 0px 10px;
/*padding:1px;*/
}

/*меню */

/* Закруглые меню */
#rounded-box-3 { padding: 0px;}
#rounded-box-5 .inner-box5 { padding: 2px 5px}
#rounded-box-3{ margin:5px 5px; }
#rounded-box-5{ margin:1px 3px; position: relative; }

.inner-box3 { background-color:#dce8f8; padding:2px;}
.inner-box5 { background-color:#3572a4;color: white;height:120px; text-align: right;}

.inner-boxtop { background-color:#3572a4;color: white;height:12px; text-align: center;}
.inner-boxbuttom { background-color:#3572a4;color: white; text-align: right;} /*height:100px;*/

.r51, .r52, .r53, .r55, .r31, .r32, .r33 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}

.r33 { margin: 0 3px; background-color: #dce8f8;} /*white*/
.r32 { margin: 0 2px; background-color: #dce8f8;}
.r31 { margin: 0 1px; background-color: #dce8f8;}

.r55 { margin: 0 5px; background-color: #3572a4;} /*#3572a4*/
.r53 { margin: 0 3px; background-color: #3572a4;}
.r52 { margin: 0 2px; background-color: #3572a4;}
.r51 { margin: 0 1px; background-color: #3572a4;}
/* Закруглые меню конец */

/*внутри блока*/
.menu_left_pic{ position: absolute; left: 5px; top: 25px; height: 80px; width: 140px;}
.menu_left_picabout{ position: absolute; left: 5px; top: 25px; height: 80px; width: 82px;}
.menu_right_pic{ position: absolute; left: 5px; top: 20px; height: 90px; width: 218px;}

/*текст*/
.menu_left_main_text{ position: relative; top: -6px; font-weight: bold; font-size: 18px; text-align: center; }
.menu_left_submain_text{ font-size: 12px; }

/*ссылки*/
.link_no_decor{ text-decoration: none; color: white; }

/*ссылки*/
.img_down{ position: relative; top: 6px; } /*top: 6px; */

/* Дизайн конец */

/* ССылки */
#nolink{text-decoration: none;}

a:hover {
color:blue;
text-decoration:none;
}

/* Заголовки */

/* Текст */
p{margin-bottom: 0.8em; text-indent: 2em;}

Обсуждение

давно

FOXhunter

Профессионал
222505
728

19.04.2010, 12:06

общий

Цитата: ~S t e e p~

При расширении 1024 появляется скроллер, хотя там ширина 990. Если меньше, то вообще пропадает правая картинка и дизайн плывет. Хотя min-width стоит 990.

Вы хотите что бы сайт у Вас был шириной 990px или что бы в браузере не появлялась горизонтальная полоса прокрутки?

Об авторе:
Куплю винчестер. Жесткие диски не предлагать.

Неизвестный

19.04.2010, 12:16

общий

~S t e e p~:
Хотелось бы увидеть вопросы, основанные на ТЗ и расхождении с ним.
То же самое касательно вида. Макет есть?
--
Все последние браузеры поддерживают HTML 4.01; (X)HTML 1.0, 1.1; CSS 2;
HTML 5 и CSS 3 поддерживаются пока не полностью.
Правильная верстка... Вероятно, соответствие стандартам и четкая логика структуры.
Конструкций море. Описаний к ним - тоже. Уточните.

Неизвестный

20.04.2010, 16:08

общий

Она не должна появляться при расширении 1024 (прокрутите вправо там пикселей 20 серой полосы, хотя ее быть не должно).
Вот я и не пойму почему она появляется.

Цитата: 319915

Хотелось бы увидеть вопросы, основанные на ТЗ и расхождении с ним.

Макет я сам делал (примерная зарисовка - в процессе верстки я уже много поменял) и ТЗ как такового нет.

Не нравится то что если окно уменьшить (примерно размером меньше 1000 пикселей) то правая картинки исчезает. Вот это хочу решить.
То что фон колонок, не на всю высоту.
И странная горизонтальная прокрутка на расширении 1024

Цитата: 319915

Конструкций море. Описаний к ним - тоже. Уточните.

Интересует решение таких проблем как:
высота страницы в 100% без текста
центрирование блока в центре другого блока
трехколоночная верстка, где центральный блок ровно в центре
я конечно понимаю что в книгах это есть, но книги на русском пока выходят, уже выходят новые версии. Так же читать полностью времени не хватает, а так как примерно одинаковые конструкции в дизайне встречаются часто хотелось бы и увидеть их решения

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.