html - 修复网站标题，以实现响应和浏览器兼容性

Question

我试图在为我的网站创建的 header 上编辑我的代码，但我无法理解我失败的地方(css 或 html？)。 我不是在寻找菜单/导航

我希望这个 header 是跨浏览器 + 响应式的(当我更改为移动视口(viewport)时，它变得非常奇怪并且我的 Logo 变得非常小)。我正在使用 Bootstrap 框架

我不知道如何解决这个问题

页面是这样的:view here

我的 JSFiddle:View

HTML

<div class="header">

    <ul class="rslides">
        <li><img src="http://styleeuclides.site50.net/www/img/image_1.jpg" alt="" width="100%" title="slider" height="376px"/></li>
        <!-- other images aren't reveleant if this first image stays on top of the text -->
    </ul>

        <div class="top container">

            <a href="#" name="logo"><img src="http://styleeuclides.site50.net/www/img/logo.png" width="570" height="200" value="Cyber Meeting Brazil" class="img-responsive"/></a>      
            <div id="tres">
            <br/>
            <div id="countbox1" style="width: 100px; height=100px; display: inline; font-size: 22px; font-weight: bolder; letter-spacing: -0.75px; text-align: right; color: #fff; z-index: 5; position: relative; text-shadow: 1px 1px rgba(0,0,0, 0.25);" class="hidden-xs">This is a jQuery timer</div>

            <h3 class="hidden-sm">21 e 22 de Agosto</h3>
            <h4 class="hidden-xs">Hotel Pestana, São Paulo</h4></div>
        </div>

CSS

body{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    margin: 0 auto;
    padding: 0;
    background-color: #131313;
    font-size: 16px;
    text-shadow: 0 0 1px rgba(0,0,0,0.2);
    transform: rotate(-0.0000000001deg);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

}

h1, h2, h3, h4, h5, h6{
    margin: 0;
}

.topo{
    top:0;
    left: 0;
    margin-top: -10px;
    height: 50%;
}

.header{
    /*background-color: #34495e;*/
    color: #131313;
    width: 100%;
    height: 50%;
    list-style: none;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  height: 300px;
  border: 0;
  }

.header ul li{
    display: inline-block;
    float: left;
    margin: 0;
}

.top{
    position: absolute;
    list-style: none;
    margin-top: 25px;
    top: 0;
    left: 0;
    z-index: 10;
    min-height: 300px;
}

.top #um{
    margin-top: 50px;
    float: left;
    width: 50%;
    height: 100%;
    margin: 0;
}

.top #tres{
    width: 50%;
    height: 100%;
    display: block;
    float: right;
    margin-top: 10px;
    text-align: right;
}

.top h2{
    margin-left: 170px;
    font-size: 20px;
    color: grey;
}

.top h3{
    text-align: right;
    margin-top: 32%;
    font-size: 30px;
    color: #fff;
    text-shadow: 1px 1px rgba(0,0,0, 0.35);
}

.top h4{
    text-align: right;
    margin-top: 0;
    font-size: 24px;
    color: #fff;
    opacity: 0.75;
    text-shadow: 1px 1px rgba(0,0,0, 0.35);
}

任何人都可以用我的 CSS 提供帮助吗？

Answer 1

看来您正在使用 bootstrap，那为什么不直接使用他们的响应式 navbar，

例子:

 <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default</a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>

示例来源:http://getbootstrap.com/examples/navbar/

关于引导导航栏的更多信息:http://getbootstrap.com/components/#navbar