I wonder if anyone has a genius idea for why my internal links are not working on a webpage.
I've set the html with the standard
<button>Some Text</button>
....
bunch of content
....
<div id="link"></div>
Here is the codepen link
http://codepen.io/Cornucopia/pen/vyrPWw?editors=1100#0
This was not working for unknown reasons until I greyed out enough bits of code and isolated the line that caused the problem. In one of the linked css files was a float:left for the li elements. The command is not associated with the button link, and so I can't fathom why it would keep the hyperlink from working. But when the " .grid .tile {float: left;} " is greyed out then the link works again.
the result you getting is absolutely correct.
Case 1:
/*.grid .tile {float: left;} */
<div id="link" style="width:100%;height:30px;background:yellow;"></div>
Result:
And, on click of your button you come to this location.
Case 2:
.grid .tile {float: left;}
<div id="link" style="width:100%;height:30px;background:yellow;"></div>
Result:
See, the location of div now (yellow background)
So, the anchor is working correctly. There is no issue in browser rendering, html or JavaScript.
Reason of Mishap in 2nd Case
You do not completely understand of float. It renders an item like some mixed behavior of (display:inline + Position absolute), which means, first ---> it is no longer eligible to take height and then give space to next item. Second, this is no longer going to effect the location of other items in Y-axis, ie, height.
So now all your li's (which are all float:left) are having no effect on taking space on Y-axis or taking space in height. So Div, has shifted up (like position:absolute items do not effect on other items).
So, removing same you get your desired result.
Hope, this helps!
The problem is that everything is floated left except for your <div id="link"></div>. I tested the following and it seems to work.
.grid .tile { float: left;} /*cuase of problem*/
#link { clear:left;} /* add this */
The clear:left; breaks the float and puts the div back into the position it would be in. Then the floats start back up again. :)
One potential issue is that you may not want a break in the pictures. I.e., if you still want everything to line up against each other, the dude pics and the car pics, then just put #link { float:left; } but in my opinion since the pictures are of different types the break seems appropriate.
Related
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'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I've got a dropdown I've made: http://jsfiddle.net/QPxVe/
For some reason, jsFiddle is altering the alignment which is not present outside of jsFiddle - this is not the issue.
I seem to have a gap between items and I cannot see why it is being added.
The Fiddle has different colours and fonts, but other than that, everyting is identical. The arrow in the image below points to the problem - it is like that for all the divs. If I set the margin to
-4px for the main .dropdown class, it is fixed but I'm not sure why the space is appearing in the first place...
It's because whitespace (e.g. new-line characters) around display:inline-block element is rendered as space. One of solutions is to set font-size for parent element to zero.
See http://jsfiddle.net/Kb7Fp/ where following rule is added:
BODY > DIV {font-size: 0; }
It is because of the whitespace (as Marat said).
Another solution (that I found more convenient) is to comment the line break like that:
<div class="dropdown"><span>Rice cakes</span></div><!--
--><div class="dropdown"><span>Enemies</span>
You can see the result here: http://jsfiddle.net/EfQdX/
Marat has the answer as to why the whitespace is there.
Depending on your reasons/needs for display: inline-block, another solution could be to add float: left; to the .dropdown rule.
Like on this fiddle: http://jsfiddle.net/QPxVe/2/
On a website i'd like to show products in the following structure:
[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]
Resulting in a product display such as:
Now, the thing is that there are multiple products on display, just like this one, but sometimes they are aligned next to one another.
The problem is that i would like to make the price appear at the same position (vertical wise) in all blocks. Of course i see only one solution at first - overflow:hidden on the detail text / feature listing. But then i'd end up having content cut off, right?
Another problem is that there should also be a more>> button (expander) that appears if the UL/LI-listing is longer than 4 entries. Just like this:
I thought this through quite often, but i seem to find no proper solution. For one i will never know if an LI will be multiline, as the content might be longer or shorter - and i cannot calculalate this serverside, as the font width/height might vary.
I'd appreciate any constructive input here.
Thank You!
As long as you have a fixed width you could use inline-block mixed with negative margins : http://jsfiddle.net/bymaK/11/
The sad thing is that it works in Chrome, Opera and IE 9 but completely break Firefox as it's management of with:0 and negative margin seem buggy (Added issue #709014 to Bugzilla following this post). The solution is to detect this browser and set the width to 1px for it...
It create a small bug as when you resize there is 1 pixel where the price warp to the next line but not the block but it's a lot less visible that the result otherwise :
<div id="container">
<p>texttexttext</p>
<ul>
<li>texttexttext</li>
<li>texttexttext</li>
<li>texttexttext<Update/li>
<li>texttexttext</li>
<li>more ยป</li>
<li class="more">more text</li>
<li class="more">Even more text.</li>
</ul>
</div><p class="price">$3993.99</p>
.price
{
height:40px;
display:inline-block;
margin-left: -200px;
margin-right: 200px;
vertical-align: bottom;
font-weight: bold;
}
#container
{
display: inline-block;
margin-right:10px;
position:relative;
width:200px;
padding-bottom:40px;
vertical-align: top;
}
ul
{
list-style-type:disc;
margin-left:30px
}
li.more
{
display: none;
}
$(function(){
$('a.more').click(function(){
$(this).parent('li').hide().nextAll('li').show(200);
});
});
Maybe have the containing div set to position: relative, and then price set to position: absolute; bottom:0? That way, no matter how much text is in the box, the price is always at 0 (or whatever number you set).
Here's a rudimentary example: http://jsfiddle.net/PFwJ6/1/
You might want to use javascript to find the height and display a "click to view more link".
First, create a div over the price div that would contain your "click to see more" link and set it to display:none. Then you can use offsetHeight in javascript to find the height of the div. If the height is over what is acceptable then you would set the div to display:block. That means you can set all of your containing divs to the same height with the price div pinned to the bottom using positioning.
I'm sorry I don't have concrete code for you. I might be able to put some together shortly. But this should point you in the right direction.
Here is a link to my problematic page:
http://www.studioteknik.com/lamouvance/programmation.php
I'm trying to have a box be as big as the content injected into it (with PHP). It works on IE6 but not in Firefox... maybe I have done too many tricks, that the world is now upside down...
Please, help! I'm sure it a one line solution... Thanks in advance!
Note that the foot at the to should be in fact a full background picture (ok it's ugly, but the client ask for it), you can click on service, the image is just fine !
I hijack my own question.... IE6 is playing me mad, the mission (first in the menu) there is a calendar, the aout 2009 is supposed to be ON ONE LINE.... why its on two line in ie6 ?
I think I see the issue, try:
.content {
overflow: auto;
}
If you don't set a height, a box will stretch to fit content in it. If the box only contains floating elements, either add this just before the end:
<div class="clear"></div>
With this CSS:
.clear {
height: 0;
clear: both;
}
Or, a simpler solution is to add the style overflow: auto to the box. (Note this will show scroll bars if you have set an explicit height on said box.)