I'm using this drop-down menu and it comes down aligned with the button on the left but I want it to come down the opposite way because it's going off the screen on mobile. I attached pictures to show what it is doing vs what I am trying to make it do.
<div class='dropdown'>
<button class='dropbtn'>Hi, Anthony ▼</button>
<div class='dropdown-content'>
<a href='index.php?c=my-profile'>My Golfer Profile</a>
<a href='index.php?c=my-schedule'>My Schedule</a>
<a href='index.php?c=account-settings'>Account Settings</a>
<div style='width:100%;border-bottom: 1px #000 dotted;'> </div>
<a href='actions/logout.php'>Logout</a>
</div>
</div>
.dropbtn {
background-color: #3D5C7F;
color: white;
padding: 12px;
font-size: 14px;
border: none;
cursor: pointer;
border-radius: 3px;
}
.dropdown {
position: relative;
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;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3D5C7F;
}
what it does
what I need it to do
As you do not posted your HTML code I don't know which class is applied on your dropdown's starting element. If dropdown-content class is applied on the dropdown's starting element add the following styles along with the styles you already applied on the class dropdown-content:
.dropdown-content {
right: 0;
left: auto;
}
If you will post your HTML as well we could better help.
I am not sure which class that is so I will give you an idea. The way I do it is that I position the dropdown absolute and position the parent element relative. When you do this , you can give it top and sides. In order to achive your position .. If you put the relative position to your whole navigation and dropdown will be absolute, you can give the dropdown something like top: 40px , right: -30px ... Hope this makes sense , if not , post some HTML and we will make it work.
Related
I'm probably doing something wrong here. Here's my code for it:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000066;
z-index: 1;
}
.header {
position: fixed;
top: 0;
width: 100%;
overflow: auto;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .droptn {
background-color: #ccb3ff;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ccb3ff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block, flex;
flex-flow: column;
justify-content: space-evenly;
flex-grow: 2;
text-align: left;
z-index: 3;
}
.dropdown-content a:hover {background-color: white; color: #000066;}
.dropdown:hover .dropdown-content {display: block;}
<ul class="header">
<li>Home</li>
<li>About Us</li>
<li>Request a Quote</li>
<li>Colors</li>
<li class="dropdown">Products
<div class="dropdown-content">
Address Blocks
Balls and Finials
Columns
Coping (Wall Caps)
Custom Products
Fireplaces
Lawn Edgers and Tree Rings
Panel System
Patio Stones and Pavers
Parking Bumpers
Pier (Pillar) and Tier Caps
Quoins
Sills and Lintels
Splash Blocks
Window and Door Trim (Surrounds)
Wainscots
</div>
</li>
</ul>
When my dropdown displays, it appears in the header with a tiny scrollbar, and it doesn't drop down out of the header. I know I'm probably an idiot, and this is likely a super easy fix. A picture of what I'm talking about. I've obviously tried messing with the z-indexes of the elements. It didn't do anything. I've googled my little fingers off, and I've been trying things out. Nothing is working. I'm a dummy, I know.
The issue you are having is that the overflow is set to auto, thus causing the scroll bar to appear when hovering over the dropdown and being larger than the allocated space. To resolve this, remove overflow:auto from header and ul.
See this fiddle for the working example.
https://jsfiddle.net/tdz018ug/
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the JSFiddle, or have a look at the markup:
<div id="menu">
<ul>
<li>you
<ul>
<li>register...</li>
<li>login...</li>
<li>forgot password...</li>
</ul>
</li>
<li>.</li>
<li>qan</li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li>be</li>
<li>do</li>
</ul>
</li>
</ul>
</div>
and the css definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.
It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions?
I don't agree with max-width.. this will make the link's width content-independent
use position:absolute; for the submenu: jsFiddle
Set width in li
Your updated example :- http://jsfiddle.net/8U5An/8/
Css:-
#menu ul li {
width: 25px;
}
See some useful example as well , how they handle same case by using width only :-
http://www.diy.com/diy/jsp/index.jsp?noCookies=false
http://www.puregrips.com/
I want to create a navigation bar where the text is centered, but my CSS code places the hyperlink at the top corner of the li as seen in the image.
CSS:
#navigation {
clear: both;
margin: 0 auto 5px;
margin-top: 0;
height: 6%;
padding: 0 5px;
position: relative;
z-index: 1;
}
#navigation a {
height: 10%;
width: 50px;
color: red;
vertical-align: center;
text-align: center;
text-decoration: bold;
}
li {
border-top: solid;
border-right: solid;
border-left: solid;
border-bottom: none;
padding-left: 1px;
height: 51px;
width: 18%;
background-image: url('../images/tab-selected.png');
background-repeat: repeat-x-y;
border-color: #F0F0F0;
display: inline-block;
padding-left: 1px;
}
HTML:
<nav id="navigation">
<ul>
<li >overview</li>
<li >overview</li>
</ul>
</nav>
There are various ways of vertically center something.
If you KNOW the words of the links and know they will not have a line break, you can add line-height:51px; to the anchor (which is the same height of the LI).
Here's the fiddle: http://jsfiddle.net/vMLpL/
By the way, tips for you:
For the border, you can use border:1px solid #f0f0f0; then just give none to bottom, like border-bottom:none; instead of declaring all sides.
When you want a BG to repeat both X and Y, the background-repeat is repeat only, not repeat-x-y.
For the vertical-align, there is no center. It's top, middle, bottom and baseline. But it work only for inline elements regard to other inline elements besides or for display:table-cell elements (which will work like a td's valign="middle" atribute).
Try this:
Remove the following from your "li" selector:
height: 51px;
Add the following to your "li" selector:
text-align: center;
line-height: 51px;
I've got a submit button in a list:
<ul>
<li><input type="submit" value="Pls don't shift" /></li>
</ul>
The li and the input have different backgrounds, and these should be positionable.
The input should have dynamic width (depending on the value).
The input's value should be almost at the input's bottom.
These things reduce the number of opportunities to solve the problem.
And the problem exactly is: IE8 and IE9 shift the text of value, and IE8 shifts the background too.
I've tried to solve it and made this css (this is only a 'debug-css'):
li {
display: block;
width: auto;
border: 1px solid red;
padding: 0;
margin: 0;
float: left;
overflow: hidden;
}
input,
input:active:hover {
display: block;
background: url(tools-48x48.png) no-repeat center center;
width: auto;
height: 60px;
border: 1px solid transparent;
outline: none;
color: #fff;
text-align: center;
position: relative;
overflow: visble;
padding: 0 10px;
margin: 2px;
}
input:active:hover {
border: 1px solid red;
}
And the most interesting thing is: Now if I click on the button's text value, then it makes the same bad shift, but if I click eslewhere (on the button, but not on the text value) then it works.
That was the point when I've minded to write here.
How to disable submit buttons :active state in IE?
Thank you!
I have tested this in IE9 and when I remove several styles that "aren't" used the input text doesn't shift when you click on it.
removed styles:
li {
width: auto;
border: 1px solid red;
padding: 0;
margin: 0;
overflow: hidden;
}
input,
input:active:hover{
background: url(tools-48x48.png) no-repeat center center;
outline:none;
}
and added the styles
input,
input:active:hover{
position: relative;
overflow: visible;
}
See my Fiddle for more details here: http://jsfiddle.net/f67Vw/4/
A good other option seems to be to replace it with a carefully styled a element.
HTML
<ul>
<li>
Doesn't shift
</li>
</ul>
CSS
.button {
display: block;
width: auto;
height: 19px;
border: 1px solid transparent;
color: #000;
text-align: center;
padding: 20px 10px;
margin: 2px;
text-decoration:none;
}
Again see my Fiddle for more details here: http://jsfiddle.net/f67Vw/4/