The layout in question is here: http://www.davedaranjo.com/media.html
This is probably an issue in standard positioning with css, but I've tried every positioning combination I can think of to achieve this:
http://i.imgur.com/y1qRU.jpg
Every time I try to move the player anywhere on the page, it positions itself at the bottom, even below the footer. I've even tried putting the content in a table with the links and video in the left td and the player in the right, but the player won't even sit in the table. I've also tried a number of positioning tags in the css file and at best, it will move if I give it a fixed position, but because the rest of the layout isn't fixed (and isn't on the rest of the site), that's not a viable solution.
I realize this is probably something fundamental that I'm missing here, but any suggestions would be extremely helpful.
Thank you!
Had a quick look at the source of that page and saw quite a few things i would change, so i will not go into detail but maybe this will get you started.
You could try floating your main div (look for <div align="center"> in your code) with css float: left; and also make your player inline-block like so;
.ttw-music-player { display: inline-block; }
Related
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
I've been scouring the forums without a clear solution to my problem so I figured I'd give stackoverflow a go. In short, I need to know how I should go about positioning the elements on my site. When maximized, the images appear fine with the iframe as it should be. Upon resizing the browser, my sliced images shift to the left and distort my layout. My question is, should I use and div within a div to position my elements or is there another method I should be searching for? I know that I could possibly use CSS to position things but I would like a clear answer if possible as I've already spent countless hours on this. Thank you and my apologies in advance if I've left out pertinent information.
http://hrsolavei.dx.am is where the site is located, please take a look and give me some feed back. Thanks again.
If you want to position the content of your website using an iframe like you have it right now, and the layout in a separate table, then you need to give your iframe the css of position:absolute; right:50%; Then, for the div surrounding your iframe, the css should be overflow:visible; position:absolute; left:50%;
Now, I implore you to please research web development best practices, as they will make your website much easier to develop, and easier to change later on. The big ones that I noticed are that you should try using divs for your layout instead of tables. Tables are meant for storing information much like the image in your iframe does. You should also look into organizing all of your styles using a css file.
I'm working on my website, http://www.perezfox.com, which features a fixed-position navigation menu. I'm happy with how this operates, but there is a problem with vertically-challenged browser windows. Users who scroll to the bottom will see the nav overlapping with the footer because their browsers don't have enough vertical space to accommodate both.
Is there a way to "push" the otherwise-static nav menu up as the page bottom approaches? Perhaps specify a distance-to-bottom that will override the position: fixed style? A friend has suggested that I need to monitor the page position and "fire an event", but I'm not sure what that means in practical terms.
I'm comfortable with CSS and HTML, but more of a beginning with Javascript and jQuery. Any advice is graciously appreciated, keeping that in mind. For example, you might have to say something to the effect of "put this within a script tag within your site head ..."
Thanks in advance!
EDIT
I found a few examples of this behaviour, but most of them are reversed. For example:
http://www.madebyparachute.com/products
On this site, the [left column] navigation elements start scrollable, become fixed. I want to have mine start fixed, become scrollable. Also, this one concerns the top, whereas mine concerns the bottom. But I image it's similar functionality at work, no?
I appreciate everyone leaving feedback but after a very frustrating day with this stuff, I must beg and plead that you please, please, don't just throw code at me. I need a bit of instruction, especially if there are script, CSS, and HTML components working in concert.
Also, note that I'm using the HTML5 elements for <nav> and <footer>, and not the traditional <div id="whatever">.
Thanks!!!
If you don't mind not supporting older browsers, you can use CSS3 Media Queries to change the styling when the window gets too short. It might look something like:
#media screen and (max-height:300px) {
navigation-element {
position:relative;
}
}
Note that for IE this only works in 9+. Other browsers are fine, i think.
Edit
If you need older browser support, you could do something like:
window.onresize = funciton() {
var sidebar = document.getElementById("idOfSidebar");
sidebar.style.position="relative";
//other styling stuff here
}
You can use jquery to set the nav to have relative positioning if the height of the browser is too small using the css function.
It might look something like this:
$(window).resize(function() {
if($(document).height() <= someNumber){
$("#nav").css('position', 'static');
} else {
$("#nav").css('position', 'fixed');
}
});
I have created a web page layout using CSS. The CSS and HTML can be found here: http://pastebin.com/Gn25nM8G
I had to use what seems like some funky tricks to get the layout proper. Specifically, to get two of my content blocks in the right place I had to use this CSS:
position: relative;
top: -351px;
I'm wondering if there's a better way to accomplish this layout?
I'm also not sure why there's a big gap at the end of my page? If you create a page from my code you'll see what I'm talking about. Any help would be greatly appreciated.
What if you just try rearranging your elements? Putting everything into two columns and floating each of those?
Here is a quick fiddle to illustrate what I mean:
http://jsfiddle.net/qh75H/3/
Here's my approach. jsFiddle
I have tried to maintain your code and layout as far as possible.
That may or may not be the best approach.
position: relative means you are moving the div, but the the space taken up by the div originally is still occupied.
If you want to move the div's, but make room for other content, position: absolute may work better.
the position: relative could also be causing the whitespace because the boxes you "moved" may still be taking up space, causing the page to run long.
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.
overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.
Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.
However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
overflow-y: scroll;
overflow-x: hidden;
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.