When you are writing HTML markup, the best strategy to use is the simplest HTML
possible that's still semantic enough to imply what you're displaying. However, you often need the help of a style sheet to get the basic visual
presentation you want.

The Places View is definitely one of those cases.
We're going to be displaying images to the left of the Place Descriptions and
we don't want to use tables.

So first, let's get those images into place.
Go to your images folder inside your root joomla installation and inside that create a
folder called places folder. Then put all the images related to your places in that folder.

So now we have all the images that our places records(from the database) are going to reference.
Next, what we want to do is add the style sheet that we're going to use.

Go into the media folder in your root installation of joomla and create a folder called com_noidacity and
inside that create a subfolder called css and then create a file called places.css and add the following code to it.

Here we just have some very basic CSS that's here to add a little bit
of visual styling to the HTML that we're going to output.
You'll also notice that since we have this css folder here, later on we're going
to add other assets that go with our component.
But for now, we're just filing this away under css so that we can
keep everything clean.

So once we have the CSS file in place, next we need to do some work on the view.

The first thing we want to do is we need to beef-up the model that is behind the places.
So at the moment, if you go to components>com_noidacity>models, you'll notice
that we don't have an places model at all.
So lets create a file called places in our model and add the following code.

So now this actually defines the display function and it gets the items from the
model and assigns them to the view.
So after saving that file, the only thing we have left to do is to update the layout.

So go into the tmpl folder open up default.php and replace its code with the following code.

So you'll notice just as before in some of the other views, we're cycling over
some records and building some URLs and just outputting the descriptions, and
then we also have a header that's being translated through JText.

But in addition to those two things, we also have the document object.
We're calling JFactory::getDocument and this returns a document object, and what
the document object allows us to do is it allows us to modify the HTML document
as a whole that's being generated as Joomla
goes through the components and the modules and the plug-ins that are
generating the page.
And as it's generating that page, it's collecting all the stylesheets, and
JavaScripts and other assets that we want to add to the head section of the HTML page.
So in this case, we want to add the places.css file that we put in the media
folder and we want to display that when this view gets called.
So using the addStyleSheet function of the document object we're able to add that CSS file.

JURI::base()

Notice also there is this JURI::base() function, that will always return the
base URL of Joomla
no matter where it's placed.
So even if you have it in a subfolder, or you have it in a different domain, you
don't have to worry, just call JURI::base() and you'll always get that base URL,
and then we have the path to our CSS file.
So we have media/com_noidacity/css/places.css.

So now that we have all this in place, let's go to the frontend and load the places view.
Let's go to index.php?option=com_noidacity&view=places, and now that
we've loaded that, we have the CSS that is moving all the images to the left,
while all the descriptions are on the right, and then the images are linked to
the places themselves.

So with the JDocument object it's possible to add declarations to the header of
the HTML document rather than adding the CSS in line.
This makes it possible for Joomla
to manage the list of assets and for us to keep our markup clean and
regardless of Joomla
is installed you can always get the base URL by calling JURI::base().