6 replies [Last post]
adrian29630
adrian29630's picture
Offline
newbie
Dominican Republic
Last seen: 4 years 8 weeks ago
Dominican Republic
Timezone: GMT-4
Joined: 2015-09-29
Posts: 3
Points: 4

I am trying to change a vertical list into a horizontal one which i have been able to do but unable to add spacing so that the inline list has appropriate spacing. The current CSS is as follows:-

<div class="propinfo">
            	<p></p>
                <ul class="marB0">
					<li class="row beds"><span class="muted left">Bed</span><span class="right">1</span>::after</li><li class="row baths"><span class="muted left">Baths</span><span class="right">1</span>::after</li><li class="row sqft"><span class="muted left"> m<sup>2</sup></span><span class="right">60</span>::after</li></ul>
            </div> 

I can covert this to a horizontal list by adding .propinfo ul li { display: inline-block; } but the words and numbers are then all together i.e. Bed1Baths1m260 for example.

I need to have them read Bed 1 Bath 1 M2 60 I also want to make the word Bed into Beds and possibly change the color of the words Beds/Baths/M2 so they stand out from the following numbers.

Some advice greatly appreciated. You can view the current layout on the website holdensothebysrealty-rentals.com where there is a list of featured properties.

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 8 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Word-spacing

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <title>
      Test document
    </title>
    <style type="text/css">
/*<![CDATA[*/
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;
        padding: 1.5em;}
 
    p {
        font-size: 1em;}
 
    ul {
        padding: 0;
	word-spacing: 1.5em;}
 
    li {
	display: inline-block;
	word-spacing: normal;}
 
    /*]]>*/
    </style>
  </head>
  <body>
    <ul>
      <li>
        Bed:&nbsp;1
      </li>
 
      <li>
        Baths:&nbsp;1
      </li>
 
      <li>
        m<sup>2</sup>:&nbsp;60
      </li>
    </ul>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

adrian29630
adrian29630's picture
Offline
newbie
Dominican Republic
Last seen: 4 years 8 weeks ago
Dominican Republic
Timezone: GMT-4
Joined: 2015-09-29
Posts: 3
Points: 4

Word Spacing

Hi Gary

Thank you for the above but unfortunately it did not change the layout. The words and following numbers were all together as before.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 8 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Actually, it does

Since I tested the solution, and it worked, I can only assume you applied the instructions differently from what I have.

Show us the actual html and css as you used it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

adrian29630
adrian29630's picture
Offline
newbie
Dominican Republic
Last seen: 4 years 8 weeks ago
Dominican Republic
Timezone: GMT-4
Joined: 2015-09-29
Posts: 3
Points: 4

Word Spacing

Hi Gary

I just copied all the above into the section where personalized CSS can be added. Maybe that was not the correct thing to do?

It changed the format from a vertical to a horizontal list but still left the words and numbers all joined together. Also the numbers and M2 differ, dependent on the individual property being displayed, with that information being pulled from the appropriate listing form so I was not clear whether including these in the revision was correct. The original code does not include these as every one will be different.

Thanks again for replying

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 7 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

Just you can add the padding

Just you can add the padding value for each li

IndioBailBonds
IndioBailBonds's picture
Offline
newbie
Last seen: 3 years 50 weeks ago
Timezone: GMT-8
Joined: 2015-11-30
Posts: 3
Points: 3

You have to set padding for

You have to set padding for each li with in ul.