Κάθετες γραμές στη σελίδα

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

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

Απάντηση
Άβαταρ μέλους
Easyrider
Δημοσιεύσεις: 385
Εγγραφή: 18 Μάιος 2005 21:26
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από Easyrider » 20 Μάιος 2005 20:59

Θελω να χωρισω σε 2 η 3 καθετα κοματια τη σελιδα που θα λειτουργουν
σαν διαχωριστες κειμενου, οχι frames, απλες καθετες γραμες για τεχτ κλπ.
υπαρχη κωδικας η χρησιμοποιης τα tables;

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από greekbytes » 20 Μάιος 2005 22:02

παράδειγμα...

με css:

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

<html>
<head>
<title>titlos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<style type="text/css">
      body &#123; background&#58;#000000; margin&#58;0px; padding&#58;0px &#125;
	  #col1 &#123; background&#58;#FFFFFF; position&#58;absolute; left&#58;0px; width&#58;200px; height&#58;100% &#125;
      #col2 &#123; background&#58;#F4F4F4; position&#58;absolute; left&#58;200px; width&#58;200px; height&#58;100% &#125;
	  #col3 &#123; background&#58;#999999; position&#58;absolute; left&#58;400px; width&#58;200px; height&#58;100% &#125;
      #col1 div, #col2 div, #col3 div &#123; padding&#58;10px &#125;
    </style>
</head>
<body>
<div id="col1"> 
  <div>keimeno</div>
</div>
<div id="col2"> 
  <div>keimeno</div>
</div>
<div id="col3"> 
  <div>keimeno</div>
</div>
</body>
</html>
με tables:

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

<html>
<head>
<title>titlos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7"></head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="600" height="100%" border="0" cellpadding="10" cellspacing="0">
  <tr>
    <td valign="top" bgcolor="#FFFFFF">keimeno</td>
    <td valign="top" bgcolor="#F4F4F4">keimeno</td>
    <td valign="top" bgcolor="#999999">keimeno</td>
  </tr>
</table>
</body>
</html>

Άβαταρ μέλους
Easyrider
Δημοσιεύσεις: 385
Εγγραφή: 18 Μάιος 2005 21:26
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από Easyrider » 20 Μάιος 2005 23:46

Φιλέ tsagane ευχαριστώ για τη βοηθεια και τα παραδείγματα,ψαχνω
συνκεκριμένα ορατές γραμές, που δίνουν και την εντύπωση
οτι διαχωρίζεται η ενοτητα κλπ. να ενα παραδειγμα
www.kikizas.net

Άβαταρ μέλους
xultimatex
Honorary Member
Δημοσιεύσεις: 2505
Εγγραφή: 26 Ιούλ 2003 13:02
Τοποθεσία: Ξάνθη
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από xultimatex » 21 Μάιος 2005 00:56

Λοιπόν, ουσιαστικά είναι η μεσαία στήλη που έχει τις γραμμές από δεξιά και από αριστερά. Είναι μέσα σε tags <div> </div> με κάποιες παραμέτρους που δείχνουν αυτές τις γραμμές.

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

<div style="border-left&#58; 1px solid #cccccc; border-right&#58; 1px solid #cccccc; padding-left&#58; 1em; padding-right&#58; 1em;">

		<h3>τελευταια νεα</h3>
		...

		</div>
:arrow: Αν προσπαθείς πολύ για να πετύχεις κάτι, ίσως το κάνεις με λάθος τρόπο...

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από greekbytes » 21 Μάιος 2005 01:27

συνδυάζοντας τα παραπάνω:

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

<html>
<head>
<title>titlos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<style type="text/css">
      body &#123; background&#58;#FFFFFF; margin&#58;0px; padding&#58;0px &#125;
     #col1 &#123; width&#58;200px; height&#58;100% &#125;
      #col2 &#123; border-left&#58; 1px solid #000000; border-right&#58; 1px solid #000000; height&#58;100% &#125;
     #col3 &#123; width&#58;200px; height&#58;100% &#125;
      #col1 div, #col2 div, #col3 div &#123; padding&#58;10px &#125;
    </style>
<body>
<table width="90%" height="100%" border="0" align="center" cellspacing="0">
  <tr>
    <td id="col1" valign="top"><div>links</div></td>
    <td id="col2" valign="top"><div>periexomeno <br>
      <br>
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
      blah blah blah blah blah blah blah blah blah blah </div></td>
    <td  id="col3" valign="top"><div>misc</div></td>
  </tr>
</table>
</body>
</html> 

Άβαταρ μέλους
xultimatex
Honorary Member
Δημοσιεύσεις: 2505
Εγγραφή: 26 Ιούλ 2003 13:02
Τοποθεσία: Ξάνθη
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από xultimatex » 21 Μάιος 2005 12:08

greekbytes, ξέρεις που μπορώ να βρω περισσότερες πληροφορίες σχετικά με τα css;
:arrow: Αν προσπαθείς πολύ για να πετύχεις κάτι, ίσως το κάνεις με λάθος τρόπο...

Mut3
Δημοσιεύσεις: 167
Εγγραφή: 03 Σεπ 2004 16:23
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από Mut3 » 21 Μάιος 2005 14:21

Εδω θα βρεις αρκετα καλα αρθρα για CSS και αλλα: www.alistapart.com
Ενα καλο αρθρο για αυτο που θες να κανεις: http://www.alistapart.com/articles/fauxcolumns/

Μενου με css: http://css.maxdesign.com.au/listamatic/index.htm

Γενικες πληροφοριες: http://www.w3schools.com/css/default.asp

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από greekbytes » 21 Μάιος 2005 15:45

αυτό θα σε βοηθήσει πάρα πολύ:
http://www.thenoodleincident.com/tutori ... boxes.html

Άβαταρ μέλους
Easyrider
Δημοσιεύσεις: 385
Εγγραφή: 18 Μάιος 2005 21:26
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από Easyrider » 22 Μάιος 2005 13:07

Οκ παίδια έβγαλα άκρη.
Λέω να ανοίξω και κανένα σχετικό βιβλίο.
Υπάρχει τίποτα καλό στα ελληνικά με τις βασικές αρχές HTML, CSS, κλπ;

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

Κάθετες γραμές στη σελίδα

Δημοσίευση από skeftomilos » 23 Μάιος 2005 07:30

Ένα freeware προγραμματάκι που με βοήθησε να μάθω τα CSS είναι το Balthisar Cascade. Αν και δε βοηθάει οπτικά, η συγκέντρωση των ιδιοτήτων και των τιμών τους το κάνει να μοιάζει με μικρή εύχρηστη βιβλιοθήκη.

Το tutorial του BrainJar είναι πολύ καλογραμμένο, ευκολοδιάβαστο και χωρίς διαφημίσεις, παρόλο που ισχυρίζεται ότι δεν είναι tutorial!
- Using Style Sheets (7 σελίδες)
- CSS Positioning (5 σελίδες)

Ένα ενδιαφέρον κείμενο για τους θεωρητικούς λόγους της υπεροχής των CSS:
- Design Rant (5 σελίδες)

Και μία συλλογή από three column layouts.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Easyrider
Δημοσιεύσεις: 385
Εγγραφή: 18 Μάιος 2005 21:26
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από Easyrider » 06 Μάιος 2011 19:51

Ευχαριστω φιλε skeftomilos .. !! αργησα λιγο να απαντησω αλλα καλιο αργα παρα ποτε!! :D
Δημήτρης

Άβαταρ μέλους
Jimaek
Δημοσιεύσεις: 608
Εγγραφή: 18 Ιαν 2010 22:54
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από Jimaek » 06 Μάιος 2011 20:09

Μόνο 6 χρόνια, σιγά το πράμα. :p

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

Κάθετες γραμές στη σελίδα

Δημοσίευση από skeftomilos » 07 Μάιος 2011 04:07

Παρακαλώ Easyrider. Το είχα σημειώσει στο ημερολόγιό μου. Αν δεν απαντούσες μέχρι το 2015 θα ήμουν υποχρεωμένος να σου κρατήσω μούτρα. :-)

Άβαταρ μέλους
Easyrider
Δημοσιεύσεις: 385
Εγγραφή: 18 Μάιος 2005 21:26
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάθετες γραμές στη σελίδα

Δημοσίευση από Easyrider » 07 Μάιος 2011 13:29

α ειχα καιρο ακομη.. ρε γαμωτι...!
Δημήτρης

Απάντηση

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

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

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