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

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

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

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

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

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

Στους IE6/7 αναφέρεσαι;
.ninja { color: black; visibility: hidden !important; }

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

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

Δημοσίευση από Kypros Lambrou » 19 Οκτ 2011 15:01

apsuh0s έγραψε:Στους IE6/7 αναφέρεσαι;
Ναι και ακόμη και σε πιο παλιό FF αν δεν κάνω λάθος κάνει κάποιες δυσκολίες. Άσε επειδή έχω πολλή δουλειά τώρα θα το κοιτάξω αργότερα.

Αλλά σε ΙΕ6 και 7 σίγουρα δεν δουλεύει και όπως και να το κάνεις κρίμα είναι να διορθώνεις τέτοια προβλήματα και να είναι για τους μισούς browsers αφού εύκολα μπορείς να κάνεις λύση που να καλύπτει και αυτούς.

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

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

Δημοσίευση από apsuh0s » 19 Οκτ 2011 15:29

http://nicolasgallagher.com/micro-clearfix-hack/
http://nicolasgallagher.com/better-floa ... ent-in-ie/
However, there are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context.
Όπως και να έχουν τα πράματα, οι διαφορές σε IE6/7 και σε FF 3.5 και κάτω δεν με απασχολούν.

Εδώ δεν ενοχλεί κάποιους το γεγονός πως έχουν παλαιωμένους browsers και θα ενδιαφερθώ εγώ να τους παρέχω συνέπεια στο layout μου; Θα μου πεις πιθανότατα δεν μπορούν να κάνουν update για τους δικούς τους λόγους. Too bad..

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

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

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

Δημοσίευση από Khronos » 19 Οκτ 2011 15:34

apsuh0s έγραψε:Όπως και να έχει από IE8 και πάνω με ενδιαφέρει η συνέπεια στο οπτικό αποτέλεσμα και μιας και δουλεύει το clearfix σωστά στους browsers που θέλω, το υιοθετώ. Για τους υπόλοιπους το content είναι προσβάσιμο.
+1
Όσο πιο γρήγορα υιοθετήσουν όλοι και ιδιαίτερα οι μεγάλες εταιρείες του χώρου αυτή την άποψη, τόσο το καλύτερο!

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

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

Δημοσίευση από Kypros Lambrou » 19 Οκτ 2011 20:40

Khronos έγραψε:
apsuh0s έγραψε:Όπως και να έχει από IE8 και πάνω με ενδιαφέρει η συνέπεια στο οπτικό αποτέλεσμα και μιας και δουλεύει το clearfix σωστά στους browsers που θέλω, το υιοθετώ. Για τους υπόλοιπους το content είναι προσβάσιμο.
+1
Όσο πιο γρήγορα υιοθετήσουν όλοι και ιδιαίτερα οι μεγάλες εταιρείες του χώρου αυτή την άποψη, τόσο το καλύτερο!
Εν μέρη συμφωνώ μαζί σας αλλά όπως και να το κάνεις τουλάχιστον ο ΙΕ7 συνεχίζει να κατέχει μεγάλο μερίδιο χρηστών αφού δεν είναι και τόσο παλιός. Ωστόσο στην συγκεκριμένη περίπτωση μιλάμε για ένα πολύ μικρό παράδειγμα που απλά διορθώνεται με διαφορετική χρήση και χωρίς ιδιαίτερα πολύπλοκα hacks για να δουλεύει. Απλά πληροφοριακά στο ανέφερα.

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

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

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

Πάντως σήμερα που κοίταζα την λύση κατάλαβα ότι δεν υπήρχε περίπτωση, στον αιώνα τον άπαντα να μπορούσα να το φτιάξω, με προβληματίζει επίσης η πιθανότητα να χρειαστεί να επέμβω αύριο-μεθαύριο στο header div, προσθέτοντας κάτι άλλο... θα κλαίω με μαύρο δάκρυ... είναι πολύ παραπάνω από ένα απλό float,position,display. apsuhos μου έπεσε βαρύ μου φαίνεται και είναι κρίμα γιατί μερικα post πιο πάνω είναι γραμμένος ο κόπος σου. Δεν έχω αποφασίσει ακόμα τι να κάνω, τις σκέψεις μου λέω..

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

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

Δημοσίευση από apsuh0s » 19 Οκτ 2011 21:12

Καλά έκανες και το ανέφερες Lambrou. Αν θέλεις πρότεινε μου μια λύση που να μην περιλαμβάνει άδεια divs στο markup μου και εγώ μετά χαράς να την υιοθετήσω.

