Menu icon Foundation

Coder

My Posts

  • 4
    Replies
  • Grid or Nested Grid?

    By Robocop

    Foundation 5cssgrid

    Following Problem, I have to create a navigation with 5 boxes (equal width) and at the end of the row 1 smaller Box (see picture below). My solution approach with 6 boxes (equal width) and editing the padding of each Box is not promising.. Can someon... (continued)

    Last Reply by Robocop about 5 years ago




My Comments

Robocop commented on Robocop's post about 5 years

A button group solution sounds great.
I have already implemented this and it looks great as long as there are only buttons.

But the problem is a litte bit tricky:

At the end i need 5 select - elements with a simple dropdown-list and on the end of the row a small button.

My current standing:

<div class="row navigation">
    <form>
        <div class="row">
            <ul class="button-group [radius round]">
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li style="width: 50px;"><a href="#" class="button win">B</a></li>
            </ul>

        </div>
    </form>
</div>

Robocop commented on Robocop's post over 5 years

Unfortunately I have not found a solution.
Any help?

Robocop commented on Dan Beck's post over 5 years

Same problem, where do you add foundation to the path?

Cheers
Rob

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on Robocop's post about 5 years

A button group solution sounds great.
I have already implemented this and it looks great as long as there are only buttons.

But the problem is a litte bit tricky:

At the end i need 5 select - elements with a simple dropdown-list and on the end of the row a small button.

My current standing:

<div class="row navigation">
    <form>
        <div class="row">
            <ul class="button-group [radius round]">
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li style="width: 50px;"><a href="#" class="button win">B</a></li>
            </ul>

        </div>
    </form>
</div>

You commented on Robocop's post over 5 years

Unfortunately I have not found a solution.
Any help?

You commented on Dan Beck's post over 5 years

Same problem, where do you add foundation to the path?

Cheers
Rob

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content