У меня проблемы с оформлением заголовка в соответствии с моими требованиями. мой заголовок содержит 3 дел. первая содержит таблицу, которая в моем случае представляет собой вкладки, каждая вкладка находится в «теге td» под общим «тегом tr», и я использовал jquery «jquery-1.5.1.min.js», я не могу прикрепить файл js i надеюсь, что вы можете получить его из Интернета, для движения. оставшиеся два деления предназначены для кнопки для перемещения стола влево и вправо. Во-первых, я надеюсь, вы хорошо понимаете мой случай.
мое требование, чтобы я не мог удовлетворить их:
1.Я не хочу, чтобы появлялась полоса прокрутки влево-вправо, я пытался установить атрибут переполнения тела: скрытый, тогда он работал, но при изменении размера окна браузера теперь происходит изменение размера.
2. Мне не нужны оставшиеся вкладки, которые вы можете увидеть, если прокрутить вправо, чтобы появиться. Только мне нужно 7 вкладок, и когда я нажимаю влево или вправо, появляются остальные вкладки.
3.я хочу, чтобы эта страница с любого компьютера имела одинаковый размер. Я имею в виду, что заголовок точно заполняет верхнюю часть окна браузера без прокрутки влево или вправо и с точной высотой, равной 65 пикселей. Потому что на моем ноутбуке он выглядит нормально, но когда я попробовал его на моем другом ноутбуке, заголовок полностью меняет свою позицию.
Я думаю, что стиль позиции влияет на заголовок, который я использовал как абсолют, но один из программистов, которого я спросил, не очень хорошая идея установить его как абсолютный!
эта работа заняла у меня больше недели, я потратил часы на рестайлинг и репозиционирование, но я не понимаю. Я надеюсь, что вы понимаете меня и извините за длинный абзац: /
мой HTML-код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src=jquery-1.5.1.min.js></script>
<style type="text/css">
a.taps_link
{
text-decoration:none;
color:White;
text-shadow: 2px 2px 7px #111;
color: #f5f5f5;
}
img.direction:hover
{
padding:1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
td.taps:hover
{
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.41, rgb(73,75,75)),
color-stop(0.92, rgb(40,41,41))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(73,75,75) 41%,
rgb(40,41,41) 92%
);
border-bottom-color:#494b4b;
}
td.taps
{
text-align:center;
text-align:center;
min-width:140px;
padding:6px 4px 6px 4px
}
body
{
font-family:Tahoma;
font-size:15px;
}
#header_top
{
text-shadow: 2px 2px 7px #111;
color: #f5f5f5;
}
</style>
</head>
<body style=" background-color:Green;">
<!--#D0D0D0-->
<div style=" height:65px; background-color: Black; margin:-8px -8px 0px -8px ;">
<!--#336699#494B4B-->
<div id="tab_Menu_container" style=" overflow:inherit;margin-left:274px;position:absolute; z-index:3; margin-top:-10px; width:80%;" >
<table rules="all" id="tab_Menu" style=" margin-top:43px; position:absolute">
<tr >
<td class="taps"><a class="taps_link" href="#">first</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
<td class="taps"><a class="taps_link" href="#">final</a></td>
</tr>
</table>
</div>
<div id="upLeft_corner" style=" height:65px; width:274px;background-color:Aqua; position:absolute;z-index:4">
<input type="button" value="<<" id="b" alt="previous situation" style="position:absolute;margin-left:240px;margin-top:41px" />
<!--<img src="previous.png" id="b" alt="previous situation" style="position:absolute;margin-left:252px;margin-top:41px"/><<-->
</div>
<div id="upRight_corner" style=" margin-left: 1318px;height:65px; width:112px; background-color: Aqua; position:absolute; z-index:4">
<input type="button" value=">>" id="a" alt="next situation" style="position:absolute;margin-top:41px" />
<!--
<img src="next.png" id="a" alt="next situation" style="position:absolute;margin-top:41px"/>
<img src="all.png" id="all" alt="Show all situation" style="position:absolute;margin-top:41px;margin-left:29px; "/>-->
</div>
</div>
<script>
var counter,td_counter;
counter=0;
td_counter= document.getElementById('tab_Menu').getElementsByTagName('tr')[0].getElementsByTagName('td').length;
console.log(td_counter);
if (td_counter <= 7) {
$("#a").hide();
$("#b").hide();
$("#all").hide();
}
if (counter == 0) {
$("#a").hide();//a= >>
}
//rigth
$("#a").click(function () {
$("#b").show();
counter--;
$("#tab_Menu").animate({ "left": "+=150px" }, "slow");
if(counter==0)
{
$("#a").hide();
}
/*$("#b").show();
right_counter++;
$("#tab_Menu").animate({ "left": "+=152px" }, "slow");
var temp1 = td_counter - right_counter;
if (temp1==temp) {
$("#a").hide();
}*/
});
//left
$("#b").click(function () {
console.log(counter);
$("#a").show();
counter++;
$("#tab_Menu").animate({ "left": "-=149px" }, "slow");
if (counter+7>=td_counter)
{
$("#b").hide();
}
/*
$("#a").show();
left_counter++;
$("#tab_Menu").animate({ "left": "-=152px" }, "slow");
temp = td_counter - left_counter;
if (temp == 7) {
$("#b").hide();
//left_counter = 0;
}*/
});
</script>
</body>
</html>