Change content σε css division

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

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

Άβαταρ μέλους
otheosadis
Δημοσιεύσεις: 12
Εγγραφή: 10 Δεκ 2006 20:20

Change content σε css division

Δημοσίευση από otheosadis » 23 Απρ 2008 01:00

Ευχαριστω για τις απαντησεις αν και μπερδευτικα λιγακι...Παντος δεν περιμενα μια ερωτηση να γινει λογοσ αντιδικιας :-?

Άβαταρ μέλους
Marinos Stergiou
Δημοσιεύσεις: 741
Εγγραφή: 12 Νοέμ 2006 14:49
Τοποθεσία: Τριτοκοσμική

Change content σε css division

Δημοσίευση από Marinos Stergiou » 23 Απρ 2008 10:05

Είδες..!
Από όλα τα παραπάνω κάτι θα σε βοηθήσει.
Αν ακόμη είσαι μπερδεμένος, τότε ξανακάνε ερώτηση.

Άβαταρ μέλους
agrippas
Script Master
Δημοσιεύσεις: 494
Εγγραφή: 18 Ιούλ 2002 14:52
Τοποθεσία: Υπερπέραν
Επικοινωνία:

Change content σε css division

Δημοσίευση από agrippas » 23 Απρ 2008 22:27

Η απλή λύση: Οι περισσότεροι σήμερα κάνουν αυτό που ζητάς με javascript. Στο onmouseover όρισε το innerHTML του κουτιού όπως θες και άλλαζέ το κατάλληλα.

Ακόμα πιο περίπλοκο τώρα: Για να είσαι προσβάσιμος από αυτούς που δεν έχουν javascript, θα πρέπει να κάνεις μια πιο σοφιστικέ προσέγγιση: Να φτιάξεις ένα κρυφό iframe και να το κάνεις display:none μέσα από τη javascript καθώς φορτώνει η σελίδα. Σ' αυτό θα φορτώνεις το περιεχόμενο και μετά θα το μεταφέρεις με javascript στο κουτί. Αν ο επισκέπτης δεν έχει javascript, θα βλέπει το iframe με το περιεχόμενο που θα αλλάζει.

Άβαταρ μέλους
otheosadis
Δημοσιεύσεις: 12
Εγγραφή: 10 Δεκ 2006 20:20

Change content σε css division

Δημοσίευση από otheosadis » 02 Μάιος 2008 23:48

Κατ'αρχην Χρονια Πολλα και ευχαριστω για τις απαντησεις.Ψαχνοντας μου δημιουργιθηκε μια απορια:Υπαρχει καποιος τροπος ετσι ωστε αναλογα με την εντολη που δινεται απο το μενου να ενεργοποιειται αλλο κομματι κωδικα;Δηλαδη κατι τυπου switch?

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Change content σε css division

Δημοσίευση από Basilakis » 03 Μάιος 2008 01:03

είναι αυτό ακριβώς που σου έγραψα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Change content σε css division

Δημοσίευση από cherouvim » 03 Μάιος 2008 09:40

Δες μήπως με jQuery tabs μπορείς να κάνεις τη δουλειά σου:
http://stilbuero.de/jquery/tabs_3/

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Change content σε css division

Δημοσίευση από Basilakis » 03 Μάιος 2008 13:20

Το συγκεκριμένο script έχει πολύ μεγάλο πρόβλημα. Προσπάθησα να το χρησιμοποιήσω στο site, αλλα απο ότι φένεται εξαντλούσαι το όριο του IE για το load της σελίδας.

hinata
Δημοσιεύσεις: 55
Εγγραφή: 06 Φεβ 2010 02:32

Change content σε css division

Δημοσίευση από hinata » 10 Φεβ 2010 20:32

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

λοιπόν,αυτο που θέλω είναι το εξής....

