Background:
I have created a ul menu that contains 2 divs -> one div for the icon, second div for the text. Reason for the divs is that I want the text to be neatly vertically aligned, which otherwise wouldn't be the case.
Problem:
I managed to make the whole second div clickable with display: block; but I struggle to expand the link beyond the div so that it stretches over the entire li, i.e. also covers the first div.
Attempts:
I already tried using Bootstrap's .stretched-link on the href tag (see first link) and setting position: relative; to all divs and li. However, this didn't work.
Question:
Is it somehow possible to expand the link across the entire li, while keeping the divs to neatly align?
Note:
(a) I'm aware that one work-around would be to place the href tag around the li, but I understand this isn't good practice anymore.
(b) Just to show the alignment problem, I have created a second JSfiddle, when the divs are removed.
JSfiddle
(1) divs included, but icon div not clickable: https://jsfiddle.net/AlphaX/z5f60m23/11/
(2) divs removed and whole li is clickable, but text isn't vertically aligned because font awesome icons have different widths by default: https://jsfiddle.net/AlphaX/89a1x7gs/2/
Just do your second approach, with the <a> wrapping the <i> and the span, and add some additional style rules:
li i {
width: 20%;
display: inline-block;
}
I edited your Fiddle too: https://jsfiddle.net/uxnfvzyc/1/
Related
Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.
I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?
CSS:
a {
line-height:1.5em;
}
HTML:
This is a <br> multiline anchor
<br><br><br>
This is a very long anchor displayed as a multiline anchor without BR
DEMO:
http://jsfiddle.net/ergec/F52uY/2/
You can set display: inline-block; or display: block to a, and then it will be clickable.
Example: http://jsfiddle.net/RMXfc/
Or you can increase padding and set negative margin at the same time. This will reduce gap.
Example: http://jsfiddle.net/693z4/
If you give your anchor tags a display: block; you will have a solid clickable area.
a {
line-height:1.5em;
display: block;
}
JSFIDDLE
One problem with display: block; is without a specified width, then entire 100% width is clickable.
The only way to approximate it without messing with the rest of the layout of your text (including the surrounding text of the link) is to add some top/bottom paddings to these links..
So adding padding:3px 0; to your code would fix the issue.
(it will require adjusting, though, in relation to your font-size and line-height)
Demo at http://jsfiddle.net/F52uY/7/
I'm working on a page for a class, just to display things (you can see them sorted by chapter in the body) but I originally had a list on the left that I used initially that just listed them all, and I wanted to keep it.
Problem is, once I started adding more CSS - I don't know where exactly - the area on the left just became completely unclickable. You can't highlight the text, you can't click any of it - nothing. I have absolutely no idea whatsoever what is causing this.
link to the site here
here is a pastebin link showing everything I have.
thank you, i really appreciate any help.
The .content div overlaps entire body area, because of "position: absolute;"
Add z-index: 9999; to #menu in your CSS and it should be clickable.
Other way is to use "position: relative; float: left;" to both .content and #menu, but you have to be carefull with their widths. Their sum of widths (including padding and margin and border) should be less or equal to the container width. In your case it should be body tag (actually a don't see body tag in your html).
That's because your .content div is using position: absolute; so it's taken out of the page flow and overlapping your sidebar because it has no width set (block elements span the full width of your viewport unless you give it a fixed width) ... just add a negative z-index value to your .content div and it should work fine.
More on z-index
I'm implementing a menu based on this one:
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
(Demo)
The menu uses a UL / LI structure and CSS for appropriate rendering.
The trouble is, if the browser is not wide enough, the main menu items wrap.
I have surrounded the menu in a DIV.
When I apply
overflow-x: auto;
to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).
How can I prevent the DIV from wrapping while retaining the drop-down menus?
You could simply add a fixed width to the div tag, like such width: 700px;
The best solution I can think of is the one suggested in the comments in The Jonas Persson's answer. It's using white-space: nowrap. For this to work though, you'd have to be using display: inline-block instead of float:left/right to horizontally align the menu's elements.
I played around with your demo using chrome's web developer and made it work.
Just replace every float: left with display: inline-block Add font-size: 0 to ul#menu and override it on ul#menu li with font-size:12px - that's the size your using. (Using display: inline-block adds some whitespace between the blocks. That font-size stuff takes care of it.).
Next ensure the inline blocks are vertically aligned with the top of the container - add vertical-align: top to the li's.
Finally, add the whitespace: no-wrap to the div wrapping ul#menu. That's it.
I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
http://jsfiddle.net/95pR2/1/
Essentially what the title says, I am trying to center the numbers to the center. This is taken from http://www.kevinresol.com/divslideshow/example.php
Something else that I am having an issue with is centering the facebook embedded div like button. It is the similar issue of centering a div within another div. I was able to get it to center by doing style="text-align:center" on the parent div, but doesn't work on the first issue (so I posted both).
http://jsfiddle.net/qWJm5/1/
I'm pretty sure its related to correctly styling parent and child divs, but i've tried other stack overflow forums and they don't seem to work for example doing margin:0px auto;.
Thanks in advance.
Your script is automatically floating your control elements with an inline style, if you remove that line from line:90 of your jquery.divslideshow-1.2.js script you can then style the control elements yourself. So, remove line:90, which reads:
.css('float','left')
And add the following CSS:
CSS
#dss .control-containter {
text-align:center;
}
.controls {
display:inline-block;
}
And all should be well.
demo: http://jsfiddle.net/95pR2/7/
Apply a text-align: center; to the parent div. Remove the float:left on the child divs, and make each child div an inline-block.