βοήθεια για tables...

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
mhtsos
Δημοσιεύσεις: 20
Εγγραφή: 22 Αύγ 2005 00:39

βοήθεια για tables...

Δημοσίευση από mhtsos » 20 Αύγ 2006 16:03

Here is the deal:
Χτες άρχισα να φτιάχνω μια σελίδα με στρογγυλεμένες γωνίες .Μετά από αρκετή ώρα κατέληξα στον εξής κώδικα:

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

<table border="0" align="center"bgcolor="#3366FF">
<tr>
	<td><img src="corner1.gif" width="50" height="50"></td>
	<td bgcolor="#3366FF" align="center" width="700"></td>
	<td><img src="corner2.gif" width="50" height="50"></td>
</tr>
<tr bgcolor="#3366FF" height="350">
	<td></td>
	<td></td>
	<td></td>
</tr>
<tr>
	<td><img src="corner3.gif" width="50" height="50"></td>
	<td bgcolor="#3366FF"></td>
	<td><img src="corner4.gif" width="50" height="50"></td>
</tr>
</table>
Χρησιμοποίησα 4 εικόνες για τις γωνίες
και στο υπόλοιπο απλά tables με bgcolor=με αυτό των φωτογραφιών ,αλλά φαίνεται να αντιμετωπίζω την εξής
technicality:

Εμφανίζεται κάτι σαν border γύρω απ' τις εικόνες που χαλάει το όλο σκηνικό.
Απ την άλλη αν αφαιρέσω το:bgcolor="#3366FF" attribute απ το table το "κάτι σαν border" εξαφανίζεται αλλά μαζί του παίρνει και αυτό που ένωνε τα td και tr.Άρα στην ουσία θέλω να εξαφανίσω το κενό μεταξύ των td και tr.

Α και τώρα που πήρα φόρα:
πως γίνεται να εμφανίζεται το 404 forbidden message όταν κάποιος προσπαθεί να δει τα περιεχόμενα απ τους φακέλους μου. Η εναλλακτικά να δείχνει ένα αρχείο παρόλο που το url λέει www.mysite.com/folder/

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

βοήθεια για tables...

Δημοσίευση από cherouvim » 20 Αύγ 2006 16:33

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

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
  window.onload=function&#40;&#41;&#123;
    Nifty&#40;"div#box","big"&#41;;
  &#125;
</script>

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

<div id="box">
  Look Ma, No Tables!
</div>
http://www.html.it/articoli/niftycube/index.html
http://www.html.it/articoli/niftycube/nifty1.html
Τελευταία επεξεργασία από το μέλος cherouvim την 20 Αύγ 2006 17:14, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

βοήθεια για tables...

Δημοσίευση από fafos » 20 Αύγ 2006 17:00

1on.. prepei na doseis sto table cellpadding="0" kai cellspacing="0"
2on.. To bgcolor tha to doseis se ola ta td ektos ton gonion pou tha exoun ta grafika kai oxi sto tr...
3on.. Tis eikones prepei na tis oriseis os background kai mesa sto td tous na valeis enan keno xarakthra gia sigoura apotelesmata ( &nbsp;) Ton idio keno xarakthra prepei na valeis kai sta td tou perigrammatos (oxi sto kentriko opou tha mpainei to thema sou):

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

<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
      <td background="corner1.gif" height="50" width="50">&nbsp;</td>
      <td bgcolor="#3366FF" align="center" width="700" height="50">&nbsp;</td>
      <td background="corner2.gif" height="50" width="50">&nbsp;</td>
    </tr>
<tr  height="350">
      <td width="50" bgcolor="#3366FF">&nbsp;</td>
      <td bgcolor="#3366FF">Kyrios thema</td>
      <td width="50" bgcolor="#3366FF">&nbsp;</td>
    </tr>
<tr>
      <td height="50" width="50" background="corner3.gif">&nbsp;</td>
      <td bgcolor="#3366FF" height="50"></td>
      <td height="50" width="50" background="corner4.gif">&nbsp;</td>
    </tr>
</table>

Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

βοήθεια για tables...

Δημοσίευση από skeftomilos » 20 Αύγ 2006 22:02

Συμφωνώ με τον Fafo ότι καλύτερα background αντί για foreground images. Αντί για το &nbsp; μέσα στα άδεια cells προτιμώ left-padding ίσο με το width, που εμποδίζει το οριζόντιο collapse του cell χωρίς να δημιουργεί προβλήματα με το ύψος.

Το Nifty script δε μου κέρδισε την εμπιστοσύνη. Ωραία ιδέα ωστόσο.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

