Πρόβλημα με html σελίδα κομμένη απο Photoshop

[snik]

Εχω ενα προβλημα σε μια σελιδα που προσπαθω να φτιαξω.

Το template το εφτιαξα με το Photoshop το εκοψα σε slices και επελεξα να δημιουργησει αυτοματα την σελιδα αλλα και τον φακελο με τις εικονες.

Εκτελωντας το template οπως βγηκε απο το Photoshop ειναι μια χαρα (καθε κελι του table ειναι μια εικονα) θελω να σβησω τις εικονες αλλα να κρατησω το σχεδιο οποτε πηγαινω στο καθε κελι και βαζω το url της εικονας ως table background. Στα περισοτερα κελια αυτο λειτουργουσε μια χαρα αλλα σε μερικα χαλαγε ολη η δομη της σελιδας.

 

Δειτε και μερικες εικονες που εχω ανεβασει για να καταλαβετε καλυτερα τι εννοω

slices (Με κοκκινο ειναι η εικονα που αν διαγραψω χαλαει η δομη.Τα υπολοιπα tables ειναι φτιαγμενα ετσι οπως σας ειπα παραπανω)

Ετσι ειναι μεχρι να διαγραψω το κοκκινο img

Οταν το σβησω και το κανω table background γινετε ετσι.

Στην σελιδα εχει ενα <center> στην αρχη και με css εχω κανει το background μαυρο,μ ονο αυτα τα 2 εχω πειραξει.Αν εχετε καμια ιδεα τι μπορει να φταιει θα σας ημουν υποχρεος.

[nik1992]

να σε ρωτησω κατι, πως φτιαχνεις θεματα απο το photoshop?

[snik]

Φτιαχνεις μια εικονα τις αναλυσης που θες να ειναι το σαιτ σου

Κανεις με layers οτι θες να προσθεσεις και οταν φτασεις σε καποιο επιθυμητο αποτελεσμα παιρνεις το slice tool ειναι ενα σαν ενα μολυβι αλλα με μαχαιρακι μπροστα και χωριζεις την σελιδα σου εκει που θες.Αν δεις στις εικονες που εβαλα τα χωρισματα ειναι στο header footer main content αλλα και εκει που υπαρχουν κουμπια-links. Αφου τα χωρισεις πας file/save for web & devices θα σου ανοιξει ενα παραθυρο,πατας save αν δεν θες να αλλαξεις τον τυπο του αρχειου. Εκει επιλεγεις τα εξης

save as type: images & html

settings: default settings

slices: All slices

Αυτο θα δημιουργησει εναν φακελο με τις εικονες (1 εικονα για καθε διαφορετικο slice) και ενα αρχειο html που τα εχει συνδιασει ολα αυτα.

[nik1992]

1000 ευχαριστω φιλε μου θα δοκιμασω

[bill]

γιατί θες να διαγράψεις το 14?

σου δημιουργεί κενό πιστεύω και πρέπει με κάτι να συμπληρωθεί. ισως γι'αυτό να γίνονται μπάχαλο.

 

ποιά έκδοση photoshop έχεις;

[snik]

θελω να το διαγραψω γιατι οταν παω πανω του και κλικαρω μπορω να σερνω την εικονα στην σελιδα και αυτο δεν μ'αρεσει.

Απο οτι καταλαβα αυτο το κελι ειναι το μονο που κραταει την δομη της κεντρικης σελιδας.Υπαρχει καποια εντολη στον κωδικα ετσι ωστε να κλειδωσω με καποιον τροπο τα table ωστε να μην αλλαζουν;

[silverthan]

Με img src το έχεις βάλει?

[snik]

Με img src το έχεις βάλει?

Ναι ο κωδικας ειναι καπως ετσι

 

>      <td>
       <img src="images/Untitled-1_22.jpg" width="185" height="17" alt=""></td>

 

και οταν το σβηνω το img src γινεται ετσι

 

> <td colspan="11" background="images/Untitled-1_13.jpg"> </td>

[silverthan]

Δε ξέρω αν χρησιμοποιείς κάποιο css αρχείο, για να βάλεις μια κλάση στο td.

 

Αλλιώς

<td colspan="11" style="background:url(images/Untitled-1_13.jpg)"> </td>

[fromaz]

Ναι ο κωδικας ειναι καπως ετσι

 

>      <td>
       <img src="images/Untitled-1_22.jpg" width="185" height="17" alt=""></td>

 

και οταν το σβηνω το img src γινεται ετσι

 

> <td colspan="11" background="images/Untitled-1_13.jpg"> </td>

 

Δεν έχει σχέση ο ένας κώδικας με τον άλλο. Απορώ πως περιμένεις να έχεις το ίδιο αποτέλεσμα... Και αυτό το colspan=11 δεν ξέρω πως προκύπτει. Δεν βλέπω 11 columns στις εικόνες που ανέβασες.

 

Από τη στιγμή που δεν βλέπω κώδικα δεν μπορώ - βεβαίως - να βρω το λάθος. Μπορώ όμως να υποθέσω. Και αυτό που υποθέτω, με βάση και τον κώδικα που παραθέτεις, είναι πως εσύ υποθέτεις ότι το cell θα γίνει αυτόματα resize με βάση το background. Sorry, αλλά δεν δουλεύει έτσι. Το cell γίνεται resize με βάση το περιεχόμενο και από τη στιγμή που του βγάζεις το img tag, το περιεχόμενο μηδενίζεται και ας έχεις 8ΜP εικόνα για background.

 

Το περίεργο είναι ότι η (τελική) εικόνα που παραθέτεις δείχνει άλλο πρόβλημα. Εν ολίγοις, με έχει μπερδέψει.

 

Τέλος πάντων, ας αρχίσουμε από την αρχή... Από τη στιγμή που θέλεις να βάλεις τα slices ως background και να παραμένει το ίδιο layout, τότε θα πρέπει να γράψεις τα cells ως εξής:

 

πριν

<td><img src="images/Untitled-1_22.jpg" width="185" height="17" alt=""></td>

 

μετά

<td style="width:185;height:17;background:url(images/Untitled-1_22.jpg)"> </td>

 

Βέβαια, στην πράξη θα χρειαστείς και άλλα πραγματάκια, όπως padding και overflow control, αλλά ξεκίνα από αυτά και βλέπουμε...

[snik]

fromaz σε ευχαριστω δοκιμασα να το ξαναγραψω απο την αρχη με το χερι ετσι οπως μου ειπες και δουλεψε μια χαρα απο οτι βλεπω.

Πανω αυτο που ειχα γραψει ηταν απλως ενα παραδειγμα πως μου ειναι πριν και πως μου ειναι μετα (ηταν απο διαφορετικο slice).