2017-04-07 35 views
-2

as you can see in picture, my div goes of the range of my website,/Orange color, and i have given my site to me 100 % width, but every time i make a div, it goes of the range. 我的div从网站宽度出去?

IM新的编码器,我不知道为什么我每次做一个div或者类,它自动使我的网站更多的宽度。我已经设置的位置是相对的...

我希望你们明白

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

 
h3#hvemerjeg{ 
 
    position: relative; 
 
    left: 200px; 
 
    font-weight: 100; 
 
    padding: 0; 
 
    margin: auto 0; 
 
} 
 

 
h3#hvorformulti { 
 
} 
 

 
h1{ 
 
     text-align: center; 
 
\t \t font-size: 30px; 
 
     color: black; 
 
     display: block; 
 
     top: -32px; 
 
\t \t font-family: fantasy; 
 
\t } 
 
p#infotekst { 
 
     text-align: center; 
 
     width: 20%; 
 
     font-size: 15px; 
 
     position: relative; 
 
     padding: 1%; 
 
     left: 10%; 
 
     border-style:hidden; 
 
     border-width: 5px; 
 
     border-color: #ff5050; 
 
} 
 
#multitekst { 
 
     text-align: center; 
 
     width: 20%; 
 
     max-width: 20%; 
 
     font-size: 15px; 
 
     position: relative; 
 
     padding: 1%; 
 
     left: 30%; 
 
     top: -340px; 
 
     border-style:hidden; 
 
     border-width: 5px; 
 
     border-color: #ff5050; 
 
    
 
} 
 
a { text-decoration: none; 
 
\t 
 
} 
 

 
#logohead { 
 
\t position:absolute; 
 
\t top: 10px; 
 
\t left: 10px; 
 
\t margin: 0px; 
 
    padding: 0px; 
 
\t width: 12%; 
 
\t 
 
\t 
 
} 
 
.sect { 
 
     display: block; 
 
     height: 100%; 
 
     width: 100%; 
 
     background-size:cover; 
 
     background-repeat: no-repeat; 
 

 
} 
 
.subSection { 
 
     height: 450px; 
 
     background-color: white; 
 
     background-repeat: no-repeat; 
 
} 
 
.sectOne { 
 
     background-image: url(image/forside.png); 
 
    
 
} 
 
.sectTwo { 
 
     background-color: aqua; 
 
    
 
} 
 
    
 
.sectThree { 
 
    
 
    
 
} 
 
footer { 
 
\t background-color: black; 
 
\t color: white; 
 
\t overflow:auto; 
 
\t padding-bottom: 1%; 
 
    height:10%; 
 
} 
 
#footerlogo { 
 
\t padding: 1%; 
 
\t padding-left: 3%; 
 
\t display:block; 
 
\t float: left; 
 
} 
 
.footertekst { 
 
\t font-family: 'Trirong', serif; 
 
\t padding-left: 30%; 
 
\t float:right; 
 
\t font-size: 15px; 
 
\t position: absolute; 
 
} 
 

 
.socialemedier { 
 
\t position:relative; 
 
\t padding-left: 75%; 
 
\t display: block; \t 
 
} 
 

 
.ikoner { 
 
\t padding-left: 5%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<title> MultimediaDesigner Hamzeh Khan </title> 
 
<meta name="description" content="Jeg Hamzeh Khan, studere multimediadesigner på århus erhvervsakademi på 1 semester, gennem uddannelse vil jeg få et større forståelse indenfor det digitale verden, og konsturere dem videre til virkeligheden"> 
 
<meta name="author" content=" Made by Hamzeh Khan">  
 
<meta name="keywords" content=" Design, multimediadesigner, konceptudvikler, webdesign"> 
 
    
 
<head>   
 
     <meta charset="utf-8"> 
 
     <meta name="description" content="Jeg Hamzeh Khan, studere multimediadesigner på århus erhvervsakademi på 1 semester, gennem uddannelse vil jeg få et større forståelse indenfor det digitale verden, og konsturere dem videre til virkeligheden"> 
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
     
 
</head> 
 
<header> 
 
    </header>  
 
<style>   
 
    h2 { 
 
     text-align: center; 
 
     font-size: 40px;   
 
    } 
 

 
\t p { 
 
\t \t text-align: center; \t 
 
\t } 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow:hidden; 
 
    background-color:#000000; 
 
} 
 

 
li { 
 
    float: right; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: grey; 
 
} 
 

 
.active { 
 
    background-color:#FF5050; 
 
} 
 
    
 
</style> 
 
    
 
<body> 
 
    <a href="index.html"> 
 
    <img id="logohead" src="image/logokhan.png" alt="headlogo" style="width:10%;height:30px;border:3%"> 
 
    </a> 
 
    <ul> 
 
     <li><a href="contact.html">Contact</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="mywork.html">Mywork</a></li> 
 
     <li><a class="active" href="index.html">Home</a></li> 
 
    </ul> 
 

 
      
 
     <div class="sect sectOne"> 
 

 
