I am trying to make a responsive template where multiple li elements wrap one larger li element but I would like the larger element to be the same width as the current li elements surrounding it and also centered. This is kind of hard for me to explain so I made an example. Here is the link.
jsFiddle
body,
html {
text-align: center;
padding: 0;
margin: 0;
}
.ul-list {
list-style: none;
margin: 10px 0 0 7px;
padding: 0;
overflow: hidden;
}
.ul-list li.box {
width: 200px;
background: red;
display: inline-block;
margin: 0 7px 7px 0;
height: 100px;
}
.wrap {
float: left;
width: 100%;
height: 100px;
margin: 5px 0px 10px -4px;
text-align: center;
}
.inner {
background: blue;
margin: 0 auto;
text-align: center;
width: 99.4%;
height: 100px;
}
#media (max-width:1904px) {
.inner {
width: 1681px;
}
}
#media (max-width:1694px) {
.inner {
width: 1467px;
}
}
#media (max-width:1482px) {
.inner {
width: 1258px;
}
}
#media (max-width:1268px) {
.inner {
width: 1045px;
}
}
#media (max-width:1074px) {
.inner {
width: 834px;
}
}
#media (max-width:863px) {
.inner {
width: 621px;
}
}
#media (max-width:652px) {
.inner {
width: 411px;
}
}
#media (max-width:441px) {
.inner {
width: 200px;
}
}
<ul class="ul-list">
<li class="box"></li>
<li class="wrap">
<div class="inner"></div>
</li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
If you resize the example you will understand what I am trying to do.
In the example, I created a 100% width li element with class name "wrap". Since I wasn't able to center align it because of the float I created a div with the class "inner" and then just used media queries to resize so that I could at least show exactly what I am trying to do.
I am not sure of a good way to get the same sort of functionality as I show in the example. Does anyone have any ideas?
I would prefer a CSS solution but I am open to using a javascript or jquery solution as well if needed. Browser compatibility is pretty important but I am not really worried about very outdated Internet Explorer browsers etc. Thanks.
EDIT:
Some people are not understanding what I am trying to do so here are some pics.
With a regular floated element you can't center it and I want a box that is placed after the first list element that can be resized and centered to match the outside wrapping boxes depending on screen width. With a regular float you get this if your screen size is only large enough for 3 boxes.
Or you get this on a larger screen that will fit 5 boxes.
Which look pretty ugly.
What I am trying to do is match the widths of the wrapping list elements and also center the blue box so that everything looks equal like this.
Related
In my project, I have a list of dropdown buttons which are aligned right using flex-end. I've created a very minimal version of the code that shows the issue:
var popper = new Popper(
$('#anchor')[0],
$('#popper')[0],
{
modifiers: {
preventOverflow: {
enabled: true,
boundariesElement: 'window'
}
}
}
);
body {
height: 2000px;
}
.parent {
display: flex;
justify-content: flex-end;
}
.anchor {
width: 40px;
height: 40px;
background-color: #333;
}
.popper {
width: 120px;
height: 80px;
background-color: #c23;
border: 2px solid #ae3;
}
ul {
list-style-type: none;
margin: 0 -6px;
}
li {
margin: 0 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<ul class="parent">
<li><div class="anchor"></div></li>
<li><div class="anchor"></div></li>
<li><div class="anchor"></div></li>
<li>
<div class="anchor" id="anchor"></div>
<div class="popper" id="popper"></div>
</li>
</ul>
As seen above, the .popper div is overflowing body; causing a scrollbar to appear.
Removing the li makes Popper work as expected but I cannot do this as I'd lose my list. Using flex-start instead of -end also works correctly.
It's worth noting that the .popper and .anchor elements could be any width depending on what's in them.
Are there any workarounds or solutions for this behaviour? Preferably, without changing any markup.
I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});
.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.
http://codepen.io/anon/pen/KwOyQo
Friends, is there any way to make this div scroll even being with the mouse over the boxes??
Html:
<div class="container">
<div class="container-scroll">
<ul class="list">
<li class="list-item one"></li>
<li class="list-item two"></li>
</ul>
</div>
</div>
Css:
.container {
width: 100%;
height: 400px;
border: 1px solid black;
overflow: scroll;
color: white;
}
.container-scroll {
width: 100%;
height: 4000px;
}
.list {
list-style: none;
position: fixed;
}
.list-item {
display: inline-block;
width: 150px;
height: 150px;
}
.list-item.one {
background: pink;
}
.list-item.two{
background: black;
float: right;
}
I was trying to make something with overflow but anything worked..
You've set those elements to position: fixed. This positions the elements relative to the browser, which means they're completely taken out of the flow of their parent. So of course, when you hover over them, the container won't scroll.
You could use pointer-events: none on those boxes, but this isn't supported well across all browsers. Also, it's unclear whether you might actually need pointer events inside those elements in the future.
My advice would be to remove the scrollable div. Ensure that the body/document is the only element that scrolls. That way the content will scroll no matter what element you're currently mousing over.
.list-item {
display: inline-block;
width: 150px;
height: 150px;
pointer-events:none;
}
This will do the trick
EXAMPLE: http://codepen.io/anon/pen/OPKOog
I have a horizontal, 930px wide menu, that stretches across the whole width of a page on <768px resolution. At the moment, only the inline anchor tags are clickable, but I found out it is quite impossible to make the whole li clickable while mantaining 'responsivness'. I've tried numerous solutions, right now I am using display:table on the ul, display:table-cell on the li and a JS to make it stretch across the whole container. Works great on <768px, but at 930px, paddings inbetween anchor and their li containers become uneven. Screenshot and code below. (last menu item has display:none and is there because of the mobile menu version, please ignore it)
So, is there a way to have anchor paddings as percentages of the width of the UL? If not, how can I solve this?
HTML:
<!-- Responsive menu -->
<nav class="btn1content btncontent main-menu-wrapper hidden">
<ul class="main-menu" align="right">
<li class="item cyan">Úvod</li>
<li class="item orange active">Aktuality</li>
<li class="item yellow">Domény</li>
<li class="item brown">Registrátori</li>
<li class="item blue">CMS & Frameworky</li>
<li class="item pink">Trendy</li>
<li class="item green ">Zoznam</li>
<li class="item sand">Sledovanie domén</li>
<li class="item darkgray">Kontakt</li>
<li class="item item-last"></li>
</ul>
<!-- Clear -->
<div class="clear"></div>
</nav>
CSS:
.main-header .main-menu-wrapper {
margin: -3px auto;
width: 100%;
display: table;
border-collapse: collapse;
position: static;
height: auto;
background: #ffffff;
border-top: none;
border-bottom: none;
}
.main-header .main-menu-wrapper .main-menu {
display: table-row;
}
.main-header .main-menu-wrapper .item {
text-align: center;
border-top-style: solid;
border-top-width: 3px;
border-left: none;
border-right: none;
height: auto;
display: table-cell;
padding: 0;
width: auto;
}
.main-header .main-menu-wrapper .item a {
padding: 42px 0;
}
Screenshot (up - what it looks like now, below - what it should look like)
p.s. can't post pictures yet
http://i.stack.imgur.com/An4hh.png
Demo is up on
http://statistikydomen.magnetica-hosting.sk/tmpl/index.html
Change this:
.main-header .main-menu-wrapper .item a {
padding: 42px 0;
}
To this:
.main-header .main-menu-wrapper .item a {
display: block;
}
That will make your anchors fill out to the width of their parents (the li elements).
The table-cell display of those li will make the browser calculate a propert width for each item. Those widths might vary a little, based on the length of the captions and possibly even the browser/version, but I wouldn't worry too much about that. Responsive isn't always pixel perfect. Any way, you will get a quite nice division of the elements and the anchors will fill the entire width of the li, making the whole menu area clickable.
PS:
Formally you will have to write & in CMS & Frameworky as &.
You don't need the 'clear' div if you implement one of the tricks
described here: http://css-tricks.com/snippets/css/clear-fix/
I want to have horizontal lists that can run as wide as possible but within a fixed width container. I am using jQuery to allow scrolling on the really wide list, and overflow:automatic for users without javascript.
I have code along the lines of this:
<div class="list">
<ul>
<li class="feed">
<section>
<h1><span class="name">Title</span></h1>
<div class="scroll_left"><a class="ir" href="#">Scroll Back</a></div>
<div class="article_list">
<ul class="article_list">
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<!-- variable number of li's, from 10s to 100s -->
</ul>
</div>
</section>
</li>
<!-- More of these lists -->
</ul>
</div>
I'll just give a subset of my css that I think is relevant:
.feed .article_list {
position: relative;
overflow: auto;
float: left;
width: 900px;
}
.feed .article_list ul {
position: relative;
width: 10000px; /** I want this to be wide, but not allow scrolling past the end*/
margin: 0;
background-color: #ffffff;
}
.feed .article_list li {
display: block;
width: 130px;
height: 150px;
position: relative;
float: left;
border-right: 2px solid #b5e8f4;
border-left: 2px solid #b5e8f4;
margin: 0 5px 0 0;
}
My javascript is:
$(document).ready(function() {
$('div.article_list').css({
'overflow' : 'hidden'
});
$('.scroll_left a').click(function() {
toScroll = $(this).parent().next();
toScroll.animate({scrollLeft: "-=135"});
return false;
});
$('.scroll_right a').click(function() {
toScroll = $(this).parent().prev();
toScroll.animate({scrollLeft: "+=135"});
return false;
});
});
So as it is, I either have to make the inner ul really wide, so users can scroll well beyond the list items, or I can restrict it but if I add too many items (dynamically, so I don't have a lot of control), then the layout breaks.
Can I somehow get that scrollable area to just be as wide as its floated contents?
Or is the only solution to set the width in javascript (less than ideal, but I can do that)?
Its the float: left on the .feed .article_list that you really don't want but I've removed it from all of them that I could.
I would move to an inline setup instead of floating:
.feed .article_list {
position: relative;
overflow: auto;
width: 100%; /* specify what ever width you want. I think 100% is proper. */
}
.feed .article_list ul {
position: relative;
overflow-x: scroll;
margin: 0;
background-color: #ffffff;
white-space: nowrap;
}
By making the overflow-x: scroll you have a permanent scroll bar (not totally necessary, it can be removed if you prefer). The white-space: nowrap Will keep the children on one line (instead of floating.)
.feed .article_list li {
display: inline-block;
// etc. etc. etc. ...
on the children display: inline-block; will let you specify height/width like a block element and keep them inline at the same time.
JsFiddle:- http://jsfiddle.net/GBtCb/
UPDATE :-
In an effort to make it cross-browser compatible make the following changes:
remove the overflow: auto from .feed .article_list
and add:
.feed
{
overflow: hidden;
}
.article_list
{
overflow: auto;
from quirksmode.com:
http://www.quirksmode.org/css/whitespace.html : white-space: nowrap is compatible IE7+.
-