I have a mentor that told me that instead of editing the height or width of the "li" tag that I should just edit the padding or margin of its content like lets say the "a" tag or "p" tag until i reached the desired size. Is it true? is it really not advisable? Thank you in advance that can clear this one up.
Looking at that picture, I think they meant two things:
You must make sure that the clickable area (the size of the a element) is the same as the area that look clickable. If your li element has a background color but the a element inside doesn't cover it completely, it's really annoying because you have visible areas that aren't clickable.
If you use padding, the items will adjust their size depending on the text size, e.g. if somebody decides to put in more text or the font size changes, the element height will adjust accordingly.
Related
Kind of a confusing request to phrase. But basically I'd like to have a border around content that has some text centered on the top middle of the border, without having the border strike through the text. Please see the attached image. Also, I will edit to provide my code if you deem it necessary.
Thanks!
Here you go:
https://jsfiddle.net/4nhk3ooy/1/
You put your header inside the box and then put it position:absolute with correct offset. Then you set the background of header to correct color. Also put some padding to it, so there is some space between border and text. Then you just have to correctly count the offset. Also take in mind, that for some responsive features, you might want to write some JS algorithm to count everything depending on size of screen (because you will have to handle text size, after that alter header width, after that alter header padding and after that take all this and calculate correct offset)
And also take note, that the bordered box has to be also positioned, relative, absolute or fixed, or your absolutely positioned header will not be positioned against the div, but against the screen.
I am stumped on this issue. I have a feeling the solution is rather simple, but I can't figure it out myself.
Currently the background of one section doesn't increase its height to accommodate all the text that gets pushed down due to lower screen size. How do I make it so the background of 1 section increases together with the text.
I have made a gif of the action: https://i.gyazo.com/fb3a0ad686f28dfbb0f016810f3e9d0e.gif
And some relevant code:
http://www.bootply.com/wXC2JnWXbT
Thanks for any help.
Have you tried height:auto and setting a min-height along with it? Or add padding to the bottom so that you can have that initial gap still-- But that would make the text always have that padding, which I don't know that you want, so I wouldn't advise it.
Alternatively, set overflow:auto so that a scrollbar will appear when the text goes beyond its box. Then there's no need for height change
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
Please how to keep div width after hover ?
this is HTML Code
<div>
Refining
Products
Process
Quality Assurance
Safety
</div>
========
please this is my main menu and the width is not fixed, when mouse hover on (Quality Assurance) main div is increased width approximately 2 pixels.
and i want the hover is Bold.
i am used letter-spacing but not good :(
you can see my problem here
Currently, the menu's width is decided by the widest element.
"Saudization and Training" is currently the widest element, and as such, when it is in bold type the extra width is accommodated by extending the menu's width. This is because bold text is wider than standard text.
Is there a reason why you can't fix the width of your menu?
If you can't fix the width of the menu - you might choose a different way of highlighting the selected element on hover (underline, being a common choice).
See related discussion here:
Inline elements shifting when made bold on hover
Try setting div style overflow with:
overflow: hidden;
So:
<div style="overflow:hidden;width:250px;height:200px;">
content here
</div>
You will need to set a width if you use this i believe so also add the width (you can set your own width to what you require) same for height.
Another idea would be to use some JavaScript to catch the mouseenter event on the menu div, get the outerWidth() of the div, then set the max-width of the menu div. The hover will not expand the box with this.
var width = $this.outerWidth();
$(this).css({"max-width": width+"px"});
Just make sure overflow on the menu items is set to visible:
$("menu items").css({overflow: "visible"});
Also best to clear max-width on mouseleave.
This worked great for me.
What I want to do is have a way to horizontally scroll through the icons on the top bar. No matter how I try to implement overflow I cannot get it to work. Here is a link to the page. Link no longer exists.
Note: that the scrollbar shall not cover the background image at all. It should be immediately below.
You need to set the width of that header div to be wider (width:2000px;). If you want a dynamic width (you dont know how many boxes will be in there) then you'll have to calculate the width with javascript (or serverside code like PHP).
Giving the .browser div a width of 2000px does the trick... then adjust the height of your divs to be tall enough to show the whole icon and name.
Let me know if that makes sense...