<article> 
 

 
</article> 
 
    
 
    </div> 
 

 
        <div class="subSection"> 
 
        <br> 
 
        <h1> test 1 1 </h1> 
 
          <h3 id="hvemerjeg"> Hvem er jeg ? </h3> 
 
          <p id="infotekst"> 
 
          Jeg hedder Hamzeh Seyed og studere multimediadesign på 1 semester på Erhvervsakademi i Århus. Jeg er 22 år gammel, og bor i Kolding sammen med en Roomie og pendler til skolen hverdag kl. 05.30 om morgen. Jeg har store forventninger til mig selv ifølge uddannelsen og vil derfor gennem de næste 3 næste semester vil jeg få et langt større forståelse indenfor den digitale verden end jeg har nu. 
 

 
         I min fritid er jeg for det meste sammen med mine nærmeste omgivelser, og bruger det meste af tiden på at optage video og tager masser billeder, primært af naturen. 
 
           
 
           
 
          </p> 
 
          
 
          <h3 id="hvorformulti"> Hvorfor Multimedia Design </h3> 
 
          <p id="multitekst"> 
 
         Af baggrund af de uddannelser jeg var været igennem, så føler jeg mig meget til rette i den uddannelse jeg læser nu, da jeg er den kreative/innovative person der har forståelse i den teknologis verden, og mener at der er meget jeg kan byde ind på. 
 

 
         Når det gælder om design, er jeg den person der godt kan lide at tænke ud af boksen, og improvisere noget der ikke findes. 
 
         Jeg bruger meget af min tid bag computer, hvor jeg kommer ind på nye hjemmeside hver eneste dag, og lære indtil hvordan deres struktur egentlig er, og hvordan det kan videreudvikles til noget bedre. 
 
          </p> 
 
          
 
          
 
    </div> 
 
          
 
          </p> 
 
        
 
        <div class="sect sectTwo"> 
 
    
 
\t </div> 
 
    
 
     <footer> 
 
\t <img id="footerlogo" src="image/KhanDESIGN.png" alt="headlogo" style="width:5%;height:10%;"> 
 
\t <div> 
 
\t \t <br> 
 
\t \t <h4 class="footertekst"> Kontaktes på </h4> 
 
\t </div> 
 
\t 
 
\t <div class="socialemedier"> 
 
\t \t <a href="https://www.facebook.com/hamzeh.iipp"><img class="ikoner" src="image/facebookicon.png" alt="facebookicon" style="width: 10%;"></a> 
 
\t \t <a href="https://www.instagram.com/khaain/"><img class="ikoner" src="image/instagramicon.png" alt="instagramicon 
 
      "style="width: 10%;"></a> 
 
\t \t <a class="tooltip" href="mailto:[email protected]"><img class="ikoner" src="image/mailicon.png" alt="mailicon" style="width: 10%;"><span class="tooltiptext"></span></a> 
 
    
 

 
    
 

 
<br>  
 
<br> 
 
<br>  
 
<br> 
 
    
 

 
    
 
    
 
</body> 
 
</html>

,你可以在图片中看到,我的DIV去我的网站的范围,/橙色,我给我的网站100%的宽度,但每次我做一个div,它的范围。 ] 1] 1

即时通讯一个新的编码器,我不知道为什么每次我做一个div或类,它会自动使我的网站更宽。我已经设置了相对的位置

+0

能否请您添加代码,以https://jsfiddle.net/所以我们可以看到怎么回事? – Tony

+4

不,将代码添加到**问题**中,而不是jsfiddle。 – JJJ

+1

现在贴的男人 – KhanLearner

回答

1

发生什么,是你创建了一个自然定位的块元素(#hvemerjeg)。

当您使用position:relative移动元素时,此元素(#hvemerjeg)离开页面并创建水平滚动条。

橙色区域显示,由于块元素默认具有父宽度,所以当您限制宽度时,此额外宽度显示为边距(橙色)。 (这正如他们所示,与您的问题真的没有关系。)

解决方法之一是设置“width:calc(100% - 200px);”到这个元素。

其他的解决方案是设置overflow-x:hidden;到这个元素的父元素。

一般情况下,使用相对定位,使页面布局,是一个非常糟糕的主意:)

+0

哦,我看到了,我已经尝试了溢出-x:隐藏,但仍然没有得到任何结果...但是什么是一个好主意,我有一个div/img /类我希望它在网站上的特定位置? 而不是使用相对位置,您更喜欢使用哪一个? – KhanLearner

+0

对不起,固定的拼写错误和措辞:) –

+0

如果这必须在页面的顶部或底部等,您可以使用绝对。 如果要创建列,最简单的方法是创建带有“宽度:20%”的内嵌块;和“vertical-align:top;”并把它们放在一个div中。 –