2017-04-07 36 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中。 –