New here, I need help please

[ranger052]

Hi, How can I do what I am showing in the pic?

Please see attached Picture

This is the code of that article

<div class="wrapper services">
<h2>Free Transportation</h2>
<div class="wrapper border2"><img class="border img-indent" src="images/stories/photo.JPG" border="0" />
<p>We provide free transportation to and from our clinic campus. Our courteous, bilingual van drivers will pick you up at your home and bring you to Viera Medical Centers for any medical appointments you may have on our campus.</p>
<p>The Viera Medical Centers is committed to providing medical guidance for those in need. We are a team of qualified Doctors who are able to provide assistance for a wide variety of issues. Our Doctors provide medical services to couples, families, adults, adolescents and children. Our compassionate and understanding doctors take pride in paying close attention to each patient's needs. For more information call us at (305) 835-0438</p>
</div>
<div class="wrapper">
<div class="col-1">
<h2>Among others we accept the following insurance companies</h2>
<li>BCBS </li>
<li>Aetna </li>
<li>Cigna </li>
<li>Avmed </li>
<li>United Healthcare /Neighborhood </li>
<li>Medicare </li>
<li>Medicaid </li>
<li>Simply Healthcare Plan (Medicare) </li>
</div>
<div class="col-2">
<h2>We specialize in treating</h2>
<div class="wrapper"><img class="border img-indent" src="images/stories/page-2-img2.jpg" border="0" />
<div class="extra-box">
<li>Influenza </li>
<li>Serious Colds </li>
<li>Allergies </li>
<li>Chronic Pain </li>
<li>Infections </li>
<li>Ear, nose, and Throat Ailments </li>
<li>Hypertension/High Blood Pressure </li>
<li>Asthma </li>
<li>Sleeplessness </li>
<li>Heart Disease </li>
<li>Laboratory </li>
<li>Diagnostic Imaging</li>
</div>
<li>Massage Therapy</li>
<li> </li>
</div>
</div>
</div>
</div>


What do I need to change in order to make it looks the way I want?

[nasyitah08]

Please be more precise, i dont quite understand. Maybe you can rephrase it abit so i could try to help you out :)

[ranger052]

jeje Ok..

if you look at the pic that I posted you will see that there is a section that say this:
We specialize in treating, then below that there is a pic, next to the pic (Right) is this
•Influenza
•Serious Colds
•Allergies
•Chronic Pain
•Infections
•Ear, nose, and Throat Ailments
•Hypertension/High Blood Pressure
•Asthma
•Sleeplessness
•Heart Disease
•Laboratory
•Diagnostic Imaging
•Massage Therapy

But what I want, is to make it look next to each other instead of straigh down. I want it to look like this
•Influenza •Sleeplessness
•Heart Disease •Laboratory
•Massage Therapy •Allergies
•Asthma •Serious Colds
•Chronic Pain Hypertension/High Blood Pressure
•Infections •Ear, nose, and Throat Ailments


But with more space between them of course :)

[jumpstyler]

open it up in dreamweaver then go to the code and there be break line tags next to each word remove them and your done.
So example WORD1<br>
WORD2
If you remove the break line you will have WORD1 WORD 2

Hope that helps.

[SB65]

There are no <br/> tags in the OP's code....?

<li> is a block element by definition so will appear on a line by itself without any css applied. You haven't posted your css, but have a try applying something like:


.extra-box{width:400px}
.extra-box li{float:left}

Float will allow the li elements to sit side by side. The width is needed to constrain the elements.

Your li tags need to be wrapped in a ul, incidentally, otherwise you will struggle to get consistent display cross-browser.

[nasyitah08]

perhaps another alternative is that you can add a 2 divs? define an equal width for the both of them hence you can have it side by side.

<div class="left">
<ul>
<li>Influenza </li>
<li>Serious Colds </li>
<li>Allergies </li>
<li>Chronic Pain </li>
<li>Infections </li>
<li>Ear, nose, and Throat Ailments </li>
</ul>
</div>

<div class="right">
<ul>
<li>Hypertension/High Blood Pressure </li>
<li>Asthma </li>
<li>Sleeplessness </li>
<li>Heart Disease </li>
<li>Laboratory </li>
<li>Diagnostic Imaging</li>
<li>Massage Therapy</li>
</ul>

</div>

and define the classes .left and .right with a width and float:left

[SB65]

That would work but would give two columns, which isn't what the OP appears to want.

However, you could achieve the same two column effect without additional markup by applying a width to .extra-box li.

[ranger052]

perhaps another alternative is that you can add a 2 divs? define an equal width for the both of them hence you can have it side by side.

<div class="left">
<ul>
<li>Influenza </li>
<li>Serious Colds </li>
<li>Allergies </li>
<li>Chronic Pain </li>
<li>Infections </li>
<li>Ear, nose, and Throat Ailments </li>
</ul>
</div>

<div class="right">
<ul>
<li>Hypertension/High Blood Pressure </li>
<li>Asthma </li>
<li>Sleeplessness </li>
<li>Heart Disease </li>
<li>Laboratory </li>
<li>Diagnostic Imaging</li>
<li>Massage Therapy</li>
</ul>

</div>

and define the classes .left and .right with a width and float:left

Thanks, but How I define he classes??

Sorry this is my first website and I am completly lost with codes :/ I am a network Engeneer not a WebSite Developer :/

I am doing this website for my father's bes friend

[ranger052]

There are no <br/> tags in the OP's code....?

<li> is a block element by definition so will appear on a line by itself without any css applied. You haven't posted your css, but have a try applying something like:


.extra-box{width:400px}
.extra-box li{float:left}

Float will allow the li elements to sit side by side. The width is needed to constrain the elements.

Your li tags need to be wrapped in a ul, incidentally, otherwise you will struggle to get consistent display cross-browser.

How do I attach that to my current code?

[SB65]

Add it to your css file.

[gr33nman]

Add it to your css file.The '.extra-box' class will have to be scripted into the list using php or whatever scripting language is being used so the style will be recognized. Alternatively, you could take a more html5/css approach.

Instead of a new class, use:

#existing-nested .classes #and .divs #where .content .resides li {float:left;}

This will narrow down the resulting style to the list element within a specific region of your page without affecting the list style on other parts of your page. The only required changes with this method are in the stylesheet -- not your page scripting.

Edit: My Bad - the .extra-box class already exists, so your suggestion works. Sorry. Should have read closer.