在窗口上移動標題調整大小

當我重新調整窗口大小時，標題移動會在右側留下空間。（請參閱圖片）。如果我水平地縮小窗口，則間隙增加。我只能通過將標題的位置設置爲fixed來解決此問題，但文本重疊。我希望標題隨垂直滾動移動。任何幫助在這裏我出錯是高度讚賞。在窗口上移動標題調整大小

*{ 
 
\t padding:0; 
 
\t margin:0 auto; 
 
\t font-family: 'Museo Slab 300'; 
 
} 
 

 
html{ 
 
\t background: url("Images/backlines.png") no-repeat center center fixed; 
 
} 
 

 

 
.company-header { 
 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0.1, rgb(254, 254, 254)),color-stop(1, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209))); 
 
    height: 140px; 
 
    box-shadow: 0px 2px; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0px; 
 
} 
 

 
.company-footer{ 
 
\t position: fixed; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t padding: 1rem; 
 
\t background-color: #efefef; 
 
\t text-align: left; 
 
\t z-index:-1; 
 
    box-shadow: 0px -4px rgba(0, 173, 239, 1); \t 
 
} 
 

 
img#logo-image { 
 
    position: absolute; 
 
    left: 270px; 
 
} 
 

 

 
div#setting-dropdown { 
 
    position: relative; 
 
    float: right; 
 
    right: 250px; 
 
    top: 58px; 
 
} 
 

 
div#setting-dropdown-content { 
 
\t display: none; 
 
    background: rgba(0, 173, 239, 1); 
 
    width: 196px; 
 
    margin-left: -70px; 
 
    padding: 4px 5px 5px 7px; 
 
} 
 

 
div#setting-dropdown-content a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    font-family: 'Museo Slab 300'; 
 
    display: inline-block; 
 
} 
 

 
div#setting-dropdown i { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    padding-right: 7px; 
 
    text-align: center; 
 
    border-radius: 10px 10px 0 0; 
 
    padding-bottom: 10px; 
 
\t color: rgba(0, 173, 239, 1); 
 
} 
 

 
div#setting-dropdown:hover i { 
 
    background-color: rgba(0, 173, 239, 1); 
 
\t color:white; 
 
} 
 

 
#setting-dropdown:hover #setting-dropdown-content { 
 
\t display:block; 
 
} 
 

 
p#setting-dropdown { 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 

 
button#company-logout { 
 
    background: rgba(255, 255, 255, 1); 
 
    border: none; 
 
    border-radius: 40px 40px 40px 40px; 
 
    width: 135px; 
 
    height: 40px; 
 
    font-size: 19px; 
 
    font-weight: 900; 
 
    font-family: 'Museo Slab 700'; 
 
    float: right; 
 
    top: 54px; 
 
    right: -40px; 
 
    position: relative; 
 
} 
 

 

 
div#log-in { 
 
    position: relative; 
 
    top: 200px; 
 
} 
 

 
div#welcome-text { 
 
    margin-left: 276px; 
 
    font-family: 'Museo Slab 300'; 
 
    font-size: 22px; 
 
} 
 

 
div#loginHeader { 
 
\t margin-top: 60px; 
 
