CSS kai alagi background

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

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

Απάντηση
Άβαταρ μέλους
Figaro
Honorary Member
Δημοσιεύσεις: 2706
Εγγραφή: 08 Φεβ 2004 19:48

CSS kai alagi background

Δημοσίευση από Figaro » 01 Νοέμ 2005 13:50

Exw sto CSS mou mia ikona (widht: 1px) san fixed kai repeated background gia to body:

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

body 
{
background-image: 
url('images/bgall.gif');
background-repeat: repeat;
background-attachment: fixed;
}
Mexri edw ola ok... to provlima mou einai pws tha mporousa na alaksw to background image ( width:1px... alla diaforetiko height) analoga tin analisi tis othonis tou kathe episkepti.

Px. an i ikona exei ipsos 870px fenete mia xara se analiseis 1152x864..
An omos i analisi tou episkepti einai megaliteri h mikroteri de fenete ok to body-background.

Kamia idea ?

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

CSS kai alagi background

Δημοσίευση από patriot » 01 Νοέμ 2005 19:18

Πρώτα μερικές παρατηρήσεις:

1) ΔΕΝ βάζουμε ότι αυτάκια θέλουμε στα css.

2) ΑΝ θα βάλουμε θα τα βάλουμε για χατήρι των παλιών browsers.

3) Αν τα βάλουμε τελικά (κάτι το οποιο συνιστώ) πρέπει να είναι ΟΠΩΣΔΗΠΟΤΕ τα διπλά (") γιατί με τα μονά (') ο ie των Mac δεν κάνει σωστό render και το css "χάνει".

4) Δεν χρειάζεται να γράφουμε πολλές φορές την ίδια εντολή όταν μπορούμε να την γράψουμε μία φορά γιατί έτσι μας τρώγεται (έστω και ελάχιστο) bandwidth για το τίποτα. Τα css έχουν τα λεγόμενα "shortcuts". Το παράδειγμα που μας έδωσες μπορεί να γραφτεί και έτσι:

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

body
{background: green url('images/bgall.gif') repeat fixed bottom left;}
Αυτό σημαίνει ότι το background θα έχει πράσινο χρώμα, με την τάδε φωτογραφία (στα σημεία που δεν θα φαίνεται η φωτογραφία να κυριαρχεί το πράσινο δηλαδή αν ρωτάς το γιατί να βάλουμε χρώμα αφού θα το καλύπτει η φωτό) η οποία θα γίνεται repeated και fixed όταν ο χρήστης θα scroll-άρει και τέλος ότι η φωτογραφία θα είναι κάτω/αριστερά (αν θα χρειαζόταν βέβαια αφού στην προκειμένη περίπτωση την κάνεις repeat)

5) Δεν ξέρω αν θες ειδικά σε αυτήν την περίπτωση να βάλεις την φωτογραφία να γίνεται repeat για κάποιο λόγο, αλλά σε γενικές γραμμές δεν χρειάζεται να την γράφεις αφού το στάνταρτ είναι ένα image να γίνεται repeat έτσι και αλλιώς

Ας πάμε τώρα στην ερώτηση σου.
Σημείωση. Εκτός από repeat μπορείς να την βάλεις και repeat-x ή repeat-y αν προτιμάς. Μην το ξεχνάς... ίσως να γίνεται έτσι αυτό που θες.

Από την στιγμή που όχι μόνο την έχεις βάλει repeat αλλά και είναι στο body τότε θα φαίνεται αυτομάτως παντού και δεν χρειάζεται να εξαρτάσαι από το height. Για να εξαρτάσαι λοιπόν σημαίνει ότι την έχεις βάλει σ' ενα div. Είναι αλήθεια αυτό; Αν ναι τότε μπορείς να δοκιμάσεις να βάλεις στο div min-height:100% αλλά αυτό δεν πιάνει σε όλους τους browsers. Για δώσε μας περισσότερες πληροφορίες μήπως και κατανοήσουμε καλύτερα...

Άβαταρ μέλους
Figaro
Honorary Member
Δημοσιεύσεις: 2706
Εγγραφή: 08 Φεβ 2004 19:48

CSS kai alagi background

Δημοσίευση από Figaro » 01 Νοέμ 2005 20:09

Για να εξαρτάσαι λοιπόν σημαίνει ότι την έχεις βάλει σ' ενα div. Είναι αλήθεια αυτό;
Den einai mesa se div.

Για δώσε μας περισσότερες πληροφορίες μήπως και κατανοήσουμε καλύτερα...
Exw ena .GIF pou thelw na to xrisimopiisw san body-background gia ena document. Gia na fortosei grigora to background to exw kanei resize se 1px width kai height sta 870px.
To provlima einai pws to sigkekrimeno .gif exei 3 diaforetika (se katheto fade) xrwmata. Fantasou afti ti foto sti vasi tis na exei ena akoma xrwma (px. mavro) .

Opws eipa pio panw i fotografia exei ypsos 870 kai fenete mia xara (kai ta 3 xrwmata) se analiseis 1152x864 oxi omos kai to idio se diaforetikes analiseis pou mporei na exei o kathe episkeptis tis selidas.
Px. se analisi 1024x768 h 800x600 de xwraei olo to background tou .gif wste na fanoun ola ta xrwmata ...

Apla psaxnw kapia lisi wste na mporw na "servirw" ston episkepti tis selidas diaforetiko body-background image analoga me to screen resolution pou exei.

4) Δεν χρειάζεται να γράφουμε πολλές φορές την ίδια εντολή όταν μπορούμε να την γράψουμε μία φορά ...
Exeis dikio, omos sinithisa etsi giati mporw na elenksw pio efkola th kathe seira apo to css mou.

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

CSS kai alagi background

Δημοσίευση από patriot » 01 Νοέμ 2005 21:30

To provlima einai pws to sigkekrimeno .gif exei 3 diaforetika (se katheto fade) xrwmata.
3 διαφορετικά; Σαν να λέμε κίτρινο, μπλε, ροζ, δηλ τελείως άσχετα, σε 864 % 3 = 288 pixels το καθένα ή gradient; Γιατί η φωτογραφία που μου έδειξες, σαν gradient που είναι, έχει πολύ περισσότερα από 3 χρώματα. Έτσι από την κορυφή μέχρι το τέλος (οχτακοσιοστό, εξικοστό, τέταρτο pixel) ο χρήστης των 1152χ864 έχει 864 ελεύθερα pixels να δει ενώ ο οποιοσδήποτε άλλος μικρότερης ανάλυσης (αν εξαιρέσουμε ότι το έχεις βάλει fixed) όταν "τελειώσει" το 864 θα αρχίσει πάλι να βλέπει το image από την αρχή έτσι και το περιεχόμενο είναι τόσο ώστε να βγαίνει μπάρα (ή μεγαλύτερης ανάλυσης στην ίδια περίπτωση και φυσικά εννοώ δεξιά μπάρα όχι κάτω μπάρα). Αν δεν βγει μπάρα ο 1024χ768 δεν θα δει καν την ύπαρξη της συνέχειας του image ενώ ο 800χ600 ακόμα λιγότερα και πάει λέγοντας. Άρα ο καθένας θα "σεβιριστεί" τα χρώμα της οθόνης του ότι ακριβώς θες δηλ... Που ακριβώς είναι το πρόβλημα;
Fantasou afti ti foto sti vasi tis na exei ena akoma xrwma (px. mavro) .
Δεν κατάλαβα γιατί να έχει άλλο ένα χρώμα; (Άσχετα με το τι χρώμα είναι αυτό...)
Apla psaxnw kapia lisi wste na mporw na "servirw" ston episkepti tis selidas diaforetiko body-background image analoga me to screen resolution pou exei.
Αυτό θα μπορούσες να το κάνεις και με javascript. Δηλ η Javascript να ψάχνει να βρίσκει τι resolution έχει ο καθένας (ψάξε στο www.dynamicdrive.com για τέτοια scripts αν θες) και να εμφανίζει το αντίστοιχο css file που θα έχει και το αντίστοιχο background. Όμως θα ριψοκινδυνεύσεις τους χρήστες που έχουν disable την javascript. Και εκτός αυτού νομίζω ότι παρά πάει να φορτώνουμε για ένα bg τον κώδικα. Άμα ήταν ολόκληρο style να πω μάλιστα...