Διονύση, νομίζω ότι μπορείς να επέμβεις χωρίς να κλάψεις :D

Μην σε απασχολεί για τον κόπο μου. Σαν τι θα μπορούσες να προσθέσεις αύριο μεθαύριο στο header;
.ninja { color: black; visibility: hidden !important; }

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

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

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

dionisis71 έγραψε:Πάντως σήμερα που κοίταζα την λύση κατάλαβα ότι δεν υπήρχε περίπτωση, στον αιώνα τον άπαντα να μπορούσα να το φτιάξω, με προβληματίζει επίσης η πιθανότητα να χρειαστεί να επέμβω αύριο-μεθαύριο στο header div, προσθέτοντας κάτι άλλο... θα κλαίω με μαύρο δάκρυ... είναι πολύ παραπάνω από ένα απλό float,position,display. apsuhos μου έπεσε βαρύ μου φαίνεται και είναι κρίμα γιατί μερικα post πιο πάνω είναι γραμμένος ο κόπος σου. Δεν έχω αποφασίσει ακόμα τι να κάνω, τις σκέψεις μου λέω..
Διονύση δεν είναι τόσο δύσκολο φτάνει να το πάρεις μεθοδικά τον τρόπο σκέψης για να δουλέψει ο κώδικας και να βγάλεις το αποτέλεσμα που βλέπεις.

Θα προσπαθήσω να στο εξηγήσω με απλά λόγια αλλά το καλύτερο που έχεις να κάνεις είναι να το δοκιμάσεις και μόνος σου γιατί αν σκοπεύεις να ασχοληθείς με CSS πίστεψε με αυτά δεν είναι τίποτα, είναι μόνο η αρχή.

Αν δεις το header στην λύση πιο πάνω χωρίζεται σε δύο κουτιά (containers). Ένα είναι στοιχισμένο αριστερά για το logo και το άλλο δεξιά που περιέχει τα δύο σου μενού. Για την ώρα απλά αγνόησε το clearfix και δες το κάθε container σαν ένα κουτί.

Στο αριστερά κουτί δίνονται τρεις παράμετροι:

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

#logodiv
{
    border: thin solid #000000;
    float: left;
   width: 10%; /* diamorfose to. na dineis width otan kaneis float*/
}
που απλά δίνουν ένα border για την εμφάνιση, το float:left; που φέρνει το κουτί στα αριστερά και ένα width: 10%; που λέει ότι το εν λόγω κουτί θα έχει πλάτος ίσο με 10% ή 1/10 του container που το περιέχει. Με λίγα λόγια το πλάτος του είναι ίσο με 10% απο αυτό του header.

Αυτά για το logo. To δεύτερο κουτί στο header είναι το Menudiv το οποίο έχει:

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

#Menudiv { 
        float: right; 
        width: 88%;
}
Αν το δεις ούτε αυτό έχει κάτι πολύπλοκο αφού απλά του λέμε να έχει float:right; δηλαδή να εμφανίζεται στην δεξιά πλευρά του header και να έχει πλάτος 88% του container του. Ο λόγος που χρησιμοποιεί το "παράξενο" 88% για το πλάτος είναι για να μπορεί πρώτα να εφαρμόζει στην δεξιά πλευρά του header αφού ήδη τα 10% έχουν καλυφθεί απο το logodiv και αφήνει και 2% για να υπάρχει ένα μικρό κενό μεταξύ τους ίσο με 2%.

Ως εδώ όλα εύκολα και από εκεί και πέρα ούτε και πάλι υπάρχει κάτι δύσκολο αφού πρόκειται για απλό html κώδικα που χρησιμοποιεί μια λίστα επιλογών (ul) που συμπεριλαμβάνει τις επιλογές για τα μενού σου και επαναλαμβάνεται δύο φορές αφού στην προκειμένη περίπτωση χρειάζεσαι δύο διαφορετικά μενού.

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

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

Δημοσίευση από dionisis71 » 19 Οκτ 2011 21:54

Όντως Kypros Lambrou αυτά που ποσταρες είναι τα εργαλεία που προσπαθούσα να χρησιμοποιήσω για να φέρω το επιθυμητό αποτέλεσμα, σε ευχαριστώ και για τον δικό σου κόπο για την επεξήγηση. Όσον αφορά για τα δύο μενού μάλλον θα χρεαστώ μόνο ένα div γιατί σήμερα που έπαιζα με το menu control της ASP.NET μου δίνει την δυνατότητα να έχω static menu items μαζί με dynamic και να κρύβω items ανάλογα με τον ρόλο του καθε χρήστη.

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

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

Δημοσίευση από dionisis71 » 19 Οκτ 2011 21:55

apsuh0s έγραψε:Μην σε απασχολεί για τον κόπο μου. Σαν τι θα μπορούσες να προσθέσεις αύριο μεθαύριο στο header;
apsuh0s με psuhi..Τι θα μπορούσα να προσθέσω…, ένα banner.. image... login control… δεν ξέρω και τι άλλο.. Ξέρεις πως μου φαίνεται αυτό το εργαλείο που λέγετε css όταν αντιμετωπίζω πρόβλημα όπως εχτές, που δεν μπορούσα να κατεβάσω το μενού πιο κάτω..; Του έδινα top-margin, float..δεν θυμάμαι τι άλλο δοκίμασα, δεν κουνιόταν ρούπι και τελικά κατέληξα στο συμπέρασμα ότι έχω να κάνω με αόρατα πράγματα που αλληλοεπιδρούν με τρόπο μη εμφανή… να μπορούσα μόνο να το κάνω debug..

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

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

Δημοσίευση από dionisis71 » 19 Οκτ 2011 21:59

Ευχόμουν να μπορούσα να γραπωθώ από το menu όπως στις γρύλλιες από τα ρολλά των καταστημάτων (όπως κάνανε κάποτε) για να το κατεβάσω..

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

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

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

Θα μπορούσες να το κάνεις αυτό με τον κώδικα που σου έδωσα.. Θα μπορούσες να προσθέσεις ένα banner πάνω από τα ul. Δίπλα, κάτω. Να πας το login τέρμα δεξιά, στη μέση από τα ul. Ότι θέλεις.
Του έδινα top-margin, float..δεν θυμάμαι τι άλλο δοκίμασα, δεν κουνιόταν ρούπι και τελικά κατέληξα στο συμπέρασμα ότι έχω να κάνω με αόρατα πράγματα που αλληλοεπιδρούν με τρόπο μη εμφανή…
Κι εγώ έτσι αντιμετώπιζα τις καταστάσεις όταν πρωτοασχολήθηκα με css. Το θέμα είναι να κατανοήσεις σε βάθος τι κάνει τι και πότε! Υπάρχουν αρκετοί τρόποι να κάνεις αυτό που σου έδωσα πιο πάνω.

Είμαι σίγουρος πως αν ασχοληθείς, σε λίγο καιρό θα κοιτάς ένα layout και θα αναγνωρίζεις άμεσα τον τρόπο με τον οποίο θα προσεγγίσεις τη λύση. Πιθανότατα να βρεις και περισσότερες λύσεις. Για να το πετύχεις αυτό όμως χρειάζεται προσεκτικό διάβασμα της θεωρίας.

btw, apsuh0s δεν είναι ο άψυχος, είναι ο μικρός apsu :)
.ninja { color: black; visibility: hidden !important; }

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

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

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

Τελικά ύστερα από το χθεσινοβραδυνό «σπρώξιμο» ξήμερωσε μια νέα μέρα με όρεξη να δω τι ψάρια θα πιάσω.. Σε πρώτη φάση, τα ξαναέφτιαξα από την αρχή, καθώς ήθελα με καθαρό μυαλό, χρησιμοποιώντας αυτά που έμαθα εχτές, να προχωρήσω κατανοώντας όσο καλύτερα γίνεται το τι κάνω, και το τι κάνει αυτό… Είχα μείνει πολύ ευχαριστημένος από το αποτέλεσμα αλλά, κοιτάζοντας το σε μεγαλύτερη ανάλυση, είδα το logo μου και το μενού να βρίσκεται αριστερά ενώ το περιεχόμενο της σελίδας μου θα βρίσκεται στο κέντρο της οθόνης και τουλάχιστον οπτικά θα έχανε πολύ. Κατάλαβα ότι κάτι θα έπρεπε να κάνω. Θυμήθηκα ότι παρόμοιες σελίδες με header div width100% ναι μεν πειάνει όλο το πλάτος της σελίδας, αλλά το logo και το μενού (όχι σε όλες) ξεκινάνε στο ίδιο σημείο (από αριστερά) με το main content. Υπάρχει δηλαδή μια ωραία στήχιση ως προς τον x. Τελικά μετά από λίγη ώρα τα είχα καταφέρει αν και το συγκεκριμένο είχε επίπεδο δυσκολίας (έτσι νομίζω). Υπάρχουν νέα ερωτηματικά λοιπόν σε κανούρια θέματα που αντιμετωπίζω.

