Υπογράμμιση με 100% width με CSS;

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

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

Απάντηση
Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Υπογράμμιση με 100% width με CSS;

Δημοσίευση από alkisg » 13 Φεβ 2008 19:52

Έχει κανένας καμιά καλή ιδέα για το πώς μπορεί να γίνει αυτό με HTML/CSS;

1. Να μια ερώτηση: ________________________________
______________________________________________
2. Να και άλλη μία που είναι πολύ μεγαλύτερη και πιάνει και
τη δεύτερη γραμμή: _____________________________
______________________________________________
______________________________________________

Δηλαδή <OL>,
κείμενο με 100% width με <BR> ή <P>...</P> για αλλαγές γραμμής,
και <U> ή <... style="border-bottom:1px solid">

Με tables γίνεται, αλλά είναι τελείως ανορθόδοξο,
με div style="float:left" γίνεται αλλά είναι πολύ φασαρία,
με <span style="display:compact;... δουλεύει μόνο σε firefox.

Καμιά καλύτερη ιδέα ώστε να μπορώ εύκολα να γράφω τέτοια κείμενα σε π.χ. dreamweaver (εννοείται με το κατάλληλο CSS);

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Υπογράμμιση με 100% width με CSS;

Δημοσίευση από patriot » 13 Φεβ 2008 20:20

Δηλ θες αυτό αν κατάλαβα καλά:
http://www.w3schools.com/tags/tag_dd.asp

(Με λίγη επεξεργασία βέβαια)
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Υπογράμμιση με 100% width με CSS;

Δημοσίευση από alkisg » 13 Φεβ 2008 20:57

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

κείμενο χωρίς υπόγράμμιση _________(υπογράμμιση χωρίς κείμενο μέχρι το τέλος της γραμμής)______

αλλά να είναι δίπλα στο κείμενο, όχι από κάτω όπως είναι στο dd.

Στο Word γίνεται εύκολα με στηλοθέτες:
γράφω το αρχικό κείμενο,
βάζω υπογράμμιση,
βάζω ένα στηλοθέτη στο δεξί άκρο της σελίδας,
πατάω tab και έτοιμος.

Με tables θα μπορούσε να γίνει έτσι:

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

<table style="width&#58;100%"><tr>
<td nowrap>Κείμενο χωρίς υπογράμμιση</td>
<td style="width&#58;100%; border-bottom&#58;1px solid">&nbsp;</td></tr>
<td colspan="2" style="width&#58;100%; border-bottom&#58;1px solid">&nbsp;</td>
</table>
Αλλά εκτός του ότι τα tables υποτίθεται ότι δεν ενδείκνυνται πλέον παρά μόνο για tabular data, υπάρχει και πρόβλημα αν το αρχικό κείμενο είναι μεγάλο και χρειάζεται να πάει και στην παρακάτω γραμμή...

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Υπογράμμιση με 100% width με CSS;

Δημοσίευση από patriot » 14 Φεβ 2008 01:59

Μήπως βοηθάει αυτό;

Css code

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

#box &#123;
	width&#58;auto; border&#58;#000 1px solid;
	background&#58;url&#40;"line.gif"&#41;;&#125;
#box .xoris-ypogrammisi &#123;
	width&#58;50%; display&#58;block; margin&#58;10px;
	border&#58;#000 1px solid;&#125;
Html code

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

<div id="box">
<span class="xoris-ypogrammisi"> Μη υπογραμμισμένο κείμενο</span>
</div>
Αν αλλάξεις τα properties σε αυτά που σε βολεύουν (width, background στο πρώτο και width, margin στο δεύτερο..... το border το έβαλα για να ξεχωρίζεις το κάθε κουτί, βγάλτο) τότε ίσως σου κάνει...

Ερώτηση: Γιατί δεν θέλεις float:center;
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Υπογράμμιση με 100% width με CSS;

Δημοσίευση από alkisg » 14 Φεβ 2008 07:28

Με το που μπαίνει display: block στο span, αναγκαστικά γίνεται κουτί και μπαίνει στην κάτω γραμμή, όχι από δίπλα όπως το θέλω.
Με display: compact είναι λίγο καλύτερα, μπαίνει δεξιά από το div και όχι από κάτω.
Όμως η υπογράμμιση (border-bottom του span) δεν φτάνει μέχρι το τέλος της γραμμής, και τα compact elements δεν δέχονται το width σε ποσοστό επί της τρέχουσας γραμμής.

Το float: center που θα βοηθήσει; Το κείμενο θέλω να είναι αριστερά και η υπογράμμιση μέχρι το τέλος της γραμμής...

Σπαστικό δεν είναι; Κάτι τόσο απλό στο Word να μη γίνεται με νορμάλ τρόπο σε HTML...

Επισυνάπτω ένα αρχείο Word για να φανεί καλύτερα τι θέλω.
Συνημμένα
Underlining.zip
(6.17 KiB) Μεταφορτώθηκε 275 φορές

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Υπογράμμιση με 100% width με CSS;

Δημοσίευση από patriot » 14 Φεβ 2008 14:51

Πρώτα από όλα τα τονίσω ότι float:center δεν υπάρχει. Το λάθος ήταν δικό μου γιατί εμένα μου αρέσει να βάζω τα πράγματα όμορφα και τακτοποιημένα, δηλαδή να μην περισσεύουν από δω και από κει τίποτα κομμάτια, άρα το αντικείμενο πηγαίνει πάντα στο κέντρο μέσα στο μυαλό μου. Εννοούσα float:δίπλα(δεξιά/αριστερά) αλλά όχι center (είναι ένα λάθος που το κάνω συχνά. :x )

Τώρα σε ότι αφορά τον τελευταίο κώδικα που σου έδωσα.
Σκέφτηκα ότι το span από inline element γίνεται αυτομάτως block level element αλλά το... ξέχασα!! :o :P (Ήταν μέσα στην νύστα μου γι' αυτό :oops: Σόρρυ.... :oops: ) Έβαλα και το background:line.gif και φαντάστηκα ένα αντίστοιχο αποτέλεσμα (που όντως αποτέλεσμα υπήρχε αλλά..... αποτυχημένο)

Έτσι ετοίμασα ένα νέο css κώδικα με βάση το float:left. Για την ακρίβεια δεν έχει σημασία αν είναι left ή right σημασία έχει ότι είναι float:δίπλα π.χ left. Εξάλλου το υπογραμισμένο κείμενο (που θα μπορούσε κάλλιστα να είναι κάποιο <p>) μπορείς να το βάλεις ανάποδα/αντίθετα (αν ήταν δηλ το float:δίπλα π.χ left μπορείς να το κάνεις right ή και το αντίθετο βέβαια)

Δες αυτόν τον κώδικα:
(Css code)

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

#box &#123;
	width&#58;auto; border&#58;#000 1px solid;&#125;

#box .xoris-ypogrammisi, #box .me-ypogrammisi, 
#box .blank-footer&#123;
	display&#58;block; margin&#58;10px;&#125;

#box .xoris-ypogrammisi &#123;
	width&#58;ΤΑΔΕ; float&#58;left; 
	background&#58;yellow;&#125;

#box .me-ypogrammisi &#123;
	width&#58;ΤΑΔΕ; float&#58;left;
	background&#58;orange;&#125;

#box .me-ypogrammisi P &#123;
	text-decoration&#58;underline;
	padding&#58;2px 30px; /* --------------- 2px = top kai bottom, 30px left kai right  --------------- */&#125; 

#box .blank-footer &#123;
	width&#58;auto; clear&#58;both;&#125;
(Html code)

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

<div id="box">
<span class="xoris-ypogrammisi">ΜΗ υπογραμισμένο κείμενο </span>
<span class="me-ypogrammisi"> <p>Υπογραμισμένο κείμενο </p> </span>
<span class="blank-footer">blank-footer</span>
</div>
Αυτά που πρέπει να προσέξεις είναι τα εξής:
1) Το border στο κουτί το έβαλα για να βλέπεις το #box. Μπορείς να το βγάλεις
2) Το width παίζει σημαντικό ρόλο. Αν είναι % ή px τότε το κουτάκι "me-ypogrammisi" μένει πάντα δίπλα από το "xoris-ypogrammisi" άσχετα με το μέγεθος του κειμένου. Αν είναι "auto" τότε πάει από κάτω κάτι που δεν είναι τόσο επιθυμιτό αν είναι σύνολο μιας σελίδας. Αλλά νομίζω πως αυτό θες. Από σένα εξαρτάται....
3) Το blank-footer το έβαλα για αισθητικό αποτέλεσμα λόγο ένος bug του moz. Αν θες βγάλτο.