Άβαταρ μέλους
Figaro
Honorary Member
Δημοσιεύσεις: 2706
Εγγραφή: 08 Φεβ 2004 19:48

CSS kai alagi background

Δημοσίευση από Figaro » 01 Νοέμ 2005 22:22

3 διαφορετικά; Σαν να λέμε κίτρινο, μπλε, ροζ, δηλ τελείως άσχετα, σε 864 % 3 = 288 pixels το καθένα ή gradient;
Gradient :)
Eipa pio panw "fade" pou apo oso kserw simenei "na xanete stadiaka i fwtinotita" (otan milame gia web design).

Thelw na parw san apotelesma gia Background:
1xrwma {gradient} pros 1-2o-xrwma ... kai meta pali {gradient} 1-3o-xrwma.
me ti diafora oti to mesaio xrwma prepei na einai panta akrivws sto kentro tis selidas.
( allo ena paradigma pou vrika )

... Twra giati prepei na einai etsi to background tou site mi me rwtas... apla mi dextheis pote na kaneis site gia praktoreio montelwn :P .

To background prepei na einai fixed sto body kai oxi se div giati to idio background (.gif se gradient/fade) prepei na iparxei se oles tis selides tou site (ara diaforetiko content kai diaforetiko height i kathe selida ).

Apla prospathw me kapio trick na parw to parapanw apotelesma xwris na xriastei na xrisimopiisw JS (gia tous logous pou anafereis).

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

CSS kai alagi background

Δημοσίευση από patriot » 01 Νοέμ 2005 23:47

Κατάλαβα...
Τότε μπορώ να σκεφτώ το iframe. Αντί δηλ να έχεις το img fixed να έχεις το iframe ακίνητο.

Στο style

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

iframe{border:red 1px dotted; margin-left:auto; margin-right:auto; position:absolute; top:Όσα px θες; left:Όσα px θες;}
Και το iframe:

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

<iframe src="periexomeno.html" frameborder="0" marginheight="10" marginwidth="10" id="periexomeno" name="periexomeno" scrolling="auto" height="200" width="200" ></iframe>
Σημ: id = νέοι browsers και name = παλιοί browsers. Και τα δύο είναι απαραίτητα.

Για περίμενε και κανέναν άλλον να δούμε αν έχει καμιά άλλη λύση...

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS kai alagi background

Δημοσίευση από skeftomilos » 02 Νοέμ 2005 01:36

Tada! να 'μαι κι εγώ! :strong:

Χωρίς JS χλωμό το βλέπω. Αλλά μια σταγόνα JS ποτέ δεν έκανε κακό σε κανένα. :)

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

<html>
  <head>
    <style type="text/css">
      body &#123;
        background-image&#58; url&#40;"images/bg864.gif"&#41;;
        background-repeat&#58; repeat;
        background-attachment&#58; fixed;
      &#125;
    </style>
    <script type="text/javascript">
      if &#40;screen.height == 600&#41; &#123;
        var bgImage = 'bg600.gif'
      &#125; else if &#40;screen.height == 768&#41; &#123;
        var bgImage = 'bg768.gif'
      &#125; else &#123;
        var bgImage = 'bg864.gif'
      &#125;
      document.write&#40;'<sty' + 'le type="text/css">body&#123;background-image&#58;url&#40;"images/' + bgImage + '"&#41;;&#125;</sty' + 'le>'&#41;
    </script>
  </head>
  <body>
  </body>
</html>
Αν δεν υπάρχει JS μικρό το κακό. Θα εμφανιστεί η default εικόνα που είναι γραμμένη στο style πάνω-πάνω.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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