Hoe blanco-regels tussen 2 zinnen verwijderen ?

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Hoe kan ik onderstaande code wijzigen zodat de 2 regels normaal onder elkaar staan zonder tussenruimte ?

Code: 
<tr>
<td colspan="7" style="line-height: 400%; text-align: center; vertical-align: text-bottom; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; color: black;">
Deze zin wordt afgedrukt in zwart in het midden van het td-vak 
<p style="vertical-align: text-top; font-weight: normal; font-size: 11px; color: green;"> 
Deze zin in groene kleur dient te worden afgedrukt onmiddellijk onder bovenstaande zonder tussenregels
	<%if date()<cdate("01/05/2020") then%>
		(pas op 1 mei)
	<%end if%>					
</td>
</tr>

Dank voor tips om de tussenregels te verwijderen.
 
Het is nu zo: zie screenshot

Normaal is een </br> om de volgende regel te maken, zet je 2x </br> achter de zin, krijg je dus 2 witte regels.

De code zie ik niet in je html, maar omdat het lettertype anders is qua grootte, krijg je nooit de regels onder elkaar.
Wel als je de lettertype even groot maakt.

Code: 
<tr>
<td> Deze zin wordt afgedrukt in zwart in het midden van het td-vak</br>
Deze zin in groene kleur dient te worden afgedrukt onmiddellijk onder bovenstaande zonder tussenregels
</td>
</tr>
wordt dus zo,zie screenshot
 

Bijlagen

  • steun56.jpg
    steun56.jpg
    18,8 KB · Weergaven: 48
  • steun57.jpg
    steun57.jpg
    22,7 KB · Weergaven: 52
Laatst bewerkt:
femke98 zei:
Het is nu zo: zie screenshot

Normaal is een </br> om de volgende regel te maken, zet je 2x </br> achter de zin, krijg je dus 2 witte regels.

De code zie ik niet in je html, maar omdat het lettertype anders is qua grootte, krijg je nooit de regels onder elkaar.
Wel als je de lettertype even groot maakt.

Code: 
<tr>
<td> Deze zin wordt afgedrukt in zwart in het midden van het td-vak</br>
Deze zin in groene kleur dient te worden afgedrukt onmiddellijk onder bovenstaande zonder tussenregels
</td>
</tr>
wordt dus zo,zie screenshot
Klik om te vergroten...

ps. leesvoer https://www.handleidinghtml.nl/html/structureren-tekst/structureren-tekst02.html
 
Een html element bestaat uit een begin- en eindtag én alles wat ertussen staat.
Als er niets tussen kan staan, bijvoorbeeld bij een <br> of <img src="foto.jpg"> dan gebruik je een eindttag " /", bijv. <br />
Deze " /" is alléén verplicht als bovenaan in de html een XHTML declaratie staat. Zo niet, dan mag je de "/" overal weglaten.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD [B]XHTML[/B] ..... >

Zelfs als er bovenaan een XHTML declaratie staat mag je de " /" weglaten omdat browsers hiervoor slim genoeg zijn. Bij een W3C validatie krijg je logisch wel een melding hierover als het een XHTML document is.

Over je vraag.
De line-height: 400%; zorgt ervoor dat bij elke regel de witruimte 3 keer zo groot is als de tekst. Daarnaast ben je een eindtag </p> vergeten. Bij het vergeten van een eindtag bij een element met inoud, zoals <p>Tekst</p> , krijg je een onvoorspelbare layout.
Code: 
<tr>
<td colspan="7" style="line-height: 1; text-align: center; vertical-align: text-bottom; font-family: Arial, Helvetica, sans-serif;">
   <p style="margin: 0; font-weight: bold; font-size: 13px; color: black;">
      Deze zin wordt afgedrukt in zwart in het midden van het td-vak
   </p>
   <p style="margin: 0; font-weight: normal; font-size: 11px; color: green;">
      Deze zin in groene kleur dient te worden afgedrukt onmiddellijk onder bovenstaande zonder tussenregels
      <%if date()<cdate("01/05/2020") then%>
         (pas op 1 mei)
      <%end if%>
   </p>
</td>
</tr>

line-height: 1; haalt de witruimte van de regelhoogte weg.
margin: 0; haalt de witte marge van een <p> weg.
 
Laatst bewerkt:
Of de begintag <p> weglaten, dat kan natuurlijk ook :p dan is de eindtag </p> niet nodig
 
Inderdaad.
Maar toch een vraag nu ik je spreek....

Dat een groter lettertype de witregel niet kleiner kan maken, is toch ook zo?
Je krijgt dan toch een raar effect als het wel zou kunnen? Want dan zit het tegen elkaar aangeplakt.
Of zie ik het verkeerd.
 
Dat een groter lettertype de witregel niet kleiner kan maken, is toch ook zo?
Klik om te vergroten...
Klopt :)

Bij een line-height komt er boven en onder een witruimte, line-height: 3 geeft een totale hoogte van 3 keer de teksthoogte.
Code: 
table {
    box-sizing: border-box;
    border-spacing: 0;
    border-collapse: collapse;
}
thead, tbody, tr {
    width: inherit;
}
th, td {
    box-sizing: border-box;
    padding: 0;
    [B]line-height[/B]: 3;
    border: thin dotted red;
}

table-lineheight.jpg

Vertical align werkt alleen bij inline elementen zoals <a> en <span> of als je andere elementen display: inline geeft.
Code: 
table span {
    vertical-align: bottom;
}

span-vertical-align.jpg
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan