I want to modify the stylesheet on my website so that the navigation remains in the middle, but instead of just 'hanging' from the centre, I want the dark grey to expand all the way to the right and left of it.
I was wondering how i could go about this? So far, the only way I am able to get close to this is by shifting the navigation to the left, and the dark grey background colour goes all the way to the right.
My website is www.peach-designs.com
If you wish me to post my stylesheet's here then let me know. Hopefully you can use Web Developer tool for now or Firebug or something.
Hope you can help anyway,
Kind Regards,
Snakespan
you can use
width:100%
for the wrapper div to make it fill the page width
and
overflow:hidden;
for the landscape div
and
margin-right:auto;
margin-left:auto;
for the nav div to put it in the center of the wrapper div
The banner div is wrapped in div.wrapper and this has a fixed size. You could either tomake the wrapper div have width:100% or rearrange things so it does not constrain the navigation.
Related
http://www.barrdisplay.com/
Hey everyone - So the site I am working on has a header background that extends off the screen to the right.. My issue is that horizontal scrolling now occurs because of this.
My #Header has a width of 1450px - which is causing this issues.
How can I fix this issue?
Greg
use in your css
body{
overflow-x:hidden;
}
Note:It will be good to have a read and then use
http://css-tricks.com/the-css-overflow-property/
Header is a div box. If it is set to 1450 then the div is that wide and causing the horizontal scrolling. Set it to something smaller or a percent (like 100% which will go to the end of the page what ever size it may be) and the background will fill it in to that point.
If you need the background to stretch the entire way, then put the header background as a background for the page and tell it to not repeat and place the center of the image in the center of the screen.
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
The website I'm building features a large background header image with a transparent fixed navigation bar on top. View it here: www.bedriftsdesign.no
Right now when you scroll the content scrolls over the header image just as planned, but when it reaches the navigation bar, I'd like it to disappear under the content, the same way the header background does, but it stays on top. To see the effect I'm trying to get, take a look here: http://www.googleventures.com/
Any idea on how to solve this? I've tried messing about with the z-indexes with no result yet.
Would be really grateful for some help.
Add to your <feature> tag that holds all the content, the following css:
feature{
position:relative;
z-index:10;
}
You should probably put it as an answer if it worked for you :).
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
I want my footer to always be at the bottom of the page. I tried using:
bottom:0px;
position:relative;
But that seems to let it go into the middle of the screen under the text. What am I doing wrong. I really dont want to used fixed because of the IPAD!
Use position:absolute and make sure, that the footer is not inside another element with position:relative or position:absolute.
However, that will position your footer at the very end of your page, not at the lower rim of the screen. To do this you will have to do nasty Javascript hacks. Google for "iPad" and "position fixed" to get started.
Or see this SO question.