Απλό πρόβλημα σε CSS

[nik324]

Έχω τον παρακάτω κώδικα css ο οποίος αφορά μια φόρμα εγραφής.

/* ---------- GENERAL ---------- */
* {
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}

body {
  background: #2c3338;
  color: #606468;
  font: 87.5%/1.5em 'Open Sans', sans-serif;
  margin: 0;
}

a {
  color: #eee;
  text-decoration: none;
  color: #ea4c88;
}

a:hover {
  text-decoration: underline;
}

input {
  border: none;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  padding: 0;
  -webkit-appearance: none;
}

p {
  line-height: 1.5em;
}



select {
    padding:12px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 0px 3px 3px 0px;
    -webkit-box-shadow: 0 0px 0 #eee, 0 0px #eee inset;
    -moz-box-shadow: 0 0px 0 #eee, 0 0px #eee inset;
    box-shadow: 0 0px 0 #ccc, 0 0px #fff inset;
    background: #3b4148;
    color: #eee;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:115px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#3b4148;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 10 2px;
    border-bottom:1px solid #eee;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:2px; 
    width:22px; height:39px;
    background:#989898;
    position:absolute;
    pointer-events:none;
    display:block;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
}

.container {
  left: 50%;
  position: fixed;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* ---------- LOGIN ---------- */
#login {
  width: 280px;
}

#login form span {
  background-color: #363b41;
  border-radius: 3px 0px 0px 3px;
  color: #606468;
  display: block;
  float: left;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 50px;
}

#login form input {
  height: 50px;
}

#login form input[type="text"], input[type="password"] {
  background-color: #3b4148;
  border-radius: 0px 3px 3px 0px;
  color: #606468;
  margin-bottom: 1em;
  padding: 0 16px;
  width: 230px;
}

#login form input[type="submit"] {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #ea4c88;
  color: #eee;
  font-weight: bold;
  margin-bottom: 2em;
  text-transform: uppercase;
  width: 280px;
}

#login form input[type="submit"]:hover {
  background-color: #d44179;
}

#login > p {
  text-align: center;
}

#login > p span {
  padding-left: 5px;
}

Αυτό που θέλω να κάνω είναι οτιδήποτε μπαίνει μέσα σε <div class="container"></div> να παραμένει στο τέλος της σελίδας όσο αυτή αλλάζει δυναμικά.

 

Ευχαριστώ.

 

 

[nucleus]

To <div class="container"></div> μπορεί να υπάρχει παραπάνω απο μια φορά μέσα στο body?

[nik324]

Ναι.

 

 

Δοκίμασα και έβαλα έναν καινούργιο <div class="container"></div> και μέσα σε αυτό ένα loop (έχω .jsp σελίδα) το οποίο τυπώνει ένα μήνυμα 1000 φορές. Όταν φτάσει στο σημείο που υπάρχει η φόρμα για την σύνδεση περνάει από αυτό και συνεχίζει το μήνυμα να τυπώνετε. Αυτό που θέλω είναι να γράφετε όλο το μήνυμα και στο τέλος να υπάρχει κανονικά και η φόρμα εγραφής

[nucleus]

Βάλε την φόρμα σε ένα div με class=footer. Το class footer στο css είναι το εξής

.footer {
   padding-bottom: 25px;
}

Για το τι είναι το padding http://www.w3schools.com/css/css_padding.asp

 

Οπότε το div με class=footer θα απέχει 25px από το κάτω μέρος της σελίδας. Για δοκίμασε το

[nik324]

Πήγε στο τέλος της σελίδας στην αριστερή πλευρά. 

 

Για να μεταφερθεί στο μέσο της σελίδας τι πρέπει να κάνω;

 

Με "padding-left: ___px" μεταφέρετε προς το μέσο αλλά είναι σωστός ο τρόπος αυτός;

[nucleus]

Πρόσθεσε στο css footer και margin. http://www.w3schools.com/css/css_margin.asp

 

Μιας και απο ότι βλέπω το body css έχει margin:0.

.footer {
   padding-bottom: 25px;
   margin: 25px;
}