CSS και float (πρωτα βηματα)

[PCharon]

μπήκε και η Google στους Browsers, και με πολύ καλό μάλιστα(εγώ αυτό χρησιμοποιώ)

Ε, εντάξει, μην υπερβάλλουμε κιόλας. Καλός είναι ο Chrome, ταχύτατος, αλλά όχι ακόμα κατάλληλος να αντικαταστήσει οποιοδήποτε φυλλομετρητή. Έχει ένα κάρο ελλείψεις, bugs και συνεχώς μεταβαλλόμενη συμπεριφορά από έκδοση σε έκδοση. Έχει πολύ δρόμο ακόμα για να γίνει ανταγωνιστικός. Περιμένουμε λοιπόν.

[thanocaster]

Ααα, τώρα μάλιστα:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.google.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.606

 

Υ.Γ. Επικρατεί χάος.

 

Επειδή λοιπόν η Google αδιαφορεί για το validation (όπως και για τη δήλωση του doctype :confused:) προτείνεις ότι είναι ήσσωνος σημασίας το validation?

 

Διαφωνώ. Και αυτό γιατί με το να έχεις τη σελίδα σου επικυρωμένη εξασφαλίζεις κάτι πολύ σημαντικό. Ότι δεν υπάρχει κάποιο λάθος που το έχουν "καταπιεί" οι browsers που ελέγχεις, ενώ πχ στον IE6 συμπεριφέρεται διαφορετικά. Και φυσικά αυτό δεν ισχύει μόνο για τα divs ή τα tables, αλλά για όλα.

 

Ontopic, σε αυτό που λέει ο Βασίλης έχει κάποιο δίκιο. Ότι δηλαδή με τα tables επιτυγχάνεται πιο εύκολα η πλήρης συμβατότητα του positioning σε όλους τους browsers. Όμως, το πρόβλημα προσθήκης/αφαίρεσης περιεχομένου παραμένει. Και επίσης -για μένα το σημαντικότερο-, είσαι εκτός semantics. Σαν να πηγαίνεις στο φούρνο για ψωμί με την εμφάνιση (μπλούζα-σορτσάκι-κάλτσες) της ποδοσφαιρικής ομάδας που υποστηρίζεις.

[PCharon]

...με το να έχεις τη σελίδα σου επικυρωμένη εξασφαλίζεις κάτι πολύ σημαντικό. Ότι δεν υπάρχει κάποιο λάθος που το έχουν "καταπιεί" οι browsers που ελέγχεις...

Σωστό αυτό όντως, είναι καλύτερα να έχεις τον έλεγχο. Με ενδιαφέρει!

 

Πάντως δεν είναι μόνο το Google που αδιαφορεί!

 

Δεν είναι τόσο εύκολο να μετατρέψεις το οποιοδήποτε layout σε strict HTML, αμφιβάλλω για το αν γίνεται κιόλας. Για παράδειγμα χθες το βράδυ προσπάθησα να καταργήσω τα tables σε ένα μικρό αντιπροσωπευτικό τμήμα του κώδικα του τόπου που βλέπεις στην υπογραφή μου (συγκεκριμένα: την εικόνα με τις τροχαλίες και το πρώτο πλαίσιο ακριβώς δίπλα της, που φαίνονται πάνω-πάνω). Εννοείται πως επιθυμώ το ίδιο αποτέλεσμα. Αν είναι να το αλλάξω τελείως δε βρίσκω νόημα. Λοιπόν, προσπάθησα που λες και αυτό που κατάφερα εως τώρα είναι από έτσι...

><table cellspacing=0 cellpadding=0>
<tr>
<td><img src="work.gif" style="float:left"></td>
<td>
<table style="width:595px" cellspacing=0 cellpadding=0>
<tr>
	<td style="width:20px;height:20px;background:url(border_up_left.gif);background-repeat:no-repeat"></td>
	<td style="width:auto;height:20px;background:url(border_up_center.gif);background-repeat:repeat-x"></td>
	<td style="width:20px;height:20px;background:url(border_up_right.gif);background-repeat:no-repeat"></td>
</tr>
<tr>
	<td style="width:20px;height:auto;background:url(border_middle_left.gif);background-repeat:repeat-y"></td>
	<td style="width:auto;height:auto;background:#FFFFFF">
	<!-- START -- content --

