I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
Related
i am sorry to disturb you all, but i want to understand how a certain margin responsiveness works.
As you can see on this site http://www.trade-ideas.com/about-us/ the navbar, the paragraphs, the h1, h2 and the footer maintain the same left-margin as you resize the browser window (with firefox the effect it's more clear).
It's like when the elements reach the limit of the left margin (that is mean zero), they restart just on the same distance (the same margin-left) that they where before i was starting resize my browser width.
I've noticed that the navbar included in bootstrap also has this left margin responsiveness: as i resize in width my browser's window, the navbar continue to stay in the same left-margin range, restarting every time he reach the zero margin-left.
In fact, on this bootstrap page you can find the exact same effect in all the page's elements (the navbar and the div box on the body) : http://getbootstrap.com/examples/navbar/
With firebug i've tried to search what parameter set this particular effect, but i'm not an expert, and i didn't find a solution.
So, my question is: this left-margin responsiveness it's generated by a set of #media queries instructions to a set of width? Or there is something that i'm missing?
Thank you in advance for all the help that you'll give me.
Andrew
p.s.: i noticed that on http://getbootstrap.com/examples/navbar/ if i delete "margin-left:auto; margin-right:auto;" the effect that i need doesn't show up anymore.
I tried to create a div container with that margin auto on my site, but i was not able to ricreate the effect (maybe that "margin-left-right:auto" it's just a part of the effect).
The media queries are the ones that make sure the website is responsive. The example: http://getbootstrap.com/examples/navbar/ is using media queries to set the width of the container. If you set the media queries to change when the screen width is 700px and when you make the width of the screen smaller. The media queries will register the px of the screen and when the width of the screen is equal 700px the container will change.
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
I decided to try and use the 960 grid system on a recent client project to speed up development, and its structure is working perfectly, and I love it!
The problem I'm having is the break in the div background colour (I am not sure to scale sidebar to 100% height), and the background transparently shows the 10px margins (sidebar and footer). This is a live version of the website so far, it's probably a lot easier to see the problem - it's quite obvious: http://mediasmoke.com/clients/packtv/.
I have the structure I want, the divs are in the right place. Is there a technique to fill in those blanks and keep the website flexible in height for more or less content?
I'm drawing a blank, and I tried using a second container, but that didn't work properly...
Yes, as aSeptik said wrap .content and .sidebar in a div and apply the background to that. .alpha and .omega don't fix the problem. It looks like you will need to do the same on the footer columns too.
OK, I figured it out. The reason the second wrapper div didn't expand with the 960gs was because it had to have a float:left.
Now at 960 pixels wide this gave me an extra 10 pixels colour padding on either side. If I trimmed this or made the wrapper smaller, it breaks the 960gs, making it useless. After messing about with a simple solution, I found I was to create a background image that was 960 pixels wide with transparency - 10 pixels on either end, so it gives the impression of 940 pixels!
Yay!
I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.
That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.
The code/website can be found at:
http://cliqthis.com/temp/roadhouse/index.php
Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.
You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.
Are we talking about the black bars not extending all the way to the right?
You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.
Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).
Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?
Set up a minimum width for the div.
div.class { /* ... */ min-width: ___px !important; /* ... */ }
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.