Πρόβλημα με Javascript Tabs

[katsikoula]

Καλησπέρα στο forum! ξεκίνησα την πρώτη μου επαγγελματική προσπάθεια για κατασκευή ιστοσελίδας με το Dreamweaver CC.

είμαι ακόμα στην αρχή και αντιμετωπίζω το εξής πρόβλημα: σε Site: αυτό το site, στην σελίδα gallery, όπως θα δείτε, χρησιμοποιώ javascript για να βάλω tabs στην σελίδα μου. το θέμα είναι ότι το πλαίσιο με τα tabs ξεκινάει πολύ πιο χαμηλά από ότι θα έπρεπε. αν πειραματιστώ με διάφορες τροποποιήσεις στο css αρχείο του tab, αυτό που μπορώ να καταφέρω είναι να ξεκινάει εκεί που πρέπει αλλά ανάμεσα στο σημείο που θα έπρεπε να ξεκινάει και στο σημείο που ξεκινάει τώρα υπάρχει ένα γκρι κενό. δηλαδή υπάρχουν τα tabs στην κορυφή, μετά γκρι κενό μέχρι την ευθεία που τελειώνει το menu και μετά ξεκινάνε οι φωτογραφίες.

μπορεί κάποιος να με βοηθήσει? φαντάζομαι θα χρειάζεται κάποια τροποποίηση το css αρχείο του tab....

 

Υ.Γ.: οποιαδήποτε άλλη πρόταση σχετικά με τον σχεδιασμό του site είναι ευπρόσδεκτη!!!

[chrism4111]

Αυτό μπορεί να συμβαίνει για διάφορους λόγους..
Κύριοι λόγοι είναι 
1ον. Λάθος δόμηση στον HTML κώδικά σου.
2ον. Πρόβλημα στο CSS

Συνήθως, επειδή μου έχει ξανατύχει το συγκεκριμένο πρόβλημα, είναι στα CSS που καλείς.
Εσύ όπως βλέπω καλείς σπασμένα ξεχωριστά για κάθε Plugin το CSS του.
Προσπάθησε να καλέσεις το jquery-ui.min.css που σου δίνει η jquery στο stable download.
Παίξε λίγο με τα CSS. Ο Inspector είναι φίλος σου.
Δες πιο προσεκτικά τον HTML κώδικά σου μπας και κάπου έχεις ξεχάσει κάτι.

Όσον αφορά στο Site, φιλικά πάντα, αν βιάζεσαι να παραδώσεις (έχεις δλδ κάποιο deadline)  θα σου πρότεινα να πας προς Wordpress μεριά και να δουλέψεις πάνω σε κάποιο Theme, διαφορετικά κατέβασε ένα έτοιμο Free HTML5 Template  και δούλεψε σε αυτό.

Τώρα αν έχεις αρκετό χρόνο για παράδοση τότε θα σου πρότεινα πολλές αλλαγές με 1η αυτή του Background που έχεις διαλέξει.
2ον. Το Logo θα πρέπει να φαίνεται και δεν θα πρέπει να δυσκολεύεται ο χρήστης να το δει/διακρίνει. Το μενού νομίζω έχει υπερβολικά μεγάλο Radius στις κάτω γωνίες, θα έβαζα 2px ή στην χειρότερη 4px.


Δες εδώ κάποια Free Html5 Templates που θα μπορούσες να δουλέψεις πάνω τους και με μερικές αλλαγές να παραδόσεις κάτι καλό και σε γρήγορο χρονικό διάστημα.
http://www.templatemag.com/free-sports-website-templates/

[katsikoula]

σε ευχαριστώ πάρα πολύ για την απάντηση σου! για αρχή, έχω περιθώριο μέχρι την Κυριακή. από εκεί και πέρα το background και το μεγάλο Radius αρέσει στον πελάτη όπως έχει. βέβαια αυτά είναι λεπτομέρειες και κατά πάσα πιθανότητα να τα αλλάξω μέχρι το τέλος. ήδη άλλαξα δοκιμαστικά το background (το οποίο δεν πρέπει να ξεφεύγει πολύ από αυτό που έχω τώρα λόγω της επιχείρησης) και το Radius γιατί με προβλημάτισε η πρόταση σου

τώρα, μιας και είμαι αρχάριος, τι εννοείς όταν λες να δοκιμάσω να καλέσω το jquery-ui.min.css που σου δίνει η jquery στο stable download ??? έχω παίξει αρκετά με το maiBody.css και το jquery.ui.tabs.min.css χωρίς να έχω καταφέρει κάτι διαφορετικό από αυτά που ανέφερα στο αρχικό post. με τα υπόλοιπα css δεν έχω ασχοληθεί γιατί πιστεύω ότι είναι άσχετα με το πρόβλημα μου.

