Συγκεκριμένο layout, αυξομείωση του content

[Wise_One]

Ακόμα μια ερωτησούλα ρε παιδιά. Έχω ένα πρόβλημα στο πώς εμφανίζεται το site μου. Αυτό που θέλω είναι (αναλόγως του τί γράφω στο #content, να αυξομειώνεται το μέγεθος του div αλλά το #footer να μένει στάνταρ κάτω απ' το #content.

 

Κάτι πρέπει να παίζει με το "position" της CSS αλλά αυτά δε τα έχω δουλέψει πολύ ακόμα για να τα καταλάβω.

 

Συγκεκριμένα, το site μου βρίσκεται εδώ και σας δίνω και το CSS μήπως σας βοηθήσει.

 

>
/* Resets the default values */
html,body
{
margin: 0;
padding: 0;
}
/* Sets the size of the container div */
#container
{
width: 1024px;
height: 768px;
margin: auto;
}
/* Sets the size of the header div */
#header
{
height:50px;
background-color:#F3F2ED;
margin:0;
padding:0;
}
#navigation
{
height:346px;
width:100px;
margin-top:5px;
background-color:#7FFFD4;
float: left;
}
#navigation_list
{
font-family: Arial, Helvetica, Verdana, Sans-serif;
}
.list_items
{
padding-bottom: 25px;
}
#content
{
height:346px;
background-color:#CCC8B3;
border-top:#FFFFFF 2px solid;
margin-top:5px;
margin-left:120px;
padding-left:5px;
padding-right: 5px;
}
#footer
{
height:25px;
background-color:#BFBD93;
border-top:#FFFFFF 2px solid;
margin:0;
padding:0;
}
/* Places the list correctly into the navigation div */
#navigation_list
{
padding-left:10px
}
/* Affects all h1 header that are used in titles */
h1
{
margin: 0;
padding: 0;
}
/* Affects the h3 header appearing in the footer */
h3
{
margin: 0;
padding: 0;
}
/* Clears margin and padding values from <p> of content */
#content p
{
margin: 0;
padding: 0;
font-family:Arial, Helvetica, Verdana, Sans-serif;
font-size:18px;
}

 

Κάθε βοήθεια καλοδεχούμενη. Ήδη διαβάζω για CSS αλλά ακόμα έχω αρκετό δρόμο μπροστά μου.

[macabre_sunsets]

Νομίζω πρέπει να βγάλεις το "Height : 346" από το #content για να αλλάζει μέγεθος ανάλογα με αυτά που έχει μέσα. Αλλιώς μπορείς να του βάλεις scrollbars και να μείνει το layout ως έχει.

[antonisid]

Αυτο να κανεις...να βγαλεις το height και σιγουρα το μεγεθος του div θα ειναι οσο το περιεχομενο του.Τωρα αν εκτεινεται και μεσα στο footer που το βλεπω πολυ πιθανο διαβαζοντας το css,θα σου προτεινα να βαλεις στο #footer ενα clear:both;

[thanocaster]

Πρέπει να βάλεις στο html, body { height: 100%; }. Καλό θα ήταν να δώσεις και position: absolute στο footer.

[Wise_One]

Φίλοι μου εντάξει, δούλεψε. Πάντως αν δώσω <b>position: absolute</b> στο footer, τότε ναι μεν μένει κάτω απ' το content αλλά μπαίνει στο navigation αν το content έχει μικρότερο μέγεθος.

 

Θα κάνω ακόμα κανα 2-3 πειράματα με διάφορα που έχω στο μυαλό μου να δώ αν αλλάζει κάτι.

 

Μια άλλη ερώτηση που αφορά το navigation. Με τις αλλαγές, αυξομειώνεται κανονικά το content απλά το navigation μένει ίδιο. Αν το κάνω κι αυτό ν' αυξομειώνεται , θα είναι καλό αισθητικά απ' τη στιγμή που έχει 6-7 links μόνο;

[antonisid]

Ε αυτο εσυ θα το δεις.Δε μπορουμε να ξερουμε πως το εχεις σχεδιασει.Αν θες μολις το κανεις ανεβασε ενα screenshot να σου πουμε την γνωμη μας.Επισης....γιατι αυξομειωνεται το navigation?

[thanocaster]

Φίλοι μου εντάξει, δούλεψε. Πάντως αν δώσω <b>position: absolute</b> στο footer, τότε ναι μεν μένει κάτω απ' το content αλλά μπαίνει στο navigation αν το content έχει μικρότερο μέγεθος.

 

Θα κάνω ακόμα κανα 2-3 πειράματα με διάφορα που έχω στο μυαλό μου να δώ αν αλλάζει κάτι.

 

Μια άλλη ερώτηση που αφορά το navigation. Με τις αλλαγές, αυξομειώνεται κανονικά το content απλά το navigation μένει ίδιο. Αν το κάνω κι αυτό ν' αυξομειώνεται , θα είναι καλό αισθητικά απ' τη στιγμή που έχει 6-7 links μόνο;

 

Πρέπει να βάλεις και min-height σε οτιδήποτε εκτός ποσοστού (πχ px, em...) στο html,body (αυτό είναι καλό διότι δεν επιτρέπει στη σελίδα σου να "συμπιέζεται" πάνω από ένα όριο).