I hate asking a "how do I do this" question, but I've tried everything I can think of and it's just not working.
I have a page design in which there is a center column of specific width (960px) which needs to live in the horizontal center of the page as long as the browser is wider than that width.
I'm entirely unclear on why, but every combination of columns and offsets I try leaves the content off center in one way or another.
I know how to do this with margin:auto but then I lose bootstrap's auto-magical resizing of everything for mobile.
So... is there a way to keep the responsive nature of the site as per bootstrap but to have it put the content into a center strip of a specific width (leaving the sides empty) and yet collapsing down to the -xs- variant when the page is pulled up on mobile?
What you'll need to use is the bootstrap container, you can view the docs about it here: http://getbootstrap.com/css/#overview-container
it is as simple as:
<div class="container">
..some content..
</div>
Related
I'm playing around in Bootstrap 3 trying to duplicate the vertical navigation bar used on the getbootstrap site. I'm running into a couple issues though and I'm not finding a lot of documentation to work from.
Here's a bootply link to show you where I'm coming from: http://bootply.com/77832
Issue number 1 is that if I change the screen size from large to small, my navigation is now under my text. But on the bootstrap site the navigation moves to the top of the screen and the text falls under that. How can I fix the responsiveness of this so that resizing or viewing this on a small screen doesn't wreck the layout?
Issue number 2 is cosmetic. I'd like for the pretty pink background on my navigation to fill the entire container rather than just the width of the text. So I thought, hey throw a width:100% on that bad boy and you're all set. I thought that it would fill 100% of the col-md-3 that contains it, but it actually fills 100% of the screen width. Why would it extend out of the col-md-3 that it is in and how can I achieve the desired look?
For #2, the issue is that the UL has a position:fixed, so it sort of "removes" itself from knowing about its parent's width. Basically, it treats the body as the parent, so width: 100% will make it as wide as the page.
For #1, You may want to look at, when the page becomes small, make the nav "not affixed" to the side of the page.
In CSS 2.1, how can I put different divs next to each others? I found that there is a property float and values left, right, none and inherit and I guess they allow me to put for example picture A left and picture B right. But how can I put a picture B below picture A, or for example such that pictures are 15 pixels below the navigation bar of the site?
Even after editing the question, I'm still not 100% sure what you are after. You are mentioning two images and how they are positioned relative to one another but it sounds like the problem is really that they are overlapping another part of the page. Floating an element will allow you to position an element and have the rest of its parent's content wrap around it, like a picture in a news article for example. You can also position divs side by side but that gets a little trickier.
Originally, you mentioned wanting to position one image below another and have those two move together, in which case you would wrap the images in a div and then float the div however you wanted.
In this updated question, it sounds like you would basically just want the images to appear below your page's navigation bar. Without knowing the details, I assume the images are overlapping your page header because they are floated and they are siblings (at the same level in the DOM tree) with the navigation bar's markup. You could do a couple things to fix that. First, you could give the images a margin-top value that's equal to the height of the navigation bar. But that's definitely a hack. Here's a better approach...
Without example HTML, it sounds like you really have two different parts of a page - a header/nav bar and the body of your page. If that's the case, then I would use a div for each. The images would presumably be wrapped in the body's div and no matter how you float them it within that body div, they shouldn't ever overlap the header's div. For example...
<body>
<div id="navigationHeader">
Navigation Option 1
Navigation Option 2
</div>
<div id="pageContent">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="float:left;" />
Even though the image is floated left, it still won't overlap the page navigation header.
</div>
</body>
floats etc requires a fair bit of study ( not that it's a huge deal but a bit more complex than you might think ) .....
figure out the following
inline vs block elements ( you can change the default setting)
clearing divs
these will help too
http://css-tricks.com/all-about-floats/
http://css.maxdesign.com.au/floatutorial/
http://www.w3schools.com/Css/css_float.asp
http://www.positioniseverything.net/ordered-floats.html
reading your question again it looks like you might be finding that you need a clearing div beneath the two pictures ( this is non semantic by the way)
I have a site I'm trying to build and I've hit one little snag that's driving me insane. Essentially, on pages without enough content to fill the viewport, I want to have the last div (my footer) fill the rest of the viewport, but it's currently being cut off.
My HTML looks like this:
<body>
<div id="header"> </div>
<div id="subNav"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</body>
I tried using html, body, footer { height:100%; } but that creates much more space than needed, essentially a full screen length of blank content in the footer.
How do I get my footer just to fill the rest of the screen without adding a scroll bar?
Thanks in advance,
One Frustrated Coder.
I'm pretty sure the only way to do this is by calculating the absolute remainder hight.
I.E, with jQuery
$('#footer').height( ($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px" );
You would want to do this on window resize to allow for a dynamically resizing window.
$(window).resize(function(){...});
I know this is 10 months late so you probably already figured something out. But here is one solution that I use.
(sorry, for some reason I can't get the code thing to work right to show you the code.) Basically wrap a div called "container", or something like that, around all other divs except the footer. The footer div will be just under the container div with all others inside the container.
Set the background color of your body style to be what you want your fill to be at the bottom. Then the background color of the container div would be what your body background color WAS. So everything down to the footer will be what you wanted the background color to be and then the body background color fills the rest of the page.
If you don't want to go the jQuery route, the poor man's version of this is giving #content a min-height that will make it work in most displays, and/or by giving your footer plenty of padding on the bottom. It might trigger a scrollbar in some instances, as you're just controlling how short the page can be, though.
(Or you can just accept it as a limitation of the medium. Stack Overflow, for example, just has its footer float above whitespace if the page is too short.)
Here's how it looks like right now:
my screenshot
Is there a way for me to center the area that has content, and place a repeating background image so the site doesn't look so empty?
Centering horizontally can be accomplished by wrapping the content you wish to center in a div, and applying the style:
margin-left: auto;
margin-right: auto;
to said div.
This will take care of your issue of space on the right. You can place a background image (repeating or not) using CSS as well.
Your larger issue will be the vertical centering. As far as I'm aware, there's (currently) no easy, cross-browser (including IE6/7) way of accomplishing that. I'd like to be proven wrong here by another user, though. :)
It looks to me like you just need some padding on the top and left in your content area.
Sorry I didn't realize your page was only a portion of the screen.
Why not splice your site into parts (divs) and use a fluid layout? Here is an article from Smashing Magazine about Fixed vs Fluid layouts.
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.