Ссылки внутри одной страницы

provoloka · December 5, 2010

Здравствуйте, уважаемые эксперты. Вы мне один раз уже очень замечательно помогли.

Сегодня, полдня потратив на попытку решить проблему с помощью интернета, решил вновь обратиться к вашей помощи.

итак, проблема следующая. документ, вверху оглавление, внутри - содержание. при нажатии на знак решетки (#) в файерфоксе и на айфоне экран смещается вверх, если фотошоп не врет - 10 px. Это существенно. в других браузерах - кажись всё ок.

примерный код следующий:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
        <style>
        html,body,
div,dl,dt,dd,ul,ol,li,form,table,tr,td,
h1,h2,h3,h4,h5,h6,pre,p,span,b,i,a,
input,textarea,fieldset { margin: 0; padding: 0; outline: none;}

html {
	height: 100%;
	}

body {
	height: 100%;
	background: url(bg.gif);
	min-width: 920px;
	position: relative;
	}

div.head {
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	}

#sidebar {
	float: left;
	min-width: 60px;
    width: 20%;
    padding: 0px;
    margin: 0px 0px 0px 0px;
	height: 100%;
	}

#content {
	margin: 0px 5px 100px 25%;
	padding: 5px;
	}

div.space {
	padding-top: 80px;
	width: 100px;
	}

div.wrap {
	padding: 0 50px;
	background: url(bgleft.gif) left repeat-y;
	position: relative;
	min-height: 100%;
	overflow: hidden;
	}

div.wrap div.wrap_shadow {
	position: absolute;
	width: 50px;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(bgright.gif) right repeat-y;
	}

div.wrap div.wrap_shadow-left{
	width: 50px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url(bglefttop.gif) left top no-repeat;
	}

div.wrap div.wrap_shadow-right{
	width: 50px;
	height: 426px;
	position: absolute;
	top: 0px;
	right: 0px;
	background: url(bgrighttop.gif) right top no-repeat;
	}

.leftmenu {
	line-height: 1px;
	}

div#foot {
	position: absolute;
	height: 50px;
	right: 50px;
	bottom: 0;
	float: right;
	}

.noborder {
	border: 0px;
}


    </style>
		<title>test site</title>
	</head>
<body>

<!-- wrapper -->
    <div class="wrap">
        <div class="wrap_shadow-left">
        <img src="menu/logot.gif" class="noborder" width="50px" height="230px" alt="leftlogo" />
        </div>

        <div class="wrap_shadow">
            <div class="wrap_shadow-right">
            </div>
        </div>

<!-- center -->
    <div class="center">

<!-- header -->

        <div class="head">
        <a href=""><img src="menu/link1.gif" class="noborder" alt="menu link1" width="91" height="48" /></a><a href=""><img src="menu/link2.gif" class="noborder" alt="menu link2" width="71" height="48" /></a><a href=""><img src="menu/link3.gif" class="noborder" alt="menu link3" width="131" height="48" /></a><a href=""><img src="menu/link4.gif" class="noborder" alt="menu link4" width="91" height="48" /></a>    </div>

    <div class="space"></div>
<!-- out header -->

<!-- content -->
    <div id="sidebar">
    <p class="leftmenu">

<a href="2"><img class="noborder" src='menu/sidebar1.gif'
onmouseover="this.src='menu/sidebar1a.gif'" alt="sidebar1" width="180" height="48"
onmouseout="this.src='menu/sidebar1.gif'" /></a><br />
<a href="3"><img class="noborder" src='menu/sidebar2.gif'  alt="sidebar2"
onmouseover="this.src='menu/sidebar2a.gif'"  width="180" height="38"
onmouseout="this.src='menu/sidebar2.gif'" /></a><br />
<a href="44"><img class="noborder" src='menu/sidebar3.gif'  alt="sidebar3"
onmouseover="this.src='menu/sidebar3a.gif'"  width="180" height="28"
onmouseout="this.src='menu/sidebar3.gif'" /></a><br />
<a href="2"><img class="noborder" src='menu/sidebar4.gif'  alt="sidebar2"
onmouseover="this.src='menu/sidebar4a.gif'"  width="180" height="44"
onmouseout="this.src='menu/sidebar4.gif'" /></a><br />
<a href="44"><img class="noborder" src='menu/sidebar5.gif'  alt="sidebar2"
onmouseover="this.src='menu/sidebar5a.gif'"  width="180" height="41"
onmouseout="this.src='menu/sidebar5.gif'" /></a><br />
    </p>
    </div>

    <div id="content">
    <h1>Notes and Potential Issues</h1>

    <p><a href="#2" name="1">Сссылка, нажав на которую все съезжает вверх на 10px</a>


    The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document.

 Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.
Congratulations

The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used).
"valid" Icon(s) on your Web page
If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.
Congratulations

The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used).
"valid" Icon(s) on your Web page
If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.
Congratulations

The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used).
"valid" Icon(s) on your Web page

To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:</p>

<p><a href="#1" name="2">То же самое</a> of icons, with links to alternate formats and colors, is available: If you like, you can download a copy of the icons to keep in your local web directory, and change the HTML fragment above to reference your local image rather than the one on this server.
Validating CSS Style Sheets</p>

  </div>

<!-- footer -->
    <div id="foot"><a href=""><img src="foot.gif" class="noborder" width="292px" height="50px" alt="foot img" /></a></div>
<!-- out footer -->
    </div>
    </div>
<!-- out center / out wrapper-->

</body>
</html>

очень прошу - помогите, пожалуйста.

provoloka · December 5, 2010

пересмотрел - ошибся - на 5 пкс, а не на 10.

Vlad · December 6, 2010

Не заметил никаких ошибок, переход к ссылке происходит как надо. То что сдвиг происходит, так это зависит от высоты страницы, если весь текст на один "лист" умещается, тогда перехода к якорю не будет явно выраженного.

provoloka · December 7, 2010

не, к сожалению, ошибка все-таки появлялась, по крайней мере в больших длинных страницах - повторю - только в 2 браузерах - файрфокс и сафари (на айфоне).

в конечном счете нашел решение - увеличил сам подвал с 50 до 60 пикс., в css добавил стиль для изображений в футере - прижать ко дну. и все приколотилось железно.

Не заметил никаких ошибок, переход к ссылке происходит как надо. То что сдвиг происходит, так это зависит от высоты страницы, если весь текст на один "лист" умещается, тогда перехода к якорю не будет явно выраженного.

видимо, я сформулировал недостаточно четко.

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

Sign In

Ссылки внутри одной страницы

Question

provoloka

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

provoloka

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

provoloka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information