When I adjust the resolution of my display, the text on my top bar also changes. Can anyone help me fix this issue?
In normal view:
With changed resolution or smaller browser window:
This is my HTML code:
<body>
<div class="top-panel">
<div id="center"> <a class="top-button" href="#"></a>
<span class="text">Currently playing with <b>5000</b> players on <b>150</b> servers!</span>
<span class="panel">Register for free or</span>
<input type="text">
<input type="text">
<input type="image" id="login-button" src="images/login_button.png" alt="Submit">
<div class="warningimg"></div><div class="warning"> NIGHT CUP 2014 - Watch the live broadcast now! </div>
<div class="main">
<div class="logobg">
<a class="logo" href="#"></a>
<input class="searchinput" type="text">
<input class="searchsubmit" type="image">
<div class="news"></div>
</div>
</div>
</div>
</div>
</body>
This is my CSS code:
body {
background-image: url('images/background.png');
background-repeat: no-repeat;
background-color:#cccccc;
background-size: 100%;
margin: 0 auto;
font-family: Arial;
font-size: 13px;
position: relative;
background-position: 50% 0;
background-attachment: fixed;
}
#center {
width: 1030px;
margin: 0 auto;
}
.top-panel {
background-image: url("images/top_panel.png");
background-repeat: repeat-x;
background-position: center;
height: 43px;
padding-top:5px;
display: block;
}
a.top-button {
background-image: url("images/top_button.png");
height: 37px;
width: 141px;
background-repeat: no-repeat;
display: inline-block;
margin-left: 20px;
}
.text {
color: #9c9c9c;
padding: 0px 10px;
}
.panel {
color: #6ab1ed;
padding: 0px 390px;
}
input{
vertical-align:top;
display: inline-block;
height: 21px;
width: 97px;
line-height: 25px;
text-align: center;
position: relative; left: 550px; top: 4px;
}
span{
position: absolute;
display: inline-block;
height: 35px;
line-height: 35px;
text-align: center;
}
span b{
font-weight:bold;
}
#login-button{
height: 27px;
width: 81px;
line-height: 27px;
display: inline-block;
position: relative; left: 550px; top: 4px;
}
If anyone wants to see the site live, you can visit: funedit.com/andurit/new/
Thank you for taking the time to read this!