I can't get this footer to align and sit on the bottom properly - it should be 3 column and centered on the page. Can anyone help?
/* FOOTER */
#footer {
line-height: 80px;
width:100%;
color: #fff;
height: 80px;
background-color: #111;
padding: 30px 0px 0px 0px;
}
/* column width */
#footer > ul > li {
width: 250px;
list-style:none;
float: left;
border-left: 1px solid #fff;
padding-left: 10px;
}
#footer > ul > li > ul {
font-weight: normal;
list-style:none;
font-size: .80em;
}
#footer a, #footer a:visited, #footer a:active {
color: #ffffff;
}
#footer a:hover {
color: #ffffff;
}
<div id="footer">
<ul>
<li>
<ul>
<li>About</li>
<li>Contact</li>
<li>Spare</li>
</ul> </li>
<li>
<ul>
<li>Terms</li>
<li>Privacy</li>
<li>Disclaimer</li>
</ul> </li>
<li>
<ul>
<li> or content on this website. Full disclaimer</li>
</ul>
</ul>
The padding and margin on the body element needs to be zero if you want elements to be flush against the browser window.
I don't think you can center a group of elements if they're floated. Have you considered applying display:inline-block to the column LIs, instead of float:left?
Set #footer width property to as much as you want (750px min since you set the li width to 250px) and then set margin-left and margin-right to auto. This will center the footer. As far as the bottom position goes you could adjust it by changing the setting/changing the margin-top property of the #footer div ... i don't understand exactly what "sits on the bottom properly" means
Simple, Give each group a width of about 32% then give the footer a padding so the left on is not flush with the edge.
#footer > ul > li {
width: 32%;
list-style:none;
float: left;
border-left: 1px solid #fff;
padding-left: 10px;
}
Related
I am making a website for a friend and am struggling with the CSS for the menu bar. I've deisgned it as he asked etc., but am having a couple of problems.
1) I can't get it to stretch across the full width of the page. The menu itself should stretch across the whole width of the page, with the width of the page split into 6, and the text in each menu item to be centralised and stay the same size and just add extra black background to accommodate the page width. (Most users who'll be looking at it will be using 1920 x 1080 apparently)
Like so (Ignore the boxes at the top - they were just colour tests):
http://i58.tinypic.com/1z2zkf8.png
2) When I mouseover the menuitems for the submenu, the main menu readjusts itself. How can I stop it doing this, so it stays at a static width for the menu buttons? (i.e. 1/6th of the page width)
3) How can I make it so clicking the main menu will show the relevant submenu and keep it up until there is a click elsewhere on the page (i.e. so you don't have to hold your mouseover to select the submenu)
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation</title>
<link href="navigation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Clan
<ul class="subnav">
<li>Really? You made a website for this?</li>
<li>Member Roster</li>
<li>One of us...</li>
</ul>
</li>
<li>Games
<ul class="subnav">
<li>Current Games Rotation</li>
<li>Games You Really Need To Buy</li>
<li>Clan Steam Account</li>
<li>Wargame Decks</li>
<li>Leon's Wheel o' Games</li>
</ul>
</li>
<li>Events
<ul class="subnav">
<li>Thursday Game Night</li>
<li>ILAN</li>
</ul>
</li>
<li>Donate
<ul class="subnav">
<li>Help Us Not Be Poor</li>
<li>Help Us Even If You're Poor</li>
</ul>
</li>
<li>Other Shit
<ul class="subnav">
<li>Links to Shit</li>
<li>Cheap as Shit Games</li>
<li>Stats 'n' Shit</li>
<li>Downloadable Shit</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
#import url("AEnigma_Scrawl/stylesheet.css");
.navbar {
font-family: "AEnigma Scrawl";
font-size: 32px;
text-align: left;
height: 80px;
width: 100%;
font-weight: normal;
text-shadow: 1px 1px #000000;
}
.navbar ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
width: 100%;
}
.navbar ul li {
float: left;
}
.navbar ul li a {
text-decoration: none;
color: #FFFFFF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(bg_navbar.png);
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.navbar ul li a:hover , .navbar ul li a:active, .navbar ul li a:focus{
background-image: url(bg_navbar_hover.png);
}
.navbar ul li a.current {
background-image: url(bg_navbar_current.png);
}
.navbar ul li .subnav {
display: none;
}
.navbar ul li .subnav li {
float: none;
}
.navbar ul li .subnav li a {
font-size: 18px;
}
.navbar ul li:hover ul.subnav {
display: block;
position: static;
}
.navbar ul li:hover ul.subnav a {
display: block;
width: 100%;
}
The reason why your menubar isn't stretching across the page is probably because browsers usually automatically add a margin to the html/body. Try setting this css:
html,
body
{
margin:0;
padding:0;
}
Also the reason why your menu bar is shifting is because you're positioning the .subnav ul as static when it should be positioned as absolute. Like so:
.navbar ul li .subnav
{
position:absolute;
}
Positioning an element as absolute means it takes up no space on page so this means it won't push other elements away.
Try adding min-width: 100% on the navbar.
Also change the menu background from image to color.
I am having a hard time aligning the breadcrumbs horizontally.
There is an existing style sheet for the container divs and something in it is preventing the output.
The ul li appear one below the other.
http://jsfiddle.net/y9tyc2cu/1/
HTML:
<div class="chatWrapper">
<div class="chatContainer">
<div class="chatMsgWrapper">
<ul id="crumbs">
<li>Home
</li>
<li>Main section
</li>
<li>Sub section
</li>
<li>Sub sub section
</li>
</ul>
</div>
</div>
</div>
CSS:
ul#crumbs, ul#crumbs li {
list-style-type:none;
padding:0;
margin:0;
}
#crumbs {
height:2.3em;
border:1px solid #dedede;
}
#crumbs li {
float:left;
line-height:2.3em;
color:#777;
padding-left:.75em;
}
#crumbs li a {
/*background:url(/Assets/Images/crumbs.gif) no-repeat right center;*/
background:gray;
padding:5px 15px 5px 0;
}
Here is the solution. float: none; for each li and display: inline; for ul.
Check here!
if you are a bootstrap user you need
you should have bootstrap.min.js
http://getbootstrap.com/2.3.2/components.html#breadcrumbs
<ul class="breadcrumb">
<li>Home <span class="divider">/</span></li>
<li>Library <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
just add display:inline and remove float: left from li
example
http://jsfiddle.net/y9tyc2cu/3/
You have two redundant styles for the li.
You may remove this style:
.chatContainer ul li{
float: left; clear: both; margin: 10px 0;
width: 100%; padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Also, make the li as display: inline-block or clear the floats properly:
#crumbs li {
display: inline-block;
line-height: 2.3em;
color: #777;
padding-left: .75em;
}
Your updated fiddle: http://jsfiddle.net/abhitalks/y9tyc2cu/2/
Update:
As per your comment, you can't remove or change an existing style. In that case, you need to override the styles which are set in the earlier defined style. Just add these two overrides in #crumbs li style, without changing or removing anything elsewhere:
width: auto; float: none;
So, your complete style now looks like this:L
#crumbs li {
display: inline-block;
line-height: 2.3em;
color: #777;
padding-left: .75em;
width: auto;
float: none;
}
Updated fiddle: http://jsfiddle.net/abhitalks/y9tyc2cu/6/
.
I have a code like this. But the background, that changes, doesn't touches the left border of the div. How can I do this without changing the position of the text ('Element 1')?
CSS:
li{
list-style-type: none;
}
li:hover{
background: green;
}
HTML:
<div style="border: 1px solid black; width: 200px;">
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
http://jsfiddle.net/F698P/
Set padding of ul to 0px.
<style>
ul {
padding: 0;
}
li {
list-style-type: none;
padding-left: 65px;
}
li:hover {
background: green;
}
</style>
By removing the margin of the li and adding some padding to it.
li{
list-style-type: none;
margin-left: 0; /* assuming it had 10px margin first */
padding-left: 10px; /* more padding */
}
li:hover{
background: green;
}
The only thing that was not allowing it to have background color at the left side was the extra margin. You can also check for the ul properties for padding too. It is just an extra spacing.
ul was the problem
Ul was also having margin as I said,
so here is the updated fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/F698P/1/
The CSS added was
ul {
padding: 0;
}
You can add more padding for the li element to make the text go back to where it had to go.
I've always heard that when you use absolute positioning that the element you want to act as its parent needs to have a position of relative.
I was trying to build a CSS dropdown menu and I was struggling to get the dropdown menu items stretch beyond the width of the main menu item when I had its parent element I wanted it to use set as relative; the text in the drop down menu items would just wrap.
So I looked around at other example menus to see how they did it and one I found wasn't even using any parent elements with a position of relative even though they were using absolute positioning like I was.
That example is here: http://purecssmenu.com/
So I tried removing my relative positioning and bingo - my problem went away. However now I am using absolute positioning with none of it's parents using relative positioning, they are all set to static.
So I'm wondering how that makes sense - with no relative parents wouldn't it fall back to the browser window?
If need be, here is my HTML:
<div class="navWrapper">
<div class="left"></div>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="spacer"></li>
<li class="about">About Us</li>
<li class="spacer"></li>
<li class="trademark">Free Trademark Search</li>
<li class="spacer"></li>
<li class="services">
Services
<ul class="sub">
<li>Trademark Search</li>
<li>Prepare & File Trademark</li>
<li>Trademark Infringement</li>
</ul>
</li>
<li class="spacer"></li>
<li class="testimonials">Testimonials</li>
<li class="spacer"></li>
<li class="more">More Information</li>
<li class="spacer"></li>
<li class="contact">Contact Us</li>
</ul>
<div class="contentClear"></div>
</div>
<!-- Nav Ends -->
<div class="right"></div>
</div>
<!-- Nav Wrapper Ends -->
CSS:
#header .navWrapper {
width: 1004px;
}
#header .navWrapper .left {
float: left;
width: 4px;
min-width: 4px;
height: 47px;
min-height: 47px;
background: url('../images/nav-left-bg.png') left top no-repeat;
}
#header .navWrapper .nav {
float: left;
width: 994px;
border-top: 1px solid #e0d0b4;
border-left: 1px solid #e0d0b4;
border-right: 1px solid #e0d0b4;
border-bottom: 1px solid #e8dcc8;
background: url('../images/nav-button-bg.png') left top repeat-x;
}
#header .navWrapper .nav ul {
margin: 0 1px;
display: block;
}
#header .navWrapper .nav li {
float: left;
display: block;
height: 45px;
font-family: OpenSansBold, Arial;
font-size: 16px;
line-height: 2.9;
text-align: center;
color: #646464;
}
#header .navWrapper .nav li.spacer {
width: 2px;
min-width: 2px;
height: 45px;
min-height: 45px;
background: url('../images/nav-button-spacer-bg.png') left top no-repeat;
}
#header .navWrapper .nav li a,
#header .navWrapper .nav li a:visited
{
display: block;
height: 45px;
padding: 0 20px;
color: #646464;
text-decoration: none;
}
#header .navWrapper .nav li a:hover,
#header .navWrapper .nav li a:active,
#header .navWrapper .nav li a:focus
{
color: #fff;
background: url('../images/nav-button-bg.png') left bottom repeat-x;
}
#header .navWrapper .nav li.home {
max-width: 86px;
text-indent: -1px;
}
#header .navWrapper .nav li ul.sub {
position: absolute;
}
#header .navWrapper .nav li ul.sub li {
float: none;
display: block;
font-family: OpenSansSemibold, Arial;
font-size: 14px;
line-height: 2.3;
height: auto;
text-align: center;
background-color: #f4771d;
color: #fff;
}
#header .navWrapper .nav li ul.sub li a,
#header .navWrapper .nav li ul.sub li a
{
color: #fff;
height: auto;
}
#header .navWrapper .nav li ul.sub li a:hover,
#header .navWrapper .nav li ul.sub li a:focus,
#header .navWrapper .nav li ul.sub li a:active
{
background: #d66627;
}
#header .navWrapper .right {
float: right;
width: 4px;
min-width: 4px;
height: 47px;
min-height: 47px;
background: url('../images/nav-right-bg.png') left top no-repeat;
}
It falls back to the nearest ancestor element that has position defined as relative, absolute, or fixed -- not just relative, but any value other than static (the default).
Generally, you'd want to position the item absolutely according to a grid established by its parent. However, sometimes it makes sense to have it positioned to a grid established by a higher up element.
For example:
HTML
<body>
<div id="div1">
<div id="div2-A">[some content]</div>
<div id="div2-B">
<div id="div3">[more content]</div>
</div>
</div>
</div>
CSS
#div1{
width:1024px;margin:auto;
position:relative
}
#div3{
position:absolute;
bottom:0px; left:0px;
}
In this case, div3 will be positioned all the way to the left & bottom of div1 -- its grandfather -- because its immediate parent (div2) has the default position:static, and so does not establish as an absolute positioning context/grid for its children. But div3 will not (necessarily) go all the way to the left of the viewport or the page body because the next higher up element (div1) has position defined as relative.
UPDATE
In the case you provided (http://purecssmenu.com/), the position:relative declaration is being applied on the :hover pseudo-class, so you won't see it immediately in the styles listed for Google Developer Tools or Firebug.
You can inspect this in Google developer tools by inspecting the parent element, then in the right-hand side of the "Styles" panel, click the "Toggle Element State" button, (looks like a box with dotted border and an arrow pointing in it), then check the box next to ":hover". I'm sure Firebug has something similar.
You'll see this declaration added to the list:
ul.cssMenu li:hover { position: relative; }
This works because when you're not hovering on the parent <li>, the sub-menu <ul> is hidden with display:none, so it doesn't matter where it's positioned.
Another note on the nearest ancestor when an element is being positioned.
Three years later after the OP, CSS3 properties like transform are more widely being used, which implicitly creates a new containing block, forcing the element to have position: relative/absolute;
So to make sure intermediary parent elements have no effect in the positioning of a child element, you need check it has position: static and no transforms set.
Example
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
#one {
position: relative;
}
#two {
position: static;
transform: none;
}
#three {
position:absolute;
}
I am working on a website that has a menu which behaves correctly on FF but not on IE (as usuall).
On IE it floats to the right while it should float to the left, however if float is set to none it behaves almost correctly, attaching the onto the top of the container.
Here's a live example.
Here's the css:
/* Navigation */
.navigation
{
float: left;
overflow: hidden;
width: 650px;
}
.navigation ul
{
list-style: none;
margin: 8px 0 0 15px;
overflow: hidden;
}
.navigation ul li
{
border-right: 1px solid white;
float: left;
padding: 0 12px 0 12px;
}
.navigation ul li.last
{
border: none;
}
.navigation ul li a
{
color: white;
font-size: 14px;
text-decoration: none;
}
.navigation ul li a:hover
{
text-decoration: underline;
}
.navigation ul li a.active
{
font-weight: bold;
}
.btn_login
{
float: right;
margin: 4px 4px 0 0;
display: inline;
width: 200px;
}
And here's the html:
<div id="navigation_wrap">
<div class="navigation">
<ul>
<li><a class="active" href="default.asp">Home Page</a></li>
<li><a class="" href="faq.asp">FAQ</a></li><li><a class="" href="articles.asp">Articles</a></li>
<li><a class="" href="products.asp">Packages & Pricing</a></li>
<li><a class="" href="gp.asp?gpid=15">test1</a></li>
<li><a class=" last" href="gp.asp?gpid=17">test asher</a></li>
</ul>
</div>
<div class="btn_login">
...
</div>
</div>
I hope anyone would have an idea.
Thanks,
Omer.
EDIT:
Setting the width for both elements kinda helped but it's still not positioned correctly.
See updated css above.
Can you try reducing the height of your logo class. It is overhanging the menu.
<-span class=""top_nav_separator""> is in your code, this might be the thing that bothers IE
I had the same problem in IE some time ago. It doesn't like list items in a floating div. Adding the following fixed it for me:
display: list-item;
list-style-position: inside;