0
Welcome Guest! Login
0 items Join Now

rt-floatleft and clear

Last Post
Search Topic

  • rt-floatleft and clear

    Posted 12 years 5 months ago
    • I've tried to add a "Contact Details" into one of my projects footers, just like in many of the RT Demo's. It looks great, but when I try to add an extra line to the address, it doesn't float around the image like the rest of the address does. It is as if I have issued a "clear" class to the last line or something.

      The relevant code is this:
       
<img class="rt-floatleft" alt="image" src="images/rocketlauncher/frontpage/general/fp-footer-icon2.png" />
<em class="bold">
  <strong>Jetstream Custom Auto</strong><br />
</em>
<em class="bold nobold">
  #8 2042 Mills Rd West<br />
  Sidney, British Columbia<br />
  V8L 5X4<br />
  Canada
</em>
 

      A quick screenshot demonstrating the problem: (Note the "Canada" in the address is on the far left instead of inline with the rest of the address)
      This image is hidden for guests.
      Please log in or register to see it.


      If someone can help me figure out how to fix this or why it is happening, that would be great! Thanks =)

      (In the meantime I simply truncate them onto less lines)
    • - Devi, http://www.deviscomputing.com
    #900846
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    • Hi there,

      Which template? Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Can you please post a link to the problem and we will do our best to assist you.

      Thanks :)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #900847

  • Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    • Yes of course! My bad David. I'm using the Kirigami template (version 1.5 w/ gantry 4.14 i believe) on top of a Joomla 2.5.8 install.

      It took me a little bit to get the site nested up online to be able to provide a link to it. I was just building the thing on my little Linux Mint LAMP stack. Here you go:

      http://www.deviscomputing.com/project/jetstream/

      The module in question is in the lower left at the moment.
    • - Devi, http://www.deviscomputing.com
    #900879

  • Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    • Ok! A week later or so and I got fed up with this problem still. It was worse when viewed on Netbooks and the like. So...! What I did was separate the icons and the contact details itself into right and left div containers. The below code is how I got around the problem of text flowing around my icons when I did not want them to:
      <div style="width:100%">
    <div style="width:15%;float:left;">
       <img alt="Phone-Icon" src="images/rocketlauncher/frontpage/general/fp-footer-icon1.png" />
    </div>
    <div style="width:85%;float:left;margin-top:4px">
       <a href="#"><em class="bold">1-250-654-0135</em></a>
    </div>
</div>
<br><br>
<div style="width:100%">
    <div style="width:15%;float:left;">
       <img alt="Address-Icon" src="images/rocketlauncher/frontpage/general/fp-footer-icon2.png" />
    </div>
    <div style="width:85%;float:left;margin-top:4px">
       <em class="bold">
           <strong>Jetstream Custom Auto</strong><br />
       </em>
       <em class="bold nobold">
           #8 2042 Mills Rd West<br />
           Sidney, British Columbia<br />
           V8L 5X4, Canada
       </em>
    </div>
</div>
<br><br>
<div style="width:100%">
    <div style="width:15%;float:left;">
       <img alt="Email-Icon" src="images/rocketlauncher/frontpage/general/fp-footer-icon3.png" />
    </div>
    <div style="width:85%;float:left;margin-top:4px">
       <em class="bold" style="font-size:13px">jetstreamauto@hotmail.com</em>
    </div>