στον HTML κώδικα δεν πιστεύω να έχω ξεχάσει κάτι. το έχω κοιτάξει αρκετές φορές και θεωρώ ότι είναι ιδιαίτερα απλός.

όσο αφορά το logo, έχεις δίκιο και το είχα παρατηρήσει και εγώ. αλλά για αυτό πιστεύω πως δεν ευθύνεται ο κώδικας μου αλλά η εικόνα καθώς και με το Paint του υπολογιστή να την ανοίξω έτσι φαίνεται πάλι. κάτι θα κάνουμε και για αυτό στο τέλος.

τέλος δεν θα ήθελα να χρησιμοποιήσω έτοιμο template ή wordpress / joomla επειδή μιας και είναι η πρώτη μου δουλειά, θα ήθελα να κάνω κάτι "δικό μου" και πρωτότυπο (όσο αυτό είναι δυνατό).

 

Υ.Γ.: το site θα το ανεβάζω τακτικά (σίγουρα κάθε βράδυ) με τις νέες αλλαγές που θα κάνω κάθε φορά.

Υ.Γ. 2 : προσπαθώ να ανεβάσω τη νέα έκδοση αλλά έχει "πέσει" το godaddy. ποιος το περίμενε... το πρωί θα προσπαθήσω ξανά

Επεξ/σία 3 Ιουνίου 2014 από katsikoula

[chrism4111]

Λοιπόν για κάνε μια αντικατάσταση αυτών:
 

<link href="../jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">

<link href="../jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">

<link href="../jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">

<script src="../jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="../jQueryAssets/jquery-ui-1.9.2.tabs.custom.min.js" type="text/javascript"></script>

με αυτές:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

φυσικά κρατάς backup τα files σου.

 

Για περισσότερη βοήθεια δες και εδώ... Πάτα το View Source
http://jqueryui.com/tabs/


Σχετικά τώρα με το Radius: Απλά νομίζω ότι το web design αρχίζει να φεύγει από τις πολλές πολλές καμπύλες οι οποίες αλλάζουν προς την γωνία 90 μοιρών. Βλέπε ας πούμε περιβάλλον Metro της Microsoft (δεν είναι web αλλά πολλά websites χρησιμοποιούν το Metro Design για να αποτυπώσουν μινιμαλιστικά το περιεχόμενο στον Ιστό). Και ποιος Designer δεν έχει "κλέψει" από εδώ http://tympanus.net/...Ένα πολύ καλό Site το οποίο θα σε βοηθήσει αρκετά με τις τάσεις της μόδας.

Επίσης κάτι άλλο. 
Προσπάθησε το περιεχόμενο να είναι όσο το δυνατόν καθαρό. Ο χρήστης πρέπει να έχει λόγο αφού καταφέρει** και μπει στην πρώτη σελίδα να μείνει και να κάνει κλικς στις υπόλοιπες σελίδες. Οπώτε το τι θα αποφασίσετε με τον πελάτη σου  να γράψετε στην πρώτη σελίδα θα πρέπει σίγουρα να έλκει τον υποτιθέμενο πελάτη. Θα μπορούσες να βάλεις πχ κάποια προσφορά, διάφορα Fitness Tips πράγματα τα οποία θα ενδιαφέρουν τον υποτιθέμενο πελάτη και θα θέλει να συνεχίσει να περιηγηθεί και τελικά να επικοινωνήσει ή να αφήσει κάποιο Mail του ή τηλεφωνο.

** Φαντάζομαι ότι αυτό είναι κάτι πιλοτικό και ότι ο χρόνος φόρτωσης θα μειωθεί.

Πάντα φιλικά..

[katsikoula]

δοκίμασα αυτό που μου πρότεινες και το αποτέλεσμα είχε ως εξής: http://prntscr.com/3p4c14

θα δω το link που μου έδωσες μήπως και βγάλω άκρη.

το http://tympanus.net/δυστυχώς δεν δουλεύει προσωρινά λόγω αναβάθμισης...

αυτό το θέμα με την αρχική σελίδα είναι όντως κάτι το οποίο με βασανίζει... ωραία η ιδέα σου για Fitness Tips!!! θα το συζητήσω με τον πελάτη μου στην συνέχεια.

ο χρόνος φόρτωσης του site είναι πολύ καλός. απλά τις τελευταίες ώρες έχει κάποιο πρόβλημα το godaddy το οποίο χρησιμοποιώ για hosting και domain. εμένα να φανταστείς δεν μου ανοίγει καθόλου!

 

Σε ευχαριστώ πάρα πολύ για την μέχρι τώρα βοήθεια σου!!! είναι πραγματικά πολύτιμη! θα ενημερώσω το post με νέα!

 

edit: Τελικά μετά από πολλά πειράματα βρήκα την λύση!!! το πρόβλημα ήταν στο css uitabs. έπρεπε να βάλω float left και clear right !!!!!!!

Επεξ/σία 3 Ιουνίου 2014 από katsikoula