Α) έχει να κάνει με τον designer. Είναι συνήθως WYSIWYG ή να μην ασχολούμαι και πολύ μαζί του και να εμπιστεύομαι το τι βλέπω στον browser.; Στην παρακάτω φωτό είναι η master page μου ή το template μου αν θέλετε.

Εικόνα

Στην επόμενη φωτογραφία, είναι η default page μου, με τεστ περιεχόμενο. Ενώ στον browser το contentplaceholder (contentdiv) εφάπτεται με το headerdiv και δείχνει μια χαρά, στο design preview του προγράμματος μου τα εμφανίζει με κενό, το οποίο ξέρω ότι είναι το margin-top: 95px; στο contentdiv. Αυτά τα 95px στον browser τα μετράει από την κορυφή του (από την αρχή δηλαδή) ενώ στο design preview το μετράει από το headerdiv. Είναι συνήθες συμπεριφορά αυτή ..; απλά μου ξενίζει λίγο..

Εικόνα

Και ο browser..

Εικόνα

η masterpage μου

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

<%@ Master Language="VB" CodeFile="site.master.vb" Inherits="site" %>

<!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="Styles/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="stripdiv"></div>
    <div id="headerdiv">
        <div id="logodiv">
            <img src="Images/logo.png" alt="logo" class="logo"/>
        </div>
        <div id="menudiv">
            <asp&#58;Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="menu" 
                ForeColor="White">
                <Items>
                <asp&#58;MenuItem Text="search" Value="Welcome"></asp&#58;MenuItem>
                <asp&#58;MenuItem Text="about" Value="Contact"></asp&#58;MenuItem>
                <asp&#58;MenuItem Text="contact" Value="Contact"></asp&#58;MenuItem>
                </Items>
                <StaticHoverStyle CssClass="primaryStaticHover"/>   
                <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem" ItemSpacing="7"/>
                <StaticMenuItemStyle ItemSpacing="7"/>
            </asp&#58;Menu>
                <asp&#58;Menu ID="Menu2" runat="server" Orientation="Horizontal" CssClass="menu" 
                ForeColor="White">
                <Items>
                <asp&#58;MenuItem Text="search1" Value="Welcome"></asp&#58;MenuItem>
                <asp&#58;MenuItem Text="about1" Value="Contact"></asp&#58;MenuItem>
                <asp&#58;MenuItem Text="contac1t" Value="Contact"></asp&#58;MenuItem>
                </Items>
                <StaticHoverStyle CssClass="primaryStaticHover"/>   
                <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem" ItemSpacing="7"/>
                <StaticMenuItemStyle ItemSpacing="7"/>
            </asp&#58;Menu>
        </div>
    </div> 
        <div id="contentdiv" class="transparent">
         <asp&#58;ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp&#58;ContentPlaceHolder>
            
        </div>
    </form>
</body>
</html>
και το css μου

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

body &#123;background-image&#58; url&#40;'../Images/pattern.png'&#41;; 
    background-color&#58; #736458; 
&#125;

#stripdiv
&#123;
	width&#58; 100%;
	height&#58; 99px;
	top&#58; 5px;
	left&#58; 0px;
	position&#58; absolute;
	/*background-color&#58; #696758;*/
	border&#58; thin solid #00FF00; /*green color*/
    -moz-opacity&#58; 0.60; 
   opacity&#58;.60; 
   filter&#58; alpha&#40;opacity=60&#41;;
&#125; 

#headerdiv
&#123;
	border&#58; thin solid #FF0000;/*red color*/
	width&#58; 960px;
	margin-left&#58; auto;
	margin-right&#58; auto;
	margin-top&#58;auto ;
	margin-bottom&#58;auto;
	height&#58; auto;
&#125;

#logodiv 
&#123; 
    border&#58; thin solid #000000; 
    float&#58; left; 
	width&#58; auto; /* diamorfose to. na dineis width otan kaneis float*/ 
	height&#58;auto;
&#125; 

.logo
&#123;
	margin&#58; 10px;
	position&#58; relative; 
	height&#58;auto;
&#125; 

#menudiv
&#123;
    float&#58; left;
    border&#58; thin solid #FF0000;
    width&#58; auto;
    padding&#58; 0;
    margin&#58; 20px 0 0 10px;
	/*z-index&#58; 100;*/
	position&#58; relative; 
&#125;

.menu
&#123;
    font-family&#58; Arial;
    font-size&#58; large;
    font-weight&#58; lighter;
    color&#58; #FFFFFF;
&#125; 

.p
&#123;
    font-family&#58; Arial, Helvetica, sans-serif;
    font-size&#58; 11pt;
    color&#58; #FFFFFF;
    padding&#58; 5px;
&#125;


#contentdiv
&#123;
    border&#58; thin solid #FF0000;
    width&#58; 960px;
    margin-left&#58; auto;
    margin-right&#58; auto;
    margin-top&#58; 95px;
    /*color&#58; #696758;*/
    color&#58;black;
    /*background-color&#58; #FFFFFF;*/
&#125;
            
.primaryStaticHover 
&#123; 
   color&#58; #800000; 
   background&#58; #f0e7d7; 
&#125;

.transparent
&#123;
    /*-moz-opacity&#58; 0.30; 
	opacity&#58;.30; 
	filter&#58; alpha&#40;opacity=30&#41;;*/
	-ms-filter&#58; "progid&#58;DXImageTransform.Microsoft.Alpha&#40;Opacity=30&#41;";
	filter&#58; alpha&#40;opacity=30&#41;;
	-moz-opacity&#58; 0.30;
	-khtml-opacity&#58; 0.30;
	opacity&#58; 0.30;
    &#125;
Ελπίζω να μην καταχράζομαι την διάθεση σας προς βοήθεια... απλά θέλω να μάθω.. έχει και συνέχεια απλά προς το παρόν θα μείνω εδώ.. σημείωσα καθόλου πρόοδο..;

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

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

Δημοσίευση από Kypros Lambrou » 20 Οκτ 2011 22:31

Χαίρομαι που το πήρες απόφαση να συνεχίσεις αφού μόνο με πρακτική θα βελτιωθούμε όλοι μας και να μπορέσουμε να καταλάβουμε πως δουλεύει το κάθε τι.
Γενικά δεν πρέπει να πολυενδιαφέρεσαι για το τι δείχνει ο designer του προγράμματος που χρησιμοποιείς αφού κανένας από τους επισκέπτες σου δεν πρόκειται (ελπίζω) να επισκεφθεί την σελίδα σου από εκεί. Βασικά ανάλογα με τους χρήστες που αναμένεις στην σελίδα σου, γνωρίζεις ένα περίπου ότι το πρόγραμμα θα πρέπει να φαίνεται καλά στους τάδε browsers με βασικούς τους Ιnternet Explorer, Firefox, Chrome, Safari και Opera.

Μου αρέσει το ερώτημα σου γιατί βασικά έρχεσαι στην συζήτηση που είχαμε με τον φίλο apsuh0s και το "παράξενο" clearfix που ίσως να σε είχε μπερδέψει στην λύση που σου είχε δώσει. Το πρόβλημα στην περίπτωση αυτή είναι ότι το πρώτο container "headerdiv" δεν παίρνει το ύψος το οποίο θα έπρεπε ανάλογα με το περιεχόμενο του, λόγω του ότι το περιεχόμενο βρίσκεται floated όπως και στην δική σου περίπτωση.

Δεν είναι αναμενόμενη συμπεριφορά αλλά ωστόσο είναι συνήθης γιαυτό και χρησιμοποιούμε τα clearfix που κάνουν το container να προσαρμοστεί στο ύψος του περιεχομένου του.

Στην περίπτωση σου μπορείς εύκολα να το διορθώσεις βάζοντας απλά clear:both; στο contentdiv σου έτσι ώστε να τοποθετείται μετά τα floated containers που υπάρχουν στο μενού. Καλύτερη λύση όμως θα ήταν να κοιτάξεις λίγο στον κώδικα του apsuh0s πιο πάνω και να δεις πως χρησιμοποιεί ένα γενικό class με όνομα "clearfix" για να διορθώσει όλα τα containers που πιθανόν να παρουσιάσουν παρόμοια ανεπιθύμητη συμπεριφορά.

Μια ερώτηση που έχω είναι γιατί έχεις "τυλίξει" όλη σου την σελίδα μέσα σε μια φόρμα?

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

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

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

Kypros Lambrou έγραψε:Μια ερώτηση που έχω είναι γιατί έχεις "τυλίξει" όλη σου την σελίδα μέσα σε μια φόρμα?
Όλα τα servers control στην ASP.NET τρέχουν μέσα στo Form tag.

Απάντηση

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

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

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