Hello everyone first of all sorry for asking a question that have already been asked so many times. Forgive me with that said i have not been able to find an answer that matches and works with my code that is why i am asking :)
Well I want to make my sidebar div 100% height and not just adjust to content inside the div how to i do that?
Here is my code:
html, body {
margin: 0px;
height:100%;
min-height:100%;
}
.SideMenu {
height:100%;
float:left;
background-color:#ACB9B1;
width:20%;
margin:0;
overflow-y:hidden;
overflow-x:hidden;
}
http://jsfiddle.net/u9r7zeyk/ Here it shows at full height, don't know why?
Try this:
html, body {
height:100%;
}
.SideMenu {
height:100%;
background-color:#ACB9B1;
width:20%;
}
Hello huys thanks for the inputs what i did you can see here:
.menu{
background-color:#ACB9B1;
width: 200px;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
}
.menu li a {
display:block;
text-decoration: none;
color: #fff;
line-height: 1.5;
margin-left:5%;
color:#A92432;
}
.menu li {
width: 100%;
height: 30px;
font-family: 'Open Sans';
border-bottom: 1px solid #A92432;;
font-size:18px;
}
Edited, Here you go. I think this is what you want.
html, body {
margin: 0px;
}
.SideMenu {
position:absolute;
height:100%;
float:left;
background-color:#ACB9B1;
width:20%;
margin:0;
overflow-y:hidden;
overflow-x:hidden;
}
http://jsfiddle.net/u9r7zeyk/2/
Related
I'm trying to give my div inside a li a width value and the div's border has the width I want, but the text I have in that div is ignoring that width and it seems to be inheriting the container width. It's just the text that is doing that, though.
I don't usually work with li tags, so I don't really know what the problem is.
This is basically the HTML I'm working with:
<div id="container">
<div class="inner">
<ul>
<li>
<a class="img" href="..."></a>
<div class="desc">
...
</div>
</li>
</ul>
</div>
</div>
This is the CSS:
#container {
margin:0 auto;
width: 900px;
height: 500px;
box-sizing:border-box;
position:relative;
right: 160px;
-webkit-user-select: none;
user-select:none;
}
#container div.inner {
position:relative;
overflow:hidden;
padding:0;
margin:0;
}
#container div.inner ul {
white-space:nowrap;
position:relative;
left:0; top:0;
list-style:none;
font-size:0;
padding:0;
margin:0;
float:left!important;
width:auto!important;
height:auto!important;
}
#container ul li {
display:inline-block;
margin-top:20px;
margin-bottom:200px;
margin-left:-45px; margin-right:-30px;
-webkit-transform:scale(0.6);
transform:scale(0.6);
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
box-sizing:content-box;
text-align:center;
vertical-align:middle;
padding:0;
position:relative;
list-style:none;
backface-visibility:hidden;
}
#container ul li.active {
-webkit-transform:scale(1);
transform:scale(1);
background-color:transparent;
}
#container ul li.active .desc {
display: block;
}
.desc {
display: none;
width: 310px!important;
height: 200px;
border: 1px solid #fff;
position: relative;
right: 350px;
top: 275px;
color: #fff;
font-family: Arial;
font-size: 11px;
padding: 15px;
text-align: justify;
}
#container .img {
width: 200px;
height: 320px;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
display:block;
position:absolute;
font-size:0;
cursor:inherit;
transition:all linear 0.4s;
}
There seems to be a lot of CSS here that is conflicting. Are you sure you need to use '!important' in so many places?
It's hard to tell what's happening but my feeling is that using position:absolute and float is breaking things.
Also, your div inside the li ("desc") is set to display:block at some point.
Try changing it to inline or inline-block depending on what you need it to look like.
#container ul li.active .desc {
display: block;
}
Then after this you are trying to set a width when it is display:none...
.desc {
display: none;
width: 310px!important;
...
This is probably not showing up because if the display:block taking precedence, because you have been more specific with your selectors. Try doing the same for the .desc section:
#container ul li .desc {
display: none;
width: 310px!important;
...
If you can supply a working Jsfiddle or code snippet so we can see what you are trying to achieve that would help.
I'd also like to rewrite this for you so that you can see there is probably a much easier way to accomplish your layout without all of the conflicts.
in your .desc {} is the second from the bottom padding: 15px;
Try deleting that one.
So here's my code:
#logo {
position:fixed;
color: white;
width: 100%;
padding: 5px;
left:0px;
top:0px;
height:50px;
width:100%;
background:#ffffff;
z-index: 1;
}
#page-container {
margin: auto;
width: 960px;
height: 100%!important;
background: #ffffff;
border-style: solid;
border-color: red;
}
html, body {
padding: 0;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #000000;
background-color: #eef3f7;
}
#footer {
position:fixed!important;
position:absolute;
color: white;
clear: both;
width: 100%;
padding: 0;
left:0px;
bottom:0px;
height:30px;
background:#272695;
text-align:center;
}
I want to be able to set the page container height so that the footer over laps it all the way through. The issue I am getting is this:
What I want is to have my page-content rule to cover the whole top and bottom with no overlapping. I'm looking for something along the lines of this:
I honestly have tried everything I just don't know what the issue is.
Add this to your CSS.
body, html {
height: 100%;
}
The CSS height property is relative to it's parent and height defaults to auto. So to get your #page-container to be 100% you have to set the parent height.
This question already has answers here:
Make footer stick to bottom of page correctly [duplicate]
(10 answers)
Closed 8 years ago.
I'm using OSclass for my website and I tried to set footer on the bottom, but nothing worked.
You can see my website here
It works on my main page because my content is long, but it doesn't work on item or account for example (my footer stay at the end of content, not at the end of page).
CSS:
body {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
list-style-type:none;
}
.header {
height: auto;
background-color: #0080c4;
clear: both;
}
.header_wrap {
width:960px;
margin:0 auto;
position:relative;
padding: 10px 0 160px 0;
}
.header .wcont {
float:left;
width:468px;
padding:0px;
color:#FFFFFF;
}
.content {
clear: both;
margin-bottom: 20px;
width: 960px;
margin-left: auto;
margin-right: auto;
}
.footer {
padding-top: 5px;
padding-right: 33px;
padding-left: 33px;
padding-bottom: 0;
background-color: #0080c4;
clear: both;
position: fixed;
bottom: 0px;
width: 100%;
}
.footer_wrap {
width:960px;
margin:0 auto;
position:relative;
padding:0 0 25px 0;
}
.footer .wcont {
float:left;
width:200px;
padding:0 15px;
color:#FFFFFF;
}
Anyone have any idea for resolve it ?
Thanks a lot.
Try this, it puts the footer after the content or at the bottom of the page, depending how much content is in the page:
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
I wouldn't use this if the page length changes though...
Here is a solution for you buddy: http://jsfiddle.net/xa7LP/
HTML
<div class="header">Header</div>
<div class="body">Body</div>
<div class="footer">Footer</div>
CSS
body{padding:0; margin:0;}
div {
display:block;
position:relative;
padding:20px 0;
text-align:center;
width:100%;
}
.header {
background:green;
color:#fff;
}
.body {
margin:10px 0;
background:blue;
color:#fff;
}
.footer {
background:black;
color:#fff;
}
jQuery
$(document).ready(function(){
var dh = $(document).height(),
fh = $(".footer").outerHeight(),
bh = $("body").height();
if(bh<dh)
{
$(".footer").css({
"position":"fixed",
"display":"block",
"top":(dh-fh)+"px"
});
}
});
Hello fellow community members,
I am currently having a problem where I have set my top navigation bar to be fixed so that it follows users as they scroll down my web page but I am currently faced with two issues.
The content of my site is overlapping my navigation bar and goes ontop of it making it look messy and not function as designed. (The background is not transparent but rather a solid image)
The website is fluid and I have been fiddling with this for hours now trying to get it to work but as I set a min-width and max-width it doesn't seem to obey the min-width and width as a percentage (100% of the container). Sorry if I am a little unclear in explaining this but I have attached some code in jsfiddle for people to see.
If you would like to see where I am stuck at right now you can do so at subnovaled.com (the blue bar along the top) also the jsfiddle link is as follows:
#navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 1000px;
max-width: 1280px;
width: 100%;
background: cyan;
}
http://jsfiddle.net/jXJMx/23/
Note: the above code was done in a rush, sorry
Thank you to anyone who is able to help me out!!
check this fiddle:
http://jsfiddle.net/jXJMx/26/
CSS:
#navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 750px;
max-width: 1280px;
width: 100%;
background: cyan;
}
#navMainSearch {
float:left;
width:120px;
}
#navMain {
float:left;
width:750px;
line-height:normal;
height:32px;
}
#navMain ul {
float:right;
list-style:none;
}
#navMain li {
display:inline;
}
#navMain a {
float:left;
text-decoration:none;
}
#navMain a span {
float:left;
display:block;
padding: 7px 15px 0 15px;
text-align:center;
width:90px;
cursor:pointer;
height:25px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {
float:none;
}
/* End IE5-Mac hack */
#navMain a:hover {
background-position:0% -32px;
}
#navMain a:hover span {
background-position:100% -32px;
}
#content {
background:yellow;
min-width:750px;
width:100%;
height:768px;
position:relative;
margin-top:32px;
}
Update CSS as show
#navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 1000px;
max-width: 1280px;
width: 100%;
background: cyan;
}
#navMainSearch {
float:left;
width:120px;
}
#navMain {
float:left;
line-height:normal;
height:32px;
}
#navMain ul {
list-style:none;
}
#navMain li {
display:inline;
}
#navMain a {
float:left;
text-decoration:none;
}
#navMain a span {
float:left;
display:block;
padding: 7px 15px 0 15px;
text-align:center;
/*width:90px;*/
cursor:pointer;
height:25px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {
float:none;
}
/* End IE5-Mac hack */
#navMain a:hover {
/* background-position:0% -32px;*/
}
#navMain a:hover span {
/* background-position:100% -32px;*/
}
#content {
background:yellow;
width:100%;
float:left;
height:1500px;
}
So far I have this:
<style>
#success_notification {
position:absolute;
top:0;
width:30%;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
</style>
<div style="margin:0 auto;"><div id='success_notification'>TESTING.</div></div>
and the div stays on the left... still. What am I doing wrong? Thanks.
You aren't setting left or right, causing your absolutely-positioned element to default to a left of 0. Try this:
#success_notification {
position: absolute;
top: 0;
left: 35%;
width: 30%;
text-align: center;
font: 20px Georgia;
color: #5C5C5C;
background: #F2FFED;
padding: 10px;
}
Here you go.
Removed the position: absolute, added the margin: auto to style, added width 100% to outer div. Works for me.
<style>
#success_notification {
top:0;
width:30%;
margin: auto;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
</style>
<div style="width: 100%; margin:0 auto;"><div id='success_notification'>TESTING.</div></div>
try this:
#success_notification {
position:absolute;
top:0;
left: 50%;
width:30%;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
...or even:
float:left;
...or:
float:right
this works great in all browsers