this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/
Related
So, previously I was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, I don't want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and ID:
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
So, this seems like it would work perfectly well, but unfortunately, it does not. Doing this makes the website completely disregard any of the CSS, and makes my navbar look all wacky and evenly spaced, as opposed to justifying my links left, and navbar right.
I've found out, through the inspector, that for some reason, the id is being applied to the a element generated by React Bootstrap, not the encompassing div, which is given the proper class.
Any ideas what might be going on?
Any help would be much appreciated, and let me know if I need to provide more info!
Edit:
I tried reformatting my code in the ways specified within this Github discussion, and unfortunately, my issue still remains the same--the ID is assigned to the 'a' element, rather than the dropdown div.
Looks like all i needed to do was surround the dropdown element with a 'div' element and then apply the id to that. There might be some deeper issue at play here, but this fixed my issue.
I'm porting chrome extension to Firefox and I'm testing on Nightly 51a.. version.
When I click the popup options icons it opens and scrollbars appear and after half a second those disappear.
How to correct this?
At the moment I've given a hyperlink in the top in the optins popup with this code which when clicked opens full view html in a new tab and this works just fine:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
The popup that is being shown for a browser_action is, currently, being set to a maximum of 800x600 pixels (at least in my testing). However, your content is being rendered at a much larger size while having the scroll bars not shown to the user (either not rendered at all, or positioned outside of the view into the document provided by the panel).
There are multiple ways to solve this. However, I was not able to find one that did not result in specifying an explicit height and width for the <body>, or a sub element (e.g. a <div> enclosing all content). Several ways showed the scroll bars, but left them disabled.
The simplest way to get the scroll bars to show up, is to change your HTML from:
<body>
to:
<body style="height:580px;width:800px;">
Obviously, you could also change this in your CSS (banks/options.css). From:
body{
min-width:500px;
min-height: 500px;
}
To:
body{
height: 580px;
width: 800px;
min-width: 500px;
min-height: 500px;
}
However, neither of those allow for the possibility that the panel will be shown with different dimensions (e.g. on other sized screens, or if Firefox changes what it is doing).
Thus, my prefered solution is to use JavaScript. In options.js add something like:
function setBodyHeightWidth(){
let width=window.innerWidth;
let height=window.innerHeight;
height -= 20; //Adjust for Save button and horizontal scroll bar
//document.body.style.width=width; //Does not work
//document.body.style.height=height; //Does not work
document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}
function onDOMLoaded(){
setBodyHeightWidth();
//Anything else you need to do here.
}
document.addEventListener('DOMContentLoaded', onDOMLoaded);
Using a significantly trimmed down version of the code for your extension (i.e. I removed all your JavaScript, and most of the non-visible HTML), the above code makes it look like:
I am testing this in IE 11:
Codepen
I am attempting to have the md-tab-body of my md-tabs control flex to the bottom of the page. I have had to include this css rule to get that somewhat working:
#tab-content-0 > div, #tab-content-1 > div, #tab-content-2 > div, #tab-content-3 > div {
height: 100%;
}
If you look at the codepen above, you will see that I get a scroll bar when I do so. What am I doing wrong? I want the tab content to flex to the bottom of the page, the first interior container to just take up however much space it needs and the second interior container to flex to the bottom of the tab content, and if it needs more space, it should have a scrollbar inside.
How do I accomplish this? I think the issue has something to do with the CSS rule above, but I cannot get it to flex at all without it.
Chekc out this pen. I am sure you can do the styling as you did in the other tabs. For this example I just used simple md-tab with label and other simplified elements.
http://codepen.io/next1/pen/qZRpEB
I need to make a classic full screen landing page with a h1 title, a h2 sub-title and a call-to-action button to slide the content to the first div of the website. I really hope you can help me because the website should go online soon and this is the one thing that's stopping me from saying it's finished, I'll try to tell you everything so you have a better understanding on what's going on.
Here's my Fiddle: jsfiddle.net/daghene/szp7yf7h/1/
And this is an online version of the real page with the first bit of
content below it http://andreacordioli.com/macwip2
I'm using Skeleton Framework and the div containing the fullscreen image is outside the .container who's wrapping the grid, while the h1, h2 and button are inside it. Right now I have two problems:
for some reason, only in this part of the website, text bigger than a certain point exceeds the page width making the website scrollable horizontally under a certain point
I made it so the text gets smaller under the 550px mark which is where the Skeleton grid comes into play. I tested it on my Motorola Moto X which has around 1280x720 resolution and noticed if I check the website in landscape it doesn't trigger the smaller resolution text propieties and the text exceeds the width of the windo again: this happens on iPhones in Chrome tester too
What I wonder right now is: as of today, what's the best practise to make a 100% responsive landing page with such simple content that is always centered, works on all possible resolutions and device orientations withou exceeding borders and has the text always at a decent size never being too big?
For instance, the text exceeding the width is 8rem which equals to 80px in Skeleton. Here's the page I'm trying to achieve, which I'll need to serve a different image for on mobile when aspect ratio is X:Y where Y gets bigger than X somehow:
If you try it it kinda works and I even tested it on my old, first Samsung Galaxy Tab which has the super old Android 2 or 3 browser which gives me more problems than IE but actually centers everything correctly with this code...but the main issue is that the text isn't scaling properly and if the window is too narrow it either disappears on the right, making the window scrollable on the right and part of the big title unreadable, or if it gets too small(say my 1280x720 4,7" Moto X) the call to action button disappears since the screen window is too short and there's the browser bar too. I put overflow: hidden to this windows to be sure there's no horizontal scroll but the real problem is not the scroll, it's the text exceeding the div instead of getting smaller.
LAST NOTES!
If you check the css there's a "-1rem margin" on the H1 because as I
said for some reason in this specific section the H1, and just that,
doesn't center. The H2 and Button are centered, the H1 is not and
only here...don't get why.
If you try to make the window horizontally smaller you can see the text touches the window on the right side first(both in the Fiddle and in the other link where there's no html and body margins), still can't get why and I feel that's what's preventing the text to stay centered while getting smaller.
It looks to me that some of the problems you describe are because at viewport 550px wide, your h1 font jumps in size from 5rem to 8rem. But at this viewport size there isn't enough horizontal space to hold your h1 text and so it exceeds the width of its parent div, and hence appears to be off-centre.
I think a solution would be to tweak your CSS in http://andreacordioli.com/macwip2/css/includes.css starting around line 1047 to something like the following:
#media (max-width: 625px) {
.bigImage h1 {
font-size: 5rem;
}
...
}
Hope this helps!
<div>
<div style="display:inline-block;">
<div style="display:none"></div>
</div>
</div>
I'm trying to understand this inline-block behaviour. This is a simplified version of a layout issue I ran into with some responsive elements in my header and menu bars. If the intermediate div is anything but inline-block, the entire nested block will have no height (or visibility, I'm not sure). However, if the intermediate div is an inline-block, it appears to display none with the innermost child (it's shaded in Firebug code, so I'm assuming it's hidden), however the the parent div maintains some sort of default height.
The best work-around I've found, which also sheds some light on where the default height is coming from, is to give the outer div a line-height of 0 or 1px. It still shows a 2-3px height which I can live with for my particular design. However, I can imagine cases where this work-around won't work, so it seems a bit like a hack.
I'm interested in understanding why this particular structure is behaving this way. So far, with my tests, it appears to be unique in terms of not collapsing when its children have no display. When understood properly, is it a bug or the logical result of the way the nested displays are interacting? Is there a better way to control it than with line-height? Can it be forced to display no height at all?
I'm not interested in JS solutions, or solutions which suggest work-arounds involving avoiding inline-blocks. Adding CSS to the existing proposed structure is fine. In my mind, the best solution would show no height for the structure with the least consequences for elements displayed inside the structure when display is not set to none. My question is as much theoretical as it is practical.
Is it a bug or the logical result of the way the nested displays are interacting?
Inline elements (inline-block and inline - which both recreate your issue), have white space after them. This has the same effect as a single SPACE U+0020 character, by HTML specifications. This is what causes your parent div to have a height.
Is there a better way to control it than with line-height? Can it be forced to display no height at all?
It depends, really, on what you consider 'better'. You could float the 'middle' element, instead of displaying it inline. (This may require you to clear the floats in the parent element - there is a common fix for this called clearfix)
Here is sample code showing this method in effect:
HTML:
<div class="parent">
<div class="middle">
<div class="final">asdf</div>
</div>
</div>
CSS:
.middle{ float:left; }
.final{ display:none; }
/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }
/* Clearfix */
.parent:before,
.parent:after {
content: " ";
display: table;
}
.parent:after {
clear: both;
}
Live example: http://jsfiddle.net/16xp2m3L/2/