I've looking for videos, coding, bootstrap, css.. I've been tried every thing but I still can't find out which attribute should I set for the drop down list so when it drops down, the list item margin will be aligned to the right of parent item. The default set for it is to the right.
I want the drop down list when it drops will look like this:
[1]: https://i.stack.imgur.com/Fu3AY.png][1]
Without adjusting the margin, my drop down lists look like this: All the element is aligned to the left of parent menu. But when I adjust the margin so the list will not be responsive when I change the view size.
[2]: https://i.stack.imgur.com/ks5q5.png[2]
Is there any one meet the same status & do you have any suggestion for me to solve this out?
My list codes:
<div class="menu">
<button>Menu</button>
<ul>
<li>MoonLight Ltd Co.</li>
<li>Introduction</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</div>
Here the codes I set for the ul & li:
.navbar-wrapper .right-side-wrapper ul {
margin:0px;
padding:0px;
position: absolute;
list-style: none;
border-radius:3px;
text-align: end;
opacity: 0.5;
pointer-events: none;
transform: translateY(10px);
transition: all 0.5s ease-in;
background:rgba(255, 0, 0, 0.6);
font-size: calc(8px + 0.5vw);
}
.navbar-wrapper .right-side-wrapper li {
position:relative;
width:calc(100px + 3vw);
padding:1vh;
}
I think you can use some ways.
ul {
text-align: right;
}
or
ul {
text-align-last: right;
}
or
li {
float: right;
}
li {
text-align: right;
}
Related
I already tried "width: 100%;" but the dropdown element then gets the same width as the whole page. I'm working with floats so maybe that needs a different approach?
I swear I've looked at similar questions but none of the solutions there worked for me. Can anyone see what I'm doing wrong? You can find the jsfiddle with all of the code here. I currently "solved" the problem with a fixed width.
Here is the HTML for the navi:
<nav role="navigation" class="navi">
<ul class="nav-elements">
<li>Home</li>
<li>Ongoing Stories
<ul>
<li>Sublink</li>
<li>Another Sublink with a long text</li>
</ul>
</li>
<li>Sleeping Stories
<ul>
<li>Sublink</li>
<li>Another Sublink</li>
</ul>
</li>
<li>News</li>
<li>About/FAQ</li>
</ul>
</nav>
And the CSS:
.navi {
float: left;
margin-bottom: 0.5em;
}
.navi ul {
padding-left: 0; /* Navi aligned left */
margin: 0;
}
.navi li {
background: #808080;
float: left;
padding: 0.2em 0.8em 0.2em 0.8em;
border: 1px solid black;
margin: 0 0.4em 0.4em 0;
list-style: none;
font-size: 1.2em;
border-radius: 10px;
}
/* nav-elements for dropdown-menus */
.nav-elements ul {
margin-top: 0.2em;
padding: 7px 10px 0 0;
}
.nav-elements li ul {
position: absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
z-index: 1000;
width: 9.25em;
margin-left: -0.85em; /* to counter the padding in .navi li */
}
.nav-elements li:focus,
.nav-elements li:hover { /* main navi gets shadow while dropdown is active */
text-shadow: 0 0 7px rgba(255,255,255,.5); /* kind of a glow effect */
}
.nav-elements li:focus ul, /* show the submenu when user focues (e.g. via tab) the parent li [doesn't work?]*/
.nav-elements li:hover ul { /* show the submenu when user hovers over the parent li */
left:auto; /* Bring back on-screen when needed */
text-shadow: none; /* dropdown doesn't inherit shadow from main-navi*/
}
.nav-elements ul li {
float: none;
font-size: .9em;
}
According to your issue that you don't want to use fixed width then please check my Updted fiddle
I have used width:100% so it will change according to parent ul. What you need is to change width:100% and position:relative or parent li(.navi li) and then i removed margin-right as it was extra and you got the result.
Updated
As i have used position:relative so width:100 is taking width inside the border so you are missing 2px gap so just for workaround i have used width:101%. Please check my updated fiddle.
let me know if its what you need. Thank you :)
your second ul element can just be wide as the li element around it. try this:
#subMenuFoo {
display: none;
}
#foo:hover ~ #subMenuFoo {
display: block;
}
<div class="nav-elements">
foo
<div id="subMenuFoo">
bar
</div>
</div>
--
please mind the gap
When I hover mouse over menu items they don't always fit perfectly within the navigation bar, I am also unable to fix that tiny gap between border and last navigation item and the gap changes when I zoom in/out the page, when I zoom in/out on google chrome and hover over menu items the hovered item gets taller than the rest of the bar. I've been trying to figure this out for quite some time now. Thank you for your help in advance.
Main objectives: getting rid of the gap next to "contact", making hovered items fit into the navbar, fixing google chrome navbar zooming issue.
Here's my codepen: http://codepen.io/anon/pen/QbBgKR
<nav class="menu">
<ul class="clearfix">
<li>HOME </li>
<li>PROFILE</li>
<li>STUFF</li>
<li>STUFF</li>
<li id="long"> PRODUCTS<span class="arrow">▼</span>
<ul class="sub-menu">
<li>STUFF1</li>
<li>STUFF2</li>
<li>STUFF3</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav><!-- menu -->
.clearfix:after {
display: block;
clear: both;
}
.clearfix {
margin-left: -37px;
}
nav {
font-size: 1em;
width: 700px;
background-color: #3A5199;
font-family: Verdana;
}
#current {
background-color: #6082ec;
}
.menu li {
display: inline-block;
list-style: none;
position: relative;
width: 15.2%;
text-align: center;
margin-left: -0.4%;
margin-right: -0.4%;
}
.menu li:hover {
background-color: #6082ec;
}
.menu a {
text-decoration: none;
color: white;
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
#long {
width: 24%;
}
.menu .arrow {
font-size: 12px;
line-height: 0%;
}
.sub-menu {
width: 128px;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background-color : #6082ec;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu li:hover {
background-color: #3A5199;
}
.sub-menu li {
width: 131%;
display: block;
right: 39.2px;
}
.sub-menu a {
position: relative;
text-align: center;
}
Using a reset stylesheet or something like normalize.css will go a long way in fighting various margin, padding and display inconsistencies across browsers and you won't have to do negative margin "hacks" like you did for .clearfix.
Although you have calculated your percentages correctly for your li to add up to 100%, the gap to the right of Contact arises with the pixel rounding of the percentage width you've applied.
15.2% of 700px = 106.4px
The browser will likely round down to 106px. The change in the gap when zooming is also likely related to the percentage widths. At one zoom level the value gets rounded differently.
106px * 5 = 530px + 24% of 700px (168px) = 698px
Since you're using a fixed with on your <nav> element, why not use fixed widths on the li also? Or change up the percentage values a bit. 15.2% for the home link creates more padding between the text Home and the left and right edges of the li than it does for Profile.
Fixed Width Solution
/* default width for all li */
.menu li {
width: 108px;
}
/* Home */
.menu li:nth-child(1) {
width: 100px;
}
/* Products */
.menu li:nth-child(5) {
width: 168px;
}
As far as zooming in Chrome and getting a height change when hovering, I cannot replicate that issue.
Negative margin for UL is working.
.clearfix {
margin-left: -37px;
margin-right:-0.4%;
}
It's strange math her - imho.
Recently I have noticed that when you are styling menu item on:hover, some properties like text-shadow, color, background and and many others are applied to the menu item that is currently be hovered over.
However, it seems that the padding property is applied to all the menu items, not just the menu item being hovered over.
Here's an example: http://codepen.io/Bizzet/pen/LEvopq
.main-navigation a {
display: block;
text-decoration: none;
color: #fff;
font-size: 1.1em;
transition: 1s;
margin-bottom: -7px;
}
.main-navigation a:hover {
margin-bottom: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
As you can see in Codepen, the text-shadow is applied to a single menu item while the padding is applied to all the elements.
What can I do to prevent this?
I only want one menu item to hover at once.
The padding is not being applied to all menu items. What's happening is that the height of the parent container is being expanded by the hover effect, and since the other menu items are top-aligned, they raise as well.
Try this:
.main-navigation a:hover {
...
margin-bottom: 0;
margin-top: -7px;
}
Demo
Problem
Your ul li a's have a negative margin-bottom initially.
When you hover over an a, though, you reset the margin-bottom to 0. This causes the box to grow in size and push the whole nav-bar upwards.
Insight
The padding is not being applied to all list items. One of the links in your nav boxes is pushing the whole navigation bar up, which gives the appearance of applying the padding to all list items.
Demo
Run this snippet for a demo. The menu-items are black.
header {
min-height: 10em;
background: rgba(0, 0, 0, 0.25);
position: relative;
}
h1 {
text-align: center;
}
.container {
background: green;
list-style: none;
position: absolute;
padding: 0;
margin: 0;
bottom: 0;
}
.container:after {
display: block;
content: '';
clear: both;
}
li {
float: left;
margin-right: 0.5em;
display: inline-block;
background: black;
position: relative;
}
span {
color: red;
margin-bottom: -0.75em;
display: block;
transition: all 3s;
}
span:hover {
margin-bottom: 0;
}
<header>
<h1>Title</h1>
<ul class="container">
<li class="item">
<span>Hello</span>
</li>
<li class="item">
<span>there</span>
</li>
<li class="item">
<span>friend</span>
</li>
</ul>
</header>
Solution
It should be noted that negative margins are usually not encouraged, unless you want element overlap. If it is necessary, it can be better to set a negative margin on 1 parent element than each individual child.
To hack this particular problem together, just replace this:
a:hover { margin: 0; }
with this:
a:hover { transform: translateY(-70%); }
Keep in mind that you might have to add -browser- prefixes to the transform rule. Browser support here
I have a website im creating in notepad , and i cant seem to get the css menu to line up
exactly rite with my javascript slideshow
i can mess with the padding to make the menu longer but it still wont line up corerctly
here is a image of the webpage
http://img27.imageshack.us/img27/2/websitequestion1.jpg
and here is the code ,
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.js"></script>
<style>
#galleria{ width: 1020px; height: 386px;margin:0px auto;}
body
{
background-image:url('bg.jpg');
background-repeat:no-repeat;
}
body {
text-align: center;
}
/* Menu Start Here */
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid white;
padding: 15px 40px 15px 40px;
text-decoration: none;
color:black;
margin-left: -5px;
/* This is the background used for the animation */
background-image: url('image2.jpg');
/* Align the image position to the left of the a */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.8s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.8s ease-in-out;
}
#menu li a:hover {
color: white;
/* Align the image position of the background to the right*/
background-position:right;
}
</style>
</head>
<body>
<div id="wrap">
<h1> </h1>
<ul id="menu">
<li> Home </li>
<li> Products </li>
<li> Services </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
<div id="galleria">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run("#galleria");
</script>
</body>
</html>
Add something like this:
margin: 0 auto;
width: 380px;
To the desire divs that you want to centered. In you case I would add a DIV arround the galeria just to centered it.
It may be that the default user agent stylesheets are causing the unordered list to be shifted as well.
#menu { margin-left: 0; padding-left: 0; }
Might help with that, many browsers add left margin to list elements by default
First, you'll want your #galleria and #wrap divs to have the same width and margin, so add:
#wrap {
margin: 0 auto;
width: 1020px;
}
Next, for your menu items to be the right size, you'll need to ditch display:inline; for your list items (because you can't set a width on inline items. So you'll want something like:
#menu li {
float: left;
width: 20%;
}
#menu li a {
display: block;
}
You could just as easily use display:inline-block; depending on the browsers you need to support. There are several ways to go about it, but this should get you going in the right direction. Also, if you're floating your li, you'll need to add overflow:hidden; or float:left; or use a clear fix method on the ul so that the floats are contained.
I am pretty new at CSS but have been learning, doing my moms small business website to save her money but I'm having a little CSS trouble with my nav bar.
Basically if you go here: http://area25dallas.com/s and look at the nav bar, I'm having trouble with the il listing to have the images line up vertically (instead of aligning with the top which is what they currently do) with the text, also for some reason the images are going on top of each other instead of sitting next to each other (I don't want them in separate lists like the text links because the margins are too spread out).
I have been playing around with the CSS and also googled the hell out of this but still haven't found a solution. Is there any quick fix to this?
Thanks!
EDIT:
Here is the HTML and CSS blips though if you are using chrome I feel just inspecting the elements are the easiest way to see what's going on
<div id = "header">
<div class = "container">
<ul id = "main-menu">
<li class = "active">home</li>
<li>about</li>
<li>gallery</li>
<li>press</li>
<li>contact</li>
<li><img src="images/twitter_newbird_boxed_ white.png" />
<img src="images/Pinterest_Favicon white.png" /></li>
</ul>
</div>
</div>
and the CSS
#main-menu
{
float: right;
position:relative;
top:122px;
right:150px;
}
#main-menu li
{
float: left;
margin: 30px 12px 15px 12px;
padding:0;
height:23px;
list-style:none;
line-height:20px;
}
#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;}
#main-menu li:hover a, #main-menu li.active a{
background-position: 100% -30px;
}
#main-menu li a
{
display:block;
padding:0px 15px 5px 10px;
font-size:17px;
color:#fff;
text-decoration:none;
}
The images are broken onto multiple lines because they reside inside an <a> tag which has been styled as a block level element. Change the style to something like:
#main-menu {
float: right;
position: relative;
right: 75px; /* Changed */
top: 122px;
}
#main-menu li a {
color: #fff;
display: inline-block; /* Changed */
font-size: 17px;
padding: 0 15px 5px 10px;
text-decoration: none;
}
/* New */
#main-menu li a img {
position: relative;
top: -10px;
}
The new rule at the bottom moves the images up a little bit. You can play around with your css and get the same results in a lot of different ways - I went with a method that didn't involve many changes to the existing work.
Thanks for the tips, guys, this helped me out too with images in my css navigation.
I'd also recommend some added code to alleviate your spacing issue ...
#main-menu li a img {
position:absolute;
background:inherit;
top: 0px;
margin-bottom:auto;
max-height: 33px;
}