2013-12-08 49 views
-2

因此,在我的网站上工作了一整天后,我发现它基本上只在我的电脑上兼容1920 * 1080。网站在调整大小时被破坏

我想我会以某种方式将对象“粘合”到网站的x个区域,但我不知道该怎么做。

我知道这不完全是一个直接的问题,但你能告诉我是什么原因导致我的网站在调整大小时出现故障吗?这里是整个网站的jsfiddle

http://jsfiddle.net/vuz2L/

下面是HTML代码:

<!DOCTYPE HTML> 
<HTML> 

    <head> 
     <title>Heilsa</title> 
     <link type="text/css" href="stylesheet3.css" rel="stylesheet"/> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    </head> 

<body> 
<div id="container"> 

<img id="bordi" src="heilsa2.png"/> 
<div id="bigtext"><a href="heim.html">Heilsa</a></div> 
    <div class="menu"> 
    <ul> 
    <li><a href="heim.html">Heim</a></li> <span id="menubord"> 
    <li><a href="sida1.html">Hollt Mataræði</a></li> 
    <li><a href="sida2.html">Reynslusögur</a></li> </span> 
    </ul> 
    </div> 

    <div id="content"> 
     <div id="block"> 
     </div> 
     <div id="meginmal"> 
     <h1>Fyrirsögn</h1> 
     <p>ch-slahing thust get a proper bitch-slapping to stop making walls of text, but if you are weird then thaA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some otht doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some otht doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othoesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othsome other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information.A wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information. 
     </p> 
     </div>  
    </div> 

    <div class="push"> 
    </div> 
    <div id="wrapper"> 
    <img id="undir" src="undir.png"/> 
    </div> 
</div> 
</body> 
</HTML> 

和CSS:

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

#container { 
    min-height:100%; 
    height: auto !important; 
    position:relative; 
    height: 100%; 
    margin: 0 auto -232px; 
    } 

.menu { 
width:700px; 
height:180px; 
font-family:Trajan Pro; 
font-size:18px; 
text-align:center; 
font-weight:bold; 
text-shadow:3px 2px 3px #333333; 
margin-left:1010px; 
position:absolute; 
top:135px; 
} 
#menubord { 

} 
.menu ul { 
    height: auto; 
    padding: 8px 0px; 
    margin: 0px; 
    list-style-type: none; 
} 
.menu li { 
display: inline; 
padding: 20px; 
} 
.menu a { 
text-decoration: none; 
color:red; 
font-weight:600; 
font-size: 22px; 
letter-spacing: 1.2px; 
} 

.menu a:hover { 
text-shadow: 8px 5px 8px #333333; 
font-size:24px; 
animation-name: opac; 
animation-duration: 2s; 
animation-timing-function: linear; 
animation-delay: 0s; 
animation-iteration-count: infinite; 
animation-direction: normal; 
animation-play-state: running; 
/* Safari and Chrome: */ 
-webkit-animation-name: opac; 
-webkit-animation-duration: 2s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-delay: 0s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: normal; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 
@keyframes opac 
{ 
0% {opacity:1} 
25% {opacity:0.5} 
50% {opacity:0.1} 
75% {opacity:0.5} 
100% {opacity:1} 
} 

@-webkit-keyframes opac /* Safari and Chrome */ 
{ 
0% {opacity:1} 
25% {opacity:0.5} 
50% {opacity:0.1} 
75% {opacity:0.5} 
100% {opacity:1} 
} 

.menu a:active { 
text-shadow: 12px 8px 12px #333333; 
} 

#content { 
min-height:100%; 
position: relative; 
width: 800 px; 
height: 800px; 
margin-right:200px; 
margin-left:200px; 
padding:10px; 
padding-bottom:60px; /* Height of the footer */ 
} 



#block1 { /*IGNORE THIS. I AM SAVING IT FOR LATER*/ 
    background: red; 
    filter:alpha(opacity=20); /* IE */ 
    -moz-opacity:0.2; /* Mozilla */ 
    opacity: 0.2; /* CSS3 */ 
    position: absolute; 
    top: 0; left: 0; 
    height: 100%; width:100%; 
    border-radius: 20px; 
    margin:10px; 
} 

#meginmal { 
padding: 20px 30px 20px 30px; 
text-align: center; 
font-size:20px; 
border-right: solid; 
border-left: solid; 
font-family: Trajan Pro; 
} 

#bordi { 
height:100%; 
width: 100%; 
margin: 0%; 
    } 



#wrapper { 

    bottom:0; 
    width:100%; 
    height:232px; /* Height of the footer */ 
    margin-top:200px; 
} 

.push { 
height: 232px; 
} 

#bigtext { 
z-index:1; 
margin-top:-300px; 
margin-left:700px; 
position: absolute; 
font-size:70px; 
font-family: Trajan Pro; 

} 
#bigtext a { 
text-decoration: none; 
color:black; 
border-bottom:solid; 
border-color: rgba(0, 255, 255, 0); 
} 

#bigtext a:hover{ 
animation-name: big; 
animation-duration: 2s; 
animation-timing-function: linear; 
animation-delay: 0s; 
animation-iteration-count: infinite; 
animation-direction: normal; 
animation-play-state: running; 
/* Safari and Chrome: */ 
-webkit-animation-name: big; 
-webkit-animation-duration: 2s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-delay: 0s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: normal; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 
@keyframes big 
{ 
    0% { border-color: rgba(0, 0, 0, 1); } 
    50% { border-color: rgba(0, 0, 0, 0); } 
    100% { border-color: rgba(0, 0, 0, 1); } 
} 

@-webkit-keyframes big /* Safari and Chrome */ 
{ 
    0% { border-color: rgba(0, 0, 0, 1); } 
    50% { border-color: rgba(0, 0, 0, 0); } 
    100% { border-color: rgba(0, 0, 0, 1); } 
} 
+0

谢谢大家。 开发人员何时使用保证金和填充以及他们如何确保他们不会在其他解决方案中破坏他们的网页? 编辑:我注意到我的问题得到了投票,就像这个委员会上的所有问题一样。我得问,这个网站上的人究竟是怎么回事? – user3078830

回答

0

当您尝试设计网站时,尽量不要使用像X px这样的固定值,当X很大时,像宽度:800像素;.

例如,如果你改变#内容到这一点:

#content { 
min-height:100%; 
position: relative; 
width: 800 px; 
height: 800px; 
margin-right:5%; 
margin-left:5%; 
padding:10px; 
padding-bottom:60px; 
/* Height of the footer */ 
} 

这里,我改变

margin-right:5%; 
margin-left:5%; 

主要内容变得更加容易。

尽量避免大的固定值,改变他们percentable值,或对齐:左;,等

0

你有很多的保证金左+位置:绝对破坏布局的值。不要使用绝对定位,而应尝试使用边距和浮点数,或者甚至浏览器页面中自然流动的显示元素。