\t margin-left: 276px; 
 
} 
 

 

 

 
div#dropdown-main-content { 
 
    position: relative; 
 
    top: 230px; 
 
    left: 276px; 
 
    display: inline-flex; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    width: 11em; 
 
    top: 60px; 
 
    right: 260px; 
 
} 
 

 
.dropbtn { 
 
    color: white; 
 
    width: 100%; 
 
    height: 3.2em; 
 
    font-size: 16px; 
 
    border: none; 
 
    text-align: start; 
 
    font-weight: 900; 
 
    background: rgba(0, 173, 239, 1); 
 
    border-radius: 50px 50px 50px 50px; 
 
    -moz-border-radius: 0px; 
 
    z-index: 2; 
 
    text-indent: 23px; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    z-index: -1; 
 
    background-color: #f9f9f9; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    margin-top: -64px; 
 
    width: 176px; 
 
} 
 

 
.dropdown a { 
 
\t background:url("Images/sidearrow.png") no-repeat 7px; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: .75em; 
 
    text-decoration: none; 
 
    display: block; 
 
    border: 1px solid #000; 
 
    border-top: none; 
 
    text-indent: 12px; 
 
    width: 150px; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url("Images/sidewhite.png") no-repeat 3px; 
 
\t background-color: rgb(255,131,0); 
 
\t color:white; 
 
\t font-weight:900; 
 
} 
 

 
.dropdown-content a:first-child { 
 
    padding-top: 35px; 
 
    background: url("Images/sidearrow.png") no-repeat 7px 36px; 
 
} 
 

 
.dropdown-content a:first-child:hover { 
 
    background: url("Images/sidewhite.png") no-repeat 3px 36px; 
 
    color:white; 
 
    background-color: rgb(255,131,0); 
 
    font-weight:900; 
 
} 
 

 

 

 
img#sphere { 
 
    position: relative; 
 
    width: 35px; 
 
\t height: 34px ; 
 
    left: 133px; 
 
    bottom: 42px; 
 
} 
 

 
img#sphere-arrow { 
 
    position: relative; 
 
    bottom: 44px; 
 
    left: 99px; 
 
} 
 

 

 

 
div#login-form { 
 
\t margin-top: 100px; 
 
    margin-left: 276px; 
 
} 
 

 
.page-label { 
 
    font-size: 19px; 
 
} 
 

 

 
button#loginSubmit { 
 
    margin-top: 75px; 
 
    background: rgba(0, 173, 239, 1); 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    border-radius: 40px 40px 40px 40px; 
 
    width: 185px; 
 
    height: 60px; 
 
    font-size: 20px; 
 
    font-family: sans-serif; 
 
    color: white; 
 
    font-weight: 900; 
 
    border: none; 
 
    position: absolute; 
 
    margin-left: 278px; 
 
} 
 

 
div#login-landingpage{ 
 
    margin-left: 276px; 
 
    margin-top: 90px; \t 
 
} 
 

 

 
select.security-questions { 
 
    width: 450px; 
 
    height: 40px; 
 
    font-weight: bold; 
 
} 
 

 
.security-question-labels { 
 
    font-size: 21px; 
 
    font-family: 'Museo Slab 300'; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Averios</title> 
 
\t <link rel="stylesheet" type="text/css" href="test.css"> 
 
\t <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /> 
 
\t 
 
<meta charset="utf-8"> 
 
</head> 
 
<body> 
 
<div class="company-header"> 
 
\t <a href="http://fuzionanalytics.com/"><img id="averios-logo-image" src="Images/averioslogo.png" width="176" height="129"></a> 
 
\t <div id="setting-dropdown"> 
 
\t \t <!-- SETTING DROPDOWN WILL GO HERE --> 
 
\t \t <p id="setting-dropdown"> SETTINGS <i class="ion-chevron-down"></i></p> 
 
\t \t <div id="setting-dropdown-content"> 
 
\t \t \t <a href="#">Change Password</a> 
 
\t \t \t <a href="#">Change Security Settings</a> 
 
\t \t </div> 
 
\t </div> 
 
\t <button id="company-logout"> LOGOUT </button> 
 
</div> 
 

 
<div id="log-in"> 
 
\t <div id="loginHeader"> 
 
\t \t <h1>Portal</h1> 
 
\t </div> 
 
\t <br> 
 
\t <br> 
 
\t <div id="welcome-text"> 
 
\t \t <p> Welcome name </p> 
 
\t \t <p> Your last login was time on date </p> 
 
\t \t <br> 
 
\t \t <p> Please select an application below to begin </p> 
 
\t </div> 
 
</div> 
 
<div id="dropdown-main-content"> 
 
\t \t <img id="pulse-image" src="C:\Users\user\Desktop\Final-Designs\Images\pulse.png" width="320" height="50" alt=""/> 
 
\t \t <div id="dropdown-one"> 
 
\t \t <div class="dropdown"> 
 
\t \t <button class="dropbtn">SELECT</button> 
 
\t \t <img id="sphere" src="C:\Users\user\Desktop\Final-Designs\Images\sphere.png" alt=""/> 
 
\t \t <img id="sphere-arrow" src="C:\Users\user\Desktop\Final-Designs\Images\arrow.png" alt=""/> 
 
\t \t <div class="dropdown-content"> 
 
\t \t \t <a href="#">option0</a> 
 
\t \t \t <a href="#">option1</a> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <!-- SENTINAL --> 
 
\t <img id="sentinal-image" src="C:\Users\user\Desktop\Final-Designs\Images\sentinal.png" width="380" height="50" alt=""/> 
 
\t <div id="dropdown-second"> 
 
\t \t <div class="dropdown"> 
 
\t \t <button class="dropbtn">SELECT</button> 
 
\t \t <img id="sphere" src="C:\Users\user\Desktop\Final-Designs\Images\sphere.png" alt=""/> 
 
\t \t <img id="sphere-arrow" src="C:\Users\user\Desktop\Final-Designs\Images\arrow.png" alt=""/> \t \t 
 
\t \t <!--<div class="sphere-two"> 
 
\t \t \t <div id="arrow-two"> 
 
\t \t \t \t <img src="C:\Users\user\Desktop\Images\arrow.png" width="29" height="27" alt=""/> 
 
\t \t \t </div> 
 
\t \t </div>--> 
 
\t \t <div class="dropdown-content"> 
 
\t \t \t <a href="#">option0</a> 
 
\t \t \t <a href="#">option1</a> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div class="company-footer"> 
 
\t <div id="footer-text"> 
 
\t \t &copy; 2016 Company, All Rights Reserved. 
 
\t </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-12-19 Maddy

事實上，描述的行爲並不在你的代碼段存在？ – sinisake

@sinisake我只是跑了一小段，當你水平滾動時，我看到一個白色塊。不確定你指的是什麼。 – Maddy

如果你可以提供jsfiddle –

問題是

div#dropdown-main-content { 
    position: relative; 
    top: 230px; 
    left: 276px; 
    display: inline-flex; }

