So on a website I'm making a have a navigation bar, I use this code for it.
<div id="container">
<span>Home</span>
<span>Blackmail</span>
<span style="color: #7CFC00">Keeping Safe</span>
<span>Cyberbullying</span>
<span>About</span>
</div>
However this navigation bar is wider than the others, exact same code (Apart from the colour, the colour shows what page you are on)
I would appreciate it if someone told me why this happens or how it could get fixed!
Website - nibble90.github.io
The page with the wider navigation bar is the keeping safe page!
Your #container menu has a fixed width (83em) and a padding. When your content is longer than the page height, it causes a vertical scroll bar to appear and your fixed width elements can't adjust to accommodate it.
You should set its width to be 100% with a min-width of something like 550px and its sizing to be border-box. This will mean it fits your page much more gracefully on different sized browsers and also auto-adjust to the presence or absence of the vertical scroll bar.
So:
#container{
width:100%;
min-width:500px;
box-sizing:border-box;
}
Replace the #container code by this one and it will works. It's better to use % or px instead of em for container width.
#container {
display: block;
width: 25em;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
width: 100%;
}
The width in your CSS is what is throwing you off. Remove the width and the divs will match in size.
#container {
display: block;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
}
Make sure to remove both because you had width in there twice.
Related
I'm creating website and I have a small problem. At the end I set min-width: 1200px. When I change my internet browser to smaller resolution and scrolling horizontally, it does not affect to my menu items! How can I fix it?
#page{
width: 1200px; height:1000px;
}
#page #primaryMenu {
min-width: 1200px;
background-color: #151414;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center;
font-size: 14px;
width: 100%;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px black;
}
#page #primaryMenu li {
display: inline-block;
margin: 20px 10px;
cursor: pointer;
}
#page #primaryMenu li a {
text-decoration: none;
color: white;
transition: 0.65s;
}
#page #primaryMenu li a:hover {
transition: 0.5s;
color: #d10239;
}
<div id="page">
<ul id="primaryMenu">
<li>STRONA GŁÓWNA</li>
<li>FRYZJERSTWO</li>
<li>KOSMETYKA</li>
<li>SOLARIUM</li>
<li>GALERIA</li>
<li>KONTAKT</li>
</ul>
</div>
EDIT
I don't want to do my website responsive, I want to set it with min-width 1200px; to all devices. Its menu sticks to the top and I don't want to follow vertical scroll.Example: When i change web browser resolution to 200x200 and try to scroll to the right, my menu(list items) stays in the same position.
The problem is when you are giving min-width in pixels it actually taking 1200px of the width.
If you are trying to achieve responsive design then use percentage.
Example: for #page #primarymenu use width as 100% or your desired value (in percentage). Then it will work just fine with all size screens
width:100%;
or
min-width:90%
position: fixed; on #page #primaryMenu : you are asking the browser to display your primary menu at a given x, y offset from the top left corner of the screen, scrolling or not.
Check the documentation about css position.
fixed :
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
If I understand correctly, you want a fixed position on the vertical scroll so that the menu will be sticky to the viewport's top, and normal positioning on the horizontal scroll so the menu viewed by scrolling.
I don't think it can be done in with a css only solution, but check theses questions :
Position element fixed vertically, absolute horizontally
CSS: fixed position on x-axis but not y?
delete min-width: 1200px; and it will work fine
GOT SOLUTION IN JS: jsfiddle.net/vy8rbsv6/1
I have a fixed footer of 970px width, but when I resize my browser smaller the whole footer keeps going off screen with the center of the footer in the middle. I want my footer to stop going off screen when resizing the browser smaller than 970px width.
CSS
footer{
z-index: 1;
position: fixed;
width: 940px;
line-height: 30px;
background: linear-gradient(#232323, #1f1f1f);
margin: 0 auto 0 -485px;
padding: 0 30px;
bottom: 0;
left: 50%;
text-align: center;
}
HTML
<footer>Footer Text</footer>
Anybody know how I could achieve that?
You have a negative left margin of -485px and a left position of 50%. I would just use
footer {
margin: 0 auto;
}
and remove the left position altogether.
Its hard to say without any HTML, but from what I can guess you have two options:
You want to stop the footer being bigger than the browser if the browser is < 940px, if that is so why not set it to have width:100% and max-width:940px;. You may also want overflow:hidden;,
Your footer isnt centering properly, in that case wrap it within a div with width:100% (or calculated to be as wide as your page) with text-align:center; and give the footer (placed within the div) margin:0 auto;
Something like this fiddle
I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:
<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>
And here is some of the basic HTML being used to format it:
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;
}
#content {
width: 70%;
margin-right: 30%;
max-width: 49em;
}
At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.
I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.
Thanks!
Update: here's a very rough schematic of what I am looking for:
|A|B|C|D|
B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.
This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)
HTML:
<div id="container">
<div id="content">articles, images, etc</div>
<div id="sidebar">sidebar content</div>
</div>
CSS:
#sidebar {
width: 29%; background-color: gray; border: 1px gold solid;
float: left;
position: fixed; right: 0; top: 0;
}
#content {
width: 69%; max-width: 49em; border: 1px silver solid;
float: left;
}
#container {
max-width: 70em;
margin: 0px auto;
}
jsFiddle here. (You can test by just dragging the middle frame left and right)
Something like this:
<body>
<div id="wrapper">
<div id="sidebar">sidebar content</div>
<div id="content">articles, images, etc</div>
</div>
</body>
With CSS that is similar to this:
body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
max-width:1000px;
margin:0 auto;
background:#FFF url(imageForSidebar.png) -66% top repeat-y;
position:relative;
}
#sidebar {
width:30%;
float:right;
position: fixed;
}
#content { margin-right:30%; }
The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.
You can add media queries into your css
//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}
//media query (you can add max and min width of the sceen or one of both)
#media screen and (min-width:500px) {
#sidebar{
//css you want to apply when when width is changed
}
}
I have a page which I can't seem to get right in terms of a few styling details.
http://www.comehike.com/earn_money.php
It has two problems with it that I can't seem to get right (largely because design and styling are my Achilles heal).
Problem 1: at the bottom, the footer div sticks out to the right. I tried wrapping it in diff divs, and looking via FireBug, but can't seem to get it to stop sticking out....possibly because I am tired and brain dead :)
Problem 2: Do you see how the main page div ends above the footer and div? Is there way to make the main area of the page extend below the footer?
Thanks!
For the first part of your question, you can fix it by simply removing the width property on your footer, since it's a block element, and it will occupy 100% of the available width (after padding/margin/etc).
For the second part of your question, I'm not quite sure what you're asking, but I think you would change the style on #mainBody to be: padding: 5px 5px 20px; or some other large number for the third value?
Take width off of the footer's CSS.
If you want the footer to be within the main page, you have to position it within .basic
Set footer div width to 900px from 960 will fix footer sticking out
width: 900px;
problem2. The layout is correct how it should be. This is how the layout is
<div>
<div class="basic">
<div> <-- google ads
<div> <-- footer
</div>
to fix this simply change the layout to this
<div>
<div class="basic">
<div /> <-- google ads
<div /> <-- footer
</div>
</div>
Problem #1:
Looks like you want your footer to be 960 pixels wide. But you have a 10 pixel white border which actually makes the footer 980 pixels wide. Remove the border and your footer will again be 960 pixels as you designed. Then it appears you'll have to tweak width: 960px; until it fits properly. 950px seems to work well.
.footer{
width: 960px;
padding: 0.5em 0;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
vertical-align:center;
background: #fff;
color: #462c1f;
border: 10px solid #fff;
}
Should be...
.footer{
width: 950px; /* adjust the width to fit */
padding: 0.5em 0;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
vertical-align:center;
background: #fff;
color: #462c1f;
}
Problem #2:
You need to put the banner's <div> and <div class="footer">...</div> inside of and near the bottom of <div class="basic">...</div>
In my website, some pages are having contents that exactly fit in the screen and some pages having scrolling content. All the pages are having, same html structure.
<body>
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
#header {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #EDEDED;
height: 172px;
margin: 0 auto;
overflow: hidden;
padding-top: 2px;
width: 900px;
}
#contentArea {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding: 0 0 25px;
text-align: left;
width: 900px;
}
#footer {
border-top: 1px dashed #CCCCCC;
margin: 0 auto;
padding: 0;
text-align: center;
width: 900px;
}
When i move to different pages, in some pages the scroll bar appears due to the content, at that time it looks like the whole webpage moved towards left side for some 20px.
How to make the <body> to adjust itself when the scroll bar appears?
Thanks!
The simplest trick is to always display a scroll bar. This is what HTML5 Boilerplate does:
html { overflow-y: scroll; }
if this doesn't fit your needs you will have to use JavaScript. On page load, detect, if body's height is larger than window's height and if not, move #header, #content and #footer to the left, e.g. via padding, or via margin on the body.
However, you have no simple means to find out, how wide the scrollbars themselves are. This, too, needs a detection via Javascript. (Basically: Create an element -> make it's content scrolling -> see how the content width changes.)
i belive you should specify WIDTH css attribute for BODY class:
body {
width:100%;
}
<body style="height:100%; width:100%; overflow:auto;">
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
Here is a jsfiddle link: http://jsfiddle.net/NGWgz/2/
Without fully testing, I suspect the reason you're seeing this is because you have an absolute width of 900px defined for the various elements that appear in the body of the page.
When the scrollbar appears, that's then eating into your screen real estate, and so the content shifts to maintain its 900px width. I would move to a more fluid sizing model, or at least wrap the content in a container of some sort, so that the scrollbar doesn't interfere with it.
The easiest way for me to do this is to use the min-height and max-height properties, that way you will not have to use the Overflow element and therefore the content will not move.
min-height: ... px/em/%
max-height: ... px/em/%
So you will write in your case:
min-height: the original height that you wanted in pixels, percentage or ems;
max-height: auto;
This way it doesn't matter how much content you put inside your box/wrapper/div , it will make the page height bigger without having to change it every time you add something to your page.
You also have the same properties for width but I have not try them.
My sources:
1-I am making a web page and studying software engineering at SB
2-http://www.w3schools.com/cssref/pr_dim_max-height.asp
PS: I know this is already solved, but I think it might be useful for someone else when they are working on their web pages.