Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts

    New here, I need help please

    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?
    Attached Thumbnails Attached Thumbnails New here, I need help please-help.jpg  

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post
    Please be more precise, i dont quite understand. Maybe you can rephrase it abit so i could try to help you out

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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
    Last edited by ranger052; 03-02-2012 at 07:44 AM.

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Location
    In A House
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.
    Last edited by jumpstyler; 03-02-2012 at 08:06 AM. Reason: .

  • Users who have thanked jumpstyler for this post:

    ranger052 (03-02-2012)

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
    .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.

  • Users who have thanked SB65 for this post:

    ranger052 (03-02-2012)

  • #6
    New Coder
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post
    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

  • Users who have thanked nasyitah08 for this post:

    ranger052 (03-02-2012)

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • Users who have thanked SB65 for this post:

    ranger052 (03-02-2012)

  • #8
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nasyitah08 View Post
    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

  • #9
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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:

    Code:
    .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?

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Add it to your css file.

  • #11
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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:
    Code:
    #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.
    Last edited by gr33nman; 03-03-2012 at 01:53 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •