Ερώτηση css

[silve]

Γεια σας παιδιά. Έχω αρχίσει να μαθαίνω css τώρα τελευταία και έχω μια απορία σχετικά με την στοίχιση των εικόνων και των κειμένων. Είμαι αρχάριος για αυτό μην γελάσετε με τις απορίες μου...

 

Έχω σε ένα html αρχείο τον εξής κώδικα:

 

>
<div id="logo">
      <a href="#"><img src="images/logo.jpg" alt"Logo" /></a>
</div><!-- end logo -->
<div id="banner">
      <a href="#"><img src="images/banner.jpg" alt"Banner" /></a>
</div><!-- end banner -->

 

Το πρόβλημά μου είναι, τι χρειάζεται να κάνω έτσι ώστε να εμφανιστεί το logo στα αριστερά της οθόνης και στην ΙΔΙΑ σειρά στα δεξιά όμως το banner. Μπορεί να είναι απλό (που θα είναι πιστεύω) αλλά δεν βρήκα κάτι πως γίνεται αυτό.

[thanocaster]

Καταρχάς δεν πρόκειται να σε κοροϊδέψει κανείς, και, ακόμα και αν το κάνει κάποιος τον κάνεις άμεσα report και τελειώνει εκεί.

 

Στο θέμα τώρα. Αυτό που θέλεις γίνεται με τα floats:

 

>
div {
position: relative;
}
div#logo {
float: left;
}
div#banner {
float: right;
}

[parsifal]

Χμμμ, το relative σε τί εξυπηρετεί εδώ;

[thanocaster]

Κάποιος Internet Explorer το χρειάζεται, αλλά δεν θυμάμαι ποιος...

[_tasos]

Ο IE7 έχει ένα θέμα με το float:right; αλλά νομίζω πως δεν αξίζει να ασχολούμαστε με αυτόν πλέον...

[alexitsios]

@silve αν θέλεις ρίξε και μια ματιά σε κάποιο css framework. Πιστεύω θα βοηθηθείς:

http://www.blueprintcss.org/

http://960.gs/

[silve]

Παιδιά επειδή δεν έχω καταλάβει, μπορεί να μου εξηγήσει κάποιος τι είναι το 960 grid system και σε τι χρησιμεύει στο κώδικα css; Έχω μπερδευτεί λιγάκι..

[Haldol]

Ο IE7 έχει ένα θέμα με το float:right; αλλά νομίζω πως δεν αξίζει να ασχολούμαστε με αυτόν πλέον...

Εάν φτιάχνουμε κάποια σελίδα για την πάρτη μας όχι, αλλά δυστυχώς είναι πολλοί οι πελάτες που ζητάνε συμβατότητα με IE7+. Δε μπορείς να «ξεχάσεις» τον IE.

 

 

Παιδιά επειδή δεν έχω καταλάβει, μπορεί να μου εξηγήσει κάποιος τι είναι το 960 grid system και σε τι χρησιμεύει στο κώδικα css; Έχω μπερδευτεί λιγάκι..

 

Άσ' το στην άκρη. Όπως λες και μόνος/η σου είναι beginner, οπότε κάποιο framework πιο πολύ θα σε μπερδέψει παρά θα σε βοηθήσει. Κάτσε να μάθεις καλά τα «απλά» περί του CSS, μετά πας σε πιο advanced concepts.

 

[_tasos]

Εάν φτιάχνουμε κάποια σελίδα για την πάρτη μας όχι, αλλά δυστυχώς είναι πολλοί οι πελάτες που ζητάνε συμβατότητα με IE7+. Δε μπορείς να «ξεχάσεις» τον IE.

 

Ο IE7 χρησιμοποιείται σε μικρό ποσοστό και μπορεί να αναβαθμιστεί στον IE8. Δεν υπάρχει κανένας λόγος να μένει κάποιος στον IE7, σε αντίθεση με τον IE6 που πολλές εταιρίες που δούλευαν σε IE6 specific εφαρμογές.

[Haldol]

Άλλο αν μπορεί να αναβαθμιστεί, άλλο αν αυτό γίνεται, άλλο αν νοιάζει στο ελάχιστο αυτόν που ζητάει να του φτιάξεις σελίδα. Όταν σου πει ο πελάτης «θέλω συμβατότητα με IE7+» τι θα του πεις; Να αναβαθμίσει τον browser του;

[thanocaster]

Ε, εντάξει ρε παιδιά, αν είναι να ξεκινήσει το γνωστό ζήτημα, μην βάλετε το position: relative.

[_tasos]

Άλλο αν μπορεί να αναβαθμιστεί, άλλο αν αυτό γίνεται, άλλο αν νοιάζει στο ελάχιστο αυτόν που ζητάει να του φτιάξεις σελίδα. Όταν σου πει ο πελάτης «θέλω συμβατότητα με IE7+» τι θα του πεις; Να αναβαθμίσει τον browser του;

Αν είναι απαίτηση του project αυτή η συμβατότητα, φυσικά και θα το κάνεις. Δεν είπα κάτι τέτοιο.

 

Από την άλλη η αναβάθμιση του IE7 είναι εύκολη οπότε πρακτικά οι χρήστες το κάνουν. Υπήρχε λόγος που πολύς κόσμος δεν έκανε αναβάθμιση τον IE6, και αυτό ήταν πολλές εφαρμογές (κυρίως intranet) που στήθηκαν και δούλευαν μόνο σε αυτόν. Για τον IE7 δεν ισχύει κάτι τέτοιο, άρα οι χρήστες δεν έχουν λόγο να μείνουν σε αυτήν την έκδοση. Με αυτό το σκεπτικό το είπα και ελπίζω να συμφωνείς.

[silve]

Γεια σας παιδιά! Θα ήθελα πάλι λίγο τα φώτα σας. Λοιπόν έχω γράψει σε html το εξής:

 

>
<div id="header">
 <img src="images/header.jpg" />
   <div id="logo">
     <img src="images/logo.png" />
   </div>
</div>

 

Η ερώτησή μου είναι πως μπορώ (με css πάντα) η εικόνα logo να πάει πάνω από την εικόνα header και να την τοποθετήσω εγώ σε συγκεκριμένη θέση.

[thanocaster]

>
div#header img {
position: absolute;
}
div#logo img {
top: 25px;	// εδώ βάζεις όποια τιμή θέλεις
left: 50px;	// εδώ βάζεις όποια τιμή θέλεις
}

[silve]

@Thanocaster Ευχαριστώ για την απάντηση αλλά παρόλα αυτά το αποτέλεσμα δεν είναι αυτό που θα ήθελα 100%. Με αυτό που έγραψες η εικόνα του logo βγαίνει εκτός της εικόνας του header όταν μικραίνω το παράθυρο, δηλαδή στην ουσία όταν αλλάζω την ανάλυση. Θα ήθελα να μένει σταθερό σε ένα σημείο το logo. Ίσως τα παρακάτω σχήματα να βοηθήσουν.

 

Θέλω να γίνει έτσι (1)

 

Ενώ κάνοντας αυτά που μου είπες @Thanocaster, μικραίνοντας το παράθυρο και την ανάλυση το logo πάει κάπως έτσι:(2)

 

 

Επίσης να πω πως τα divs header και logo περιέχονται μέσα στο dic container. Ελπίζω να έγινα κατανοητός..

 

Ευχαριστώ!