嘗試刪除顯示內聯和左到0這樣

div#dropdown-main-content { 
position: relative; 
top: 230px; 
display: inline; }

還從圖像和div的除去固定寬度，嘗試使用最大寬度。

更新

*{ 
    padding:0; 
    margin:0 auto; 
    font-family: 'Museo Slab 300'; 
} 

html{ 
    background: url("Images/backlines.png") no-repeat center center fixed; 
} 


.averios-header { 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0.1, rgb(254, 254, 254)),color-stop(1, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209))); 
    height: 140px; 
    box-shadow: 0px 2px; 
    position: absolute; 
    width: 100%; 
    top: 0px; 
} 

.averios-footer{ 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: #efefef; 
    text-align: left; 
    z-index:-1; 
    box-shadow: 0px -4px rgba(0, 173, 239, 1); 
} 

img#averios-logo-image { 
    position: absolute; 
    left: 270px; 
} 


div#setting-dropdown { 
    position: relative; 
    float: right; 
    right: 250px; 
    top: 58px; 
} 

div#setting-dropdown-content { 
    display: none; 
    background: rgba(0, 173, 239, 1); 
    width: 196px; 
    margin-left: -70px; 
    padding: 4px 5px 5px 7px; 
} 

div#setting-dropdown-content a { 
    color: white; 
    text-decoration: none; 
    font-size: 16px; 
    font-family: 'Museo Slab 300'; 
    display: inline-block; 
} 

div#setting-dropdown i { 
    display: inline-block; 
    padding: 5px; 
    padding-right: 7px; 
    text-align: center; 
    border-radius: 10px 10px 0 0; 
    padding-bottom: 10px; 
    color: rgba(0, 173, 239, 1); 
} 

