Hi im trying to position my website in the centre of all resolutions however when i wrap the entire page in a container div and try styling it nothing happens , below is the CSS i use :
CSS
.container {
width: 95%;
margin-right: auto;
margin-left: auto;
}
Any suggestion on how i can fix?
Your container div IS centered but you've set margins on the left side for the nav element of 220px. I have not looked at the others yet but I presume you have left margins set on those, too.
Also, your elements inside the container are positioned absolutely which will take them out of the normal flow. If you want those elements to be attached to .container then you need to make it position:relative.
Something I mentioned in my previous comment above, you have to remember that when you set a width to a percent to ask yourself, "Percent of what?". It will always be a percent of the width of the parent so the next question is, "What is the width of the parent?". If that's not set then your percentage may not work the way you intend it to, or at all.
Related
When I switch off the blog part and sidebars in the terrifico theme in Wordpress I don't seem to be able to place a full width slider anywhere.
The theme looks like this in the form that I'm talking about: http://vpthemes.com/preview/Terrifico/page-full-width/
As you can see all the text is 'bounded' by a box (the black line). Is there any way in which I can make the metaslider go OUTSIDE of this box (i.e. to span the FULL width of the page)? I don't necessarily want to get rid of the box all toghether, the text can stay within it.
I have seen on the Metaslider website that some solutions for certain themes are given (here - but I am not sure how to adapt this to the theme that I'm using.
Thanks in advance!
Disclaimer
Before I suggest a solution, I'd like to point out that what you're asking is to break the Box flow model. I wouldn't recommend that because you're likely to run into inconsistent results across browsers.
That said, what you're trying to accomplish is possible. You could use javascript to do this and it may in fact be easier in some respects but here's a CSS solution.
1. Break out of the box model
float: left;
width: 200%;
margin-left: -50%;
text-align: center;
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
The width of the container is still relative to its parent so if you use % units to scale it up you would need to compensate for the responsiveness of the parent. Here, I'm just overcompensating.
To ensure that our element remains centered, we use a negative margin that is half of the overflow. That is, we want our box to be 100% wide, we have 100% overflow to ensure that so half the overflow is 50% (comment below if that doesn't make sense).
We use text-align to put the element we add in step 3 in the center of the viewport.
2. Allow Overflows
This is where you may well break themes. The parent elements will hide elements that float outside of them if they have the overflow: hidden property (note overflow can also be used to show scrollbars).
You will need to ensure that the parent elements have:
#post-body, .content-posts-wrap {
overflow: visible;
}
As far as I can see that affects #post-body and .content-posts-wrap
3. Add an element that will be the right size
Now we have an oversized container for our slider but we need it to be the width of the page. Inside the div or whatever it is you want to put your slider into you will need to nest another element that will be the correct width. That element will need the following css:
display: inline-block;
width: 100vw;
text-align: left;
You need display because we are back to the box model now and we want our block to obey the width rule we give to it.
We set our width using vw (viewport width) units to make this a bit easier (but they may not be supported on your target browser). There may be some ingenius way to do this without vw units but I would probably just use javascript if it's not an option for you.
Finally, since we set our text-align above, we need to reset it here.
4. Add a Clearing Div
Because you've broken out of the flow, elements aren't too sure what to do. You probably want to add another element after your parent slider that
specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source
It can be as simple as a <div> element with:
clear: both
write your code something like this...
html like that...
<div id="parent_for_slider">
<div id="slider">
//place your slider code
</div>
</div>
Css for that
#parent_for_slider{
position:relative;
}
#slider{
position:absolute;
width:100% !important;
height:auto;
}
i am recommending to use ResponsiveSlides.js for full width slider with responsiveness
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
I'm currently working on a webpage.
Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.
Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar.
How can I make it go to the next line instead of going behind the sidebar?
Thanks in Advance.
The reason the block is not wrapping is because it is ignoring the margin right.
Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.
This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.
Maybe the reason is width: 100% for the main section?
.main {
width: auto;
margin-left: 250px;
}
From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/
I set up 4 bocks in perfect allignment using absolute positioning. My understanding is that this is that you basically setup the x,y location of each block using top, left and the parent element is the origin. All worked as I expected and I marvelled at how nice things worked. Than I hit the zoom button in IE 9 and although the y coordinates maintained there state...the x cooridanates shifted to the left..some even past the parent element..which makes even less sense b.c. I did not specify any negative values. Why would zooming effect the absolute positioning?
Zooming changes the size of these elements but not it's position. But I don't know how to prevent that, I think you cannot do anything against that because it's caused by the browser.
The only possibility is maybe checking the size with JavaScript, maybe it's possible to recognize this with JS, but that would be very difficult. Anyway, is it important that it works while zooming?
If your 4 blocks are identical in height and width, you could do this:
div.block { height: 200px; width: 400px; float: left; }
Then put them into a container that only allows two blocks side by side.
Example Fiddle:
http://jsfiddle.net/u5xVa/
Your absolute positioned elements are currently positioned relative to the <body> tag's top/left position (which is always 0px/0px).
But you have a centre aligned layout, with margin-left: auto; margin-right: auto; and you want the absolutely positioned elements to line up with that perfectly.
Say you use zoom to make the page smaller by 50%. This will reduce the left position property by 50% and reduce the width of the margin:auto; element by 50% (triggering the left/right margins to be increased by whatever the width change is!).
So, zooming the page smaller makes the margin on the centred element bigger but it makes the absolute position coordinates smaller.
To make it line up perfectly, you need to make the absolute positioned elements relative to the element with margin-left: auto;.
In your specific example I would do this:
div#Ab1
{
position: relative;
}
div#Ab1_2
{
position: absolute;
top: 80px;
right: 0px; /* note: setting a right position, not a left position */
}
/* and do the same for div#Ab1_4 and div#Ab1_4_under */
Does that make sense?
PS: the reason it worked locally and then was broken when you uploaded, is you probably weren't viewing the page at the default zoom level on one of them.
There are many ways to do this right...but what I ended up doing and what makes most since to me is to set up an x-y coordinate plane and position your elements using margins or top and left attributes. To do this I set the parent div to relative positioning to make it register as the "origin" and then set my four square divs as absolute positioned. This works well. What through me off is that you have to set the parent div of you your absolution positioned elements to a non-static positioning.
Don't avoid tables if they are they right way to go - aligning 4 blocks left to right, top to bottom, is easiest done with a table, imho. You can use div with float left and right and junk like that, but the cells in a table never shift out of alignment.