full width σε css

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

full width σε css

Δημοσίευση από argate7 » 16 Οκτ 2012 23:41

Έχω ένα θεματάκι με το css μου. Το πρόβλημα που αντιμετωπίζω είναι ότι ενώ η σελίδα μου, φαίνεται κανονικά στον υπολογιστή μου, στο ipad το width κόβεται. Βάζω για παράδειγμα στο body width:1200px και στο ipad είναι κομπλέ, αλλά στον υπολογιστή, όχι. Τί πρέπει να αλλάξω??

Παρακάτω είναι ο κώδικας στο css. Θα πρέπει να αλλάξω κάτι?

Κώδικας: Επιλογή όλων

@charset "UTF-8";
/* CSS Document */

body{
	background-color: #E5E5E5;
	padding:0;
	margin:0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	width:100%;
}

#topbar{
	width:100%;
	background-color: #292929;
	height: 60px;
	margin: 0 auto;
	padding:0;
	
}

#topcontainer{
	width: 80%;
	margin: auto;
	padding-top: 15px;
}

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

full width σε css

Δημοσίευση από Banavas » 17 Οκτ 2012 15:35

Γενικά όταν ένα σχεδιάζουμε ένα site με fix πλάτος σελίδας δεν λαμβάνουμε υπόψη μας τι ανάλυση χρησιμοποιούμε στον υπολογιστή μας αλλά τι ανάλυση έχουν οι χρήστες που μπαίνουν στη σελίδα. Αυτό μπορείς να το δεις από τα στατιστικά σου ή από το net π.χ. εδώ
http://www.w3schools.com/browsers/browsers_display.asp
Από εδώ φαίνεται οτι αν βάλεις width:1200px (που φαίνεται οκ στον υπολογιστή σου) ένα ποσοστό 13% θα αναγκάζεται να κάνει scroll για να δει τη σελίδα σου.
Η λύση της "ρευστής" ανάλυσης που προσαρμόζεται σε οποιαδήποτε ανάλυση είναι καλή αλλά είναι λίγο πιο δύσκολη στη σχεδίαση ώστε να μην χαλάνε τα γραφικά.

Ενα τρυκ που μπορείς να κάνεις είναι με javascript να διαβάζεις την ανάλυση του browser και να φορτώνεις το ανάλογο css για τις γνωστές αναλύσεις ώστε να έχεις πλήρη έλεγχο και σωστή απεικόνιση σε όλες τις αναλύσεις.

Μην ξεχνάς επίσης οτι η "ρευστή" ανάλυση δεν φαινεται ωραία σε αναλύσεις = ή > 1600px οπότε θα πρέπει να χρησιμοποιήσεις την max-width.
Happy coding....
Μάρκος
http://lasernet.gr

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

full width σε css

Δημοσίευση από argate7 » 17 Οκτ 2012 16:34

Μα εγω αν προσεξες, δεν έχω fix το πλάτος. Του έχω βάλει να είναι 100%. Δεν καταλαβαίνω για ποιο λόγο μου κόβεται στις υπόλοιπες συσκευές.

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

full width σε css

Δημοσίευση από Banavas » 17 Οκτ 2012 16:57

Αυτό εξαρτάται από τη σχεδίαση της σελίδας σου. Αν έχεις κάποιο αντικείμενο σταθερού πλάτους μέσα στη σελίδα τότε η σελίδα δεν μπορεί να γίνει πιο μικρή από αυτό και αρχίζει να κόβεται.
Δεν εξαρτάται δηλαδή μόνο από το πλάτος που δίνεις στο body.
Happy coding....
Μάρκος
http://lasernet.gr

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες