元素在调整浏览器大小或放大/缩小时的位置 [英] Element positions upon resizing browser or zooming in/out
问题描述
我已经设法保留一些图片固定在他们的位置，但在浏览器调整大小时会扭曲。
到目前为止，我的工作是：
HTML
home.php
p.copyright {
font-weight：bold;
text-align：center;
font-style：regular;
}
.clear {
clear：both;
}
#header {
display：block;
宽度：80％;
top：0;
z-index：1;
text-align：center;
位置：固定;
overflow：hidden;
保证金余额：10％;
}
#footer {
width：80％;
位置：固定;
display：block;
bottom：0px;
overflow：hidden;
保证金余额：10％;
}
#logo {
position：relative;
text-align：left;
margin-left：0;
float：left;
height：95px;
width：300px;
}
#navcontainer {
display：block;
margin-right：0;
float：right;
职位：亲属;
}
#textbox {
position：relative;
float：right;
height：95px;
width：300px;
}
#htimg，＃bb-sb {
position：relative;
}
#navcontainer ul {
padding：0px
list-style-type：none;
text-align：center;
}
#navcontainer ul {
list-style-type：none;
}
#navcontainer ul li {
display：inline;
}
#navcontainer ul li a：hover {
color：red;
background-color：＃;
}
我完全意识到我的代码非常混乱（并且不一致，我猜测）。我也注意到浏览器的行为不一样。我应该怎么做才能解决这个问题？
$ b
首先删除2个链接，只需要一次。
下一页将#Header，table，#footer放在div中，并将css设置为
width：940px;
margin：0 auto;
效果是组件将被居中，当你缩小浏览器时页面不会改变大小。响应（即改变视图大小的变化）是一个更多的参与。
虽然我同意PP bootstrap是一个很好的方式去，不知道它是如何从长远来看，这会不会导致你的问题？/ b>
编辑
，footer.html不需要拥有header或html，所以它就是。
Header.html
< div id =footer>
< img src =images / rd-bb.jpgalign =rightwidth =300px/>
< div id =bb-sb>
< img src =images / heading-bottom.jpgwidth =100％/>
< / div>
< div id =fttext>
< font size =1>< p class =copyright>< span style =color：＃8e8e8f> All site content copyright&＃169; < span style =color：＃0099ff>义隆控股有限公司< / span> 2013，除非在网站积分中另有说明。版权所有。 < br />
Website Design by Right< span style =color：＃ec4e1b> Angle< / span> Corporation< / span>< / p>< / font>
< / div>
< / div>
Footer.html
< div id =footer>
< img src =images / rd-bb.jpgalign =rightwidth =300px/>
< div id =bb-sb>
< img src =images / heading-bottom.jpgwidth =100％/>
< / div>
< div id =fttext>
< font size =1>< p class =copyright>< span style =color：＃8e8e8f> All site content copyright&＃169; < span style =color：＃0099ff>义隆控股有限公司< / span> 2013，除非在网站积分中另有说明。版权所有。 < br />
Website Design by Right< span style =color：＃ec4e1b> Angle< / span> Corporation< / span>< / p>< / font>
< / div>
< / div>
PHP文件提供html，head，body标签。
另外我在你的css中注意到你的使用位置：修正了很多不需要的地方：）
$ b
EDIT2
下面是一个带有实例的小提琴，我必须删除style.css文件，但您可以看到这里，它没有工作。
I'm very new to HTML/CSS and I still don't know some important attributes when maintaining elements on their positions even when the browser zooms in/out or when the browser resize.
I have managed to keep some images fixed on their position but get distorted upon browser resize.
Here's my work so far:
HTML
home.php
p.copyright {
font-weight: bold;
text-align: center;
font-style: regular;
}
.clear {
clear: both;
}
#header {
display: block;
width: 80%;
top: 0;
z-index: 1;
text-align: center;
position: fixed;
overflow: hidden;
margin-left:10%;
}
#footer {
width: 80%;
position:fixed;
display: block;
bottom: 0px;
overflow: hidden;
margin-left:10%;
}
#logo {
position: relative;
text-align: left;
margin-left: 0;
float: left;
height: 95px;
width:300px;
}
#navcontainer {
display: block;
margin-right:0;
float: right;
position: relative;
}
#textbox {
position: relative;
float: right;
height: 95px;
width:300px;
}
#htimg, #bb-sb {
position: relative;
}
#navcontainer ul {
padding:0px
list-style-type: none;
text-align: center;
}
#navcontainer ul {
list-style-type: none;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a:hover {
color: red;
background-color: #;
}
I'm fully aware that my code is very messy (and inconsistent, I guess). I also noticed that browsers do not behave the same. What solution should I do about this?
Few Quick things should get that working a little better.
First remove 2 of the link rels, only needed once. Next Wrap #Header, table, #footer in a div and set the css to
width:940px;
margin:0 auto;
The effect is the components will be centered and when you shrink the browser the page won't change size. Responsive (ie. changing the view as the size changes) is a little more involved.
While I agree with PP bootstrap is a good way to go, without knowing how it does it will cause you problems in the long run
EDIT
the header,footer.html don't need to have the header or html so it would be.
Header.html
<div id="footer">
<img src="images/rd-bb.jpg" align="right" width="300px"/>
<div id="bb-sb">
<img src="images/heading-bottom.jpg" width="100%" />
</div>
<div id="fttext">
<font size="1"><p class="copyright" ><span style="color:#8e8e8f" >All site content copyright © <span style="color:#0099ff">ELAN Holdings Corporation </span>2013 unless otherwise stated in site credits. All rights reserved. <br />
Website Design by Right<span style="color:#ec4e1b">Angle </span>Corporation</span></p></font>
</div>
</div>
Footer.html
<div id="footer">
<img src="images/rd-bb.jpg" align="right" width="300px"/>
<div id="bb-sb">
<img src="images/heading-bottom.jpg" width="100%" />
</div>
<div id="fttext">
<font size="1"><p class="copyright" ><span style="color:#8e8e8f" >All site content copyright © <span style="color:#0099ff">ELAN Holdings Corporation </span>2013 unless otherwise stated in site credits. All rights reserved. <br />
Website Design by Right<span style="color:#ec4e1b">Angle </span>Corporation</span></p></font>
</div>
</div>
The PHP file is providing the html,head,body tags.
Also i noted in your css your using position:fixed alot theres no need for that :)
EDIT2
Here is a fiddle with a working example, I had to remove the style.css file but you can see here that it works without.
这篇关于元素在调整浏览器大小或放大/缩小时的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