Παρακάτω παραθέτω τον κώδικα όλο για να δειτε τι ακριβώς είναι...
όπως θα δειτε υπάρχει ένα μαύρο background και στην μέση υπάρχει ένα κάθετο ορθογώνιο στο οποίο πανω πάνω υπαρχουν 2 πλαίσια στα οποία θα μπουν 2 flash, από κάτω μια μπάρα σε μάυρο, τέρμα κάτω η ίδια μπάρα πάλι και μετά το footer....επίσης στην μέση υπάρχουν 5 κουμπιά σε ένα άσπρο πλαίσιο τα οποία εγώ θέλω όταν πατάω το πρώτο να πηγαίνω στην test1.php, όταν πατάω το άλλο στο test2.php κτλ και να αλλάζει μόνο το άσπρο πλαίσιο και όλα αυτά (τα 5 κουμπιά) να αντικαθίστονται από τον κώδικα που θα υπάρχει κάθε φορα στην εκάστοτε σελίδα....μετά θέλω να κάνω το ίδιο και για την μπάρα...όταν πατάω κάποιο από αυτά εκεί μέσα να αλλάζει μόνο το από κάτω άπρο πλαίσιο!!!


Η index.php

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
<div id="header">
<table width="780" height="100" border="1"  cellpadding="50" cellspacing="0">
<tr>
<td> flash1  </td>
<td>  flash2  </td>
</tr>
</table>
 
</div>
<div id="navigation">
<ul id="menu">
<li><a href=" #">Αρχική</a></li>
<li><a href=" #">Προς Διάθεση</a></li>
<li><a href=" #">Forum</a></li>
<li><a href=" #">Ο Λογαριασμός μου</a></li>
<li><a href=" #">Αναζήτηση</a></li>
<li><a href=" #">Πληροφορίες</a></li>
</ul>
</div>
<div id="main_content">
   <?php include&#40;"includes/index.php"&#41;; ?>   
</div>
<div id="navigation">
<ul id="menu">
<li><a href=" #">Αρχική</a></li>
<li><a href=" #">Προς Διάθεση</a></li>
<li><a href=" #">Forum</a></li>
<li><a href=" #">Ο Λογαριασμός μου</a></li>
<li><a href=" #">Αναζήτηση</a></li>
<li><a href=" #">Πληροφορίες</a></li>
</ul>
</div>
<div id="footer">@@@@@@@@@@@</div>
</div>


</body>
</html>

Η index.css

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

body &#123;
margin&#58; 0;
background-color&#58;    #000000;
background-repeat&#58;repeat-x;
&#125;

#container &#123;
margin&#58; 0 auto;
padding&#58; 0px;
width&#58; 781px;
height&#58;800px;
background-color&#58;     #FFFFFF;
&#125;

#header &#123;

width&#58; 780px;
height&#58; 117px;
margin&#58; 0;
padding&#58; 0;
&#125;

#navigation &#123;
background-color&#58;    #000000;
width&#58; 780px;
height&#58; 31px;
padding-top&#58;9px;
&#125;

#main_content &#123;
background&#58;none;
width&#58; 741px;
height&#58;600px;
padding-top&#58;20px;
padding-bottom&#58;20px;
padding-left&#58;20px;
padding-right&#58;20px;
&#125;



#history &#123;
float&#58;left;
width&#58; 218px;
height&#58; 143px;
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#000000;
&#125;

#sale &#123;
float&#58;left;
width&#58; 218px;
height&#58; 143px;
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#000000;
&#125;

#build &#123;
float&#58;left;
width&#58; 218px;
height&#58; 143px;
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#000000;
&#125;

#maintanance &#123;
float&#58;left;
width&#58; 218px;
height&#58; 143px;
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#000000;
&#125;

#categories &#123;
float&#58;left;
width&#58; 218px;
height&#58; 143px;
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#000000;
&#125;

#footer &#123;
float&#58;left;
width&#58; 781px;
height&#58; 24px;
padding-top&#58;10px;
text-align&#58;center;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58; #FF00FF;
&#125;

#menu &#123;
        margin&#58; 0;
        padding&#58; 0;
        list-style-type&#58; none;