mhtsos
Δημοσιεύσεις: 20
Εγγραφή: 22 Αύγ 2005 00:39

βοήθεια για tables...

Δημοσίευση από mhtsos » 21 Αύγ 2006 00:47

Thanks guys
Οι απαντήσεις σας έλυσαν όλες μου τις απορίες (άντε ρε και γω νόμιζα ότι τα cellpadding,cellspacing ήταν από default set ="0" όπως και στο border) δυστυχώς (η ευτυχώς) όμως δημιούργησαν μερικές ακόμη:

1)Γιατί είναι απαραίτητο το &nbsp; και τι διάφορα έχει απ' το: (keno)
2)Γιατί πρέπει να δώσω το bgcolor στα td και όχι στα tr
3)Υπάρχει κανένας τρόπος να χρησιμοποιήσω μια εικόνα και οι άλλες να είναι η πρώτη περιστρεμμένη κάτι σαν
<img src="corner.gif" rotate=90°CW>
4)Τελικά δεν τις απαντήσατε όλες:
πως γίνεται να εμφανίζεται το 404 forbidden message όταν κάποιος προσπαθεί να δει τα περιεχόμενα των φακέλων μου. Ή εναλλακτικά να δείχνει ένα αρχείο με το url όμως να λέει www.mysite.com/folder/

Y.G:μόλις προχτές έμαθα τι είναι τα tables και τις λειτουργίες τους όποτε ως ένα βαθμό δικαιολογούνται οι ηλίθιες ερωτήσεις που είχατε την ατυχία να διαβάσετε@#$%^&*()_

Άβαταρ μέλους
Hermeia
Honorary Member
Δημοσιεύσεις: 987
Εγγραφή: 02 Αύγ 2004 00:14
Τοποθεσία: Αθήνα
Επικοινωνία:

βοήθεια για tables...

Δημοσίευση από Hermeia » 21 Αύγ 2006 03:33

mhtsos έγραψε: 1)Γιατί είναι απαραίτητο το &nbsp; και τι διάφορα έχει απ' το: (keno)
2)Γιατί πρέπει να δώσω το bgcolor στα td και όχι στα tr
_
1. το &nbsp; σημαίνει ότι υποχρεωτικά θα υπάρχει ένας κενός χαρακτήρας μεσα στο κελι, δηλ. το κελι αποκλειεται να μηδενισει το πλάτος του
- ενω ενα απλό κενο διάστημα στον κωδικα.. μπορεί να εξαφανιστεί ακόμα και απο το πρόγραμμα που γράφεις τον κώδικα - και μην ξεχνας ότι στην html τα κενα διαστηματα που δεν ακολουθουνται απο τίποτα, δεν είναι σημαντικά, και σε αρκετους browsers χανονται (αρα το κελι μπορεί να είναι ή να θεωρείται κενό & μηδενίσει το πλάτος του)
- ενω αν τα πληκτρολογημένα κενα διαστήματα εχουν χαρακτηρες πριν και μετα τους, θα φροντισουν να μην "κολάνε" αυτοί.
Για παράδειγμα, αν θελεις να εμφανίσεις κενα διαστήματα πριν την αρχή μιας γραμμης χαρακτήρων σε html, βάζεις αντίστοιχο αριθμο &nbsp;, ενω αν βάλεις απλά κενα, δεν εμφανίζονται

2. το bgcolor στο td (κελι) σου επιτρέπει να αλλάξεις το χρώμα φόντου στα άλλα κελια, πχ. τα εσωτερικά του πινακα, που θα έχουν περιεχόμενα, να βαλεις αυτό το χρώμα μονο στα κελιά που το χρειάζονται (αλήθεια, τι κανεις στα κεντρικά κελιά της πρώτης και της τελευταίας γραμμής ?)
- ενω στο tr (γραμμη) - σου χρωματίζουν ολόκληρες τις γραμμες
Δοκιμη - κάνε ένα παράδειγμα πίνακα με cellspacing=10, με 3 γραμμες και 3 στήλες, και δινοντας χρώμα διαφορετικό από το φόντο του πίνακα στις γραμμες (td)
- επειτα αντέγραψέ το παρακάτω (μετα απο 2 κενες γραμμες) - κι άλλαξε το χρώμα να μπαινει στα πρώτα και τα τελευταία κελια κάθε γραμμής - εκτός από τα μεσαία κελιά. Δες τη διαφορά..

.. ενω η 4η ερώτησή σου καμια σχέση με πίνακες/tables, και νομιζω και καμια σχέση με html.


καλη τυχη
Hermeia the InfoSharer
Η Γνώση είναι Δύναμη
Εικόνα

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