Ελπίζω να μην ξέχασα τίποτα πάλι :lol: :hammer:
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

Υπογράμμιση με 100% width με CSS;

Δημοσίευση από skeftomilos » 14 Φεβ 2008 18:50

Ζαβολιές με background images επιτρέπονται;

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=windows-1253">
    <title>Questions</title>
    <style type="text/css">
      li &#123;
        font-family&#58; verdana;
        display&#58;block;
        padding-bottom&#58;20px;
        background&#58;white url&#40;lines.gif&#41; left bottom repeat-x;
        margin-bottom&#58;10px;
      &#125;
      li span &#123;
        border-bottom&#58;1px solid white;
      &#125;
    </style>
  </head>
  <body>
    <h1>Questions</h1>

    <ol>
      <li><span>Να μια ερώτηση&#58;</span></li>
      <li><span>Να και άλλη μία που είναι πολύ μεγαλύτερη και πιάνει και<br>τη δεύτερη γραμμή&#58;</span></li>
    </ol>
  </body>
</html>
Demo

lines.gif: Εικόνα

Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Υπογράμμιση με 100% width με CSS;

Δημοσίευση από alkisg » 14 Φεβ 2008 19:10

@patriot: Πάλι η υπογράμμιση δεν είναι δεξιά από το κείμενο, αλλά επίσης και ο ορισμός του width για κάθε ερώτηση θα είναι κουραστικός...

@skeftomilos: Σωστός, παιδευόμουνα με τα borders και ξέχασα τα background images.

Το κατάφερα όμως και χωρίς background image. Δυστυχώς παίζει μόνο σε IE, αν βρει κάποιος workaround για να παίζει σε Firefox θα του είμαι υπόχρεος! :)
Ευχαριστώ!

Demo: http://users.sch.gr/alkisg/freestuff/underline.htm

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http&#58;//www.w3.org/TR/html4/loose.dtd">
<html lang="el">
<head>
  <meta content="text/html; charset=ISO-8859-7" http-equiv="content-type">
  <title>Υπογράμμιση μέχρι το τέλος της γραμμής</title>
  <style type="text/css">
    ol.questions p &#123;
      border-bottom&#58; 1px solid black;
			padding&#58; 0px;
			margin&#58; 0px;
		&#125;
/* Αντί για να ορίσω στυλ χρησιμοποιώ το strong.
   Έτσι στον IE με contenteditable=true ή στον DreamWeaver κτλ μπορώ απλά
	 να πατάω ctrl+B για να ορίζω το στυλ χωρίς υπογράμμιση. */
		ol.questions p strong &#123;
			font-weight&#58; normal;
			border-bottom&#58; 1px solid white;
			padding&#58; 0px;
			margin&#58; 0px;
		&#125;
  </style>
</head>
<body contenteditable=true>
<h1>Δοκιμή υπογραμμισμένου κειμένου</h1>
<p>Το παρόν κείμενο έχει contenteditable=true, σε Internet Explorer και σε Firefox
μπορείτε να γράψετε μέσα στις παραγράφους.</p>
<ol class="questions">
<li><p><strong>Πρώτη ερώτηση&#58; </strong></p></li>
<li><p><strong>Δεύτερη ερώτηση. Αυτή είναι επίτηδες ιδιαίτερα μεγάλη ώστε να πιάνει
πολλές γραμμές, για να φανεί ότι όσες γραμμές και να γραφούν δεν υπάρχει υπογράμμιση
παρά μόνο στην τελευταία γραμμή&#58;</strong></p></li>
<li><p><strong>Τρίτη ερώτηση. Αυτή έχει πολλές υπογραμμισμένες γραμμές από κάτω&#58;
</strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</li>
</ol>
</body>
</html>

Απάντηση

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

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

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