How can I make it look better for mobile:
(break words by line)
I tried white-space, word-break, word-spacing, display:table-caption and can't make it work.
https://codepen.io/Jackkk/pen/zYYbvKY
.nav>li {
display: inline-block;
}
/* very simplified css*/
<ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center">
<li class="tab active has-icon"><span>Meble fryzjerskie</span></li>
<li class="tab has-icon"><span>Fotele fryzjerskie</span></li>
<li class="tab has-icon"><span>Myjnie fryzjerskie</span></li>
<li class="tab has-icon"><span>Konsolety fryzjerskie</span></li>
<li class="tab has-icon"><span>Pomocniki fryzjerskie</span></li>
<li class="tab has-icon"><span>Meble 48h</span></li>
</ul>
Link to example website: https://dobrzekupuj.pl/
Set a width or max-width to every li
For example
.nav > li {
width: 70px;
}
or
.nav > li {
max-width: 70px;
}
For mobile only put it on a media query
#media (max-width: 480px) {
.nav > li {
width: 70px;
}
}
the table-layout set to fixed seems the best option to wrap all elements at once into 2 lines :
ul {
display: table;
table-layout: fixed;
margin: auto;
border-spacing: 1vw 0;
}
li {
display: table-cell;
}
/* makup/see me */
li {border:1px solid;}
ul {
border-spacing: 1vw 0;
}
* {margin:0;
padding:0;
box-sizing:border-box;
}
<ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center">
<li class="tab active has-icon"><span>Meble fryzjerskie</span></li>
<li class="tab has-icon"><span>Fotele fryzjerskie</span></li>
<li class="tab has-icon"><span>Myjnie fryzjerskie</span></li>
<li class="tab has-icon"><span>Konsolety fryzjerskie</span></li>
<li class="tab has-icon"><span>Pomocniki fryzjerskie</span></li>
<li class="tab has-icon"><span>Meble 48h</span></li>
</ul>
to keep it always shrink to minimun, again the table-layout (not set to fixed here ) seems to be the best option :
ul {
display: table;
width:0;/* will shrink/expand to fit content anyway */
margin: auto;
border-spacing: 1vw 0;
}
li {
display: table-cell;
}
/* makup/see me */
li {border:1px solid;}
ul {
border-spacing: 1vw 0;
}
* {margin:0;
padding:0;
box-sizing:border-box;
}
<ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center">
<li class="tab active has-icon"><span>Meble fryzjerskie</span></li>
<li class="tab has-icon"><span>Fotele fryzjerskie</span></li>
<li class="tab has-icon"><span>Myjnie fryzjerskie</span></li>
<li class="tab has-icon"><span>Konsolety fryzjerskie</span></li>
<li class="tab has-icon"><span>Pomocniki fryzjerskie</span></li>
<li class="tab has-icon"><span>Meble 48h</span></li>
</ul>
Run both snippets in full page to see different behavior.
Note also, that some padding on your original code could also work to set your wrapping point earlier
from your update on codepen, the table-layout can be used only on li too.
.nav>li {
display: inline-table;
}
#media (max-width: 480px) {
.nav>li {
width: 0;
border: solid;
}
}
/* very simplified css*/
<ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center">
<li class="tab active has-icon"><span>Meble fryzjerskie</span></li>
<li class="tab has-icon"><span>Fotele fryzjerskie</span></li>
<li class="tab has-icon"><span>Myjnie fryzjerskie</span></li>
<li class="tab has-icon"><span>Konsolety fryzjerskie</span></li>
<li class="tab has-icon"><span>Pomocniki fryzjerskie</span></li>
<li class="tab has-icon"><span>Meble 48h</span></li>
</ul>
I would insert a <br> tag with a class attached that showed / hid the <br> depending on screen size.
Example:
HTML:
<p>FirstName<br class="line-break">LastName</p>
CSS:
/* Default for mobiles */
.line-break {
display: block;
}
/* For tablets/desktops */
#media only screen and (min-width: 600px) {
.line-break {
display: none;
}
}
Related
I would like the list below to decrease the number of columns depending on the width of the parent div.
I have tried using a #media rule with max-width but it only takes into account the width of the browser, not of the parent div.
I have tried with width instead of max-width but it did not help.
#opponentsOfCivList {
columns: 4;
-webkit-columns: 4;
-moz-columns: 4;
padding-left: 25px;
list-style-type:disc;
}
#media screen and (max-width: 200px) {
#opponentsOfCivList {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
padding-left: 5px;
list-style-type:disc;
}
}
li {
padding-left: 2px;
}
#opponentsOfCivList {
font-size: 12px;
}
<div style="background:grey; resize:horizontal; width:450px;overflow: auto;">
<ol id="opponentsOfCivList"><li value="Phoenicia">Phoenicia</li><li value="Austria-Hungary">Austria-Hungary</li><li value="Persia">Persia</li><li value="Siam">Siam</li><li value="Maya">Maya</li><li value="Korea">Korea</li><li value="Babylonia">Babylonia</li><li value="Brazil">Brazil</li><li value="Ethiopia">Ethiopia</li><li value="America">America</li><li value="Spain">Spain</li><li value="Aztec">Aztec</li><li value="Vikingland">Vikingland</li><li value="Egypt">Egypt</li><li value="Greece">Greece</li><li value="China">China</li><li value="Arabia">Arabia</li><li value="Turkey">Turkey</li><li value="Mongol">Mongol</li><li value="Inca">Inca</li><li value="Portugal">Portugal</li><li value="Rome">Rome</li><li value="Netherlands">Netherlands</li><li value="Byzantium">Byzantium</li><li value="France">France</li><li value="Germany">Germany</li><li value="India">India</li><li value="Japan">Japan</li><li value="Huns">Huns</li><li value="Russia">Russia</li><li value="England">England</li><li value="Iroquois">Iroquois</li></ol>
<p>resize this div at the bottom right!</p>
</div>
As of today, rule columns: number column does not allow automatic adaptation of columns to the width of the parent.
To adapt the columns, use the property function minmax() (grid), indicating the minimum and maximum values:
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
With the indication of parameter auto-fit, which will allow the parent to occupy free space during resizing.
#opponentsOfCivList {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
column-gap: 10px;
font-size: 12px;
list-style-type: disc;
}
li {
padding-left: 2px;
}
<div style="background: grey; resize: horizontal; width: 450px; overflow: auto;">
<ol id="opponentsOfCivList">
<li value="Phoenicia">Phoenicia</li>
<li value="Austria-Hungary">Austria-Hungary</li>
<li value="Persia">Persia</li>
<li value="Siam">Siam</li>
<li value="Maya">Maya</li>
<li value="Korea">Korea</li>
<li value="Babylonia">Babylonia</li>
<li value="Brazil">Brazil</li>
<li value="Ethiopia">Ethiopia</li>
<li value="America">America</li>
<li value="Spain">Spain</li>
<li value="Aztec">Aztec</li>
<li value="Vikingland">Vikingland</li>
<li value="Egypt">Egypt</li>
<li value="Greece">Greece</li>
<li value="China">China</li>
<li value="Arabia">Arabia</li>
<li value="Turkey">Turkey</li>
<li value="Mongol">Mongol</li>
<li value="Inca">Inca</li>
<li value="Portugal">Portugal</li>
<li value="Rome">Rome</li>
<li value="Netherlands">Netherlands</li>
<li value="Byzantium">Byzantium</li>
<li value="France">France</li>
<li value="Germany">Germany</li>
<li value="India">India</li>
<li value="Japan">Japan</li>
<li value="Huns">Huns</li>
<li value="Russia">Russia</li>
<li value="England">England</li>
<li value="Iroquois">Iroquois</li>
</ol>
<p>resize this div at the bottom right!</p>
</div>
Solution using columns: width value, specifying column widths in pixels:
columns: 100px;
#opponentsOfCivList {
columns: 100px;
column-gap: 20px;
font-size: 12px;
list-style-type: disc;
}
li {
padding-left: 2px;
}
<div style="background: grey; resize: horizontal; width: 450px; overflow: auto;">
<ol id="opponentsOfCivList">
<li value="Phoenicia">Phoenicia</li>
<li value="Austria-Hungary">Austria-Hungary</li>
<li value="Persia">Persia</li>
<li value="Siam">Siam</li>
<li value="Maya">Maya</li>
<li value="Korea">Korea</li>
<li value="Babylonia">Babylonia</li>
<li value="Brazil">Brazil</li>
<li value="Ethiopia">Ethiopia</li>
<li value="America">America</li>
<li value="Spain">Spain</li>
<li value="Aztec">Aztec</li>
<li value="Vikingland">Vikingland</li>
<li value="Egypt">Egypt</li>
<li value="Greece">Greece</li>
<li value="China">China</li>
<li value="Arabia">Arabia</li>
<li value="Turkey">Turkey</li>
<li value="Mongol">Mongol</li>
<li value="Inca">Inca</li>
<li value="Portugal">Portugal</li>
<li value="Rome">Rome</li>
<li value="Netherlands">Netherlands</li>
<li value="Byzantium">Byzantium</li>
<li value="France">France</li>
<li value="Germany">Germany</li>
<li value="India">India</li>
<li value="Japan">Japan</li>
<li value="Huns">Huns</li>
<li value="Russia">Russia</li>
<li value="England">England</li>
<li value="Iroquois">Iroquois</li>
</ol>
<p>resize this div at the bottom right!</p>
</div>
i have code:
<div class="container">
<li class="block2"></li>
<ul class="posts first">
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
</ul>
<ul class="posts second">
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
</ul>
</div>
and css:
container{
width:940px;
margin: 0 auto;
padding:40px;
background:grey;
}
.container:after {
content: "";
display: table;
clear: both;
}
.block{
float:left;
border:1px solid #ccc;
width:216px;
height:186px;
margin: 0 0 20px 22px;
list-style: none;
}
.block2{
float:right;
border:1px solid #fff;
clear:both;
width:217px;
height:603px;
list-style:none;
}
.posts{
margin: 0;
padding: 0;
}
.first .block:nth-child(3n+1){
margin-left:0px;
clear:left;
}
.second .block:nth-child(4n+1){
margin-left:0px;
clear:left;
}
It is ok when browser zoom is 100%, but when i zoom browser window to 25%, floats going move. What i doing wrong and how can i fix it? Code on fiddle: https://jsfiddle.net/92j5yr6c/1/
i need something like this on 25% zoom link
The easiest way to tackle this with the given code is IMHO:
1) Adjust the error in your CSS (I'm assuming that was only a copy error for your JsFiddle) - your container-class is missing the period to make it actually a class. Change
container{ to .container{
and 2)
Change from border to outline (I assume this is acceptable), since borders tend to remain above "just a fraction of a pixel" wide, they end up adding up to more width than is available. And an outline doesn't grow the object, it just sits on top.
works for me:
https://jsfiddle.net/c0hfopug/
I have a list of 6 list items. Each item's width is only 5% of the total UL.
I'm trying to get the remaining 60% of empty space to appear after item 3.
I've attempted by floating items 4,5 & 6 to the right. But that causes them to appear out of sequence. They appear backwards as 6,5 & 4.
How i can achieve the desired results? This is a simplified version. Setting item 3 as width 65% is not an option!
Goal:
1,2,3 60% empty space 4,5,6
<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<li class="b">5</li>
<li class="b">6</li>
</ul>
As stated the below CSS does not work
ul#six-items {
list-style-type:none;
width:100%;
}
li {
width:5%;
}
li.a {float:left}
li.b {float:right}
HTML
<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b b4">4</li>
<li class="b">5</li>
<li class="b">6</li>
</ul>
CSS
ul {
display: flex;
list-style-type: none;
padding-left: 0;
}
li { width: 5%; }
li.b4 { margin-left: auto; }
DEMO: http://jsfiddle.net/y8y2edb6/
Using float...you can't.
You could split the menu into two separate menus and float them independently (one left and the other right)..or you could use flexbox
ul {
list-style-type:none;
display: flex;
}
li {
width:5%;
border:1px solid green;
}
li:nth-child(4) {
margin-left: auto;
}
<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<li class="b">5</li>
<li class="b">6</li>
</ul>
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex
I am stumped. I am trying to make a set of icons that sit inside a container with a fixed width. The elements must be inside the parent container but must extend beyond the boundary and not line break when they reach the right border of the parent.
I am using Floated li elements
Here is the fiddle
Would like it to look like this.
Not this:
Thanks for any Help.
Here is the Code:
<div class="mainFooter">
<div class="iconContainer">
<ul class="nav nav-pills">
<li rel="tooltip" data-original-title="Services"><a class="icon-th-list icon-white">A</a>
</li>
<li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">B</a>
</li>
<li class="" rel="tooltip" data-original-title="Clients"><a class="icon-group icon-white">C</a>
</li>
<li class="" rel="tooltip" data-original-title="Reports"><a class="icon-dashboard icon-white">D</a>
</li>
<li class="" rel="tooltip" data-original-title="Preferences"><a class="icon-cogs icon-white">E</a>
</li>
<li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">F</a>
</li>
<li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">G</a>
</li>
</ul>
</div>
.mainFooter {
background: #dddddd;
position: relative;
height: 40px;
width:30%;
}
.iconContainer {
position: absolute;
width: 100%;
border:1px solid red;
top:5px;
}
.mainFooter .nav > li{
float:left;
}
.mainFooter .nav > li > a {
padding:0px;
margin: 1px;
height:25px;
width:30px;
background:#2f65bb;
color: #ffffff;
font-size: 130%;
line-height: 25px;
display: inline-block;
text-align:center;
}
.white-space: nowrap on the <ul>. Do not float the elements, but use display: inline-block.
http://jsfiddle.net/nJydR/3/
you may try to setup fixed width for .nav-pills, something like
.nav-pills {
width: 230px;
}
http://jsfiddle.net/nJydR/4/