I want to make my footer to always be at the bottom of my page but I am having a hard time with it.
I tried to position it absolute with a bottom margin of 0, and also tried the same with a fixed position but both were not results I was happy with.
the absolute one didn't change anything,
and I didn't like how the fixed position showed the footer at all times.
is there another way to go around this problem?
This should help you! Kas
#footer{
background-color:lightgrey;
position:fixed;
bottom:0;
width:100%;
}
#details{
list-style:none;
display:flex;
justify-content:space-evenly;
gap:10px;
}
<h5>Footer Example<h5>
<footer id = 'footer'>
<ul id = 'details'>
<li>Email</li>
<li>Address</li>
<li>Contact</li>
<li>Logo</li>
</ul>
</footer>
Related
I'm making a liquid page, and I have an horizontal menubar (ul) absolute positioned to bottom (sticky footer).
No problem with this stuff, but when I resize the browser, obviously the inner elements in the menu stacked upwards each other, making the menu too high and overlapping the main content.
Is there any way to (any of the following)
make the absolute postioned menu grow "downwards"?
or to setting the edge that aligns to the bottom in a certain high (to make it grow from that point to bottom)?
or give layout to the menu making it to push the above elements (I've tried playing with overflow but doesn't work
for me)?
That's the html:
<div class="container">
<div class="izda">
Foo
</div>
<div class="dcha">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor LAST</p>
<ul>
<li>Item</li>
<li>Another</li>
<li>More</li>
<li>Item</li>
</ul>
</div>
</div>
And the css:
.container {position:relative}
.izda {background:red;
height:20em;
display:inline-block;
width:20%;
vertical-align:top;
}
.dcha {background:gold;
display:inline-block;
width:78%;
margin-bottom:3em;
}
ul {position:absolute;
bottom:0;
background:pink;
margin:0;
padding:0;
max-width:100%;
}
ul li {float:left;
list-style:none;
border:1px solid black;
margin:0 1em;
padding:1em;
}
A working example here: http://jsfiddle.net/KQhLs/2/
If you write more paragraphs, the menu go down properly thanks to the margin bottom of his father.
But when resizing the frame you can see the overlapping effect.
Thanks in advance. The web are supposed to work only in modern browsers and, if possible, with pure css (no JS).
EDIT: I think the wind is blowing these ways:
How to avoid fixed element from hovering page contents?
To end at this:
Sticky Footer for Responsive Site
But there's no useful answers...
Well, in fact I can prevent this behavior with mediaqueries, that's simple. But I'd like to know if it's there a "one for all" solution.
EDIT2: I have just read A list apart - Exploring footers. Aside JS solutions I tried all, but the problem stills here - if you put floating elements inside the footer, it overlaps the main content.
Also, I have read CSS Sticky Footer and it seems it have same problem.
I can't figure that this is impossible to achieve with pure css... should I give up?
make the absolute postioned menu grow "downwards"?
On your <ul> footer element, replace bottom:0 with top: 83%
Or if you want to control it pixelwise, replace bottom:0 with top: 100%; margin-top: -54px;
make sure your wrapper/container is relative. Underneath it place your footer as relative and add top:100%
I am making a menu that is a div with with:100%; and height:45px;
each element inside the menu are divs. My goal is to make it adapt to any screen resolution so I start by placing the first div with a margin-left:2%;but the for the next one I am not sure of what I must use.
I could make the first element in float:left; and use margin like margin-left:10%; but then if we change the screen resolution it's not good anymore. If I don't put anything it goes under the first button. If I use the margin-left in px it won't be good because of the first margin-left:2%; How can I achieve this?
This is what I curently have(you can see that the buttons get under the first one):
Why don't you use display:inline-block; and whatever the margins that are great for you?
Meaning that, the first element can have 2% and the second one as well:
<div id="menu">
<div class="element">1</div>
<div class="element">2</div>
</div>
#menu{
width:100%;
height:45px;
background:#f00;
}
.element{
background:#0f0;
display:inline-block;
margin-left:2%;
}
I think you should provide something like a jsfiddle source when asking these type of questions :)
Hi,
Attached screenchot is mockup of our application where in their are -n- number of widgets which are freely movable all through the screen. Everything else works fine except minimize widget functionality. PFA screen shot for the actual problem which comes up after clicking settings button (start of arrow in screen shot). The problem that we are facing is with the positioning of minimize block. We need to achieve it just below the setting button, but it is coming out of widget area.
Please find below code snippet and detail for the same.
The Minimize functionality is being formatted using the JQUERY file with forming the HTML using UL-LI
The CSS for the UL is done using below code snippet.
ul. editModule
{
Display:none;
z-index:200;
position:absolute;
left:177px;
top:3px;
padding-top:2px;
clear:left;
}
The minimize box in the screen shot is being made using below code snippet:-
<ul class=”editModule”><li class=”editColor”><ul class=”moduleColor”><li class=”module-colorWheel”></li><li class=”moduleChoice-blue” title=”module-blue”></li><li class=”moduleChoice-green” title=”module-green” ></li><li class=”moduleChoice-red” title=”module-red” ></li><li class=”moduleChoice-yellow” title=”module-yellow” ></li></ul></li>
<li class=”applyAll”><a href=”#” class=”closeModule”>Close Widget</a></li>
<li class=”minimize”><a href=”#” class=”minimizeModule”>Minimize Widget</a></li>
</ul></li></ul>
When I click on the settings button(start of arrow) it opens the minimize functional box for the widget in a wrong location. Ideally the position should be just below the Settings icon in the hearder i.e. Top right corner.
Any sort of help regarding this will be great. if any further input is required do post comments.
So the problem is that the pop-out div is showing up in the wrong location?
Please try to give the parent container of the pop-out element a CSS style of position:relative.
position:absolute works on the whole screen, unless the parent container of the absolute positioned element also has positioning set.
Erik
EDIT: I have made you some HTMl where the editModule is placed absolute relative to the titlebar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
ul li {text-decoration:none; float:left;}
.titlebar {
background-color:green;
height:20px;
position:relative;
}
.editModule
{
position: absolute;
right: 0px;
top: 20px;
border:1px solid red;
float:right;
padding-top:2px;
}
</style>
</head>
<body>
<div class="titlebar">
<ul class="editModule">
<li class="editColor">
<ul class="moduleColor">
<li class="module-colorWheel">CW</li>
<li class="moduleChoice-blue" title="module-blue">BLUE</li>
<li class="moduleChoice-green" title="module-green" >GREEN</li>
<li class="moduleChoice-red" title="module-red" >RED</li>
<li class="moduleChoice-yellow" title="module-yellow" >YEL</li>
</ul>
</li>
<li class="applyAll">Close Widget</li>
<li class="minimize">Minimize Widget</li>
</ul>
</div>
<!-- </li></ul> -->
</body>
</html>
Try removing the clear: left; command. Clear together with position: absolute doesn't really make sense.
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext
Want to reduce the opacity of page contents container background without reducing the opacity of the contents.
<div id="container">
<div id="page contents">
page contents goes here, like amazing articles and all that.
</div>
</div>
Needs to be able to expand with the content, thus can't have a fixed height.
Absolute positioning it underneath the content will mean there will be no relationship between the two divs and it wont expand with the contents, so I think this is a dead end, feel free to say otherwise.
Can't use Jquery as could be too laggy and not instant. Other options preferred please.
May have to use 'png' background images but were hoping not to as it is a template and needs to be able to change colour based on colour schemes.
Could generate images on demand but not ideal.
Oh and to top it off cant use CSS3 as wont work in IE! of course!
Any suggestions?
My first impulse is a transparent PNG.
But looking further and especially with your comment on variable colour schemes, perhaps hooking into RGBA support would work for you. There's a nice post on it (including how to hack around IE - which doesn't support it at all) here:
http://css-tricks.com/rgba-browser-support/
not tested yet, but you get the idea.
<div id="container">
<div id="page contents">
<div id="opacity"></div>
page contents goes here, like amazing articles and all that.
</div>
</div>
#page {
position:relative;
}
#opacity {
position:absolute; z-index:-1; height:100%; width:100%; background-color:#eee; opacity:.7;
}
All content of an element will receive it's opacity value, even if you set the content's opacity to 0, you'll stile have the problem... here's a simple solution that I use:
HTML
<div id="menu_bg"></div> <!-- BG FOR LEFT MENU -->
<div id="menu_header">
<span class="menu_title2">MENU PRINCIPAL</span>
<div id="menu_opts">
<ul id="menu">
<li id="menu_home">HomePage</li>
<li id="menu_home">Company</li>
</ul>
</div>
</div>
The CSS:
div#menu_bg {
position:fixed; top:10px; left:10px; z-index:20000;
width:200px; height:50px;
background:#000000;
/* for IE */ filter:alpha(opacity=60);
/*CSS3 standard*/ opacity:0.6;
}
div#menu_header {
position:fixed; top:10px; left:10px; z-index:20001;
width:200px; height:50px; overflow:hidden; cursor:pointer;
}
div#menu_opts {
position:absolute; top:60px; left:10px;
width:200px; height:275px; overflow:hidden;
}
The trick is simple, have a div behind you content and use position and z-index to place it. Then draw another div with the content, over the last one, and use same position but set z-index above. This way, you'll have a background with the desired opacity, and your content since it's on another div, will get just right!