div#setting-dropdown:hover i { 
    background-color: rgba(0, 173, 239, 1); 
    color:white; 
} 

#setting-dropdown:hover #setting-dropdown-content { 
    display:block; 
} 

p#setting-dropdown { 
    font-size: 20px; 
    font-weight: bold; 
} 

button#averios-logout { 
    background: rgba(255, 255, 255, 1); 
    border: none; 
    border-radius: 40px 40px 40px 40px; 
    width: 135px; 
    height: 40px; 
    font-size: 19px; 
    font-weight: 900; 
    font-family: 'Museo Slab 700'; 
    float: right; 
    top: 54px; 
    right: -40px; 
    position: relative; 
} 


div#log-in { 
    position: relative; 
    top: 200px; 
} 

div#welcome-text { 
    margin-left: 276px; 
    font-family: 'Museo Slab 300'; 
    font-size: 22px; 
} 

div#loginHeader { 
    margin-top: 60px; 
    margin-left: 276px; 
} 



div#dropdown-main-content { 
    position: relative; 
    top: 230px; 
    display: inline-block; 
    text-align: center; 
    width: 100%; 
} 

.dropdown { 
    position: relative; 
    width: 11em; 
    top: 60px; 
} 

.dropbtn { 
    color: white; 
    width: 100%; 
    height: 3.2em; 
    font-size: 16px; 
    border: none; 
    text-align: start; 
    font-weight: 900; 
    background: rgba(0, 173, 239, 1); 
    border-radius: 50px 50px 50px 50px; 
    -moz-border-radius: 0px; 
    z-index: 2; 
    text-indent: 23px; 
} 

.dropdown-content { 
    display: none; 
    z-index: -1; 
    background-color: #f9f9f9; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    margin-top: -64px; 
    width: 176px; 
} 

.dropdown a { 
    background:url("Images/sidearrow.png") no-repeat 7px; 
} 

.dropdown-content a { 
    color: black; 
    padding: .75em; 
    text-decoration: none; 
    display: block; 
    border: 1px solid #000; 
    border-top: none; 
    text-indent: 12px; 
    width: 150px; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

.dropdown-content a:hover { 
    background:url("Images/sidewhite.png") no-repeat 3px; 
    background-color: rgb(255,131,0); 
    color:white; 
    font-weight:900; 
} 

.dropdown-content a:first-child { 
    padding-top: 35px; 
    background: url("Images/sidearrow.png") no-repeat 7px 36px; 
} 

.dropdown-content a:first-child:hover { 
    background: url("Images/sidewhite.png") no-repeat 3px 36px; 
    color:white; 
    background-color: rgb(255,131,0); 
    font-weight:900; 
} 



img#sphere { 
    position: relative; 
    width: 35px; 
    height: 34px ; 
    left: 133px; 
    bottom: 42px; 
} 

img#sphere-arrow { 
    position: relative; 
    bottom: 44px; 
    left: 99px; 
} 



div#login-form { 
    margin-top: 100px; 
    margin-left: 276px; 
} 

.page-label { 
    font-size: 19px; 
} 

input[type="text"] { 
    background: #EDEDEE; 
    background : rgba(237, 237, 238, 1); 
    border-style : Solid; 
    border-color : #4B4E53; 
    border-color : rgba(75, 78, 83, 1); 
    border-width : 1px; 
    width: 370px; 
    height: 35px; 
    font-size: 26px; 
} 

input[type="password"] { 
    background: #EDEDEE; 
    background : rgba(237, 237, 238, 1); 
    border-style : Solid; 
    border-color : #4B4E53; 
    border-color : rgba(75, 78, 83, 1); 
    border-width : 1px; 
    width: 370px; 
    height: 35px; 
    font-size: 26px; 
} 

button#loginSubmit { 
    margin-top: 75px; 
    background: rgba(0, 173, 239, 1); 
    border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 40px 40px 40px 40px; 
    width: 185px; 
    height: 60px; 
    font-size: 20px; 
    font-family: sans-serif; 
    color: white; 
    font-weight: 900; 
    border: none; 
    position: absolute; 
    margin-left: 278px; 
} 

