Προς το περιεχόμενο

Κεντράρισμα

Uberalles_gr

Από τον Uberalles_gr
2 Σεπτεμβρίου 2009 στο Web Design - Development

Προτεινόμενες αναρτήσεις

ΠάρηςΓ

Grand Master

ΠάρηςΓ

Δημοσ. 25 Σεπτεμβρίου 2009

Δημοσ. 25 Σεπτεμβρίου 2009

Το θέμα ειναι οτι υπάρχουν διαφορα κολπα για να το κάνεις. Αν θες να δουλεύει απλα και παντου και λιτά η λύση ειναι table.

Υπάρχει μια λύση με div αλλα προυποθέτει σταθερό μέγεθος κειμένου.Αυτη η λύση δεν δημιουργεί προβλημα στο scroll εαν δεν χωράει. Οποιος ενδιαφέρεται του στελνω λινκ.

Σχεδιαζα ενα project προσφατα και βρεθηκα αντιμετωπος με αυτο το πρόβλημα. Η πιο ευκολη λυση ηταν το table γιατι δεν ηταν σταθερό το μέγεθος που επρεπε να κεντράρω...

Τελικά βρηκα μια λύση που δουλεύει καλα σε ολους τους browser και εχει μια χακια για τον Explorer πριν τον 7 με expressions...

http://parhs.no-ip.org:8080/medilab/login

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib  prefix="s" uri="/struts-tags" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body, html {
height: 100%;
margin:0;
padding:0;
font-family: Verdana, Geneva, sans-serif;
}
#loginwrapper {
background-image: url(/medilab/img/login_bck.png);
background-repeat: no-repeat;
height: 86px;
width: 593px;
margin-right: auto;
margin-left: auto;
}
.textbox {
width: 208px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-left: 5px;
background-color: transparent;
margin-top: 1px;
vertical-align: middle;
}
.submit {
background-image: url(/medilab/img/login_btn_login.png);
width: 87px;
height: 29px;
font-family: Verdana, Geneva, sans-serif;
color: #F7F7F7;
font-weight: bold;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-position: 0px 0px;
margin: 0px;
}
#controls_textboxes .legent {
color: #F2F2F2;
font-family: Verdana, Geneva, sans-serif;
width: 80px;
height: 35px;
font-size: 13px;
float: left;
}
body {
background-color: #FFF;
}
#container {
display:table;
height: 100%;
width: 100%;
}
#container #centeredContent {
display: table-cell;
vertical-align: middle;
position: relative;
top:expression(this.parentNode.offsetHeight/2 - this.offsetHeight/2 + " px");
}
-->
</style>
<link href="/medilab/css/error.css" rel="stylesheet" type="text/css" />
</head>
<body onload="document.getElementById('user').focus()">
<div id="container">
 <div id="centeredContent">
   <s:if test="hasActionErrors()">
     <div class="errorbox" style="margin-left: auto; margin-right: auto; margin-bottom:5px; width: 567px; clear:both"> <img src="/medilab/img/error_img_warning.png" width="64" height="64"  style="vertical-align:middle" alt="warning"/> <span style="padding-left:10px"><span style="font-weight: bold">Σφάλμα :</span>
       <s:iterator value="getActionErrors()">
         <s:property></s:property>
       </s:iterator>
       </span><br />
       <div style="clear:both"></div>
     </div>
   </s:if>
   <div id="loginwrapper">
     <form style="margin:0px" action="/medilab/login" method="post">
       <div id="formElements" style="margin-left: 180px; padding-top:15px; width: 405px;">
         <div id="controls_textboxes" style="height: 65px; width: 310px; float:left ">
           <div class="legent"><strong>Χρήστης</strong></div>
           <div style=" float: left;">
             <input name="user" type="text" class="textbox" id="user" />
           </div>
           <div style="clear:both; height:0">
             <div class="legent"><strong>Κωδικός</strong></div>
             <div style=" float: left;">
               <input name="password" type="password" class="textbox" id="textfield" />
             </div>
           </div>
         </div>
         <div style="float:left">
           <div style="height: 30px; cursor:pointer; width: 87px;  margin-top: 15px;">
             <input type="hidden" name="attempt" value="true" />
             <input name="" type="submit" class="submit" id="attempt"  style="" value="Είσοδος" />
           </div>
         </div>
       </div>
     </form>
   </div>
 </div>
</div>
</body>
</html>

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων

Εγγραφή

Δημιουργία νέου...