Υλοποίση με html&css

[Maxim.21]

Καλησπέρα στο φόρουμ,

Είμαι νέος με προγραμματισμό και έχω μια απορία αν μπορείτε να μου λύσετε.Έχω να υλοποιήσω μόνο με χρήση html&css την παρακάτω εικόνα με ενεργά checkboxes.Το θέμα μου είναι ότι δεν μπορώ να στοιχίσω σωστα και χρειάζομαι μια βοήθεια σε αυτό.Ευχαριστώ.

[dios231]

Το προβλημα σου ειναι σχετικα απλο, οποτε πιστευω οτι για αρχη προσπaθησε να βρεις τα CSS που χρειάζεσαι με googlarisma .

 

Θα σου πω τα 2 πρωτα που μου ερχονται στο μυαλο για να σε βοηθησω: float ισως και margin 

 

Τωρα για σε βοηθησουμε πιο συγκεκριμένα ανεβασε λιγο κωδικα να σου πουμε τι εχεις κανει λαθος μεχρι στιγμης και να σε κατευθυνουμε.  

[flienky]

Θα βάλεις ως background image το λεωφορείο. Στόχος να το κάνεις και responsive.

 

Άρα έχουμε ενα div το οποίο είναι το λεωφορείο (απο την τελευταία θέση μέχρι την πρώτη, άσε εκεί που κάθεται ο οδηγός).

 

Μέσα σε αυτό το div θα φτιάξεις άλλα 13 divs με πλάτος 100/13 το καθένα. 

 

Μέσα σε εκείνα τα divs θα βάλεις ένα checkbox

HTML:

<div class="bus">
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
   <div class="seira">
<input type="checkbox"/>
   </div>
</div>

CSS:

.bus{
   background-image: url('bus-xwris-mouri.jpg');
   width:100%;
   height: 10em; //oti kanei to image pio oraio. oxi kali texniki gia responsive
}
.seira{
   display:inline-block;
   float:left;
   width:7.65%
   //αν θες τα checkboxes λιγο πιο κατω βαζεις:
   //padding-top:ΚΑΤΙ em; 
}

Μπορείς να το κάνεις και με τον οδηγό μέσα αλλα προσπάθησέτο μόνος σου.

[dominotrix]

Δοκίμασε αυτό:

 

http://codepen.io/anon/pen/mPvqEe

 

Θα πρεπει μονο να ορίζεις μεσα στο input το name για να μπορεσει να λειτουργησει η φορμα. Στα inputs που ειναι hidden μη βαλεις name. Ειναι μονο για να δημιουργησουν τον χωρο της πορτας του λεωφορειου.

[paparovic]

Θα βάλεις ως background image το λεωφορείο. Στόχος να το κάνεις και responsive.

 

Εχμ, το φαντάζεσαι σε ανάλυση iPhone 5?   Πρέπει να πάει vertical η εικόνα όσο μικραίνει το viewport για να έχει νόημα.

[Chemical]

Πολύ καλό για αρχάριους και όχι μονο.

 

http://learnlayout.com/