&#125;

#menu li &#123;
  display&#58; inline;
  padding-right&#58; 15px;
  padding-left&#58; 17px;
&#125;

#menu a&#58;link&#123;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
font-weight&#58;bold;
color&#58;#ffffff;
text-decoration&#58; none;
&#125;

#menu a&#58;hover &#123;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
font-weight&#58;bold;
color&#58;#0099FF;
text-decoration&#58;underline;
&#125;

#menu a&#58;visited &#123;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
font-weight&#58;bold;
color&#58;# FFFFCC;
text-decoration&#58; none;
&#125;

#menu a&#58;active &#123;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
font-weight&#58;bold;
color&#58;# 99CCFF;
text-decoration&#58; none;
&#125;


Η index.php που είναι μέσα στο φάκελο includes

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

<div id="history"><a href="includes/test.php">Ιστορία Ρολογιού</a></div>

<div id="sale">Είδη Ρολογιού</div>

<div id="build">Κατασκευή Ρολογιού</div>

<div id="maintanance">Συντήρηση Ρολογιού</div>

<div id="categories"> Κατηγορίες Ρολογιού</div>



Η test.php κάτι απλό

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

<table border="1">
<td>hello</td>
</table>



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

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Change content σε css division

Δημοσίευση από korgr » 10 Φεβ 2010 20:57

Για δες αν σου κανει αυτο...
Συνημμένα
test.zip
(4.45 KiB) Μεταφορτώθηκε 125 φορές

hinata
Δημοσιεύσεις: 55
Εγγραφή: 06 Φεβ 2010 02:32

Change content σε css division

Δημοσίευση από hinata » 11 Φεβ 2010 02:09

το έτρεξα και δεν μου εμφανίζει το header, το menu και το footer...μου δείχνει μόνο ένα μαυρο background και ενα άσπρο πλαίσιο στο κέντρο....εσένα σου τρέχει κανονικά???

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Change content σε css division

Δημοσίευση από korgr » 11 Φεβ 2010 14:30

Κανονικοτατα τρεχει!
Προσεξε να κρατησεις την δομη των καταλογων οπως τα εχω στο zip file
Πρεπει τα main αρχεια να ειναι στο root και να εχεις τα υπολοιπα στους αναλογους καταλογους (css & includes)

hinata
Δημοσιεύσεις: 55
Εγγραφή: 06 Φεβ 2010 02:32

Change content σε css division

Δημοσίευση από hinata » 11 Φεβ 2010 17:04

έτσι τα έχω....λοιπόν,έχω κατεβάσει το xampp, εχω βάλει running το apache, το mysql και το filezilla....στον C: υπάρχει ο φάκελος xampp και μέσα στο htdocs έχω φτιάξει έναν φάκελο www και τα τρέχω από τον firefox ως εξής: http://127.0.0.1/www/test/ ....Μήπως πρέπει να έχω κάνει και κάποια άλλη ρύθμιση;;;;
Τελευταία επεξεργασία από το μέλος hinata την 11 Φεβ 2010 17:08, έχει επεξεργασθεί 1 φορά συνολικά.

hinata
Δημοσιεύσεις: 55
Εγγραφή: 06 Φεβ 2010 02:32

Change content σε css division

Δημοσίευση από hinata » 11 Φεβ 2010 17:08

και με την easyphp να το τρέξω πάλι το ίδιο...το έβαλα μέσα στο φάκελο www που έχει από μόνη της η easyphp και έτρεξα αυτο http://127.0.0.1/test/ και πάλι το ίδιο δείχνει!!!

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Change content σε css division

Δημοσίευση από dimsis » 11 Φεβ 2010 17:22

Το συννημένο δείχνει και σε εμένα
Συνημμένα
black.JPG

hinata
Δημοσιεύσεις: 55
Εγγραφή: 06 Φεβ 2010 02:32

Change content σε css division

Δημοσίευση από hinata » 11 Φεβ 2010 17:27

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

Απάντηση

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

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

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