0
我是一位新的網頁設計師。這將是我在網上發佈的第二個網站。 問題是網站非常適合所有屏幕大小的窗口，除了方形屏幕。 作爲一個例子，this monitor將打破我的網頁內容，並強迫他們坐在彼此的頂部或彼此之下。這變成了一個可怕的外觀。我的假設是，我的代碼中有一個非常小的錯誤導致發生，但我無法弄清楚錯誤在哪裏。 您可能會看我的網站here，但我會粘貼我的代碼。 請幫幫我。 的.html：爲什麼我的網站內容在方形窗口（等寬度和高度的屏幕）上互相重疊？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>7Seas Redovisning</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="img_akin/7seas1.jpeg" id="logo" alt="" width="12%" height="12%"/>
<h1><span class="header_name"><span class="seven">7</span>Seas Redovisning</span></h1>
<p>
<span class="mob_tele">Mob: 076-9516926 <br />
Tel: 040-133403</span><br />
[email protected]
</p>
</header>
<nav id="top_menu">
</nav>
<!--
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>
-->
<div class="box_container">
<div class="box">Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
</div>
<div class="box">Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
</div>
<div class="box">Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
</div>
</div>
<div id="new_div"> <!--only the main content-->
<section id="main_section">
<!--
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>
-->
<div class="image_service_list">
<div class="img_wrap">
<img src="img_akin/image_1st_body.jpg" width="650" height="312" alt=""/>
</div>
<div class="service_list">
<span class="style_number">1.</span> INKOMSTDEKLARATION<br /><br /><br />
<span class="style_number">2.</span> MOMSDEKLARATION<br /><br /><br />
<span class="style_number">3.</span> BOLAGSBILDNING<br /><br /><br />
<span class="style_number">4.</span> EKONOMI KONSLUT<br /><br /><br />
<span class="style_number">5.</span> LÖPANDE BÖKFÖRING
</div>
<div class="service_list">
<span class="style_number">6.</span> BOKSLUT & ÅRSREDOVISNING<br /><br /><br />
<span class="style_number">7.</span> SKATTEDEKLARATION<br /><br /><br />
<span class="style_number">8.</span> LÖNEADMINISTRATION<br /><br /><br />
<span class="style_number">9.</span> FAKTURERING<br /><br /><br />
<span class="style_number">10.</span> ONE MORE
</div>
</div>
</section>
</div>
<footer id="the_footer">
<p class="footer_text"><span id="footer_left">
© 7 seas Redovisning <br />
En del av 7seas Money Transfer KB<br />
F-skatt registrerat <br />
Org, Nr: 969756-4079 <br />
SEB Företagskonto: 5502-1030132<br />
BG: 102-5006
</span>
</p>
<p class="footer_text">
Besökadress: <a href="https://www.google.se/maps/place/Skomakarebyn+8,+218+41+Bunkeflostrand/@55.5592313,12.9325061,3a,75y,153.78h,90t/data=!3m4!1e1!3m2!1sufqG4dOye4Igl8W2ATJPgg!2e0!4m2!3m1!1s0x4653a718b0946da5:0xd60c6ee131582f21!6m1!1e1" title="See on Google Map">Skomakarebyn 8E<br />
218 41 Bunkeflostrand</a><br />
Malmö, Sweden <br />
Follow us on FB <!-- SMARTADDON BEGIN -->
<br />
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('www.7seasredovisning.se','bookmarks')"><img alt="Share" src="http://s1.smartaddon.com/s8.png" border="0" /></a>
<br />Designed & Developed by <a href="http://jabiralfatah.com/" title="Visit my Website">Jabir Al Fatah</a><br />
Copyright @ 2014 <a href="http://dhbangladesh.com/"title="Visit DH BANGLADESH">DH BANGLADESH in SWEDEN.</a>
</p>
<p class="footer_text"><span id="footer_right">
Tel: 040-133403<br />
Mob: 076-9516926<br />
e-Mail: [email protected]<br/>
<a href="http://7seasredovisning.se/">www.7seasredovisning.se</a><br/>
<span id="webstat">
<script src="http://stats.webstat.se/assets/stat_isp2.php"></script>
<script type="text/javascript">
<!--
document.write("<" + "script src=\"http://stats.webstat.se/statCounter.asp?id=38356&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colorDepth + "&referer=" + escape(document.referrer) + "&isp=" + info2+ "\"></" + "script>");
-->
</script>
</span>
<!-- Slut WEBSTAT.SE kod -->
</span>
</p>
</footer>
</div>
</body>
</html>
的.css：
*{
margin:0px;
padding:0px;
}
#top_header h1 {
font:bold 4em Fantasy;
text-align:center;
margin-top:-105px;
margin-right:250px;
color:#006400;
text-shadow:2px 2px 2px orange;
}
.header_name{
margin-left:80px;
}
.seven{
color:orange;
font-size:1.2em;
text-shadow:2px 2px 2px #006400;
}
#top_header p {
margin-top:-100px;
color:#00008B;
float:right;
font-family:Georgia;
margin-right:20px;
}
.mob_tele{
font-size:13.5px;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-o-box;
display:-moz-box;
/*
display:-ms-box;
*/
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
-o-box-pack:center;
background-color:#E6E6FA;
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
margin-bottom:15px;
display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
background-color:white;
-webkit-box-shadow: 0 0 2px 2px gray;
}
#top_header{
border:3px soild gray;
padding:20px;
}
#logo{
padding-top:20px;
padding-left:5px;
}
#top_menu{
border-top: 6px solid #20B2AA;
border-radius:0px;
box-shadow: 0 0 1.4px 1.4px #424242;
color:black;
}
#new_div{
display:block;
display:-moz-box;
display:-o-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
/*
border: 1px solid blue;
*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.service_list{
display: inline-block;
float: left;
margin: 0 10px;
font-family:Euphemia;
font-weight:bold;
color:green;
}
.style_number{
font: italic 1.2em Georgia, Times, serif;
font-weight:bold;
color:#4169E1;
}
.box {
display:inline-block;
margin-top:50px;
margin-bottom:60px;
margin-left:55px;
padding:15px;
width:280px;
border: 3px solid gray;
border-radius:4px;
}
.box_container{
/*
width:1161px;
*/
white-space: nowrap;
}
.img_wrap{
float:right;
position:relative;
}
.img_wrap::before{
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
background-image: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
background-image: -o-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
content:"\00a0";
top:0px;
left:0px;
height:100%;
width:100%;
position:absolute;
}
#the_footer{
background:#B0C4DE;
border-top:0.5px solid green;
}
.image_service_list{
margin-bottom:500px;
}
.footer_text{
list-style:none;
display:inline-block;
padding:40px;
margin-left:35px;
font-family:Euphemia;
font-size:13px;
}
#the_footer a{
text-decoration: none;
}
#the_footer a:hover{
text-decoration: underline;
}
什麼是方形屏幕的分辨率。 – 2014-11-05 09:43:12
我其實不記得決議，但它是我給鏈接的同一個。 – Ryan 2014-11-05 09:48:20