I am attempting to make a drop down menu go to the right with HTML and CSS, I have the example here:
http://codepen.io/anon/pen/RNLmvq
Here is a screenshot of what it looks like without the text from codepen.
http://s22.postimg.org/bd5sc51ap/sidebar.jpg
If there is any other additional information you need from me, please ask.
Thanks
I have looked at your code but the answer seemed quite clear, not sure if it's what will be the right answer but I've modified it to work for what you've described. If it's not what you're looking for please describe more details about your site needs.
http://codepen.io/anon/pen/KwXjaa
I've changed your aside css to 'float:right' from 'float:left'.
aside
{
float: right;
width: 164px;
margin: 12px 0px 0px 0px;
padding: 0px;
border-right: thin dashed #2446ff;
/*background-color: #ff0000;*/
}
update
I've cleaned up your HTML and re-arranged where the placement of the class 'Schedule' was to be put.
http://codepen.io/anon/pen/KwXjaa
in your HTML I've placed 'Schedule' class onto the li.
CSS now for schedule is as follows:
.Schedule ul li{
display:none;
}
.Schedule:hover > ul {
position:absolute;
top:36px;
left:168px;
background:blue;
display:block;
}
.Schedule:hover > ul li {
position:relative;
background:blue;
display:block;
}
I've cleared out most of your other CSS you had in there before, wanted to provide you with a clean html/css snippets so you see exactly what you may need to include when you integrate.
What's happening in the above is your 'Schedule' class is on an li, the class is telling all the ul's with li's below that li that has 'Schedule' assigned to it, that they're to display none.
When you hover over schedule, the ul's that the browser finds that are layered under 'Schedule', will display block again and have absolute positioning.
I then made it so that 'Schedule' class on hover of first ul li sets the li's to relative positioning(otherwise all li children will stack ontop of each other which you don't want) and set display to block so they're visible again.
Related
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.
I've got a horizontal menu block in Drupal that has a repeated background image.
I'm now trying to make a drop-down menu for the menu's children.
The problem I'm having is that the background image repeats for the width of the entire menu and the height of the drop-down menu when the drop-down is active.
I understand why that is happening, but can't think of an elegant way to solve the problem. Using the background image on just the buttons should work, but then the background wouldn't extend to the edges.
Is there a way to restrict the height of the repeated image? If I can restrict the height, I can set it to the height of the parent menu. Any other suggestions welcome.
How about this? Don't worry about my method of hiding/showing the menu (or the cheesy background)
I added a class for the submenu, just to simplify the code.
The trick is to specify the height of the menu and then set overflow to visible.
working code here: http://jsfiddle.net/cockypup/Fs3WV/
This is the CSS
#blockmenu {
background-image:url(http://t1.gstatic.com/images?q=tbn:ANd9GcS3LkgeI7h_C9w5PbHx_mIuVETgzO2NqJJdOSet-va1t6Q8nUAj);
height:30px;
overflow:visible;
}
#blockmenu ul li {
display: inline;
padding-right: 30px;
list-style: none;
color:white;
position:relative;
}
.sub {
display: list-item;
list-style-type: none;
padding-left: 0;
display:none;
position:absolute;
top:50px;
width:60px;
}
You can use the attribute background-size to indicate the size of the background.
Check out this page for a full description of the attribute:
http://www.css3.info/preview/background-size/
I have a html page where I have 3 anchors in an ordered list. the last two anchors need to be at the right of the page. I understand the better way to do this involves using nth-child selectors. I attempted to create 3 instances, one to specify each anchor and this failed. I could get one of the instances to the right of the page but not two. I tried, as you will see in my code, using '2n+1' but that also did not work.
I am a bit stuck and any advice would be greatly appreciated!
http://jsfiddle.net/MwT6d/
how about this:
http://jsfiddle.net/MwT6d/7/
Maybe this:
div.content ul li {
list-style-type: none;
clear: left;
}
[...]
div.content ul li a:nth-last-child(-n+2) {
float: right;
}
In this way you set to float: right just the last two children <a> of every <li>, and then you clear the float at every <li>.
http://jsfiddle.net/hr7uz/1/
In your case, to use the nth-child selector I would do the following.
div.content ul li a:nth-child(1) {
float: left;
}
div.content ul li a:nth-child(n+2) {
float: right;
}
div.content ul li{clear:right}
The rest of your CSS seems to work fine. I would then add some margins or padding to those links that were floated right and there you go.
Personally how I would do it I would set all the relevant links to float right, then set the first-child to float left. It's kind of like thinking about the problem backwards.
You can check the problem here: http://jsfiddle.net/gkJAd/4/
I have an unordered list in where every li will have a max-height of 2.25em (I want it to be at most 2 lines). The list-type should show normally, on the outside, aligned on the first line. I tried a few things all with its on issues:
If I add the hidden, height, etc, codes to the li instead of the a, the disc disappears;
If I change the a to be display: block instead of display: inline-block, it shows correctly on Firefox but wrongly everywhere else;
If I change the a to be display: inline it puts the disc at the right place, but, since it is not longer a block, the height is ignored. Anyone got an solution?
Sol
All you need to do is add vertical-align: top to your ul li a selector code.
Updated JSFiddle. Working in FF, Chrome, and IE8/9.
I think this is what you want.
Basically, I floated and then cleared the lis.
Then I gave the ul li as a display:inline-block and a height and made sure to use vertical-align:top;
ul{
margin: 5px 10px 5px 20px;
background:green;
height:250px;
}
ul li{
list-style-type:disc;
float:left;
clear:both;
}
ul li a{
background:green;
line-height:1.25em;
overflow: hidden;
display:inline-block;
height:2.25em;
vertical-align:top;
}
Example: http://jsfiddle.net/jasongennaro/gkJAd/6/
Tested and works in Chrome and FF
I played with this a bit, but it basically comes down to that overflow: hidden will hide the list markers as well. Here's what I came up with: http://jsfiddle.net/N3JGg/
Basically used the display type of list-item, then instead of declaring the discs on the outside, pulled them into the box with inside so the overflow wouldn't hide them. It doesn't give you the same, nice line that you had before, but you've got the markers displaying now.
I have a css driven dropdown menu, and in Chrome when I hover over the last option the whole thing jumps to the left slightly. I assume it's because the dropdown menu is adding to the overall width of the main list even though it's styled to float. Is there any way to fix this? (it's not doing it in firefox interestingly)
I've noticed by using webdeveloper to outline elements that the last li appears to get wider when it's hovered, but none of the others do.
the applicable sourcecode is here:
http://jsfiddle.net/WsAEW/
It worked for me changing this:
#menu ul li {
display: inline;
position: relative;
}
to this:
#menu ul li {
display: inline-block;
position: relative;
}
Here is a modified jsfiddle. I think the issue is fixed. Give it a try.
http://jsfiddle.net/WsAEW/5/
BTW, I only changed the following style. The 'float left' gets the elements to line up horizontally and the 'display: block' gets the top element to size to include the drop down menu.
#menu ul li {
float: left;
display: block;
position: relative;
}