Menu icon Foundation

Developer | Tallinn

My Posts


  • 4
    Replies
  • Image and Text in a row

    By Mikhail Svirkin

    imagetext

    Hello everyone! I need to place image and text in one row and text plus image in another row. IMAGE+TEXT TEXT+IMAGE IMAGE+TEXT ....... etc. Text should be around image. This is my codepen : http://codepen.io/mixa_ru/pen/GpMdGq How can I ... (continued)

    Last Reply by Mikhail Svirkin about 2 years ago




  • 4
    Replies
  • Grid layout question

    By Mikhail Svirkin

    align

    Hi everyone! I'm porting existing website to be responsive. Now I'm trying to find efficient way to aligh three information blocks in one line. Each block consists of image and text (please see a picture attached). Can anyone point me to the direc... (continued)

    Last Reply by Alex Scott almost 3 years ago


My Comments

Mikhail Svirkin commented on Mikhail Svirkin's post about 2 years

Here is a markup:

http://codepen.io/mixa_ru/pen/GpMdGq

<div class="row">
  <div class="small-12 columns">
    <div class="left_container">
      <img src="http://placeimg.com/370/246/nature">
    </div>
    <div class="right_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor
        Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum </p>
    </div>
  </div>
</div>

<div class="row">
  <div class="small-12 columns">
    <div class="left_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor
        Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum </p>
    </div>
    <div class="right_container">
      <img src="http://placeimg.com/370/246/nature">
    </div>
  </div>
</div>

I need text to be around images when one image at the left side and another image at the right side.

Mikhail Svirkin commented on Mikhail Svirkin's post about 2 years

Eli Tung, do you mean something like this:

<div class="row">
  <div class="large-6 columns"> TEXT</div>
  <div class="large-6 columns">IMAGE</div>
</div>

<div class="row">
  <div class="large-6 columns">IMAGE</div>
  <div class="large-6 columns">TEXT</div>
</div>

?

In this case I wiil not have text around image.
There will be 2 separate columns : one for text and other for image.

This is not a solution for my task.

Mikhail Svirkin commented on Mikhail Svirkin's post over 2 years

Rafi, thanks for your quick reply!

It is what I'm looking for.

Mikhail Svirkin commented on qwerty66's post over 2 years

Hi!

I have the same issue with tabs.
This is my mark-up for them (taken from documentation):

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

I also attach Foundation library in the end of the document :

<script>
            $(document).foundation();
        </script>

I use Foundation 5.5.1, Essential.
Shall I use extra javascript to make tabs work?

Thank you!

Mikhail Svirkin commented on Mikhail Svirkin's post almost 3 years

Darek, thanks for your quick reply!

I'll give it a try to use two columns within one row in header.

For structure purpose may I use nested rows/columns in there, what do you think?
Or floats would be better? Or relative positioning within these columns?

Thanks in advance!

Mikhail Svirkin commented on Mikhail Svirkin's post almost 3 years

dims, thanks for your answer!

It works but also I need a logo image to be visible on large screens and not to be visible on medium and small screens.

So I have to add tag in markup (now images are background CSS style).

Probably it can be like that:

 <div class="large-4 medium-12 small-12 columns">
            <blockquote>
                <div class="content">
<IMG class="???" />
                    <p>.... LONG paragraph .........</p>
                    <cite>Grand Mööbli Studio OÜ</cite>
                </div>
            </blockquote>
        </div>

So the question is: how can I get rid of background property to show the image(s) on big sreens and hide the image(s) on small and medium?

Mikhail Svirkin commented on Tyler Siron's post almost 3 years

Hi!

In your very first HTML block there is no element with id=txtDestinationCity.
But in your JQ part autocomplete attached to element with id=txtDestinationCity.

May that is a problem?

P.S. I see in the very bottom part txtDestinationCity is mentioned but I do not know how that's all connected together.

Posts Followed



  • 4
    Replies
  • Image and Text in a row

    By Mikhail Svirkin

    imagetext

    Hello everyone! I need to place image and text in one row and text plus image in another row. IMAGE+TEXT TEXT+IMAGE IMAGE+TEXT ....... etc. Text should be around image. This is my codepen : http://codepen.io/mixa_ru/pen/GpMdGq How can I ... (continued)

    Last Reply by Mikhail Svirkin about 2 years ago





Following

    No Content

Followers

My Posts




My Comments

You commented on Mikhail Svirkin's post about 2 years

Here is a markup:

http://codepen.io/mixa_ru/pen/GpMdGq

<div class="row">
  <div class="small-12 columns">
    <div class="left_container">
      <img src="http://placeimg.com/370/246/nature">
    </div>
    <div class="right_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor
        Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum </p>
    </div>
  </div>
</div>

<div class="row">
  <div class="small-12 columns">
    <div class="left_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor
        Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum </p>
    </div>
    <div class="right_container">
      <img src="http://placeimg.com/370/246/nature">
    </div>
  </div>
</div>

I need text to be around images when one image at the left side and another image at the right side.

You commented on Mikhail Svirkin's post about 2 years

Eli Tung, do you mean something like this:

<div class="row">
  <div class="large-6 columns"> TEXT</div>
  <div class="large-6 columns">IMAGE</div>
</div>

<div class="row">
  <div class="large-6 columns">IMAGE</div>
  <div class="large-6 columns">TEXT</div>
</div>

?

In this case I wiil not have text around image.
There will be 2 separate columns : one for text and other for image.

This is not a solution for my task.

You commented on Mikhail Svirkin's post over 2 years

Rafi, thanks for your quick reply!

It is what I'm looking for.

You commented on qwerty66's post over 2 years

Hi!

I have the same issue with tabs.
This is my mark-up for them (taken from documentation):

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

I also attach Foundation library in the end of the document :

<script>
            $(document).foundation();
        </script>

I use Foundation 5.5.1, Essential.
Shall I use extra javascript to make tabs work?

Thank you!

You commented on Mikhail Svirkin's post almost 3 years

Darek, thanks for your quick reply!

I'll give it a try to use two columns within one row in header.

For structure purpose may I use nested rows/columns in there, what do you think?
Or floats would be better? Or relative positioning within these columns?

Thanks in advance!

You commented on Mikhail Svirkin's post almost 3 years

dims, thanks for your answer!

It works but also I need a logo image to be visible on large screens and not to be visible on medium and small screens.

So I have to add tag in markup (now images are background CSS style).

Probably it can be like that:

 <div class="large-4 medium-12 small-12 columns">
            <blockquote>
                <div class="content">
<IMG class="???" />
                    <p>.... LONG paragraph .........</p>
                    <cite>Grand Mööbli Studio OÜ</cite>
                </div>
            </blockquote>
        </div>

So the question is: how can I get rid of background property to show the image(s) on big sreens and hide the image(s) on small and medium?

You commented on Tyler Siron's post almost 3 years

Hi!

In your very first HTML block there is no element with id=txtDestinationCity.
But in your JQ part autocomplete attached to element with id=txtDestinationCity.

May that is a problem?

P.S. I see in the very bottom part txtDestinationCity is mentioned but I do not know how that's all connected together.

Posts Followed

Following

  • No Content

Followers