I'm working on a site that has grid-16 to start with. I increased the grid size by a factor of 4/3, and have altered the markup. Adding float to either element does not appear to be doing anything.
The page is the homepage at http://ccachicago.pragmatometer.com/. I'm trying to get the main content area to display to the left of the sidebar, instead of having its top of the sidebar's bottom. I'm sorry not to provide singled-out HTML and CSS, but the page has a lot of inherited CSS, and I'm working on getting on top of it.
Get rid of the width: 1306px;
#main, #page-inner, #main-group {background-color: #fff; width: 1306px;}
#main, #page-inner, #main-group {background-color: #fff;}
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.
The problem is with the photography website I have created for some reason just on the "Contact" and "Bio" pages. It is only when the screen is resized so you will need to shrink down till the layout changes. Then when you hover over the menu tab "Albums" and the drop down menu appears it is pulling the content under it up slightly. It also creates a margin on the right that creates a scroll bar at the bottom. I have been combing through the CSS over and over trying to tweak things, can't find a solution though.
The website is:
"Bio" http://www.sairjanephotography.co.uk/bio.html
"Contact" http://www.sairjanephotography.co.uk/contact/contact.html
Also I just noticed the actual contact page drop down menu is hard to actually get onto with the mouse where as the Bio one isn't.
Any help appreciated
You can ditch the javascript approach, and just use CSS. Something like this would work; just apply left: 100% to get it on the right instead of below.
Edit: sorry for not reading the problem earlier. Your problem is that you have defined width on your ul element. On line 277, you have:
/*Re-centres the nav menu on phones from tablet*/
#media screen and (max-width:37em){
.menu ul{
font-size:4em;
width:18em;
}
}
But if you remove width: 18em, all is well, it appears.
To clarify on this, you shouldn't be setting fixed widths if you want to acheive a good mobile design. Instead, try to use tricks like text-align: center (coupled with display: inline-block, and display: block; margin: 0 auto;.
I think the other part of this question had to do with the hiding of the title. If you still want your header to show, you could either change its z-index to anything higher than the dropdown, or you could use an ajacent selector to give the main content a margin-top when the dropdown is active.
For example:
.menu.open + main {
margin-top 3em;
}
/* Add some transitions for show possibly */
main {
transition: 1s ease margin
}
I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page.
Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space.
Code can be seen here http://jsfiddle.net/FW98q/
MY gut feeling is the problem is at:
#Navigation_Container {
background: #3399cc;
height: 50px;
//width: 960px;
//margin: 0 auto;
}
Help is much appreciated.
Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)
I found the issue....Its in the class '.notice' that is in the footer...if you remove
position:absolute;
It works just fine. :) Check it out! Fiddle
I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.
Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this
position: absolute;
bottom: 0px;
left:0px;
Here is an example with the left:0px added
FIDDLE
#page_container, #Header {
width: 960px;
}
Made sure these two element are the same width as the others if you want them to be the same width.
// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.
Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.
add to your css
body{margin:0;}
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; }
I've been trying to fix a problem with my nav bar on my website. If I move from the home page to the gallery page, the nav bar changes slightly (the navigation links move up by 2 pixels), and the bar seems to shift to the right, though I'm not sure why. The same happens when you move from the gallery page to the about page, only it doesn't shift to the right.
the URL is www.peach-designs.com. The code is really too big to post, but perhaps somebody could help me by looking using Firebug or Web Developer tool.
you can also change the class id wrapper in index.php
this will make index page to be same as the other pages
enter code here
#wrapper {
margin: auto;
width: 990px;
}
I'm assuming you want the navigation on each page to be in the same place it is on your home page (it's properly centered on that page). Also, I've only tested in Firefox (because you suggested using Firebug), where your site seems to work - in Chrome there are no images.
First, remove this from galleryStyle.css:
#wrapper {
height: 599px;
margin: auto;
width: 990px;
}
Then do this on gallery.html, news.html, about.html, and contact.php:
Move <div id="main"> to outside and before <div id="wrapper">, so it ends up like this:
Doing this centres your white overlay properly. At the moment, it's a bit too far to the right.
Your wrapper div on your gallery page is narrower than your home page (only 990px). Because it's occupying less space and being centered, your nav div is nudging to the right on the gallery page to occupy the smaller space of its parent div (wrapper) than the wider space of the home page. Try using consistent sizes and you'll run into these problems less.