display either 2 or 4 items on a line, not 3 |
display either 2 or 4 items on a line, not 3 |
busybody |
Apr 14 2020, 12:01 PM
Post
#1
|
Group: Members Posts: 4 Joined: 14-April 20 Member No.: 27,280 |
I have a header bar at the top of my website that has Event Calendar Pay Bill 1 Pay Bill 2. It works perfectly on all devices from phones to large screens, landscape or portrait. I now need to add a fourth option, Employment Options, and that spills to another line when I use my phone in portrait mode, in landscape it goes back to 1 line. Is there a way to always either show 1 line with 4 options or 2 lines with 2 options?
|
pandy |
Apr 14 2020, 12:44 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Probably. But it depends on what you have. Can you show us?
|
busybody |
Apr 14 2020, 01:16 PM
Post
#3
|
Group: Members Posts: 4 Joined: 14-April 20 Member No.: 27,280 |
CODE <div class="w3-bar w3-theme-d1 w3-right NonPrintable"> <div class="w3-right w3-center example"> <a href="/Employment.php" class="w3-bar-item w3-small w3-text-yellow"><b>Employment Options</b></a> <a href="/Calendar.php" class="w3-bar-item w3-small w3-text-yellow"><b>Event Calendar</b></a> <a href="https://pay.paygov.us/" class="w3-bar-item w3-small w3-text-yellow"><b>Pay Bill 1</b></a> <a href="https://www.invoicecloud.com" class="w3-bar-item w3-small w3-text-yellow"><b>Pay Bill 2</b></a> </div> </div> We use w3.css for almost all of our css. This post has been edited by busybody: Apr 14 2020, 01:16 PM |
pandy |
Apr 14 2020, 03:06 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Since everything inline, you could use
|
Christian J |
Apr 14 2020, 06:04 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
But that won't display them 2 on a line. But you could always create an extra DIV for each pair of links, and use 'white-space: nowrap' (note spelling) on those DIVs.
|
busybody |
Apr 14 2020, 09:42 PM
Post
#6
|
Group: Members Posts: 4 Joined: 14-April 20 Member No.: 27,280 |
CODE <div class="w3-bar w3-theme-d1 w3-right NonPrintable"> <div class="w3-right" style="white-space:nowrap"> <a href="https://pay.paygov.us/" class="w3-bar-item w3-small w3-text-yellow"><b>Pay Bill 1</b></a> <a href="https://www.invoicecloud.com" class="w3-bar-item w3-small w3-text-yellow"><b>Pay Bill 2</b></a> </div> <div class="w3-right" style="white-space:nowrap"> <a href="/Employment.php" class="w3-bar-item w3-small w3-text-yellow"><b>Employment Options</b></a> <a href="/Calendar.php" class="w3-bar-item w3-small w3-text-yellow"><b>Event Calendar</b></a> </div> </div> This works but when I am in portrait mode on my phone or when I make my browser window smaller the div flips. So on my phone I see: Pay Bill 1 Pay Bill 2 Employment Options Event Calendar when I should see: Employment Options Event Calendar Pay Bill 1 Pay Bill 2 In landscape mode or full screen I see: Employment Options Event Calendar Pay Bill 1 Pay Bill 2 Can I make it so the options are always in alphabetical order? Thank you for the help so far. This post has been edited by busybody: Apr 14 2020, 09:43 PM |
pandy |
Apr 15 2020, 02:25 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
pandy |
Apr 15 2020, 02:32 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
This works but when I am in portrait mode on my phone or when I make my browser window smaller the div flips. So on my phone I see: Pay Bill 1 Pay Bill 2 Employment Options Event Calendar That's actually how I see it in a desktop browser even in a maxed window. I think you also need to float the new wrapper DIVs left. QUOTE when I should see: Employment Options Event Calendar Pay Bill 1 Pay Bill 2 In landscape mode or full screen I see: Employment Options Event Calendar Pay Bill 1 Pay Bill 2 Can I make it so the options are always in alphabetical order? Thank you for the help so far. They come in the order you have them in the HTML. You need to rearrange the links. |
busybody |
Apr 15 2020, 11:03 AM
Post
#9
|
Group: Members Posts: 4 Joined: 14-April 20 Member No.: 27,280 |
The order is correct when the screen is large enough to hold all 4 links. The order is not correct when the screen is small enough to trigger the nowrap.
|
Christian J |
Apr 15 2020, 03:16 PM
Post
#10
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
So on my phone I see: Pay Bill 1 Pay Bill 2 Employment Options Event Calendar That's what I get in my desktop browser too (haven't tried mobile). QUOTE when I should see: Employment Options Event Calendar Pay Bill 1 Pay Bill 2 To get that you simply need to switch the two grouping DIVs. QUOTE In landscape mode or full screen I see: Employment Options Event Calendar Pay Bill 1 Pay Bill 2 Not me, are you sure about that? Could it be that any other CSS you use changes things around? QUOTE Can I make it so the options are always in alphabetical order? You'd probably have to sort them in the HTML (though floating sometimes arranges content in unexpected ways). |
pandy |
Apr 17 2020, 05:22 PM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 24th April 2024 - 03:24 AM |