I know it's probably the dumbest question on StackOverflow, but I have a problem with my menu. I want it to be 100% of the page's height, but it's only 100% of the window.
Here is my uncompiled Sass (Compile it yourself if you don't like Sass):
.nav
position: relative
z-index: 0
width: 20vw
height: 100vh
background-color: #EEEEEE
If you need more information (HTML code, etc...) see this link http://codepen.io/arguiot/pen/RGQkmg
It's due to your fixed header. Add its height (15vh) as a margin-top to the .navbar, and subtract that value from the all items margin-top inside the navbar to compensate that moving down.
.nav
position: relative
z-index: 0
width: 20vw
height: 100vh
margin-top: 15vh
background-color: #EEEEEE
.nav-title
position: relative
text-align: center
font-size: 1.5em
top: 5vh
.nav-content
position: relative
margin-top: 10vh
text-align: center
font-size: 1.5em
Here's an edited codepen: http://codepen.io/anon/pen/ORQKQm
Related
#searchInput {
width: 50% !important;
height: 50% !important;
display: block;
position: relative;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
color: #FF7F27;
top: -300px !important;
left: 100px !important;
background: transparent;
font-size: 85%;
I'm doing this in main.css for monobook skin in mediawiki. For some reason, main.css is ignoring my !important because it's still not centering the div. What am I doing wrong to have my code keep getting ignored? How can I fix this? Im not asking how to center. Im asking why my divs code is bein ignored even when its proper.
Technically, this div is already centered because the width is 100%...
We need to see the bigger picture here as presumably this div is inside something else which is prompting you to try to override said div's css using !important?
This is the kind of thing you should be doing:
body {width: 100%}
#searchInput {width:50%; margin: 0 auto; display: block;}
which would end up with a centered #searchInput div on the page...
http://jsfiddle.net/ndmdpd69/
I have a simple page with two offcanvas menus, one in which side, they both work normally when in english, but since I also need to support arabic, I use the dir="rtl" in the html tag, and with it the right offcanvas menu have some weird behaviour on Chrome, looks like a repaint issue, when I resize the window it goes to the right position (sometimes it goes randomly after a few seconds as well).
I'm using transform: translateX(); and transform: translate3d(); in the body to achieve this, and as far as I can see there's nothing wrong.
Here's a codepen example of the bug: http://codepen.io/Ghostavio/pen/WbgXXZ
Its a simple thing I did Hope This is your answer
What I did was made the body position Fixd
in body:
position: fixed
Your New CSS will look like this:
box-sizing: border-box
body
padding: 5%
position: fixed /*Changed Here*/
overflow-x: hidden
transition: .3s ease-in-out transform
&.left-offcanvas-active
transform: translateX(270px)
//transform: translate3d(270px, 0, 0)
&.right-offcanvas-active
transform: translateX(-270px)
//transform: translate3d(-270px, 0, 0)
header
text-align: center
position: relative
img, svg
vertical-align: middle
a
text-decoration: none
.logo img
width: 240px
max-width: 100%
.gc
fill: #8E8E8E
.content
text-align: justify
.hamburger-icon
position: absolute
top: 10px
left: 0
cursor: pointer
.second-icon
left: auto
right: 0
.left-offcanvas, .right-offcanvas
witdh: 270px
min-width: 270px
height: 100%
background-color: #BABACA
position: fixed
display: block
top: 5%
.left-offcanvas
left: -270px
.right-offcanvas
right: -270px
.offcanvas-links
display: block
padding: 20px
color: #117EBF
border-bottom: 1px solid #E1E1E1
font-weight: 800
text-decoration: none
span
background-color: #C80428
color: #FFF
padding: 0 5px
border-radius: 2px
font-weight: 400
float: right
Hope this helps you.
I had a similar issue creating a sticky header on a horizontal scrolling table for RTL. What I found is that in order to get position : sticky to work for RTL without JS, I had to assign z-index to both the sticky column (sticky header) and the scrollable columns.
At first I used JS to position everything and add offset padding to get the sticky header effect. But after a walking away in frustration and returning to it days later did I come up with a CSS only solution.
JSfiddle example
I am having trouble with my container div, which you will see below. It contains a very simple graphic that repeats vertically. I want the background image to expand with the content, however it is not doing so. When I expand my browser window, the background image expands to fill the page vertically, as it should...but when I scroll, the lower portion of the background that was initially below the fold, is empty when I scroll down.
I've also included the html,body as I am not sure where the problem is.
CLICK HERE TO SEE THE PAGE I AM HAVING TROUBLE WITH
Thank you!!!
html,body {
background-color: #999;
background-image: url(../images/bg.jpg);
background-position: top;
background-repeat: repeat;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
height: 100%;
line-height: 18px;
margin: 0;
padding: 0;
}
#container {
background-color: #000;
background-image: url(../images/bg_container.gif);
background-position: left top;
background-repeat: repeat-y;
display: block;
height: 100%;
margin: 0 auto;
max-width: 1200px;
min-width: 860px;
padding: 0 3px 0 3px;
position: relative;
}
The problem here is you are using position:absolute on the div id="triathlete" then your main container doesn't take in care the space of that element. The solution you can try is this:
In your html change the order between two elements, you have:
<div id="triathlete"></div>
<div id="mainBody"></div>
Change those elements like this :
<div id="mainBody"></div>
<div id="triathlete"></div>
Then remove the position:absolute :
#triathlete {
background-image: url(../images/image_triathlete.png);
background-position: top;
background-repeat: no-repeat;
display: block;
left: 3px;
margin: 0;
padding: 87px 30px 0 30px;
/*position: absolute; Remove this
top: 363px;*/
width: 150px;
z-index: 3;
}
And change the height for the container to min :
#container {
min-height:100%;
}
The Demo
If this doesn't work (for any reason), or you feel like implementing it gives you too much or a headache, here is a quick and dirty fix using jQuery:
setInterval(function() {
$("#container").css("height",$(document).height());
},50);
This will automatically resize your container div to envelop all of it's contents, even if they are absolutely positioned.
Noting again, this is not the proper way to solve a problem like this, but might help you if you don't have time to do it the right way.
I've got a fixed position sidebar:
.sidebar {
position: fixed;
top: 51px;
left: 50%;
min-height: 100%;
width: 225px;
margin-left: -470px;
padding-top: 24px;
background: url('images/side-bg.jpg') no-repeat;
overflow: hidden;
z-index: 20;
}
within a margin: 0 auto;'d container:
#outside_container {
position: relative;
min-height: 100%;
width: 1022px;
margin: 0 auto;
}
So far the left:50%; trick with a negative left margin is working well to center it with the rest of the site. However, when the browser window size is reduced to narrower than the site width, the nav scurries off to the left until you can't see it anymore. Try it here: http://ravictilanding.cbstage.com/
What can I do to stop this behavior while nonetheless keeping it fixed at normal widths?
Why does the sidebar need to be left: 50%, margin: -0.5width? You are not centering the sidebar itself, only the container div and that is taken care of by the margin: 0 auto. Unless I've missed something, you could simply not define left and apply a positive margin-left to push it in from the edge of #outsidecontainer. This works and doesn't appear to break anything in Chrome but I haven't looked at other browsers.
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.