I am pretty new to css and html and I am trying to create a drop-down menu that has 3 or 4 columns of links per drop down. I want the columns to be inline with each other. I have managed to accomplish that but the links in each column are going on two or more lines and I'd like them to display on one.
I've been messing around with the css but can't seem to figure out how to make them display on one line per link.
In my codpen, you will see what I am working with: http://codepen.io/anon/pen/vLQGqM
The best I've been able to do is make
.tlgnav .tlgnav-column {
width: 100%;
}
, but this makes the columns stack on top of each other, which is not what I want.
I am thinking it might have something to do with my .tlgnav li being set at width of 16.66% but if I change that, my menu doesn't fill the width of the screen.
Can anyone tell me what I am doing wrong?
You can use white-space : nowrap to avoid the line breaking, but maybe it's a better way to doing this. I answer with this solution but if someone gets something better follow it.
http://codepen.io/anon/pen/BjGzgZ
.tlgnav h3 + ul li {
white-space:nowrap;
}
Related
I'm having an issue where when my nav items were set to inline-block, the sub-menu would render right below the the appropriate <li>, like these two examples:
and
Now that it is a inline-flex, it is rendering right on top of the li instead, covering it.
I tried manually positioning the submenu 52px down, but that is only a solution if the <li> is on the top row, since once it's on the 2nd row it would now need to be 104px down.
Is there any good way to fix this?
URL in comments below
Although these are default values. Try to set flex-basis: 0; also make sure the flex-wrap: nowrap; is set. As comment instructed it is wiser to share your code to have a detailed answer.
Edit 1:
Thank you for the link to the code. Question is now clear, solution can be achieved by giving higher order number to the .navPage-subMenu class.
But first please remove the position: absolute from the class name .navPage-subMenu then add the order value of you like higher then <li>'s have. Example:
.navPage-subMenu.is-open {
order: 111; /*must be higher than <li> order numbers*/
}
I have been trying to display a sequence of text/image/text in the same line in my HTML document and after hours I still haven't deciphered the problem. As of right now my html page looks like:Webpage
I wanted the page to have text/image/text on the same line though as I stated. I tried making the div they are in float: left; and also display: inline; . Furthermore, I also tried display: inline-block; but that still didn't work.
Here is the css code I am working with: css code
If anyone could give me some insight that would be very helpful, thanks.
Basically you need to set display:inline-block; to each element you want to appear inline (h2,div, and any others).
Lastly, you want to set the percentage width of each element such that the total is 99% or less (TBH I can't tell you why this is, it's just been my experience).
I´m creating a page with Bootstrap and I need to make 4 columns leaving a space between each column of 5px!
I followed this tutorial ( http://andre-abt.com/2013/11/26/how-to-use-the-bootstrap-3-grid-system-with-column-margins/
). But for me doesn't work fine because if a put a link inside of the column to wrap all column is also possible make click outside of the column. (It's possible click in that 5px of margin).
jsfiddle.net/andresgl/2f7Lhmwd/ (Conferences, Summits, Events)
I hope some can help me.
Thanks!
Overcomplicated example for what you want to achieve, but if you want to keep it as it is add
.item-menu {
position:relative;
}
http://jsfiddle.net/2f7Lhmwd/2/
a{ margin:0;padding:0; }
This will remove all padding and margins from the anchor tag.
So I've been working on what I was helped with yesterday and I'm so close. My code is much cleaner now. I have 2 issues that still need resolving. I've been trying all morning and can't seem to get it.
I need to control of the height of the subnav. I had to change the height in "ul li a" to 100% from pixels so at least now it just wraps around the text, which is ok, but I will probably need to change that height eventually and don't want to do it by increasing the font size.
ANSWERED - I added a margin-down in % to the subnav and you'll see why based on the design. The problem with this is that once you slowly move the mouse over the white space the sub nav disappears. If you do it fast enough you can sometimes catch it. I had the same issue with the vertical spacers within the subnav but did some rearranging in the css and it seems to be fixed now. Any suggestions?
Can I have the single worded links center without compromising the vertical centering with the multi-worded links?
Is there a better way to add in "margins or buffers" instead of the "spacers" I'm using, or is this "okay"?
http://codepen.io/Compton/pen/iwKJm
--UPDATED CODEPEN--
http://codepen.io/Compton/pen/ufGCI
Thanks in advance.
The problem was caused by the margin you added to the .subnav class: while moving the mouse from the upper list item to the sub list, the mouse had to move over a gap of 0.333% space resulting in a lost focus (or lost hover-effect). I updated your code and removed the unnecessary spacers, the updated version can be found here:
http://codepen.io/anon/pen/hzAaD
Referring to your original code, change your CSS as follows:
.subnav ul li {
margin: 0;
margin-top: 3px;
}
.subnav {
width:100%;
}
For point four, you don't need to add an empty list item for every "space" between each list item, this is bad practice as a list item is meant to actually be used for something, not empty space!
Instead, why don't you simply amend your ul li class so that you add a margin-right property:
ul li {
float:left;
width: 14%;
display:block;
**margin-right: 5px;**
text-align:center;
}
This will achieve the same effect as having those spaces so you can remove them from your html.
I am debugging one tricky alignment problem. Here is the jsfiddle. The problem is that the Rating "Thumbs" Up & Down are present in a single image. I am using background-position to generate different images.
The visual looks is looking well, but I need to show all four features in one line with background images along with them.
Does anyone know how to fix it ?
Ok from what I think I understand you want to have your rating class in a seperate span to the actual text in the li.
<li><span class="rating up"></span>Courteous Staff</li>
Then set the span to display: inline-block; and you should get what I think you're after.
http://jsfiddle.net/spacebeers/U2Wax/35/
You need to do a bit more work to get it aligned right but it will give you a good idea.
have you tried adding this css style?
white-space: nowrap;