βοήθεια για tables...

Δημοσίευση από cherouvim » 21 Αύγ 2006 07:50

Καλό πάντως είναι να μην χρησιμοποιούμε <table> για να κάνουμε ένα τέτοιο effect.

html

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

<div class="round">
  <h3>Header</h3>
  <p>content goes here...</p>
</div>
css

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

.round &#123;
	background&#58; #fed url&#40;bottom.gif&#41; no-repeat bottom center;
	width&#58; 400px;
&#125;

.round h3 &#123;
	background&#58; #cda url&#40;top.gif&#41; no-repeat top center;
	text-indent&#58; 0.5em;
	padding&#58; 0;
&#125;

.round p &#123;
	padding&#58; 0 0.3em 0.5em 0.3em;
&#125;
Live demo @ http://temp.cherouvim.com/forums/round-corners

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

βοήθεια για tables...

Δημοσίευση από skeftomilos » 21 Αύγ 2006 09:00

cherouvim έγραψε:Live demo @ http://temp.cherouvim.com/forums/round-corners
Ωραίο, αλλά για να γίνει stretchable και οριζόντια θα είναι πιο δύσκολο φαντάζομαι.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

βοήθεια για tables...

Δημοσίευση από cherouvim » 21 Αύγ 2006 09:19

Ναι, είναι τελείως διαφορετικό, και ένας τρόπος είναι να αρχίσεις να τυλίγεις το κουτί με wrappers. Το οποίο φυσικά είναι πολύ μικρή πρόοδος σε σχέση με τα tables με τα φρικτά spacer gifs κτλ.

Το τελικό πόρισμα για τα rounded corners από τον diaz: http://www.dustindiaz.com/enough-with-corners/

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

βοήθεια για tables...

Δημοσίευση από fafos » 21 Αύγ 2006 13:45

Apla monoxroma round corners ginontai me sketh css (xoris grafika):

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title><style type="text/css">
.spiffy&#123;
display&#58;block;
&#125;
.spiffy *&#123;
display&#58;block;
height&#58;1px;
overflow&#58;hidden;
background&#58;#0a67e6;
&#125;
.spiffy1&#123;
border-right&#58;1px solid #95bdf4;
padding-right&#58;1px;
margin-right&#58;3px;
border-left&#58;1px solid #95bdf4;
padding-left&#58;1px;
margin-left&#58;3px;
background&#58;#478dec;
&#125;
.spiffy2&#123;
border-right&#58;1px solid #e6effc;
border-left&#58;1px solid #e6effc;
padding&#58;0px 1px;
background&#58;#3883ea;
margin&#58;0px 1px;
&#125;
.spiffy3&#123;
border-right&#58;1px solid #3883ea;
border-left&#58;1px solid #3883ea;
margin&#58;0px 1px;
&#125;
.spiffy4&#123;
border-right&#58;1px solid #95bdf4;
border-left&#58;1px solid #95bdf4;
&#125;
.spiffy5&#123;
border-right&#58;1px solid #478dec;
border-left&#58;1px solid #478dec;
&#125;
.spiffy_content&#123;
padding&#58;0px 5px;
background&#58;#0a67e6;
&#125;
</style>
</head>
<body><div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b> <div class="spiffy_content">
<!-- Your Content Goes Here --><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>
</body>
</html>

Tora gia to 404 vazeis sto arxeio .htaccess pou einei ston root tou server sou (an den yparxei to dhmiourgeis) ton parakato kodika:

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

ErrorDocument 404 /error.htm
opou error.htm h selida pou tha phgainei otan den vriskei thn selida sou..
to idio mporeis na kaneis kai me ta alla lathi (401, 500 klp)
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

mhtsos
Δημοσιεύσεις: 20
Εγγραφή: 22 Αύγ 2005 00:39

βοήθεια για tables...

Δημοσίευση από mhtsos » 21 Αύγ 2006 16:00

Άμεσες,σωστές και πάνω απ όλα σωστά επεξηγημένες απαντήσεις .Τι να πω
keep it &#8593;(up)

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

βοήθεια για tables...

Δημοσίευση από cherouvim » 21 Αύγ 2006 19:19

Αυτό είναι το freestuff. Διαφήμισέ το! :)

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

βοήθεια για tables...

Δημοσίευση από skeftomilos » 21 Αύγ 2006 23:35

Fafos αυτη η τεχνική που παρουσίασες για καμπύλες χωρίς images, είναι αυτό ακριβώς που κάνει το Nifty script που αναφέρθηκε από τον Cherouvim. Μόνο που αυτό προσθέτει τα elements και τα styles με DOM manipulation.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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