I am trying to create a simple nav menu using flexbox. My issue here is that i want to position the li.dropdown-c to the right side of the menu using align-self. I have tried something but its not working. Can anyone tell me what is wrong?
<nav>
<div class="top">
<ul class="main-ul">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="dropdown-c">Four
<ul class="in-ul">
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS:
* {
padding:0px;
margin:0px;
}
body {
font-family: sans-serif;
color:lightcoral;
background:#506679;
}
ul {
list-style: none;
}
a {
color:grey;
padding:10px 20px;
}
.main-ul {
display: flex;
justify-content: flex-start;
}
li.dropdown-c {
display: flex;
align-self: flex-end;
}
The align-self property only works for the same direction as align-contents, not justify-content. Instead, put a margin-left of auto on the li.dropdown and that should work.
li.dropdown {
display: flex;
margin-left: auto;
}
Also after testing this in codepen, I realized you're not even selecting the li correctly. It has class dropdown-c, not dropdown:
li.dropdown-c {
display: flex;
margin-left: auto;
}
Related
TL;DR: Here's a CodePen.
I have a UI with an image and a grid of text with long lines which looks like this:
I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:
But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:
How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.
Here's the code:
index.html:
<div class="media-callout">
<div class="media-thumb">
<img height="170" width="120">
</div>
<div class="media-callout-grid">
<div class="media-callout-key">Authors</div>
<div>Babalola, J & Ogunkola, Babalola</div>
<div class="media-callout-key">Year</div>
<div>2013</div>
<div class="media-callout-key">Title</div>
<div class="media-callout-value">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</div>
<div class="media-callout-key">Journal</div>
<div><em>Journal of Educational and Social Research</em></div>
<div class="media-callout-key">Location</div>
<div>vol. 3, no. 1, pp. 265–274</div>
<div class="media-callout-key">DOI</div>
<div>10.5901/jesr.2013.v3n1p265</div>
</div>
</div>
style.css:
.media-callout {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
column-gap: 10px;
padding: 1em;
max-width: max-content;
}
.media-thumb img {
float: left;
height: 175px;
width: auto;
}
.media-callout-grid {
display: grid;
font-size: 12pt;
grid-template-columns: 6em 1fr;
align-content: center;
gap: 0 15px;
}
.media-callout-key {
text-align: right;
font-weight: bold;
}
.media-callout-value {
word-break: break-word;
word-wrap: break-all;
}
A media query does indeed resolve this:
#media screen and (min-width: 600px) {
.media-callout {
flex-wrap: nowrap;
}
}
The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.
<script>$(document).ready(function() {
$("#menu li a").on('click', function() {
var page = $(this).data('page');
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
</script>
<script>$(function () {
$("#categories li, #bottom-page li").click(function (e) {
e.preventDefault();
$("#categories li, #bottom-page li").addClass("active").not(this).removeClass("active");
});
});
</script>
<script>
function goto($hashtag){
document.location = "store.html#" + $hashtag;
}
</script>
#categories {
font-size: 0;
width: 86%;
position: relative;
top: 0;
left: calc(50% - 43%);
float: left;
}
#categories ul li {
font-size: 16px;
background-color: #f1c96c;
text-align: center;
width: 32%;
margin-top: 3em;
display: inline-block;
}
#categories ul li:hover {
background-color: #f2e860
}
#categories ul li a {
color: #112c61;
font-size: .85em;
text-decoration: none;
padding: 1em 0;
display: block;
}
.nowrap {
white-space: nowrap;
}
.hide {
display: none;
}
li.active [data-page='category-1'] {
background-color: lavender;
}
li.active [data-page='category-2'] {
background-color: lavender;
}
li.active [data-page='category-3'] {
background-color: lavender;
}
#bottom-page {
font-size: 0;
width: 86%;
position: relative;
top: 0;
left: calc(50% - 43%);
float: left;
}
#bottom-page ul { float: right; }
#bottom-page ul li {
font-size: 16px;
cursor: pointer;
width: 60px; height: 40px;
display: inline-block;
}
#bottom-page ul li a {
font-size: .85em;
text-decoration: none;
text-align: center;
line-height: 1.4;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}
#bottom-page ul li:hover { background-color: #f3efb4; }
<section id="categories"><div id="top"></div>
<div id="categories-line">
<ul id="menu" class="nowrap">
<li><a data-page="category-1" name="top" href="#">PRODUCTS <span>A - I</span></a></li>
<li><a data-page="category-2" name="top" href="#">PRODUCTS <span>J - R</span></a></li>
<li><a data-page="category-3" name="top" href="#">PRODUCTS <span>S - Z</span></a></li>
</ul>
</div>
</section>
<section id="bottom-page">
<ul id="menu" class="nowrap">
<li><a data-page="category-1" onclick="goto('top')">Page<br>1</a></li>
<li><a data-page="category-2" onclick="goto('top')">Page<br>2</a></li>
<li><a data-page="category-3" onclick="goto('top')">Page<br>3</a></li>
</ul>
</section>
I have a menu at the top of a page under my nav which separates products on the page alphabetically. This menu is made up of three tabs spanning the width of the page that go A-I, J-R, S-Z. Under the tabs are a bunch of products listed depending on which tab is chosen.
At the bottom of the page after the last product is a menu, the same as the top menu but styled differently i.e. Page 1, Page 2, Page 3. I would like to have Page 1, Page 2 and Page 3 correspond to the proper tab at the top when clicked. So that Page 1 and the first top tab are active and highlighted when either one, top or bottom, is clicked. Thank you for any help!
Your question is a lot to read, make it as short as possible.
If your code consists of HTML or CSS, it's better to use stack overflow's code snippets
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello!</h1>
<section>
<h3>Work</h3>
<ol>
<li>Technical Blogs</li>
<li>Front End Projects</li>
</ol>
</section>
</body>
</html>
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
I have been struggling with the flexbox column layout. I am trying to create a 3 column layout that stretch vertically all the way to the end of the page (height:100%;). However, 2 of the columns must have specific widths that still scale down on different size screens, is this possible?
CSS:
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
.initial {
-webkit-flex: initial;
flex: 1;
width: 510px;
min-width: 100px;
}
.flex1 {
-webkit-flex-basis: 28px; /* Safari 6.1+ */
flex-basis: 28px;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
Here's a working example of what you might be looking for, if I've understood the question correct.
I've commented the important stuff in the code. Take a look at the code, and compare it with your own. You've been using some unnecessary flexbox elements such as flex-basis: 28px; which should just be width: 28px;
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
height: 100%;
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
width: 28px;
background-color: red;
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
UPDATE
I forked the pen in order to create a new working example based on the comments from the author of this question. He wanted the columns to wrap and the gutter to disappear at a certain size - I've used media queries to accomplish this.
Link to the new forked CodePen
HTML is the same.
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
flex-direction: column;
height: 100%;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
}
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
display: none;
}
#media all and (min-width: 768px) {
.flex1 {
display: flex;
width: 28px;
background-color: red;
}
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
Remember your vendor-prefixes.
If you look here... http://matiny.tk/Mixed%20Swim/Mixed.html
This is a simple site I'm making. It uses Bootstrap to switch the menu when the screen shrinks. Nicely enough, the Menu label/checkbox combo is not working, though it has worked on another site of mine. This is the relevant code...
<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"></label>
<input type="checkbox" id="menulogo">
</nav>
<nav id="menu">
SHOP
ABOUT
BLOG
GALLERY
CONTACT
</nav>
label {
font-size: 40px;
width: 100%;
color: white;
z-index: 2;
}
#menulogo {
opacity: 0;
}
#menu a {
background: rgba(0,0,0,.35);
font-size: 50px;
color: white;
height: 75px;
}
#menu {
margin-top: 100px;
text-align:center;
z-index: 3;
display: none;
position: fixed;
}
#menulogo:checked + #menu {
display: block;
}
As it turns out, my order of elements was incorrect. If one is going to use something like... #menulogo:checked + #menu, then the + or ~ selector means that the nav with #menu has to go right after the checkbox input, like so...
<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"> MENU</label>
<input type="checkbox" id="menulogo">
<!--These must be in sequence-->
<nav id="menu">
SHOP
ABOUT
BLOG
GALLERY
CONTACT
</nav>