currently working on programming my own website for my music. Everything has been going smoothly, but this one thing is just not working for me. one of my divs is not being hidden by the overflow rule.
The element has a position value of absolute and is almost an exact replica of another div that is behaving normally. The only difference is that one is translated off the screen to right and the other to the left. The left one is the one that refuses to be hidden.
I haven't been able to see why. I've changed various things around and still no luck. The only time I got close was when I changed the direct parent of the element from static to relative, but it moved all my items down and cut them at a certain point. I messed around with the CSS but could not bring them up at all.
I uploaded the entire code here as I don't know what all you need to look at:
https://github.com/OfficialXammaX/Official-LOVE-Website#official-love-website
Related
I have a header, which includes a navigation section and a logo section. I want the logo to align left and the navigation bar to align right. I've initially done this with float left (for logo) and float right (for navbar), but later decided to use "justify-content: space-between;" for the parent element (#header). (This does not change the nature of the problem.)
The problem when loading this with Chrome is that the header loads as if it is gradually expanding from the right and left edges toward the center. I don't see the same problem in Firefox. After loading it once, I cannot immediately replicate the problem, unless I wait for a few minutes or clear my cache and cookies. Here is the url that I'm experimenting at where you can (hopefully) view the problem:
https://www.omerfyalcin.com/experimental/
./style.css to see the style file.
This is pretty annoying since it prevents the transition between pages from looking smooth. Cannot find a solution despite extensive searching.
Thank you very much.
There's no sandbox so i cannot reliably try it but it's definitely related to transition: all 0.4s. There must be some kind of width change or something in the header and transition: all is causing that animation to happen. Make your transition to target more specific behavior.
I'm creating a website (http://mat3.us/ba/) and as you can see If you access it there is some kind of border, I don't know, It's like the content width is not 100%, only the menu. I tried to find what It is but I couldn't.
It looks like you're using Bootstrap. That issue happens when you don't have containers or rows nested correctly.
In your case, the issue is in section#contact. The first div inside #mapa is a .container, but its sibling is a .row. That messes up the Bootstrap grid system, and causes your layout issue.
I figured this out by going into the browser's Inspect Element, and deleting elements (in the Source Tree, you can select and element and hit Delete/Backspace to remove it) until the issue cleared up. I then Undo the delete, and delete stuff inside it. Repeat until the issue has been identified.
This link does a great job of explaining the grid system in more detail.
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
Ok I have a really weird CSS issue that I was wondering could anyone suggest an explanation for.
Steps to reproduce:
Open Chrome and navigate to http://www.mcwhinneys.com/media
The gallery of photos should be out of alignment, off to the right by about 50-70px
Open the Developer console in chrome
Expected Result:
i do this to inspect the css expecting to see why the images are off to the side, fixing the css and moving on.
Actual Results:
The gallery of images pops into alignment when the developer tools open.
Anyone know why this might happen? It seems as if the css is fine when I inspect it but it definitely doesn't render correctly until the console has been opened.
Well, the actual cause for the wrong layout is the combination of text-align: center on your ngg-gallery-thumbnail-box (I'll call that box from now on) with position: absolute + display: inline-block on the inner ngg-gallery-thumbnail (I'll call that thumb).
It goes like this:
We apply text-align: center to box. This will cause it to center its inline children. It does this (conceptually) by placing each child's left edge at the current "text cursor" position (which, importantly, starts out at box's center), then moving it towards the left to "recenter" it. This is - also importantly - box's "job".
We declare the thumb as inline-block. This will (among other things) cause it to follow text-align of its parent, meaning that - at this point in time - it's centered.
We then declare thumb position: absolute. This will take it out of the flow, positioning its left edge at the same point where it originally would be - because we're not specifying left/right.
The "naive" interpretation of this would be that it's still at the center of box, and everything would be fine, but we get a "side effect"...
Because we took thumb out of the flow, box no longer has any inline content, meaning its text cursor is at the center, and it doesn't need to center anything. Its "job" is done.
But since thumb is inline-block, it's original position is still based on box's text cursor position (the center), meaning that when we make it position: absolute, its left edge will be placed at that center. It's not horizontally centered inside box, because from box's point of view, there are no children in its flow that need centering.
This is halfways to a chicken and egg problem, so Chrome seems to get confused when it does a re-render of the page for the console.
This explanation may also be a bit confused, but you can see the result here - and even in this simple example, Chrome's console will do a reflow when you try to inspect it. In this example it even seems to enough to resize the window without opening the console (v17.0.963.56):
http://jsfiddle.net/h66Gj/
As far as I'm aware, the way it renders it first, is the way it's "meant to be" (last I checked, the W3C recommendations were vague about it, but at least Firefox agrees with the pre-inspect render).
There are many ways to get around it, my favorite being to only use text-align: center to center... text, and try to use e.g. margin: auto to center other content.
It's really hard to tell, but it looks like it might be something to do with the interaction between the styling of the elements with class ngg-gallery-thumbnail. I would try tweaking/simplifying that. Do you need the display:inline-block setting there, for example?
I've designed a website with an elaborate transparent header that has to pass over part of the main section of the page. I'm trying to keep the number of images used in the website down to a minimum, partly for size and partly for cleaner markup.
I want to start putting clickable items in a blank area under the transparency. I managed to get the image to overlap the div in question by playing with the z-index. Now of course, it's unclickable.
Does anyone have a clever solution to this problem? I can think of several different ways "around" the problem that are less ideal, but I'm hoping to avoid those and find a solution that doesn't use JS or an imagemap. I've tried to use a nested div with a higher z-order (outer div is -1, inner div is 1), but it doesn't work.
It turns out that it wasn't necessary at all to change the z-index. All I had to do was use the negative margin and I could click the content in the transparent area under the image. My mistake was making the initial assumption that I would need to change the z-index for some reason. If I had attempted it without touching the z-index, It wouldn't have been an issue at all.
you can $.Event to make an event and then trigger it when ever needed :)
prefectly cross browser and easy