I am trying to fit a normal web player into a wordpress post. My site is self hosted. The problem is with the positioning of a DIV (not really an issue with wordpress).
Here is the page that I am working on:
http://grayradio.com/mishkin-hits/
The music player was supposed to come at the post area but it is going all the way down below the footer.
I am inserting all the necessary code within the post's main container but for some reason the div class 'ttw-music-player' goes out of this container div.
I tested by putting a paragraph text inside the post's main container at the same time keeping the div class 'ttw-music-player'. The paragraph text appeared properly but the player div went out.
I have access to change my code and that of the player's but I am not sure where to start. Please help. Thank you.
I was using 'body' tag to position the player in one of the JS files. When i changed it to a specific DIV, it worked. Not sure if it is a wordpress specific thing!!
Related
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
I set up a single page layout so I'm using anchor tags as part of my site navigation. All of them are working except the portfolio tag. When I select portfolio from my menu, the screen jumps down to the proper section and then immediately moves to the section above.
I'm not sure if there is some interference from any of my other code, or if the animation of the "solutions" pictures/text is creating the issue but I can't seem to solve it on my own.
Something to note is that the link does work, but only when you already have portfolio selected (ex. /#portfolio)
My site is http://muvltd.com
Any idea?
There is no problem with your anchors. The problem is that the orange circles in the solutions section are not displayed until you scroll down, so they are not yet rendered into the page. This gives the portfolio section a higher absolute position in your page. Chrome jumps to your section which first works fine. But when the solutions section is loaded it pushes down the portfolio.
If you know the exact height of the solutions section or the images contained in the section, I suggest you assign this height to the respective elements. This way, all dimensions are set correctly before the content is actually loaded / initialized.
I found a solution, in my original code, the anchor tag was outside of the paragraph tags:
<p style="text-align: center;padding-top: 55px;">[maxbutton id="5"]</p><a id="portfolio"></a>
Putting them inside the tags solved the problem:
<p style="text-align: center;padding-top: 55px;">[maxbutton id="5"]<br><a id="portfolio"></a></p>
I can't tell you why it would make a difference but it did, thanks for the help!
Here's one for you that has me stumped:
I'm using background:url to put a small image in the bottom right corner of my container within css which works nicely. However, when users are on the account creation page, the section that has the "create account" and "cancel" buttons is overlapping with my image, obscuring half of it. Here's what it looks like:
I have looked into using z-index to fix this issue to no avail (since the image is a part of the container, if I decrease the z-index for the obscuring div, the whole section with the buttons is put behind the container which makes them impossible to see). I also don't want to go into each page individually and put the image into the html, especially since I'm using Joomla and the template html structure is pretty confusing for me. (Using Joomla 3.0.3 with the default Protostar template)
Am I missing something obvious? I feel like I am...
Thanks in advance!
You're funny :) Using a background image but wanting to put it in the foreground.
Just use an image tag and position it absolute in the bottom right of the container (don't forget to give the container position: relative)
I have a pretty simple site, which has a footer that is stuck to the bottom of the page and a content area that can scroll if the content is too long, and the end of the content will clear the footer like below. If the content fits in the page then no scrollbar is shown.
However, recently some CSS/php change which i can't for the life of me detect, has meant that the page no has this huge area under the bottom of the main content div which the user can scroll down like so.
Normal page view with everything looking as it should.
Here is the view for every page now, a user can scroll way below the end of the main content div to reveal this massive empty area underneath.
Having had this working nicely a day ago, Im not sure where to look next. I have check all of the css to make sure there are no syntax errors, I have checked all of the wordpress template files to make sure there are no unclosed divs or vice versa.
Does anyone know a starting point to look at to try and fix this? is there a common error for this type of thing? If you need a link to the stylesheet or html just ask (didnt copy as it was too long)
Not sure why you are using fade element. Definitely it's causing the issue.
Add this CSS to fix your scrolling problem by hiding it.
#fade { display: none; }
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.