LinuxQuestions.org
Latest LQ Deal: Latest LQ Deals
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 06-28-2020, 12:26 PM   #1
Turbocapitalist
Senior Member
 
Registered: Apr 2005
Distribution: Linux Mint, Devuan, OpenBSD
Posts: 4,845
Blog Entries: 3

Rep: Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403
CSS menu not rendering properly when wrapping


I have a menu which renders the way it is supposed to as long as it does not need to wrap. See the two images below. The first one is correct. The second one is how it looks when it is looking wrong.

Is there a way that will get the nice effect as shown in the first picture even when wrapping? Or another way to get a similar visual effect would be fine, too, as long as it is 100% CSS.

This is a problem in portrait mode on narrow screens such as certain mobile devices.

Below is the CSS along with the corresponding XHTML.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css" media="screen">
    ul.breadcrumb {
        list-style: none;
        overflow: hidden;
        margin: 0 0 0 -1em;
        padding: 0 0 0 1em;
    }

    ul.breadcrumb li {
        float: left;
        margin-left: 1.5em;
        color: #000;
    }

    ul.breadcrumb li a {
        padding: 0 0 0 1em;
        position: relative;
    }
   
    ul.breadcrumb li a::after {
        z-index: 1;
        content: "";
        width:  0;
        height: 0;
        top: 50%;
        margin: -5ex 0 0 0;
        border-top:    5ex solid transparent;
        border-bottom: 5ex solid transparent;
        position: absolute;
        border-left: 2em solid;
        left: 100%;
    }   
   
    ul.breadcrumb li:first-child  a {
        border-radius: 1em 0 0 1em;
        padding: 0 0 0 1em;
    }
    ul.breadcrumb li:nth-child(1) a       { background:        #f00; }
    ul.breadcrumb li:nth-child(1) a:after { border-left-color: #f00; }
    ul.breadcrumb li:nth-child(2) a       { background:        #ff0; }
    ul.breadcrumb li:nth-child(2) a:after { border-left-color: #ff0; }
    ul.breadcrumb li:nth-child(3) a       { background:        #0f0; }
    ul.breadcrumb li:nth-child(3) a:after { border-left-color: #0f0; }
  </style>
</head>
<body>
  <ul class="breadcrumb">
    <li><a href="">AAAA AAAA AAAA</a></li>
    <li><a href="">BBBB BBBB BBBB</a></li>
    <li><a href="">CCCC CCCC CCCC</a></li>
  </ul>

  <h1>A Test Page</h1>
  <p>Some words</p>
</body>
</html>
Attached Thumbnails
Click image for larger version

Name:	works.png
Views:	21
Size:	14.1 KB
ID:	33518   Click image for larger version

Name:	works-not.png
Views:	21
Size:	15.8 KB
ID:	33519  
 
Old 06-29-2020, 07:04 AM   #2
boughtonp
Member
 
Registered: Feb 2007
Location: UK
Distribution: Debian
Posts: 366

Rep: Reputation: 236Reputation: 236Reputation: 236
There's better ways to solve this but my brain isn't working right now, so in the absence of any other replies here's a quick and dirty option...

Add "white-space: pre;" to "ul.breadcrumb" and change "float: left;" to "display: inline-block;" for "ul.breadcrumb li"

Then remove the newlines from the HTML:
Code:
<ul class="breadcrumb"><li><a href="">AAAA AAAA AAAA</a></li><li><a href="">BBBB BBBB BBBB</a></li><li><a href="">CCCC CCCC CCCC</a></li></ul>
or hide them with comments:
Code:
<ul class="breadcrumb"><!--
	--><li><a href="">AAAA AAAA AAAA</a></li><!--
	--><li><a href="">BBBB BBBB BBBB</a></li><!--
	--><li><a href="">CCCC CCCC CCCC</a></li><!--
--></ul>
 
Old 06-29-2020, 12:47 PM   #3
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 14,616
Blog Entries: 9

Rep: Reputation: 4094Reputation: 4094Reputation: 4094Reputation: 4094Reputation: 4094Reputation: 4094Reputation: 4094Reputation: 4094Reputation: 4094Reputation: 4094Reputation: 4094
Your breadcrumb thingy consists of items that are equal members of the same list, but IMHO a breadcrumb thingy indicates nested items, i.e. BBBB is _inside_ AAAA, etc.:
Quote:
Originally Posted by Turbocapitalist View Post
Code:
  <ul class="breadcrumb">
    <li><a href="">AAAA AAAA AAAA</a></li>
    ...
        <ul>
            <li><a href="">BBBB BBBB BBBB</a></li>
            ...
            <ul>
                <li><a href="">CCCC CCCC CCCC</a></li>
                ...
            </ul>
        ...
        </ul>
    ...
  </ul>
Be that as it may, one way to break the gordic knot is to change to a different layout altogether when the width goes under a certain value. You know, media queries, responsiveness...
I guess I'd choose a more vertically oriented display.
 
Old 06-29-2020, 03:27 PM   #4
dugan
LQ Guru
 
Registered: Nov 2003
Location: Canada
Distribution: distro hopper
Posts: 9,605

Rep: Reputation: 4279Reputation: 4279Reputation: 4279Reputation: 4279Reputation: 4279Reputation: 4279Reputation: 4279Reputation: 4279Reputation: 4279Reputation: 4279Reputation: 4279
Most implementations these days would use Flexbox.
 
2 members found this post helpful.
Old 06-30-2020, 01:52 AM   #5
Turbocapitalist
Senior Member
 
Registered: Apr 2005
Distribution: Linux Mint, Devuan, OpenBSD
Posts: 4,845

Original Poster
Blog Entries: 3

Rep: Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403
Quote:
Originally Posted by dugan View Post
Most implementations these days would use Flexbox.
Yes, that make sense. I guess my question then narrows to be about how to acheive the pointed triangles at the right of each item. My demo is using borders but that is where the trouble occurs when the wrapping happens.

Edit: getting closer with clip-path:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css" media="screen">
    ul.menu {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
        align-items: left;
    }
    ul.menu li.item {
	list-style: none;
	border-style: solid;
	/* top right bottom left */
	border: none;
	padding: 0 0.5em 0 0.5em;
	height: 3ex;
    }
    ul.menu li.item:nth-child(1) { 
	background-color: #888; 
	content: " ";
  	clip-path: polygon(
    	  0% 0, /* left top */
    	  95% 0, /* right top */ 
    	  100% 50%, /* right */
    	  95% 100%, /* right bottom */
    	  0 100% /* left bottom */
  	  );
    }
    ul.menu li.item:nth-child(2) { 
	background-color: #aaa; 
  	clip-path: polygon(
    	  0% 0, /* left top */
    	  95% 0, /* right top */ 
    	  100% 50%, /* right */
    	  95% 100%, /* right bottom */
    	  0 100%, /* left bottom */
	  0.5em 50% /* left */
  	  );
    }
    ul.menu li.item:nth-child(3) { 
	background-color: #ccc; 
  	clip-path: polygon(
    	  0% 0, /* left top */
    	  95% 0, /* right top */ 
    	  100% 50%, /* right */
    	  95% 100%, /* right bottom */
    	  0 100%, /* left bottom */
	  0.5em 50% /* left */
  	  );
    }
    ul.menu li.item:nth-child(4) { 
	background-color: #eee; 
  	clip-path: polygon(
    	  0% 0, /* left top */
    	  95% 0, /* right top */ 
    	  100% 50%, /* right */
    	  95% 100%, /* right bottom */
    	  0 100%, /* left bottom */
	  0.5em 50% /* left */
  	  );
    }
    ul.menu li.item a {
	text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
        <li class="item"><a href="#">AAAAA AAAAA AAAAA</a></li>
        <li class="item"><a href="#">BBBBB BBBBB BBBBB</a></li>
        <li class="item"><a href="#">CCCCC CCCCC CCCCC</a></li>
        <li class="item"><a href="#">DDDDD DDDDD DDDDD</a></li>
    </ul>
  </nav>
  <h1>A Test Page</h1>
  <p>Some words</p>
</body>
</html>

Last edited by Turbocapitalist; 06-30-2020 at 03:27 AM.
 
Old 06-30-2020, 08:10 AM   #6
SoftSprocket
Member
 
Registered: Nov 2014
Posts: 305

Rep: Reputation: Disabled
This link doesn't give the tail portion but it gives triangles (and a remarkable array of shapes). There might be enough in it to help https://css-tricks.com/the-shapes-of-css/https://css-tricks.com/the-shapes-of-css/
 
1 members found this post helpful.
Old 06-30-2020, 09:02 AM   #7
Turbocapitalist
Senior Member
 
Registered: Apr 2005
Distribution: Linux Mint, Devuan, OpenBSD
Posts: 4,845

Original Poster
Blog Entries: 3

Rep: Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403Reputation: 2403
Thanks. That is a little more portable than clip-path, in regards to older browsers though much more difficult to work out. clip-path is basically just a list of points which demarcate a polygon for the canvas:

https://css-tricks.com/clipping-masking-css/

Apparently one can link to an SVG that way, but I'm now all set with a simpler polygon.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
html css not rendering as expected rblampain Programming 13 11-18-2015 06:27 AM
LXer: Making GTK3 themes – Part 2: The gtk.css and gtk-widgets.css file LXer Syndicated Linux News 0 07-24-2012 01:50 PM
CSS - Is there a way to put several lines of HTML into one line using CSS? Chronothread Programming 12 01-05-2011 06:06 AM
Firefox 2.0 not rendering CSS correctly jaycam Linux - Newbie 4 05-08-2008 08:08 PM
HTML/CSS/JS: Problem with <p> not having an absolute position with CSS. RHLinuxGUY Programming 7 03-03-2007 12:21 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 05:21 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration