- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我目前在使用 html 和 css 时遇到了问题(仍在学习两者)。我正在尝试使用固定在页面顶部的 div 中的图像制作标准布局,在其下方有水平导航栏、页脚和中间的新闻模块。
这是它目前的样子:
http://pokit.org/get/?05aadb16da601f1aa68bc3321e891107.jpg
您已经可以看出问题所在(实际上是 2 个)。我无法将列表放在导航栏图像上,也无法使页脚图像与导航图像一样宽。
这是我的 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" href = "/servis/Stilovi/standardstyle.css">
<title>Granulo - RE d.o.o</title>
</head>
<body>
<!-- Element koji cini header -->
<div id = "headers">
<img id="aparat_slika" src="/servis/Resursi/Slike/aparat_slika.png" alt="Slika nije ucitana">
<img id="logo_slika" src="/servis/Resursi/Slike/granulo_logo.png" alt="Slika nije ucitana">
<p id="naziv_firme">GRANULO - RE d.o.o</p>
<p id="djelatnost_firme" class="djelatnost">Promet, inženjering i servis protivpožarnih uređaja<br>Bojnička 47, Sarajevo</p>
</div>
<!-- Element koji cini vertikalni meni -->
<nav id = "navbar">
<ul id="lista_meni">
<li ><a class="djelatnost" href="#">Link 1</a></li>
<li ><a class="djelatnost" href="#">Link 2</a></li>
<li ><a class="djelatnost" href="#">Link 3</a></li>
<li ><a class="djelatnost" href="#">Link 4</a></li>
<li ><a class="djelatnost" href="#">Link 5</a></li>
</ul>
<img id="navbar_bg" src="/servis/Resursi/Slike/horizontal_stripe.png" alt="Slika nije ucitana">
</nav>
<!-- Element u kojem se nalaze novosti -->
<div id = "news"></div>
<!-- Element koji cini footer -->
<div id = "footers">
<img id="footer_image" src="/servis/Resursi/slike/horizontal_stripe.png" alt="Slika nije ucitana">
</div>
</body>
</html>
还有我的CSS:
@import url(http://fonts.googleapis.com/css?family=Roboto:700);
body{
margin-left: 10%;
margin-right: 10%;
background-color: white;
}
ul{
list-style-type: none;
}
/* images */
#aparat_slika{
float:right;
}
#logo_slika{
float:left;
}
#navbar_bg{
width: 100%;
margin: 0;
padding: 0;
}
#footer_image{
width: 100%;
}
/* div style */
#headers{
background-color: #e6e1e1;
width: 100%;
float: right;
border: 1px solid black;
}
#naziv_firme{
font-family: 'Roboto', bold;
font-size: 30pt;
float: top;
margin-top: 10px;
}
#navbar{
width: 100%;
border: solid 1px black;
float: right;
padding: 0;
text-align: center;
}
#navbar ul{
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#navbar ul li{
margin: 0;
padding: 50px;
display: inline;
}
#navbar a:visited{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
}
#navbar ul a:active{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
}
#navbar ul a:hover{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background-color: #227755;
}
#footers{
position: fixed;
bottom: 0;
width: 100%;
border: solid 1px black;
}
#news{
border:solid 1px black;
}
/* Klasa za male natpise za firme */
.djelatnost{
font-family: 'Roboto', italic;
font-size: 10pt;
float:top;
margin-top: -40px;
color: black;
}
.linkSize{
height: 120px;
}
最佳答案
首先,我建议将您的代码包装在包装器内,而不是为您的实际主体留出余量,就像这样
<div class="container">
<div id = "headers">...</div>
<nav id = "navbar">...</div>
<div id = "news">...</div>
<div id = "footers">...</div>
</div>
CSS
body{
background-color: white;
}
.container{
width:1000px;
margin: 0 auto;
}
第 2 个页脚是 position:fixed;
所以它不会服从任何容器宽度,在这种情况下它不会服从 margin-right:10%;
body ,你可以用这样的小技巧来修复它:
#footers {
position: fixed;
bottom: 0;
left: 50%; /* tells your footer to be horizontally centered */
margin-left: -502px; /* This need to be half of the width (+2px because of the 1px added as a border for both left and right site in this case) */
width: 1000px;
border: solid 1px black;
}
最后,为了使您的导航栏/链接位于标题图片上方,请添加 position: absolute;
上课.navbar
这是一个 online example
。正如你所说,我没有将它包含在标题图片的链接中,但是position: absolute;
是做到这一点的方法,您只需要尝试一下即可。
解决.navbar
的问题因为这个新的 position:absolute;
而离开容器包装 .navbar
在一个新的 div 中,甚至更好地将属于您的标题的所有内容包装在一个新的 div 类中,并向这个新类添加标签 position: relative;
关于html - 使元素位置固定,而 width = 100% 保持有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29319751/
我的应用程序包含两部分:网络部分和 GUI。它的工作方式有点像浏览器 - 用户从服务器请求一些信息,服务器发回一些代表某些 View 的数据,然后 GUI 显示它。 现在我已经将网络部分实现为一项服务
给定表达式字符串exp,编写程序检查exp中“{”、“}”、“(”、“)”、“[”、“]的对和顺序是否正确。 package main import ( "fmt" stack "gi
我想要一个简单的脚本在后台保持运行。目前看起来像这样: import keyboard while True: keyboard.wait('q') keyboard.send('ct
我维护着许多 RedHat Enterprise Linux(7 台和 8 台)服务器(>100 台),其中包含不同的应用程序。为了保持理智,我当然会使用 Ansible 等工具,更重要的是,公共(p
我有一个 winforms 应用程序,它在网络服务请求期间被锁定 我已经尝试使用 doEvents 来保持应用程序解锁,但它仍然不够响应, 我怎样才能绕过这个锁定,让应用程序始终响应? 最佳答案 最好
我正在努力在我的项目中获得并保持领先的 0。以下是当前相关的代码: Dim jobNum As String jobNum = Left(r1.Cells(1, 1), 6) r2.Cells(1
我正在尝试在我的 Canvas 中定位元素相对于我的背景。 窗口被重新调整大小,保持纵横比。 背景随着窗口大小而拉伸(stretch)。 问题是一旦重新调整窗口大小,元素位置就会不正确。如果窗口的大小
一直在玩弄 Hibernate 和 PostgreSQL,试图让它按预期工作。 但是由于某种原因,当我尝试将具有@OneToMany 关系的对象与集合中的多个项目保持一致时,除了第一个项目之外,所有项
我想将某些东西提交到 github 存储库,但我(显然)没有任何权利这样做。我对那个 repo 做了一个分支,提交了我的更改并提交了一个 pull-request。 现在,问题是过了一段时间其他人已经
这是一个初学者问题,我仍在考虑“在 OOP 中”,所以如果我错过了手册中的答案或者答案很明显,我深表歉意。 假设我们有一个抽象类型, abstract type My_Abstract_type en
我们正在开展的一些项目在 jQuery 1.4.2 或更早版本中有着深厚的根基,介于缺乏最新版本的性能优势(或语法糖)、使用现已弃用的方法的耻辱以及部署一个积极维护的库的 3 年以上旧版本,升级现在迫
我看到在FMDB 2.0中,作者为线程添加了FMDatabaseQueue。例子是: // First, make your queue. FMDatabaseQueue *queue = [FMDa
我在 NSScrollView 中有一个 NSTableView。 NSTableView 的内容是通过绑定(bind)到 NSArrayController 来提供的,而 NSArrayContro
我在 TreeView 上有一个节点,我手动填充该节点并希望保持排序。通过用户交互,TreeViewItem 上的标题可能会更改,它们应该移动到列表中的适当位置。 我遍历一个 foreach,创建多个
我从主 NSWindow 打开一个 NSWindow。 DropHereWindowController *dropHereWindowController = [[DropHereWindowCon
我需要放置一个 form 3 按钮,当我单击该按钮时,将其显示为按下,其他按钮向上,当我单击另一个按钮时,它应该为“向下”,其他按钮应为“向上” 最佳答案 所有按钮的属性“Groupindex”必须设
我有一个使用 AnyEvent::MQTT 订阅消息队列的 perl 脚本。 目前我想要它做的就是在收到消息时打印出来。我对 perl 完全陌生,所以我正在使用它附带的演示代码,其中包括将 STDIN
如何在 .NET 应用程序中保持 TreeView 控件的滚动位置?例如,我有一个树形 View 控件,并经历了一个向其添加各种节点的过程,并将它们固定在底部。在此过程中,我可以滚动浏览 TreeVi
我维护了大量的 vbscripts,用于在我的网络上执行各种启动脚本,并且有一些我在几乎所有脚本中使用的函数。 除了复制和粘贴之外,有没有人对我如何创建可重用 vbscript 代码库有建议。我并不反
我有一些关于 Azure 自托管的问题。 假设用户 Alex 在物理机 M 上设置了 Windows 自托管代理。当 Alex 注销且计算机进入休眠状态时,代理将脱机。现在,当 Bob 登录同一台计算
我是一名优秀的程序员,十分优秀!