1
İstediğim, sayfamın masaüstü tarayıcıları için biraz duyarlı olmasını sağlamak. Örneğin, tarayıcının genişliğini azalttığımda, sayfanın sol ve sağ kısmı birbirinin üzerine yığılmalıdır. Örneğin; Lütfen kodu kontrol et, anlayacaksın. OuterLeft ve outerRight div sırasıyla sola ve sağa kaydırılır. Tarayıcının genişliğini azalttığımda, outerRight dışına gider, bu da iyidir. Ancak sorun, altbilgi ve telif hakkı (altta son iki div) ile ilgilidir. Bunlar outerRight div yüzünden yerinden edilmez. Onların dış sıcağında olmasını istiyorum. Bunu nasıl yapabilirim?Bu altbilgi neden bu süzülmüş öğeler tarafından yer değiştirmiyor?
HTML:
<body style="margin: 0px">
<div class="outer">
<div id="header"></div>
<div class="outerLeft">
<h1><a style="text-decoration: none; color: white;" href="login.php">WinkCage</a></h1>
<br />
<p>Instant Messaging web application</p>
</div>
<div class="outerRight">
<div class="loginform">
<form name="form2" method="post">
<table>
<tr>
<td><input type="text" name="uname" placeholder="Username" required/></td>
<td><input type="password" name="pass" placeholder="Password" required/></td>
<td><input id="logbutton" type="submit" name="sub" value="Login"/></td>
</tr>
</table>
</form>
<p><?php echo $loginerror; ?></p>
</div>
<div class="signform">
<form id="signupform" name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><input type="text" name="name" placeholder="Enter your name" required /></td>
<td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
<input id="imgInput" type="file" name="image" required/></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="Enter username" required pattern="[a-zA-Z0-9]{6,}" title="The username must contain minimum 6 and ONLY alphanumeric characters."/></td>
</tr>
<tr>
<td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." pattern=".{10}" required title="Invalid entry. Minimum 10 digits are required."/></td>
</tr>
<tr>
<td><input id="typechange" type="password" name="password" maxlength="12" placeholder="Enter password" required pattern="[a-zA-Z0-9]{5,}" title="The password must contain at least 5 and ONLY alphanumeric characters."/>
<div id="seepass"></div></td>
<td><input type="submit" id="button" name="submit" value="Sign Up"></td>
</tr>
</table>
</form>
<div id="userexist"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="font-family: calibri; text-align: center; color: black; font-size: 16px; padding: 5px 0px 5px 0px;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
<div style="height: 7px; box-shadow: 0px 0px 1px 1px grey; background-color: white; display: block"></div>
</body>
CSS: Ona bir clear: both sadece bu vermek gerekir
html, body{
height: 100%;
background-color: aquamarine;
}
#header{
height: 20%;
}
.outer{
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
}
.outerLeft{
float: left;
width: 320px;
height: auto;
text-align: center;
margin-top: 145px;
padding-left: 50px;
}
.outerRight{
padding-left: 50px;
float: left;
width: auto;
height: auto;
}
.loginform{
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 20px 23px;
background-color: white;
color: red;
}
.loginform input{
width: 187px;
height: 21px;
padding-left: 5px;
}
#logbutton{
background-color: #00CC66;
color: white;
font-weight: bold;
width: 70px;
height: 28px;
cursor: pointer;
}
.signform{
margin-top: 20px;
margin-left: 0px;
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 10px 20px;
background-color: white;
}
.signform input{
width: 250px;
height: 24px;
font-size: 20px;
padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
#button{
background-color: #0099FF;
color: white;
width: 188px !important;
height: 41px !important;
border-radius: 4px;
border: 0px solid grey;
display: block;
font-weight: bold;
margin-left: 10px;
cursor: pointer;
box-shadow: inset 0px 0px 4px grey;
text-shadow: 1px 1px 2px black;
}
.propic{
height: 100px;
width: 100px;
margin: 0 auto;
border: 4px solid white;
box-shadow: 0px 0px 1px 1px grey;
border-radius: 2px;
background-color: grey;
}
#imgInput{
width: 187px !important;
height: 22px !important;
font-size: 14px;
padding: 0px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cccccc;
margin-left: 10px;
}
#imgid{
height: 100px;
width: 100px;
}
teşekkür ederiz. İşe yarıyor. –