div#login-landingpage{ 
    margin-left: 276px; 
    margin-top: 90px; 
} 


select.security-questions { 
    width: 450px; 
    height: 40px; 
    font-weight: bold; 
} 

.security-question-labels { 
    font-size: 21px; 
    font-family: 'Museo Slab 300'; 
} 

button#saveSubmit { 
    margin-top: 55px; 
    background: rgba(0, 173, 239, 1); 
    border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 40px 40px 40px 40px; 
    width: 170px; 
    height: 55px; 
    font-size: 20px; 
    font-family: sans-serif; 
    color: white; 
    font-weight: 900; 
    border: none; 
    position: absolute; 
    margin-left: 278px; 
} 
button#cancelSubmit { 
    margin-top: 55px; 
    background: rgb(75,79,84); 
    border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 40px 40px 40px 40px; 
    width: 170px; 
    height: 55px; 
    font-size: 20px; 
    font-family: sans-serif; 
    color: white; 
    font-weight: 900; 
    border: none; 
    position: absolute; 
    margin-left: 478px; 
} 
div#security-form { 
    margin-top: 60px; 
    margin-left: 276px; 
} 




/* TEST */ 

div#dropdown-col-2 { 
    display:inline-block; 
} 


div#dropdown-second { 
    position: absolute; 
    left: 1040px; 
    top: -10px; 
}

// HTML

<div class="averios-header"> 
    <img id="averios-logo-image" src="http://lorempixel.com/176/129/"></img> 
    </a> 
    <div id="setting-dropdown"> 
    <!-- SETTING DROPDOWN WILL GO HERE --> 
    <p id="setting-dropdown"> SETTINGS <i class="ion-chevron-down"></i></p> 
    <div id="setting-dropdown-content"> 
     <a href="#">Change Password</a> 
     <a href="#">Change Security Settings</a> 
    </div> 
    </div> 
    <button id="averios-logout"> LOGOUT </button> 
</div> 

<div id="log-in"> 
    <div id="loginHeader"> 
    <h1> Portal</h1> 
    </div> 
    <br> 
    <br> 
    <div id="welcome-text"> 
    <p> Welcome name </p> 
    <p> Your last login was time on date </p> 
    <br> 
    <p> Please select an application below to begin </p> 
    </div> 
</div> 
<div id="dropdown-main-content"> 
<div id="dropdown-col-2"> 
    <img id="averios-pulse-image" src="http://lorempixel.com/362/46/" alt="" /> 

    <div class="dropdown"> 
     <button class="dropbtn">SELECT</button> 
     <div class="dropdown-content"> 
     <a href="#">Option1</a> 
     </div> 
    </div> 
    </div> 

    <!-- SENTINAL --> 

    <div id="dropdown-col-2"> 
    <img id="averios-sentinal-image" src="http://lorempixel.com/362/46/" alt="" /> 
    <div class="dropdown"> 
     <button class="dropbtn">SELECT</button> 
     <div class="dropdown-content"> 
     <a href="#">Option1</a> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="averios-footer"> 
    <div id="footer-text"> 
    &copy; 2016, All Rights Reserved. 
    </div> 
</div>

來源

2016-12-19 13:33:00

@謝謝你的迴應，但後續問題。刪除「左」和「內聯」混淆了下拉位置，當我嘗試將它們移動到正確位置時，白色間隙再次出現。有關我如何解決這個問題的任何建議？ – Maddy

嘗試替換 div＃dropdown-main-content { position：relative; top：230px; } 並添加 div＃dropdown-main-content div { float：left; } 如果你給我一個清晰的演示vith工作形象，我可以幫助更好的比這個。 –

有沒有一個地方可以私密告訴你這段代碼？我沒有這樣做的網站。 – Maddy

在窗口上移動標題調整大小

回答

相關問題