Απορία με ύψος πίνακα σε HTML.

silve · 28 Μαΐου 2015

Γεια χαρά!

Έχω ένα περίεργο πρόβλημα σε html. Καταρχάς έχω σε PSD αρχείο ένα πρότυπο και θέλω να το υλοποιήσω με κώδικα html σε πίνακες. Όπως μπορείτε να δείτε, στην πρώτη εικόνα υπάρχει το σχέδιο και στην δεύτερη & τρίτη εικόνα είναι όπως εμφανίζεται με τον κώδικα που έχω γράψει.

Το πρόβλημα είναι στον κώδικα, ότι δηλαδή τα κείμενα δεν έχουν ακριβώς το ύψος των κελιών που ορίζω αλλά είναι λίγο πιο "μέσα", με αποτέλεσμα να μου μεγαλώνει όλο το ύψος του κελιού. Να σημειώσω εδώ ότι εννοείται οι γραμματοσειρές και το μέγεθος γραμματοσειρών είναι ίδιες με το πρότυπο.

Σας παραθέτω και το μέρος του κώδικα:

<html>
<head>
<title>Page Title</title>
</head>
<body>

<table cellspacing="0" cellpadding="0" border="0" width="100" height="181">
  <tr>

    <td>
      <table cellspacing="0" cellpadding="0" border="1" width="58" height="181" style="background: #ffffff;">
        <tr>
          <td></td>
        </tr>
      </table>
    </td>

    <td>
      <table cellspacing="0" cellpadding="0" border="1" style="background: #ffffff;" width="191" height="181">
        <tr>
          <td align="center" width="191" height="63"><img style="display: block;" src="images/icon_01.png" /></td>
        </tr>
        <tr>
          <td align="center" width="191" height="31"></td>
        </tr>
	<tr>
	  <td align="center" width="191" height="16" style="font-size:17px; color:#737373; font-family: verdana, arial;">Responsive</td>
	</tr>
	<tr>
	  <td align="center" width="191" height="24"></td>
	</tr>
	<tr>
          <td align="center" width="191" height="47" style="font-size:14px; color:#afafaf; font-family: verdana, arial;">
	    Lorem ipsum dolor sit </br>
	    amet consectetur elit sed </br>
	    do eiusmod tempor.
	  </td>
	</tr>
      </table>
    </td>

  </tr>
</table>

</body>
</html>

Αν παρατηρήσετε, το ύψος το δύο πινάκων είναι ίδιο. Αν κάνετε δηλαδή την πρόσθεση του ύψους των κελιών του δεύτερου πίνακα βγαίνει 181px. Παρ' όλα αυτά όμως το ύψος στο τελικό αποτέλεσμα διαφέρει.

Ευχαριστώ και ελπίζω να μη σας ζάλισα..

libereas · 28 Μαΐου 2015

Μέσα στα <td></td> αντί για height κάντο line-height και θα στρώσει

silve · 28 Μαΐου 2015

Να 'σαι καλά! Δούλεψε μια χαρά, ευχαριστώ!!!

silve · 29 Μαΐου 2015

Δυστυχώς δεν συμβαίνει το ίδιο σε έναν άλλον πίνακα. Ποια η διαφορά μεταξύ τους και δε μου το εμφανίζει σωστά με το line-height;

Ο κώδικας:

<table cellpadding="0" cellspacing="0" border="1" background="images/featured_image.jpg">
  <tr>
    <td align="center" width="700" height="400">
      <table cellpadding="0" cellspacing="0" border="1" width="700" height="400">
        <tr>
	  <td align="center" width="700" line-height="93"></td>
        </tr>
	<tr>
	  <td align="center" width="700" line-height="38" style="font-size:40px; color:#4e6063; font-family: tahoma, verdana, arial;">Simple Clean Modern</td>
	</tr>
	<tr>
	  <td align="center" width="700" line-height="43"></td>
	</tr>
	<tr>
	  <td align="center" width="700" line-height="51" style="font-size:15px; color:#ddedf5; font-family: verdana, arial;">
	    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </br>
	    eiusmod tempor incididunt ut labore et dolore magna aliqua. </br>
	    Minim veniam, quis nostrud exercitation.
	  </td>
	</tr>
	<tr>
	  <td align="center" width="700" line-height="64"></td>
	</tr>
	<tr>
	  <td align="center" width="700" line-height="51"><a href="#" style="font-weight: normal; font-style: normal; text-decoration: none;"><img src="images/featured_readmore.png" /></a></td>
	</tr>
	<tr>
	  <td align="center" width="700" line-height="60"></td>
	</tr>
      </table>
    </td>
  </tr>
</table>

Στην εικόνα είναι το αποτέλεσμα. Δηλαδή στα κενά <td></td> δε βγαίνει το συγκεκριμένο ύψος που ορίζω. Αν το βάλω σκέτο height βγαίνει εκτός ορίων...

Σύνδεση

Απορία με ύψος πίνακα σε HTML.

Προτεινόμενες αναρτήσεις

silve

libereas

silve

silve

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση