There has been so many different answers to this and I'm having a hard time figuring out what I should be practicing. Currently I am using a script to center my page. I got it from someone on this site, but I don't know enough javascript to understand it.
This is the code im using
$( document ).ready( function(){
setMaxWidth();
function setMaxWidth() {
$( ".page_wrap" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}
});
At first I thought this worked well, but after zooming out and refreshing, it adapts and stretches out everything. This isn't a huge problem, but I've noticed that professional sites are using this method as their sites don't break after doing the same thing.
For a div wrap and centering content, must I use a 960px width? I don't like using fixed widths.
if you notice on this site: http://themetrust.com/demos/hero/
they're not using media queries to make it responsive. As you zoom in and out it adapts nicely. This is what I'm aiming for with me site.
Most common tecnique to horizontally center elements is to give an explicit width to the contained element (must be a block element) and use
margin: 0 auto;
This is what the website you linked is using as well. Fixed width are ok if used consciously, better if they adapt to different screensizes through media queries.
Use frameworks instead of placing each elements by hand and with jquery! Saves time, saves effort, causes less errors. Try bootstrap
Related
Hi I don't know how to solve this...
I want the element marked with a red rectangle in the images to move depending on the size of the screen ALIGNED to the containers below ALL THE TIME. I'm making a responsive website with the different media screen instances but I want to be sure that this element keeps in the same alignment all the time. How do I do that? No JS please.
http://www.awesomescreenshot.com/image/58399/669844960fdd9761084f64bae5d29112
since you haven't provided any code for what you have so far its difficult to help you. However, I think I understand what you need and you need to specify some width constraints to accomplish this:
you will need a container inside the header that will have the same width as the content below. Here is a working fiddle
css {
width: X%;
}
This probably was answered somewhere, but I can't find it :s
My question is about dynamic resizing of divs based in percentages.
Please look at code example below for the examples and possible solutions I made.
I ask if there is a better way to do resizing?
More detailed explanation:
Say I am writing a plugin that people can insert in their pages. (Imagine login form).
I go ahead and design the plugin's divs. I use media queries to achieve desired look for different devices. I work on a div straight inside of a 'body' element.
I use percentages for design (I like percentages). Say I set div to 80% width.
Now I give this plugin to the user. User goes ahead and puts the plugin's div inside of another
div that is 100px in width. Now everything looks awful. (80% of 100px is not a lot [80px]).
And of course I want user to put my plugin inside of whatever small-width divs that he have.
The solutions I saw so far to this problem was to create a holder div of certain width - say hardcode 300px. (ex - jQuery UI's Datepicker div; Meteor's login widget div). And then code to it always knowing the 300px width that I set before is not going to change.
But I don't know how good of a solution this is.
Moreover if I decide to go with hard-coding width, my plugin would need width of ~ 1000px. Because I want div to resize with media queries.
And if I go with hard-coding width (say holder div of 1000px width) and put it on a page, the page will have horizontal scrolling. And you cannot simply hide holder div (parent div) and have child to show at the same time. So this requires setting position:relative for holder (parent) div, putting it outside of window, and use same for child div - position:relative with same offset in opposite direction of parent offset.
I hope I am being clear so far and have not confused you!
A code example to illustrate what I am talking about:
http://jsbin.com/ifawez/18/edit
#cimmanon's comment cleared things out for me.
The problem is with lack of HTML/CSS "tools" available at the moment. Since responsiveness came into play fairly recently there are not a lot of CSS-native tools to accommodate changes in dimensions.
For instance media-queries exclusively work with width of window/document and not of other elements such as divs.
The solution I currently employ is using Javascript to determine width of a div and resize accordingly.
What I resize is the number of columns I want to display (I use Multi-Column module as suggested by cimmanon) which is pretty stable on webkit browsers. Since it is all done in Javascript (and jQuery's Sizzle) I keep an array of sizes like so:
var widthArray = [
{min:0, max:250, columns:1, secondary:false},
{min:251, max:350, columns:1, secondary:true },
{min:351, max:479, columns:1, secondary:true },
//more div sizes
];
// more code here
$(element).css({
"column-count": object.columns,
"-moz-column-count": object.columns,
"-webkit-column-count": object.columns
});
This is sort of like media-queries, but allows to work with width of html elements, not screen size alone.
Additionally I follow the way jQuery UI displays its components: using position relative/absolute.
.outer_div {
position: relative;
}
.inner_div_with_elements {
position: absolute;
z-index: 1010;
width: 99%;
float: left;
overflow: hidden;
...
}
.inner_components_displayable {
position: relative;
display: block;
}
.inner_components_hidden {
display: none;
}
So in Summary:
Media queries alone work with size of screen, and resizing of any inner element can be done in percentages to the screen size. They can be of huge help, but you turn into making your components work either with percentages based off screen, or specifying something like min-height and !important (as suggested by #Octavian)
Javascript manipulation of elements is currently easier, but is a costlier alternative (jQuery SIzzle is pretty slow)
A lot of libraries (ex. jQuery UI) use Javascript together with position relative/absolute to make sure their components/plug-ins will work nicely on all users' screen sizes.
I ended up combining position with javascript to emulate media-queries and multi-column design at the same time for responsiveness.
Thanks everyone who participated!
If I am reading this correctly, the main issue here is that it can potentially become too small based on where the code is located.
So why not just add a min-width property with !important? That way you can still base the size off of the parent container, but be sure that it doesn't get too small and ugly.
Potentially, you could even have a script to base the width off of the parent div and the min-width off of the screen size.
I am trying to help a graphic designer with her website http://designingforgood.tumblr.com/
She wanted the SnapWidget which is the grid of six photos on the bottom left so I placed it there. My concern is that it gets cut off in smaller windows which may mean that on smaller screens it will also not be displayed properly.
Also, in different browsers the distance from the blue box above the photo grid changes. It looks further away in firefox than in chrome. I worry that in some other browser it may even end up overlapping.
I searched for an answer on w3schools but didn't find what I was looking for. I also searched for similar questions here on stackoverflow.
Well you have inline styles on the div containing your photos that is settings its position as fixed. Your sidebar is also set to fixed. The only way to make sure that section is scrollable is by removing both of those values and fixing it up from there.
Remove position fixed from all divs inside the sidebar.
Wrap both sidebar and thumbnails inside another div and give an id sidebar-container to this div. You should end up with this main structure for your sidebar:
<div id="sidebar-container">
<div id="blue-box">...</div>
<div id="photo-grid">...</div>
</div>
Fix any css problems you have. Make sure website looks good in both situations, when sidebar has fixed position and when it hasn't. Maybe you want to float the sidebar to work well in both cases.
Use jQuery (I see you load it anyways) to determine if the height of the #sidebar-container is less than the height of the window and only then, we add position:fixed;.
The jQuery code might be like this:
function checkHeight() {
var sidebarHeight = jQuery("#sidebar-container").height();
var windowHeight = jQuery(window).height();
if( sidebarHeight <= windowHeight ) {
jQuery("#sidebar-container").css({ 'position' : 'fixed' });
} else {
jQuery("#sidebar-container").removeAttr("style");
}
}
jQuery(document).ready(checkHeight);
jQuery(window).resize(checkHeight);
So, users with big screens will benefit from the fixed sidebar and users with small screens will have the ability to view the whole sidebar by scrolling down.
I am working on removing tables from my site, and just learning the div tricks involved. My home page currently has a centered table nested in another table. Removing the outer table was a bit tricky for someone just learning non-table methods, but it's done.
My problem is, the inner table is super-easy to center ("margin:0 auto" in the CSS), but its div equivalent is not. The div will center if I specify an absolute width (such as 640px), but since I'm designing with the user's font size (not something I specify), I don't know how wide it will actually be for a given user.
I've simplified the home page and have it online (test.html and HoH.css Here is an overview image of test.html.
Sorry for all the links. But with a floaty thing inside another floaty thing, I don't know what is relevant. The file test.html contains 63 lines of formatted HTML. The 640px hr is there for reference only; it will not be part of the final page.
PS: I'm removing the tables because when I asked for site reviews, the first comment almost everyone had was, "get rid of the damn tables".
Probably you shouldn't worry about users font size because all modern browsers zoom whole page, not only font size, and everybody will be happy with your fixed width.
Also you can use EM values instead of PX, 1em = font size in px. You can change 640px to 40em if you have 16px font size. If someone have for example twice bigger font, he will get twice wider block.
And if you want css-solution for unknown width block centering, you can use inline-block and text-align:center: http://jsfiddle.net/rBc4T/
use CSS and jQuery -
css -
#divID{ left:50%;}
jQuery -
(function(){
var marginLeft = $('#divID').width();
$('#divID').css('marginLeft','-'+ marginLeft /2 +'px');
});
So I can't get the footer on this page: http://hiddenhillsweddings.com/ to extend to the bottom of the browser window. I've tried all of the different positional attributes (absolute, relative, etc..) and I've tried all kinds of different combinations with minimum and maximum height at 100% and other values. I have read many threads on this forum about this topic but haven't found a solution. I'm pretty sure what I need is a position: absolute; and a height of 100% but for some reason when I do this the footer extends way past the bottom of the browser and I can't hide the overflow to get rid of the scroll bar. Someone please help me.
You have just found one of web developers' most usual problems... There are many solutions to this, some pure CSS, other with JavaScript. There are some good tutorials on this subject already written:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
I personally do it via jQuery, I find it to be more reliable. I place the footer below everything, with display:block and normal position. Then I check if the content is smaller than the page, in which case I change the position to absolute and bottom:0;
Once that is done, I check on window resize in case the scenario changes. It's probably not optimal, but it works great:
function footer(){
var offset = $('#footer').offset();
var footerHeight = $('#footer').height();
var height = window.innerHeight;
if(height-offset.top-footerHeight>0)
$('#footer').css({'position':'absolute', 'bottom':0, 'width':'100%'});
else
$('#footer').css({'position':'static'});
}
Just make sure you change #footer for the ID of your footer element.