<hr><span style="color:#000000;font-size:14px">Welcome! I upload here some of the programs I develop in my spare time.</span>
<hr><span style="color:#707070">This software has been tested on Windows <span style="color:#5555FF">XP™</span>, <span style="color:#009933">Vista™</span>. This software is provided as free for non-commercial use under specific license. For bugs reporting, suggestions or else contact me at (blabla)</span>

	<!-- END -- content --
	</td>
	<td style="width:20px;height:auto;background:url(border_middle_right.gif);background-repeat:repeat-y"></td>
</tr>
<tr>
	<td style="width:20px;height:20px;background:url(border_down_left.gif);background-repeat:no-repeat"></td>
	<td style="width:auto;height:20px;background:url(border_down_center.gif);background-repeat:repeat-x"></td>
	<td style="width:20px;height:20px;background:url(border_down_right.gif);background-repeat:no-repeat"></td>
</tr>
</table>
</td>
</tr>
</table>

 

...να το φέρω έτσι:

><div style="float:left">
<img src="work.gif">
</div>
<div style="float:left">
<div style="width:20px;height:20px;background:url(border_up_left.gif);background-repeat:no-repeat;float:left"></div>
<div style="width:555px;height:20px;background:url(border_up_center.gif);background-repeat:repeat-x;float:left"></div>
<div style="width:20px;height:20px;background:url(border_up_right.gif);background-repeat:no-repeat;float:left"></div>
<div style="visibility:hidden;clear:both;margin:0px"></div>
<div style="width:20px;height:auto;background:url(border_middle_left.gif);background-repeat:repeat-y;float:left"> </div>
<div style="width:555px;height:auto;background-color:#FFFFFF;float:left">
<!-- START -- content -->

<div style="color:#999999;font-family:Arial;font-size:16px;font-weight:bold"></div>
<hr><div style="color:#000000;font-size:14px">Welcome! I upload here some of the programs I develop in my spare time.</div>
<hr><div style="text-align:left"><span style="color:#707070">This software has been tested on Windows <span style="color:#5555FF">XP™</span>, <span style="color:#009933">Vista™</span>. This software is provided as free for non-commercial use under specific license. For bugs reporting, suggestions or else contact me at (blabla)</span></div>

<!-- END -- content -->
</div>
<div style="width:20px;height:auto;background:url(border_middle_right.gif);background-repeat:repeat-y;float:left"></div>
<div style="visibility:hidden;clear:both;margin:0px"></div>
<div style="width:20px;height:20px;background:url(border_down_left.gif);background-repeat:no-repeat;float:left"></div>
<div style="width:555px;height:20px;background:url(border_down_center.gif);background-repeat:repeat-x;float:left"></div>
<div style="width:20px;height:20px;background:url(border_down_right.gif);background-repeat:no-repeat;float:left"></div>
<div style="visibility:hidden;clear:both;margin:0px"></div>
</div>
<div style="visibility:hidden;clear:both;margin:0px"></div>

 

Οπότε μου παραμένουν δύο άλυτα προβλήματα:

- όλο μαζί δεν στοιχίζεται στο κέντρο της σελίδας

- τα μεσαία-πλαϊνά divs με τα γραφικά border_middle_left.gif και border_middle_right.gif δεν μπορώ να τα κάνω να έχουν αυτόματα το μέγεθος του div με το περιεχόμενο, ώστε να συμπληρώνονται σωστά οι άκρες του γραφικού, ακριβώς όπως αυτόματα προσαρμόζονταν τα κελιά αν ήταν σε table.

 

Αν μπορείς να μου βρεις τη λύση θα βοηθούσες κι εμένα και την κουβέντα

Προς διευκόλυνση, ανέβασα τα απαραίτητα .gif αρχειάκια εδώ www.savefile.com/files/1907208 ώστε να μπορείς να δουλέψεις τον κώδικα στον υπολογιστή σου.

 

Δε ζητάω πολλά, ε?

Περιμένω με ενδιαφέρον.

[thanocaster]

Για στοίχιση στο κέντρο της σελίδας πρέπει να δώσεις margin: 0 auto; Αυτό σημαίνει ότι θα δίνει το περιθώριο ίσο με 0 για το πάνω-κάτω και αυτόματα στο κέντρο για το δεξιά-αριστερά.

 

Για το δεύτερο, όλη η προσέγγισή σου είναι λάθος. Αυτό που θες να κάνεις είναι δυο divs. Ένα θα περιέχει το γρανάζι και άλλο ένα θα έχει γύρω-γύρω το border. Εδώ, εδώ και εδώ σου δείχνουν διάφορους τρόπους να το πετύχεις αυτό που θες.

 

