So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }
Related
I am working on a site with a header at the top and a main content area. The header does not scroll but the main area does. This means that I have a scrollbar to the right of the main area but not to right of the header and they do not line up:
In this image the red bar is the content and the orange bar is the centre section of the header that should be in line with the content.
These are both aligned using this css:
.center-content {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
What is the best approach for this?
I was thinking of just adding the scrollbar permanently but I don't really want to do this. I could then just add some padding to the left of the main section to re-center it. Alternatively I could add padding to the right of the header.
Questions:
How would I change the style of the header based on wheather the main section has a scrollbar?
How would I add padding to the main section based on wheather it has a scrollbar?
How to I get the width of the scrollbar? Is this guaranteed to be the same across all browsers (I need to cater for mobile as well)
I have created a JSbin for this that demonstrates the issue.
I am using the material-design-lite style sheets for this.
You will not want to change any styles based on the scrollbar - I think that's too complicated and it would almost certainly involve javascript. Scrollbars are also not consistent across browsers/mobile. A better option would be to fix the header to the top of the page, and make the content div's margin-top equal to the header's height. Then the scrollbar, when it appears, will be to the right of the entire page. See an example here:
http://output.jsbin.com/xuroyaceli/#
Resize the window to see how it looks with a scrollbar.
I have a header with a small horizontal bar right underneath it that serves as the main navigation for my site. When the window is full sized it works perfectly. But if the window is resized even a little bit smaller, the right-most menu moves down to the next line, as you would expect any floated element to behave.
Question: How can I make it so the navigation bar always stays on one line, resizing appropriately to the window size? I've tried changing the lengths to percentages, though this often causes problems since there are many components to the CSS.
Here is all the relevant code: http://jsfiddle.net/HSVdg/1/
Here is what I think is the main culprit, though I could be wrong:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my question.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Any help would be immensely appreciated!
You can do this by using CSS display modes.
Just set the ul to have display:table
And the child list items to display: table-cell
The table cells will automatically adjust thir width to fill the parent table at any width.
You'll need to remove the explicit width from
<li>
and
<a>
to allow them to be automatic.
I've updated the fiddle for you: http://jsfiddle.net/HSVdg/13/
Hope this helps.
I am using a fixed width layout for a website (1000px), with the layout being centered in the screen by auto margins. However, I find that on some pages on the website, the layout is positioned slightly different than other pages for some reason. This is surprising to me, because I use Django and serve the same base template and stylesheet to each page, so I would expect them to look the same.
For example, take a look at http://crh.vkuzo.com/. If you load the "home" and "suggest" pages, the layout stays exactly the same. However, if you load the "about" page, you can see the layout move slightly to the left.
What is causing this slight movement, and how can I get rid of it?
P.S. here is the relevant CSS for the container div (at least what I think is relevant):
#wholepage {
width:1000px;
clear:left;
margin-top:10px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
It is the browser's scroll bar. See: How to prevent scrollbar from repositioning web page?
Add this style:
body {
...
overflow-y: scroll;
}
For centered pages, you want the scroll-bar to be always visible (even when it's not needed). That way the page won't shift horizontally depending on whether the scroll-bar is visible or not.
The scroll bar is adjusting the layout. When the scroll bar appears on the browser window, it minimizes the width by a certain amount of pixels (the width of the scroll bar itself).
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.
I am trying to create a CSS layout where the page looks like it's in the middle of the forest. There is a left and right div with the background trees, some header divs that show the top of the page with various wildlife, and some footer divs that show the bottom with more wildlife that matches up with the left and right div background images, all of which is positioned using "position: fixed" in CSS.
Then there is content in the middle that is positioned normally and scrollable. That all works fine.
The problem I'm having is that the background forest layout is fixed at 1204x768 but of course some web browser windows may not be that large. Unfortunately while the content will scroll as intended, the fixed position elements will never be shown if they are outside the size of the browser window. Clearly not acceptable.
I've tried setting overflow: scroll and height: 768 on the .body and .html elements in the stylesheet but no luck.
Note that I am positioning everything with top: and left: values in the CSS. I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn't line up.
This may just not be possible in which case I'll have to rework the graphic design, but if it is possible I'd love to know how!
of course some web browser windows may not be that large
Or indeed that small! The likelihood of the browser window actually being exactly the right size to put your decorations on the edges is quite small; that's always the problem with fixed layout.
I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn't line up.
Yes, designing images that can alter their joins in response to page size changes is more work, but it's doable. You would have to export the ‘bird+foliage’ layer and the ‘squirrel+foliage’ layer as standalone transparent images, then lay them over the top of a longer side image.
To make the object edges nice and smooth would require PNG's 8-bit transparency, which would necessitate a PNG-rendering hack for IE6. Not the end of the world though.
Unfortunately while the content will scroll as intended, the fixed position elements will never be shown
Is that a problem? They are only decorational in nature.
I've tried setting overflow: scroll and height: 768 on the .body and .html elements
For this approach you would need to set ‘overflow: auto; height: 768px;’ on a wrapper <div> which holds both your #sidebar-left and your #content.
You could have two pictures: 1) a right that contains the right trees and the bottom footer image and 2) and left image with the left trees. Make the bottom footer much wider than it needs to be and the trees (left and right) much taller than they need to be.
Then set the right picture to bottom: and right: and set the left picture to bottom: left:. This will force the pictures to always be on the outsides of the page, no matter the browser size. Then set the z-index of the right picture to be just behind the left picture. It will then always look like the page will be bordered. Or you can set a firm width and height on the parent container, and they will always be on the border of the container. You can also set a min-width and -height if you need to have a certain minimum sizes.
As for things not being visible at a certain resolution, you're really not going to get around this. You could have two sets of pictures, one for normal resolutions, and one for smaller resolutions. Then you can get the width and height of the browser with $(window).height() and $(window).width() with jQuery, and load the appropriate pictures.
EDIT: After looking at your site, i'm pretty sure the second part of that (setting a fixed width for a container, then putting a bottom right picture and bottom left picture) will work for what you want. That will force the page to be a certain width, and thus have the entire border visible.