</div>

      Now everything is nice and pretty no matter where I am viewing it!

      However, if anyone has any input on how I might optimize the above code, I would probably learn a lot from it!

      Thanks again guys.
    • - Devi, http://www.deviscomputing.com
    #906128

  • Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    #906144

  • Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    • Well the link to the live site is at: http://www.deviscomputing.com/project/jetstream/ .

      By the way, I took a look at your companies site just out of curiosity. It looks amazing! I love some of the modules you have, like the quick contact. And especially how well you integrated everything together.

      There is quite a bit on the main page, but it holds together well. Despite being filled to the brim with functionality, it actually remains quite clean looking!

      Anyway, Originally that code was just <img> links with text floating beside them using CSS. And that kind of fell apart on netbooks and the like. It wrapped around the icons earlier than I wanted sometimes and looked really unclean.

      Perhaps if you gave me an example of what you are thinking about, I might understand better.
    • - Devi, http://www.deviscomputing.com
    #906180

  • Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    • Thank you for the compliments. It's a site you either love or hate it seems based on feedback.

      I can't really tell what was the problem originally as you've altered the code since then and it seems to be doing what you need it to do.

      I'm guessing the original problem is that the icon didn't extend far enough down and text then wrapped underneath it. The fix would be to float it left, possibly add a display:block and then force a clear left on the rest of the text. I'd need to see the original code to know for sure tho.

      To make life simple in future, you could always use tables! :)
    • CMYKreative : Graphic Design , Web Design , Printing , Banner Ads , Branding and more.
    #906185

  • Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    • Hehe, yeah I find that's the way with dark themes. There are people who are not so fond of them. I myself find very light coloured desktops or websites rather hard on the eyes.

      Ah yes.. the original code. Well I got it almost directly from Rocket Theme's Kirigami template:
      <img class="rt-floatleft" alt="image" src="images/rocketlauncher/frontpage/general/fp-footer-icon1.png" />
<a href="#"><em class="bold">+1 (555) 555-555-5555</em></a><br />
<a href="#"><em class="bold nobold">+1 (555) 555-555-5556</em></a>
 
<div class="clear largemarginbottom">&nbsp;</div>
 
<img class="rt-floatleft" alt="image" src="images/rocketlauncher/frontpage/general/fp-footer-icon2.png" />
<em class="bold">
  <strong>Kirigami Template LLC</strong><br />
</em>
<em class="bold nobold">
  123 Joomla! Boulevard<br />
  Seattle, WA 00000<br />
  United States of America
</em>
 
<div class="clear largemarginbottom">&nbsp;</div>
 
<img class="rt-floatleft" alt="image" src="images/rocketlauncher/frontpage/general/fp-footer-icon3.png" />
<em class="bold">noreply@domain.com</em>

      It seemed to work fine, right up until I had to add an extra line to the address section of it. That is when it began to flow around the icon. And yes, I believe you are totally correct. If I had a way to increase the height of the icon in some way without stretching it. Putting it in some kind of container, I bet that would have worked.

      I tried a few different methods of achieving that actually. You intrigue me with your "display:block" comment. That is NOT something I tried. I'll have to investigate that further, just to try and learn more kind of thing.

      And yeah.. tables.. I used to use tables a long time ago, but different peices of documentation I have read since have recommended against their use. It's for that reason I have been trying to use other methods of having one element beside another.

      With recent RT templates actually, I have become more and more obsessed with making my websites responsive. I love how responsive sites look on my phone, and how they can still look great on a desktop. From what I can tell, tables are not very responsive either.

      P.s. Would you mind if sent you a PM? Now that I have finished with my clients projects, I am eager to get started on some of my own projects. I'd like some content created for them, and was interested in maybe asking you a few questions in the form of an interview to make a blog post out of. I'd keep it relatively short, and would provide a link to your site as one of my inspirations.
    • - Devi, http://www.deviscomputing.com
    #906198
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    • Hi there,

      In your code you could simply add a style attribute to the image...
      <img style="margin-bottom:15px" class="rt-floatleft" alt="image" src="/images/rocketlauncher/frontpage/general/fp-footer-icon2.png">
      This would only affect that item. The extra 15px margin at the bottom will stop the extra line of text from wrapping.

      Hope this helps 8)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #906201

  • Re: rt-floatleft and clear

    Posted 12 years 5 months ago
    • Wow! That is INCREDIBLY simple!

      I'll have to try that. I would like to do away with all those complicated <div> tags if I could. (I just like less code, not more).

      Thanks David. I'll reply here with my results in a bit and mark the thread as solved if it works.

      Cheers!!

      - Devi
    • - Devi, http://www.deviscomputing.com
    #906202

Time to create page: 0.052 seconds