Δυστυχώς επειδή φεύγω σε 20' για μέρος εκτός Αττικής χωρίς internet, όποια βοήθεια από Δευτέρα . Καλή επιτυχία!

 

EDIT: Ξέχασα να πω πως για το margin πρέπει να έχεις ορίσει και το πλάτος του div (για να ξέρει το css που θα κεντράρει).

[PCharon]

Πριν καν διαβάσω ολόκληρο το μήνυμά σου, ευχαριστώ πολύ για τη βοήθεια και περιμένω να τα ξαναπούμε εδώ στο forum.

 

(τώρα κάθομαι να το διαβάσω)

[zinas]

Αν θυμάμαι καλά, margin-left και margin-right auto δεν παίζει σε ΙΕ. Νομίζω ότι το fix είναι να έχεις και ένα div από έξω με text-align center (και τα margins όπως ακριβώς αναφέρθηκε).

[PCharon]

@Thanocaster:

Λοιπόν, έκατσα και ασχολήθηκα οπότε έχω τα παρακάτω συμπεράσματα.

 

Περί background images ως border...

> http://www.w3.org/TR/css3-background/#the-border-image

Το CSS3 απορρίπτεται προς το παρόν.

> http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

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

Τελικά το έλυσα βάζοντας 3(πάνω)+3(ενδιάμεσα)+3(κάτω) αλληλοκαλυπτόμενα divisions, οπότε διορθώθηκε το θέμα με τα πλαϊνά borders και γλύτωσα το αντιπαθές floating.

 

Περί στοίχισης div...

Το έλυσα ορίζοντας το width για το div. Σωστή η συμβουλή σου!

 

Καλή επιτυχία!

Ναι υπήρξε. Αντικατέστησα επιτυχώς τα εξωτερικά tables της σελίδας με divs, έβαλα και τα στυλ στο head και μείωσα το μέγεθος του εγγράφου 6%. Υποτίθεται πως μειώνεις και την ταχύτητα εμφάνισης, βέβαια αυτό δεν είναι δυνατό να το καταλάβεις σε ένα σύγχρονο υπολογιστή. Τώρα που πήρα φόρα, κάποια στιγμή θα κάτσω να αντικαταστήσω όλα τα table αναλόγως.

 

Μερικά layouts δεν είναι και τόσο απλό να τα σκεφτείς χρησιμοποιώντας divisions, ενώ με tables βγαίνουν πανεύκολα. Εντάξει συνήθεια είναι, καταλαβαίνω πάντως το λόγο που οι περισσότεροι εμμένουν στην κλασσική HTML και αμφιβάλλω ιδιαίτερα για το αν κάποτε θα αλλάξει αυτό.

Προσωπικά με τράβηξε. Επίσης βρίσκω ενδιαφέρον και τη γραφή σε XHTML.

[thanocaster]

Κατ' αρχάς way to go!

 

Τα image borders στα divs είναι μια πολύ απλή ρουτίνα. Αυτό με τις γωνίες δεν το κατάλαβα. Το transparency δεν παίζει ρόλο...

 

@zinas: Ποιον explorer εννοεείς; Σε IE6 και πάνω έχω την εντύπωση (σιγουριά σχεδόν) ότι δουλέυει απροβλημάτιστα...

[PCharon]

Αυτό με τις γωνίες δεν το κατάλαβα. Το transparency δεν παίζει ρόλο...

Κι όμως, ακριβώς με τον ίδιο κώδικα που δείχνει στο link που μου έδωσες και αντικαθιστώντας με τα δικά μου gifs (τα έχω ανεβάσει στο #18)...

><html><head><title>sample</title>
<style type="text/css">
.t {background: url(border_up_center.gif) 0 0 repeat-x; width: 20em}
.b {background: url(border_down_center.gif) 0 100% repeat-x}
.l {background: url(border_middle_left.gif) 0 0 repeat-y}
.r {background: url(border_middle_right.gif) 100% 0 repeat-y}
.bl {background: url(border_down_left.gif) 0 100% no-repeat}
.br {background: url(border_down_right.gif) 100% 100% no-repeat}
.tl {background: url(border_up_left.gif) 0 0 no-repeat}
.tr {background: url(border_up_right.gif) 100% 0 no-repeat; padding:20px}
</style>
</head><body style="text-align:center">

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
sample sample sample sample sample sample sample
</div></div></div></div></div></div></div></div>

</body></html>

...το αποτέλεσμα δείχνει έτσι: (αν έχεις κάποια ιδέα λέγε )