CODEWITHSUNDEEP
css
Maddy
Maddy

Reputation: 2060

Header moves on windows resize

When ever I re-size the window the header moves leaving a space on the right side. (Refer to image here ). If I shrink the window horizontally even more the gap increases. I have only been able to fix this problem by making the position for header to fixed but then the text overlaps. I want the header to move with the vertical scroll. Any help on here where I am going wrong is highly appreciated.

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

html{
	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{
	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#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#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 {
	margin-top: 60px;
	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 {
	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;
}


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';
  }
<!DOCTYPE html>
<html>
<head>
	<title>Averios</title>
	<link rel="stylesheet" type="text/css" href="test.css">
	<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
	
<meta charset="utf-8">
</head>
<body>
<div class="company-header">
	<a href="http://fuzionanalytics.com/"><img id="averios-logo-image" src="Images/averioslogo.png" width="176" height="129"></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="company-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">
		<img id="pulse-image" src="C:\Users\user\Desktop\Final-Designs\Images\pulse.png" width="320" height="50" alt=""/>
		<div id="dropdown-one">
		<div class="dropdown">
		  <button class="dropbtn">SELECT</button>
		  <img id="sphere" src="C:\Users\user\Desktop\Final-Designs\Images\sphere.png" alt=""/>
		  <img id="sphere-arrow" src="C:\Users\user\Desktop\Final-Designs\Images\arrow.png" alt=""/>
		  <div class="dropdown-content">
			<a href="#">option0</a>
			<a href="#">option1</a>
		  </div>
		</div>
	</div>

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

Upvotes: 2

Views: 99

Answers (1)

Malith
Malith

Reputation: 980

Problem is 

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

try to remove display to inline and left to 0 like this 

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

also remove fixed widths from images and divs, try to use max-width.

update 

*{
    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>

Upvotes: 1

Related Questions