堆栈内存溢出
  简体   繁体   English

如何在水平固定标题内放置两个DIV，并使所有内容垂直对齐？

[英]How can I place two DIVs inside a horizontal fixed header and make all the content vertically align?

 原文  2014-03-18 21:18:13  1   2    css/ html

问题描述

I have a fixed header working as a menu. 我有一个固定的标题作为菜单。 In this header, I want to show the logo (on the left) and the navigation (on the right). 在此标题中，我想显示徽标（左侧）和导航（右侧）。 Both will be fixed as I scroll the page. 当我滚动页面时，两者都将被修复。

My navigation is already working. 我的导航已经可以使用了。 How can I place another DIV for my logo? 如何为徽标放置另一个DIV？

Also, how can I make all this content (logo and navigation) vertically align? 另外，如何使所有这些内容（徽标和导航）垂直对齐？

Preview: http://baskra.com/teste/teste.html 预览： http ： //baskra.com/teste/teste.html

Here's what I tried, but it didn't work. 这是我尝试过的方法，但是没有用。

HTML: 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>

<link rel="stylesheet" type="text/css" href="style.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>bask.ra</title>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

<!-- COMECO DO NIVO SLIDER -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- FIM DO NIVO SLIDER -->

<!-- COMECO DO MENU FIXO -->
<script type="text/javascript">
jQuery("document").ready(function($){

    var nav = $('.menu-fundo');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
            nav.addClass("f-menu");
        } else {
            nav.removeClass("f-menu");
        }
    });

});
</script>
<!-- FIM DO MENU FIXO -->

</head>

<body>

<div class="menu-fundo">
<div class="menu">

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

<div class="logo">

<img src="images/logo.png" />

</div>

        <ul id="menutop">
              <li><a href="#contato">CONTATO</a></li>
              <li><a href="#equipe">EQUIPE</a></li>
              <li><a href="#quem">QUEM SOMOS</a></li>
              <li><a href="#como">COMO FAZEMOS</a></li>
              <li><a href="#que">O QUE FAZEMOS</a></li>
        </ul>
    </div>
    </div>

<script>
$("#menutop a").click(function(){
   var menuid = $(this).attr("href");
   $("body").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
   return false;
});
</script>

<div class="elementos">

<div id="slider" class="nivoSlider theme-default">
    <img src="images/slide1.png"/>
    <img src="images/slide2.png"/>
    <img src="images/slide3.png"/>
</div>



<div class="o-que-fazemos">
  <a id="que"></a>
    O QUE FAZEMOS?<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.

</div>

<div class="como-fazemos">
  <a id="como"></a>
  <h1 class="como-fazemos-title">COMO FAZEMOS?</h1>

<p align="center"><img src="images/comofazemos.png" /></p>

</div>

<div class="quem-somos">
  <a id="quem"></a>
  QUEM SOMOS?<br />
<br />

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>

<div class="a-equipe">
  <a id="equipe"></a>
  EQUIPE<br />
<br />

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>

<div class="o-contato">
  <a id="contato"></a>
  CONTATO<br />
<br />

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>

</div>
</body>
</html>

CSS: CSS： 

@charset "utf-8";
/* CSS Document */


html,body {
    height:100%;    
    margin:0;
    padding:0;
    border:0;
    }

div {
    margin:0;
    border:0;
    }

logo {  
    padding:0;
    border:0;
    z-index:9999;
    float:left;
    }

.menu-fundo {
    background: #fff repeat-x 0 0;
    left: 0;
    top: 0;
    z-index: 9999;
    position:fixed;
    }

.f-menu {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    } /* isso vai fazer o menu ficar fixo no topo */

.menu {
height: 100px;
left: 0;
top: 0;
z-index:
9999;
background: #fff repeat-x 0 0;
position:fixed; width:100%
}

.menu ul {
    list-style: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:17px;
    font-weight:bold;
    }

.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}

.menu ul li:first-child {
    padding-left: 0;
    }

.menu ul li a {
    color:#000;
    text-decoration:none;
    border-top:3px solid #999;
    }

.menu ul li a:hover {
    color: #6D6D6D;
    border-top:3px solid #EA0000;
    }

.o-que-fazemos {
    background-image: url('images/oqfazemosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    }

.como-fazemos {
    background-image: url('images/comofazemosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    padding: 50px;
    }

.como-fazemos-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#FFF;
    font-weight:900;
    letter-spacing: 2px;

    }

.quem-somos {
    background-image: url('images/quemsomosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    }

.a-equipe {
    background-image: url('images/EQUIPE-FUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    }

.o-contato {
    background-image: url('images/contato-FUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    }

.banner {
    position: relative;
    overflow: auto;
    }

.banner li {
    list-style: none;
    }

.banner ul li {
    float: left;
    }

2 个解决方案

解决方案1
 1 已采纳  2014-03-18 21:30:36

Add some styles to .menu ul 在.menu ul添加一些样式 

.menu ul {
    list-style: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:17px;
    font-weight:bold;

    /* add this */
    position: fixed;
    top: 0;
    right: 0;
}

解决方案2
 0  2014-03-18 22:10:39

Better way is to use css table display to vertically align elements. 更好的方法是使用css表显示垂直对齐元素。 Additionally menu will not be over the logo on smaller screens. 另外，在较小的屏幕上，菜单不会位于徽标上方。 

.login {
  display: table-cell;
}

.menu ul {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在另一个div内垂直对齐两个div？ - How can I vertically align two divs inside of another div? 如何垂直对齐两个div的内容？ - How to align the content of two divs vertically? 如何在浮动的div中垂直对齐内容？ - How can I vertically align content in floated, fluid divs? 如何垂直对齐两个浮动div？ - How can I vertically align two floated divs? 如何垂直对齐两个div？ - How do I vertically align two divs? 如何垂直对齐这2个div？ - How can I vertically align these 2 divs? 如何垂直对齐所有内容，包括列中的边框？ - How can I vertically align all the content including borders in the columns? 我如何将这个 header 与 flexbox 垂直对齐？ - How can i vertically align this header with flexbox? 如何在左右方向上垂直对齐两个div？ - How do I align two divs on the left and right vertically? 我如何在父级中间垂直对齐这两个div？ - How would I vertically align these two divs in the middle of its parent?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM