Βοήθεια με το σήσιμο ενος layout..

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

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

Απάντηση
Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 12 Οκτ 2011 20:56

Καλησπέρα,

προσπαθώ εδώ και μερικές μέρες να στήσω το πρωτο μου layout και χρειάζομαι την βοήθεια σας.

1. Σε μια σελίδα θέλω να έχω gradient-background.
2. Θέλω να έχω ένα header με width 100% το πλάτος του παραθύρου όπου και θα βάλω ένα logo στην αριστερή πλευρά.
4. ενα main content div με πλάτος 960. είναι αλήθεια η πιο συχνά χρησιμοποιούμενη ανάλυση για main content..;
3. Ενα footer το οποίο θα εμφανίζεται στο κάτω μέρος της σελίδας και σε περίπτωση που χρειάζεται, να γίνεται auto expand και να κατεβαίνω με τις γραμμές κύλισης.

Τι έχω κάνει..

η html μου

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
            <div id="header">
                <div id="divlogo">
                    <p>MyLogo</p>
                </div>
            </div>
</body>
</html>
και το css μου.

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

html, body
&#123;
    color&#58; #fff;
    padding&#58; 0px;
    height&#58; 100%; /* For WebKit &#40;Safari, Google Chrome etc&#41; */
    background&#58; -webkit-gradient&#40;linear, left top,left bottom, from&#40;#666&#41;, to&#40;#fff&#41;, color-stop&#40;1, #fff&#41;&#41;; 
    /* For Mozilla/Gecko &#40;Firefox etc&#41; */
    background&#58; -moz-linear-gradient&#40;left top, #666, #fff 100%&#41;; /* For Internet Explorer 5.5 - 7 */
    filter&#58; progid&#58;DXImageTransform.Microsoft.gradient&#40;startColorStr=#746E6E, endColorStr=#FFFFFFFF, GradientType=0&#41;; 
    /* For Internet Explorer 8 */
    -ms-filter&#58; "progid&#58;DXImageTransform.Microsoft.gradient&#40;startColorstr=#746E6E, endColorstr=#FFFFFFFF, GradientType=0&#41;";
    font-family&#58; Arial, Helvetica, sans-serif;
&#125;

#header
&#123;   top&#58;0;
    left&#58;0;
    border&#58; thin ridge #FF0000;
    width&#58;100%;
    position&#58; absolute;
&#125;


#divlogo
&#123;
    margin&#58; 5px;
    border&#58; thick double #0000FF;
&#125;

.imglogo
&#123;
    padding&#58; 10px;
&#125;
΄
έχω βάλει border στα divs για να βλέπω τι γίνεται, ώστε να καταλάβω τι πρέπει να διορθώσω
Ερωτήσεις..

1. To gradient-background μια χαρά πρέπει να διορθώσω κάτι..; Στο firefox γίνεται από αριστερά πρός τα δεξιά. Δεν με απασχολεί ιδιαίτερα, θα ψάξω να βρω τι φταίει..

2. εμφανίζει γραμμές κύλισης δεξιά και αριστερά και δεν μπορώ να καταλάβω γιατί..

3. To header μου με την κόκινη γραμμή πιάνει όλο το width της σελίδας μου και πιστεύω ότι είναι σωστά φτιαγμένο. To divlogo όμως (μπλε border) δεν το θέλω στο 100% width αλλά στο auto fit του περιεχομένου του div είτε είναι κείμενο είτε image.

4. Το footer και το main content δεν το έχω φτιάξει ακόμα καθώς το 3 με έχει ξελιγώσει. :)

5. Πρέπει όλα τα divs που φτιάχνω να μπουν σε ένα wrapper ή container; Έχω την αίσθηση ότι έτσι όπως το σχεδιάζω είναι καλύτερα.

Ευχαριστώ

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 13 Οκτ 2011 00:26

2. εμφανίζει γραμμές κύλισης δεξιά και αριστερά και δεν μπορώ να καταλάβω γιατί..

αυτό οφείλεται στο position: absolute; του header. :kaloe:
Καλά το βρήκα..., να δω πως θα το διορθώσω...
Τελευταία επεξεργασία από το μέλος dionisis71 την 13 Οκτ 2011 00:53, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 13 Οκτ 2011 00:53

3. To header μου με την κόκινη γραμμή πιάνει όλο το width της σελίδας μου και πιστεύω ότι είναι σωστά φτιαγμένο. To divlogo όμως (μπλε border) δεν το θέλω στο 100% width αλλά στο auto fit του περιεχομένου του div είτε είναι κείμενο είτε image.
με float left στο divlogo φαινεται ότι κάνει auto fit το width.... :think:

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 13 Οκτ 2011 01:13

dionisis71 έγραψε:
2. εμφανίζει γραμμές κύλισης δεξιά και αριστερά και δεν μπορώ να καταλάβω γιατί..

αυτό οφείλεται στο position: absolute; του header. :kaloe:
Καλά το βρήκα..., να δω πως θα το διορθώσω...
χμμ... προσθεσα και margin:0 στο body και εξαφανιστηκε η κάθετη μπάρα κύλισης... έχει μείνει η οριζοντια.. για να δούμε...

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 411
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από apsuh0s » 13 Οκτ 2011 01:33

τα borders προκαλούνε την οριζόντια μπάρα.. Χρησιμοποίησε outline για να τσεκάρεις όπως λες.. Τα borders συμμετέχουν στο box model.
Το height: 100%; δεν το χρειάζεσαι. Επίσης προσωπικά δεν θα χρησιμοποιούσα hacks για τον ie στο css μου. Θα προτιμουσα ένα solid color ως fallback για το gradient που χρησιμοποιείς.

Αν το θέλεις ντε και καλά gradient στον ie μπορείς να βάλεις μια λεπτη background-image την οποία θα επαναλάμβάνεις στον x άξονα μέσω css με solid color στο background του body (το χρώμα που τελειώνει το gradient στην εικόνα) ώστε όταν ξεπερνάει το content το ύψος της εικόνας να συνεχίζει ομαλά. Πρέπει να προσέξεις βέβαια το content σου να είναι μεγαλύτερο πάντοτε από αυτό της εικόνας ώστε να μην δημιουργείται άδειος χώρος. Βρες ένα ύψος που σε κάθε page θα το ξεπερνας.

Παράδειγμα:

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

background&#58; #000 url&#40;../img/bg-gradient.jpg&#41; repeat-x;
και εδώ το bg-gradient.jpg τελειώνει σε χρώμα μαύρο. Για αυτό το λόγο μπαίνει και το #000 έτσι ώστε να υπάρχει ομαλή μετάβαση.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 13 Οκτ 2011 12:23

Ευχαριστώ για τις συμβουλές..

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 13 Οκτ 2011 16:45

apsuh0s έγραψε:Επίσης προσωπικά δεν θα χρησιμοποιούσα hacks για τον ie στο css μου. Θα προτιμουσα ένα solid color ως fallback για το gradient που χρησιμοποιείς.
Θα μπορούσες να μου πεις για ποιό λόγο δεν θα χρησιμοποιούσες hacks για τον ie;

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 411
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από apsuh0s » 13 Οκτ 2011 17:22

Για το συγκεκριμένο που χρησιμοποιείς, έχω διαβάσει πως προκαλεί κάποια προβλήματα όσον αφορά το rendering του text και σε mouse events. Δε νομίζω να έχει λυθεί.

Δεν μπορείς να προβλέψεις με ποιο τρόπο θα συμπεριφερθούν οι μελλοντικοί browsers στα hacks που εισάγεις. Υπάρχουν ωστόσο κάποια safe hacks.

Ο βασικός λόγος είναι πως δεν με απασχολεί ιδιαίτερα το οπτικό αποτέλεσμα να είναι το ίδιο σε όλους τους browsers και κυρίως στον ie6 και ie7.

Ο χρήστης που θα μπει με ie6 στο site σου, δεν θα σε κακολογήσει γιατί δεν βλέπει gradient στο background. Την πληροφορία ψάχνει να βρει και πιθανότατα ξέρει πως ο browsers του είναι παλαιωμένος. Οπότε, μη σπαταλάς το χρόνο σου με το να προσπαθείς να του σερβίρεις ένα καλαίσθητο αποτέλεσμα. Το συγκεκριμένο hack που χρησιμοποιείς άνετα θα μπορούσε να αντικατασταθεί από ένα solid color ή ένα background image.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 13 Οκτ 2011 22:35

apsuh0s έγραψε:Για το συγκεκριμένο που χρησιμοποιείς, έχω διαβάσει πως προκαλεί κάποια προβλήματα όσον αφορά το rendering του text και σε mouse events. Δε νομίζω να έχει λυθεί.

Δεν μπορείς να προβλέψεις με ποιο τρόπο θα συμπεριφερθούν οι μελλοντικοί browsers στα hacks που εισάγεις. Υπάρχουν ωστόσο κάποια safe hacks.
πολύ ενδιαφέρον..
apsuh0s έγραψε:Ο χρήστης που θα μπει με ie6 στο site σου, δεν θα σε κακολογήσει γιατί δεν βλέπει gradient στο background. Την πληροφορία ψάχνει να βρει και πιθανότατα ξέρει πως ο browsers του είναι παλαιωμένος. Οπότε, μη σπαταλάς το χρόνο σου με το να προσπαθείς να του σερβίρεις ένα καλαίσθητο αποτέλεσμα. Το συγκεκριμένο hack που χρησιμοποιείς άνετα θα μπορούσε να αντικατασταθεί από ένα solid color ή ένα background image.
1. "speaking by the devil..", το καλοκαίρι έπαιξα με background image καθώς και με asp.net και SQL και ανέβασα σε ένα free host το τεστ page που έκανα. Θα ήθελα αν δεν σου είναι κόπος να το επισκεφτείς και να μου πεις ποιά είναι η ενδεδειγμένη ανάλυση για background-mages. H συγκεκριμένη που είδες είναι σε 1680χ1050 και είχα την αίσθηση ότι είναι οκ. Τυχαία έτυχε να την δω σε μεγαλύτερη ανάλυση και με έκπληξη μου είδα ότι δεν γέμιζε όλο τον browser. Αν και από ότι έχω παρατηρήσει σε διάφορα άλλα sites που χρησιμοποιούν την τεχνικη αυτή (αν είμαι σωστός), η φωτογραφία στον browser σε οποιοδήποτε window browser size δεν γίνεται auto fit, γιατί είναι δυνατόν να γίνει stretch και δείχνει ιδιαίτερα ασχημο. Για αυτό τον λόγο το προσεγγίζουν διαφορετικά και όταν γίνεται resize στα παράθυρα των browsers αυτά αποκαλύπτουν και κομμάτι του background... αρκετά έξυπνο μπορώ να πω..

2. Μήπως γνωρίζεις κάποιο site όπου να αναφέρονται βασικά πράγματα για τους συνδιασμούς χρωμάτων σε site..; ..όπως πχ background τάδε με χρώμα γραμματοσειράς τάδε. Κάποια στιγμή κάπου είχα βρει κάτι αλλά δεν το θυμάμαι...

σε ευχαριστώ για τον χρόνο σου..

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 411
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από apsuh0s » 14 Οκτ 2011 00:06

Νομίζω το θυμάμαι όταν το πόσταρες..

Δεν νομίζω να υπάρχει ενδεδειγμένη ανάλυση για background image.. Μπορείς να επισκεφτείς το site του Chris Coyier css-tricks και να δεις μια τεχνική που εφαρμόζει για αυτό που ζητάς. Αν διαβάσεις το άρθρο προσεκτικά θα δεις που αναφέρεται σε κάτι hacks για τον ie και ποια είναι τα σχόλια σχετικά με αυτό. Δες τι ωραία εφαρμογή..

Επίσης γενικά πολύ ενδιαφέρον για σερβίρισμα εικόνας σε συνάρτηση με την ανάλυση οθόνης θα βρεις στο filamentgroup.

Σχετικά με το ερώτημα σου όσον αφορά τα χρώματα.. Δεν γνωρίζω κάποιο συγκεκριμένο site που να κάνει αυτή τη δουλειά. Ωστόσο αυτό που κάνω εγώ είναι να χρησιμοποιώ το
kuler της adobe καθώς και το colourlovers. Δύο sites πραγματικά πολύ χρήσιμα για έμπνευση, ειδικά το δεύτερο..

Σχετικά με το χρώμα των fonts χρησιμοποιώ το εργαλείο του Jonathan Snook.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 14 Οκτ 2011 00:33

..ώπα...Με εφτιαξες βραδιάτικα... Θα τα κοιτάξω προσεκτικά και τα ξαναλέμε...

Ευχαριστώ

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 17 Οκτ 2011 16:28

Όλα τα εργαλεία που εκανες post είναι καταπληκτικά. Εκεί που δυσκολευόμουν να διαλέξω χρώματα, μέσα από το site γινεται πρόταση επιλογής χρωμάτων που μπορούν να συνυπάρξουν χωρίς να κουράζουν το μάτι... και πάλι ευχαριστώ.

Από ότι είδα στις τεχνικές για backgound image στο css-tricks, στις 3 διαφορετικές προσεγγύσεις αναφέρει ότι η κάθε τεχνική είναι συμβατή με συγκεκριμένες versions of browsers. Οπότε σκέφτομαι να εγκαταλείψω το background image (φοβάμαι προβλήματα συμβατοτητας) και να χρησμοποιήσω ένα pattern imageμε repeat για background.

Οπότε για τον σχεδιασμό της σελίδας μου..

1.Body με background pattern image με repeat.
2.Αριστερά πάνω το logo μου.
3.Δεξιά από το logo και ως υψος στην μέση του logo, θα έχω το μενού για όλους τους χρήστες, και από κάτω για τους members

Πόσα divs θα χρειαστώ..; Ξέρω ότι μπορεί να γίνει με ένα, με δύο ή με τρια. Ποιος αριθμός divs είναι ενδεδειγμένος για αυτό που θέλω να κάνω..;

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 411
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από apsuh0s » 17 Οκτ 2011 16:35

Δεν κατάλαβα το σχεδιασμό της σελίδας.
Όταν λες από κάτω για τα μέλη, εννοείς στο υπόλοιπο μισό;
Γιατί δε κάνεις ένα πρόχειρο σχέδιο της δομής να το σηκώσεις να το δούμε;
.ninja { color: black; visibility: hidden !important; }

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από Kypros Lambrou » 17 Οκτ 2011 16:59

dionisis71 έγραψε:Όλα τα εργαλεία που εκανες post είναι καταπληκτικά. Εκεί που δυσκολευόμουν να διαλέξω χρώματα, μέσα από το site γινεται πρόταση επιλογής χρωμάτων που μπορούν να συνυπάρξουν χωρίς να κουράζουν το μάτι... και πάλι ευχαριστώ.

Από ότι είδα στις τεχνικές για backgound image στο css-tricks, στις 3 διαφορετικές προσεγγύσεις αναφέρει ότι η κάθε τεχνική είναι συμβατή με συγκεκριμένες versions of browsers. Οπότε σκέφτομαι να εγκαταλείψω το background image (φοβάμαι προβλήματα συμβατοτητας) και να χρησμοποιήσω ένα pattern imageμε repeat για background.

Οπότε για τον σχεδιασμό της σελίδας μου..

1.Body με background pattern image με repeat.
2.Αριστερά πάνω το logo μου.
3.Δεξιά από το logo και ως υψος στην μέση του logo, θα έχω το μενού για όλους τους χρήστες, και από κάτω για τους members

Πόσα divs θα χρειαστώ..; Ξέρω ότι μπορεί να γίνει με ένα, με δύο ή με τρια. Ποιος αριθμός divs είναι ενδεδειγμένος για αυτό που θέλω να κάνω..;
Καλησπέρα φίλε.
Εαν θα χρησιμοποιήσεις εικόνα για background με repeat, τότε σου προτείνω να κόψεις την εικόνα σε ύψος μόλις 1px και να την κάνεις repeat για να καλύπτει όλη την σελίδα.

Σχετικά με το πόσα divs θα χρειαστείς εξαρτάται και απο το υπόλοιπο περιεχόμενο της σελίδας σου αλλά σύμφωνα με αυτά που βάζεις πιο πάνω θα χρειαστείς κάτι του τύπου

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

<body>
	<div id="header">
		<div class="top_left_logo"> <!-- LOGO IMAGE HERE -->   </div>
		<div class="top_right_menu"> 
			<!-- ALL MEMBERS MENU HERE -->
		</div>
	</div>

	<div id="main_page">
		<!-- Main Page Content Here -->
	</div>

</body>
3.Δεξιά από το logo και ως υψος στην μέση του logo, θα έχω το μενού για όλους τους χρήστες, και από κάτω για τους members
Με το "απο κάτω για τους members" φαντάζομαι εννοείς το περιεχόμενο της σελίδας (main_page) έτσι?

Ενδεδειγμένος αριθμός για το πόσα divs θα πρέπει να χρησιμοποιήσεις δεν υπάρχει αν και γενικά, όσο λιγότερα τόσο το καλύτερο.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 17 Οκτ 2011 17:06

'Ετσι φαντάζομαι περίπου το header μου, και η πρόταση του Kypros Lambrou είναι η επικρατέστερη από αυτές που σκεφτόμουνα.
Συνημμένα
header.jpg

Απάντηση

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

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

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