Исправлено изменение размера заголовка и окна

У меня есть фиксированный заголовок с меню навигации на сайте:

#header_wrapper
{
    height: 75px;
    background-color: #FD735B;
    z-index: 999;
    position: fixed;
    width: 100%;
}
#header_wrapper .control_wrapper
{
    position: absolute;
    right: 0px;
}
#header_wrapper .control_wrapper .control
{
    float: left;
    padding-left: 35px;
    padding-top: 25px;
    font-weight: bold;
}
.inner_content
{
    height: 100%;
    margin: 0px auto;
    width: 85%;
    position: relative;
    z-index: 1;
}

Вот HTML заголовка:

<div id="header_wrapper">
<div class="inner_content">
    <div class="control_wrapper">
        <div class="control local">
            <a class="white_font" id="link_user_experience">USER EXPERIENCE</a>
        </div>
        <div class="control local">
            <a class="white_font" id="link_restocking">RESTOCKING EXPERIENCE</a>
        </div>
        <div class="control local">
            <a class="white_font" id="link_analytics">ANALYTICS</a>
        </div>
        <div class="control">
            <a class="white_font" id="link_team" href="team">TEAM</a>
        </div>
    </div>
</div>

The problem is that when you resize window and make it narrow part on navigation menu is cut off. And if you trying to scroll horizontally it remains cut off.

Вот изображение обрезанного заголовка:

отрезать заголовок

Пытаюсь прокрутить вправо - содержимое прокручивается, но заголовок остается прежним:

введите здесь описание изображения

Как я могу сделать заголовок красивым после изменения размера?

ОБНОВИТЬ:

Я попытался воссоздать свою проблему на jsfiddle. Я установил большую ширину для страницы и заголовка, чтобы имитировать узкое окно (моя проблема возникает только тогда, когда пользователь изменяет размер окна и делает его узким).

Я помещаю 3 заголовка в заголовок. Когда вы загружаете скрипку, вы увидите только 2 из них. Третий находится вне зоны видимости. Я думал, что вы должны просто прокручивать по горизонтали, а фиксированный заголовок будет прокручиваться вместе с остальной частью страницы. Но фиксированный заголовок не прокручивается и вы не видите заголовок №3.

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


html css css-position fixed
person Tamara    schedule 01.11.2013    source источник
comment
Можете ли вы предоставить codepen или jsfiddle, чтобы лучше увидеть проблему?   -  person Jonathan Marzullo    schedule 01.11.2013
comment
@jonathan добавил пример jsfiddle. Надеюсь, он продемонстрирует мою проблему с прокруткой.   -  person Tamara    schedule 05.11.2013

Ответы (3)


arrow_upward
1
arrow_downward

Похоже, ваш навигационный контент position:absolute; справа: 0 пикселей; что приведет к тому, что ваша навигация будет двигаться вправо, насколько это возможно, даже при изменении размера браузера.

Если вы создадите li и float:right, display:inline-block, это должно дать вам функциональность, которую вы ищете.

<nav>
    <ul>
       <li><a href="#">ABOUT</a></li>
       <li><a href="#">BLOG</a></li>
       <li><a href="#">CONTACT</a></li>
    </ul>
</nav>


nav{width:100%;position:absolute;background-color:red;}
nav li{float:right;display:inline-block; padding-right:10px;}

Вот JSFiddle:

http://jsfiddle.net/gBYZ4/3/

изменить: почистил мой html и скрипку. Заголовок случайно переместился вправо.

person Mathias Rechtzigel    schedule 01.11.2013
comment
Спасибо за ответ. Я думаю, что моя проблема в том, что я не могу прокручивать фиксированный заголовок по горизонтали. Я добавил пример jsfiddle, который демонстрирует мою проблему. - person Tamara; 05.11.2013
comment
Да, это будет проблемой! Когда что-то исправлено, вы обычно не можете прокрутить его, потому что оно исправлено в браузере. Вы можете обновить заголовок, чтобы он относился к любому контейнеру, в который он помещен. Это должно разрешить прокрутку: jsfiddle. net/MathiasaurusRex/M3a2y/5 - person Mathias Rechtzigel; 05.11.2013

arrow_upward
0
arrow_downward

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

person aaronps    schedule 05.11.2013

arrow_upward
0
arrow_downward

Существует AJAX Control, который помогает решить эту проблему. Вы можете использовать «AlwaysVisibleControlExtender». Я использовал его на своей странице, и он отлично работает.

Ниже приведен код asp.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.header{width:100%;height:100px;position:fixed;z-index:1000;}
.content{padding-top:160px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release">
</ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="lnkHome" HorizontalOffset="70" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender2" runat="server" TargetControlID="lnkLogout" HorizontalOffset="20" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server" TargetControlID="lblName" HorizontalOffset="110" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender5" runat="server" TargetControlID="Image1" HorizontalSide="Center" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>

<asp:Image ID="Image1" runat="server" Height="150px" ImageUrl="~/Image/ABC.jpg" Width="1594px" />
<p style="margin-left: 1240px; width: 187px;">
<asp:Label ID="lblName" runat="server" Font-Size="Small" Font-Names="Arial" ForeColor="White"> 
</asp:Label>
<asp:LinkButton ID="lnkHome" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Home</asp:LinkButton>
<asp:LinkButton ID="lnkLogout" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Logout</asp:LinkButton>
</p>

Вам нужно перетащить элемент управления Alwaysvisible extender и указать идентификатор целевого элемента управления, как указано выше. Надеюсь это поможет.

person rs1    schedule 12.12.2014