- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法将容器放在标题顶部,我想要的示例:http://athena.fhict.nl/users/i315041/metrieken/
但无论我尝试什么,奇怪的事情都会发生,比如 NAV 消失或 div 出现在顶部。
HTML:
<!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=utf-8" />
<title>Metrieken</title>
<meta name="keywords" content="ICT, Projecten, Consultancy" />
<meta name="description" content="Uw software projecten in control." />
<link href="http://fonts.googleapis.com/css?family=Varela" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>
<a href="#"><img src="css/img/Logo-PMS.png" width="300px"></a>
</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item">
<a href="#" accesskey="1" title="">Diensten</a>
</li>
<li>
<a href="#" accesskey="2" title="">Toepassingen</a>
</li>
<li>
<a href="#" accesskey="3" title="">Dashboard</a>
</li>
<li>
<a href="#" accesskey="4" title="">Publicaties</a>
</li>
<li>
<a href="#" accesskey="5" title="">Nieuws</a>
</li>
<li>
<a href="#" accesskey="6" title="">Over ons</a>
</li>
<li>
<a href="#" accesskey="7" title="">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div id="banner">
<div class="title">
<h2>Uw software projecten in control.</h2>
<span class="byline">Voor al uw ICT-projecten</span>
</div>
</div>
<div id="extra" class="container">
<div id="tab">
<p>Diensten</p>
</div>
<div id="content">
<div class="title">
<h2>Vanaf nu kunt u kosten besparen op software ontwikkeling</h2>
</div>
<p>U vindt bij ons een compleet aanbod aan dienstverlening en toepassingen van software metrieken waarmee u kosten kunt besparen
op uw software ontwikkeling. Wij ondersteunen u met sizing / FPA en begroting en planning van software projecten. Ook helpen
wij u bij de inkoop van software door offertes voor software-ontwikkeling te beoordelen. Voor al onze vormen van dienstverlening
hanteren wij scherpe tarieven. Onderstaand schema geeft een overzicht van ons dienstenpakket.</p>
<img src="css/img/schema-homepage-5.jpg"
width="100%">
</div>
<div id="content">
<div class="title">
<h2>Kortom: U heeft uw software projecten in control!</h2>
</div>
<p>Metrieken.nl bestaat uit ervaren specialisten op het gebied van software metrieken: senior sizing analisten en senior consultants.
Wij werken voor uiteenlopende sectoren vanuit meerdere plaatsen in het land. Metrieken.nl ondersteunt bedrijven bij hun software
projecten met functiepuntanalyses en begroten en plannen van deze projecten. Daarmee kunnen onze klanten zich met een gerust
hart richten op hun primaire business, want de software projecten zijn in control. Openheid, transparantie en respect Metrieken.nl
vindt het belangrijk dat klanten tevreden zijn, niet alleen over de kwaliteit, maar ook over de prijs-kwaliteit verhouding
van onze dienstverlening en de mentaliteit van onze mensen. Openheid, transparantie en wederzijds respect zijn daarbij onze
kernwaardes.
<br>
<br>Ervaren en onafhankelijk:
<br>-gecertificeerde senior sizing analysts en senior consultants
<br>-ruime ervaring bij uiteenlopende sectoren
<br>-landelijk de meeste ervaring in huis
<br>-geen softwareleverancier, dus onafhankelijk.
<br>
</p>
</div>
<div id="three-column">
<div class="boxA">
<div class="box">
<p>Parlementair onderzoek naar ICT-projecten bij de overheid.</p>
<img src="css/img/noun_22592_cc.png" width="100%;">
<p>Met het ICT-dashboard meer grip op uw projecten.</p>
</div>
</div>
<div class="boxB">
<div class="box">
<p>Bekijk onze bedrijfs-presentatie</p>
<img src="css/img/noun_3059_cc.png" width="100%;">
<img src="css/img/noun_1541.png" width="20%;">
</div>
</div>
<div class="boxC">
<div class="box">
<p>Beste prijs/kwaliteit verhouding</p>
<img src="css/img/noun_30373_cc.png" width="100%;">
<p>Gecertificeerde en ervaren consultants én 25% onder de marktprijs</p>
</div>
</div>
</div>
</div>
<div id="page" class="container"></div>
</div>
<div id="copyright" class="container">
<div id="four-column">
<div class="box1">
<p>Diensten:
<br>-Early sizing
<br>-Sizing / FPA
<br>-Estimating
<br>-Monitoring
<br>-Benchmarking
<br>-Resource planning
<br>
</p>
</div>
<div class="box2">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
<div class="box3">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
<div class="box4">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
</div>
<p>© Untitled. All rights reserved. | Photos by
<a href="http://fotogrph.com/">Fotogrph</a>| Design by
<a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
</div>
</body>
</html>
CSS:
html, body
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
background: #333333;
font-family: 'Varela', sans-serif;
font-size: 11pt;
font-weight: 300;
color: #656565;
}
h1, h2, h3
{
margin: 0;
padding: 0;
font-weight: 700;
color: #2B3F48;
}
p, ol, ul
{
margin-top: 0;
}
ol, ul
{
padding: 0;
list-style: none;
}
ul.actions
{
text-align: center;
}
ul.actions li
{
}
p
{
line-height: 180%;
}
strong
{
}
a
{
color: #0000FF;
}
a:hover
{
text-decoration: none;
}
.container
{
overflow: hidden;
width: 1064px;
margin: 0em au
}
#content {
overflow:hidden;
border-radius: 5px;
-webkit-box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
background-color: #fff;
padding: 2em;
}
#tab {
border-radius: 5px 5px 0px 0px;
background-color: #fff;
overflow: hidden;
width: 15%;
float: none;
margin: auto;
-webkit-box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
}
#tab p {
color: red;
padding: 0.75em;
text-align: center;
margin: 0px;
}
/*********************************************************************************/
/* Image Style */
/*********************************************************************************/
.image
{
display: inline-block;
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image-left
{
float: left;
margin: 0 2em 2em 0;
}
.image-centered
{
display: block;
margin: 0 0 2em 0;
}
.image-centered img
{
margin: 0 auto;
width: auto;
}
/*********************************************************************************/
/* List Styles */
/*********************************************************************************/
ul.staff
{
margin-bottom: 3em;
}
ul.staff li
{
display: inline-block;
}
ul.staff li img
{
width: 80%;
border-radius: 50%;
}
/*********************************************************************************/
/* Social Icon Styles */
/*********************************************************************************/
ul.contact
{
margin: 0;
padding: 2em 0em 0em 0em;
list-style: none;
}
ul.contact li
{
display: inline-block;
padding: 0em 0.30em;
font-size: 1em;
}
ul.contact li span
{
display: none;
margin: 0;
padding: 0;
}
ul.contact li a
{
color: #FFF;
}
ul.contact li a:before
{
display: inline-block;
background: #3f3f3f;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #FFFFFF;
}
ul.contact li a.icon-twitter:before { background: #2DAAE4; }
ul.contact li a.icon-facebook:before { background: #39599F; }
ul.contact li a.icon-dribbble:before { background: #C4376B; }
ul.contact li a.icon-tumblr:before { background: #31516A; }
ul.contact li a.icon-rss:before { background: #F2600B; }
/*********************************************************************************/
/* Button Style */
/*********************************************************************************/
.button
{
display: inline-block;
padding: 0em 3em;
background: #009E2D;
letter-spacing: 0.20em;
line-height: 4em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 1em;
color: #FFF;
}
.button:before
{
display: inline-block;
background: #FFC31F;
margin-right: 1em;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #272925;
}
/*********************************************************************************/
/* Heading Titles */
/*********************************************************************************/
.title
{
margin-bottom: 3em;
}
.title h2
{
text-transform: uppercase;
font-size: 2.7em;
}
.title .byline
{
font-size: 1.7em;
color: #6F6F6F;
}
/*********************************************************************************/
/* 4-column */
/*********************************************************************************/
.box1,
.box2,
.box3,
.box4
{
width: 235px;
}
.box1,
.box2,
.box3,
{
float: left;
margin-right: 20px;
}
.box4
{
float: right;
}
/*********************************************************************************/
/* 3-column */
/*********************************************************************************/
#three-column {
margin-top: 2em;
border-radius: 5px;
background-color: #DC0714;
overflow: hidden;
-webkit-box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
}
.boxA,
.boxB,
.boxC
{
width: 340px;
}
.boxA,
.boxB
{
float: left;
margin-right: 22px;
}
.boxC
{
float: right;
}
/*********************************************************************************/
/* 2-column */
/*********************************************************************************/
.tbox1,
.tbox2
{
width: 575px;
}
.tbox1
{
float: left;
}
.tbox2
{
float: right;
}
#wrapper
{
background: #F5F5F5;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header-wrapper
{
background: #fff;
}
#header
{
position: relative;
padding: 3em 0em;
}
/*********************************************************************************/
/* Logo */
/*********************************************************************************/
#logo
{
position: absolute;
top: 1em;
left: 0;
}
#logo h1
{
color: #FFF;
}
#logo a
{
text-decoration: none;
text-transform: uppercase;
color: #FFF;
}
/*********************************************************************************/
/* Menu */
/*********************************************************************************/
#menu
{
position: absolute;
top: 2em;
right: 0;
}
#menu ul
{
display: inline-block;
}
#menu li
{
display: block;
float: left;
text-align: center;
}
#menu li a, #menu li span
{
padding: 1em 1.5em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8em;
color: black;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
color: #E5543A;
}
#menu .current_page_item a
{
color: #DC0714;
}
#menu .icon
{
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
overflow: hidden;
padding: 20em 0em 20em 0em;
background-image: url(img/test.png);
background-size: cover;
text-align: center;
color: rgba(255,255,255,.8);
}
#banner .title
{
margin-bottom: 1em;
text-transform: uppercase !important;
}
#banner .title h2
{
color: #FFF;
}
#banner .title .byline
{
color: rgba(255,255,255,.6);
}
#banner .button
{
margin-top: 3em;
background: #009E2D !important;
}
/*********************************************************************************/
/* Page */
/*********************************************************************************/
#page
{
padding: 5em 0em;
text-align: center;
}
#page .button
{
margin-top: 2em;
display: inline-block;
text-align: center;
}
/*********************************************************************************/
/* Content */
/*********************************************************************************/
#content
{
}
/*********************************************************************************/
/* Sidebar */
/*********************************************************************************/
#sidebar
{
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
}
/*********************************************************************************/
/* Copyright */
/*********************************************************************************/
#copyright
{
overflow: hidden;
padding: 5em 0em;
border-top: 1px solid rgba(255,255,255,0.08);
}
#copyright p
{
text-align: center;
font-size: 1em;
color: rgba(255,255,255,0.5);
}
#copyright a
{
text-decoration: none;
color: rgba(255,255,255,0.8);
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
#featured
{
overflow: hidden;
padding: 5em 0em;
background: #009E2D;
color: rgba(255,255,255,.8);
text-align: center;
}
#featured a
{
color: rgba(255,255,255,1);
}
#featured .button
{
background: #FFF;
margin-top: 3em;
font-size: 1em;
color: #009E2D;
}
#featured .title
{
}
#featured .title h2
{
color: #FFF;
}
#featured .title .byline
{
color: rgba(255,255,255,.6);
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
.box
{
border-radius: 5px;
margin: 3em 2em 2em 2em;
text-align: center;
background-color: #E5543A;
padding: 1em;
}
.box p {
color: #f5f5f5;
}
#extra
{
overflow: hidden;
padding: 5em 0em;
}
#extra .title
{
text-align: center;
}
#extra .button
{
margin-top: 5em;
}
#extra .fa
{
display: block;
margin-bottom: 0.5em;
text-align: center;
font-size: 3em;
}
最佳答案
嘿!这可以帮助您:
#header-wrapper{position:fixed}
关于html - 如何将我的容器放在标题顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31089439/
这是我想做的 1 - 点击提交 2 - 隐藏 DIV 容器 1 3 - 显示 DIV 容器 2 4 - 将“PricingDisclaimer.php”中找到的所有 DIV 加载到 Div 容器 2
我有一个 ios 应用程序,它使用 iCloudcontainer 来保存用户的一些数据,例如用户的“到期日期”。我要用不同的方式创建应用程序的副本开发者账号。我要将用户从第一个应用程序迁移到第二个应
这是场景。 我有三个容器。 Container1、container2 和 container3(基于 Ubuntu 的镜像),其中 container2 充当容器 1 和容器 2 之间的路由器。 我
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我正在改造管道以使用声明式管道方法,以便我能够 to use Docker images在每个阶段。 目前我有以下工作代码,它执行连接到在 Docker 容器中运行的数据库的集成测试。 node {
我正在开发一个需要尽可能简单地为最终用户安装的应用程序。虽然最终用户可能是经验丰富的 Linux 用户(或销售工程师),但他们对 Tomcat、Jetty 等并不真正了解,我认为他们也不应该了解。 所
我从gvisor-containerd-shim(Shim V1)移到了containerd-shim-runsc-v1(Shim V2)。在使用gvisor-containerd-shim的情况下,
假设我们只在某些开发阶段很少需要这样做(冒烟测试几个 api 调用),让项目 Bar 中的 dockerized web 服务访问 Project Foo 中的 dockerized web 服务的最
各位,我的操作系统是 Windows 10,运行的是 Docker 版本 17.06.0-ce-win19。我在 Windows 容器中运行 SQL Server Express,并且希望将 SQL
谁能告诉我,为什么我们不能在 Azure 存储中的容器内创建容器?还有什么方法可以处理,我们需要在 azure 存储中创建目录层次结构? 最佳答案 您无法在容器中创建容器,因为 Windows Azu
#include template struct Row { Row() { puts("Row default"); } Row(const Row& other) { puts
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
RDF容器用于描述一组事物 例如,把一本书的所有作者列在一起 RDF容器有三种类型: <Bag> <Seq> <Alt> <rdf:
编辑:从到目前为止添加的答案和评论看来,我没有正确解释我想要什么。下面是一个例子: // type not supporting any type of comparison [] [] type b
我正在测试 spatie 的异步项目。我创建了一个这样的任务。 use Spatie\Async\Task; class ServiceTask extends Task { protecte
我想使用 Azure Blob 存储来上传和下载文档。有一些公司可以上传和下载他们的文档。我想保证这些文件的安全。这意味着公司只能看到他们的文件。不是别人的。 我可以在 blob 容器中创建多个文件夹
我正在尝试与 Azure 中的容器实例进行远程交互。我已执行以下步骤: 已在本地注册表中加载本地镜像 docker load -i ima.tar 登录远程 ACR docker登录--用户名--密码
我正在研究http://progrium.viewdocs.io/dokku/process-management/,并试图弄清楚如何从单个项目中运行多个服务。 我有一个Dockerfile的仓库:
我有一个想要容器化的单体应用程序。文件夹结构是这样的: --app | |-file.py <-has a variable foo that is passed in --configs
我正在学习 Docker,并且一直在为 Ubuntu 容器制作 Dockerfile。 我的问题是我不断获取不同容器之间的持久信息。我已经退出,移除了容器,然后移除了它的图像。在对 Dockerfil
我是一名优秀的程序员,十分优秀!