Jump to content
  • 0

Непонятные вертикальные отступы передед дивом


Воитель
 Share

Question

1.jpgПотратил больше часа, на поиск ошибки, но так и не смог найти.

Суть в том, что между дивами образуются отпступы по вертикали как будто margin-top: указан. Но на самом деле его нет.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:vml="urn:schemas-microsoft-com:vml">
<!-- Для Яедекс карты -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META name="description" content="Детские игровые комплексы">
<META name="keywords" content="Детские игровые комплексы">
<title>Детские игровые комплексы</title>
<link rel="stylesheet" type="text/css" href="sostav/style.css" />
<link rel="stylesheet" type="text/css" href="sostav/style_admin.css" />
<link rel="shortcut icon" href="glavdising/favicon.ico" />
<link rel="stylesheet" href="./sostav/lightbox_2_04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="./sostav/js_rabota_s_cookies.js"></script>
<script type="text/javascript" src="./sostav/lightbox_2_04/js/prototype.js"></script>

<script type="text/javascript" src="./sostav/lightbox_2_04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="./sostav/lightbox_2_04/js/lightbox.js"></script>
</head>
<body>
<div style="width:80%; padding-top:30px; padding-left:10%; padding-right:10%; padding-bottom:40px">


<div style="float:right; width:200px;">
<a href="./adminochka_glavnaya.php"><h4 style="color:#FFFF00">Главная</h4></a><br />
<a href="./adminochka_orders.php"><h4 style="color:#FFFF00">Заказы</h4></a><br />
<a href="./korzina.php"><h4 style="color:#FFFF00">Корзина</h4></a><br />
<a href="./papka.php?nomer_papki=2"><h4 style="color:#FFFF00">Продукция</h4></a><br />

?<div><a class="a_bokovaya_navigaciya_produkcii_razdel" href="./papka.php?nomer_papki=104">Детские игровые комплексы</a></div>
?<div style="margin-left:10px; margin-top:5px"><a class="a_bokovaya_navigaciya_produkcii_podrazdel" href="./papka.php?nomer_papki=105">Детские игровые комплексы</a></div>
?<div style="margin-left:20px; margin-top:5px"><a class="a_bokovaya_navigaciya_produkcii_podrazdel" href="./papka.php?nomer_papki=106">Детские игровые комплексы</a></div>
</div>

Вывожу этот html я через php:


//file создаёт массив в каждом элементе которого строка файла а implode объеденяет все элементы массива в 1 строку. Это правильный вариант получения содержимого файла.
$soderjimoe_fayla_verh[] = implode('', file ('./production/templates/production_01/navigaciya_po_produkcii_g.html'));

$soderjimoe_fayla_verh[] = implode('', file ('./production/templates/production_01/navigaciya_po_produkcii_gg.html'));
$massiv_poiska = array("[IMYA]","[NOMER_PAPKI]","[UROVEN_VLOJENNOSTI]");

vivod_dochernih_papok("2", 0, $soderjimoe_fayla_verh, $massiv_poiska);

function vivod_dochernih_papok($nomer_papki, $level, $soderjimoe_fayla_verh, $massiv_poiska) { //Две переменные венесены за функцию для оптимизации

$sql='SELECT nomer_papki, imya FROM `papki` WHERE nomer_roditelskoy_papki='.$nomer_papki;
$result=mysql_query($sql) or die(mysql_error());

while($row=mysql_fetch_array($result, MYSQL_BOTH)) {
//echo $row['imya'];
if ($level >= count($soderjimoe_fayla_verh)) { $uroven_vlojennosti = count($soderjimoe_fayla_verh)-1; }
else { $uroven_vlojennosti = $level; }

$massiv_zameni = array($row['imya'],$row['nomer_papki'],$level);

$obekt_v_shablone = str_replace($massiv_poiska, $massiv_zameni, $soderjimoe_fayla_verh[$uroven_vlojennosti]);

echo $obekt_v_shablone;
vivod_dochernih_papok($row['nomer_papki'], $level+1, $soderjimoe_fayla_verh, $massiv_poiska);
}
} //Закрытие function vivod_dochernih_papok(

Содержимое шаблонов:

<div><a class="a_bokovaya_navigaciya_produkcii_razdel" href="./papka.php?nomer_papki=[NOMER_PAPKI]">[IMYA]</a></div>

и

<div style="margin-left:[UROVEN_VLOJENNOSTI]0px; margin-top:5px"><a class="a_bokovaya_navigaciya_produkcii_podrazdel" href="./papka.php?nomer_papki=[NOMER_PAPKI]">[IMYA]</a></div>

Соотвествующий css всему этому делу выглядит так:


.a_bokovaya_navigaciya_produkcii_razdel {
text-decoration: none;
font-size:16px;
font-weight:600;
}
.a_bokovaya_navigaciya_produkcii_razdel:visited { color:#FFFFFF; }
.a_bokovaya_navigaciya_produkcii_razdel:hover { color:#FFCC00; }

.a_bokovaya_navigaciya_produkcii_podrazdel {
text-decoration: none;
}
.a_bokovaya_navigaciya_produkcii_podrazdel:visited { color:#FFFFFF; }
.a_bokovaya_navigaciya_produkcii_podrazdel:hover { color:#55D0FF; }

А на экране всё почему-то не так как в коде. Причёт в FF и в Chome с отступами а в IE всё как надо.

Удалось установить что вся соль в дивах. Т.е. если убрать тег див и оставить всё просто ссылками то отступы пропадут. Вроде они пропадают и при выводе не через шаблон.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
  On 9/15/2011 at 5:05 AM, sigma77 said:

Воитель,

Ссылку бы на проблемную страницу...

К сожалению не могу предоставить ссылку, всё делается на локали.

  On 9/15/2011 at 7:10 AM, Bonzash said:

Попробуй body поставить line-height: 1; и сброс стилей добавь * {margin: 0; padding: 0;}

Сброс стилей уже стоял. а line-height: 1; не помогло. Растояние конечно приуменьшилось, но не дало желаемого результата.

Link to comment
Share on other sites

  • 0
  On 9/15/2011 at 7:48 AM, Воитель said:

К сожалению не могу предоставить ссылку, всё делается на локали.

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

Link to comment
Share on other sites

  • 0

Добавлю некоторые свои наблюдения, что есть текст выводить не через шаблон, т.е. не через чтение файла, то всё отображается нормально. Поэтому наверно всё же дело не в вёрстке а в php. Хотя в шаблоне просатривал все скрытые символы - ни чего нет, кроме перехода на новую строку. И ещё один момент, если в шаблоне не блочный элемент, то тоже всё хорошо выводиться.

Edited by Воитель
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy