网站在调整大小时毁了

时间:2013-12-08 14:56:29

标签: html css

所以在我的网站全天工作后,我发现它基本上只能在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); }
}

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

当你试图设计网站时尽量不使用像X px这样的固定值,当X是大数字时,如宽度:800 px;。

例如,如果您将#content更改为:

#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%;

主要内容越来越有可能。

尝试避免大的固定值,将它们更改为可百分值,或者对齐:left;等等