Novice here! I'm looking to adjust some code for this site: http://www.lakeofstars.org
The footer area at the base of each page contains a series of logos. The ideal is to ensure that the logo images in the footer display correctly on mobile (if they are too large, some of the logos drop down below the designated footer background), but also to get them to center correctly on desktop - as you'll see, they are currently nudged to the left.
Here's the code as it stands:
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px; /* Height of the footer */
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif);
background-repeat: repeat-x;
background-position:bottom;
}
#footer .structure {
height: 140px;
width: 94%;
}
#footer .structure li {
display: inline-block;
margin: 10px 10px 0 0;
float: left;
}
#footer .structure li img {
height: 65px;
width: auto;
}
You need to remove float: left; from #footer .structure li.
Try to use line-height and vertical-align: middle; for vertical aligment and text-align: center; for horizontal:
#footer .structure {
text-align: center;
}
#footer .structure ul {
line-height: 140px;
vertical-align: middle;
}
#footer .structure li {
display: inline-block;
}
Or you can use flexbox technique
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px;
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif) scroll 50% 50%;
background-repeat: repeat-x;
background-position:bottom;
}
add for #footer .structure ul - text-align: center;
remove for #footer .structure li - float: left
#footer .structure ul {
text-align: center; < -- add
}
#footer .structure li {
display: inline-block;
vertical-align: middle;
margin: 10px 10px 0 0;
/* float: left;*/ <-- remove
}
Remove width:auto ... give values in percentage....
#footer .structure li img
Related
i am trying to keep the footer div at the bottom of the screen when the content is shorter than the view port, but it also has to remain at the bottom on the page content(not the view port) when the content is taller than the view port.
So far it remains at the bottom of the content when zoomed in, but i can't get it to stick to the bottom when zoomed out. There are samples with position: absolute; that i have seen, but it makes the footer remain at the bottom of the view port and not the content when zoomed in.
I have to do this for a school unit, is there a way to do this?
For now i have the footer position as relative, though i guess that wont do anything but stick it close to the last div, yeah? but i seem to find what i need to do.
Here is the site:
http://www.foodforthought.webatu.com/Index.html When you zoom right out you will see the footer not stay at the bottom.
Here is my CSS:
* { padding: 0; margin: 0; font-family: verdana; }
html {
height: 100%;
}
body {
font-size: 13px;
color: #000;
background-color: white;
background-position: center;
background-repeat: repeat-y;
background-image: url('../images/background.jpg');
}
/* Main div container */
#wrapper {
margin: 0 auto;
width: 960px;
height: auto;
}
/* Header div */
#wrapper #header {
height: 200px;
background-color: green;
}
/* Special event section */
#header p {
position:relative ;
left: 30px;
top: -100px;
width: 300px;
z-index: 1;
color: white;
border-style: dashed;
padding: 5px;
border-width: 1px;
}
/* Horizontal list div */
#wrapper #navigation {
height: 25px;
background-color: white;
display: block;
}
/* Horizontal list */
#navigation ul {
padding-top: 5px;
list-style-type: none;
text-align: center;
width: 960px
}
/* Horizontal list items */
#navigation li {
display: inline-block;
text-transform: uppercase;
vertical-align: middle;
}
/* Horizontal list link */
#navigation a {
height: 25px;
width: auto;
display: block;
line-height: 15px;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: black;
padding-left: 8px;
padding-right: 8px;
}
/* Horizontal list hover attribute */
#navigation a:hover {
color: Darkgrey;
}
/* Content div */
#wrapper #content {
display: inline-block;
height: auto;
width: 950px;
background-color: white;
padding-left: 10px;
padding-right: 0px;
}
/* Content headings */
#content h2 {
text-transform: capitalize;
padding: 10px;
}
/* Content image(global) */
#content img {
padding: 2px;
border-width: 1px;
margin: 10px;
margin-left: 20px;
Margin-right: 15px;
}
/* Content bullet list */
#content ul {
padding: 15px;
font-size: small;
margin-left: 10px;
}
/* Content paragraph text */
#content p {
padding-left: 10px;
font-size: small;
}
/* Content image */
#content #img1 {
float: left;
border-style: dashed;
}
/* Content image */
#content #img2 {
float: right;
border-style: solid;
border-width: 1px;
border-color: #BDA27E;
}
/* Content image */
#content #img3 {
float:left;
border-style:double;
margin-top: 20px;
margin-left: 8px;
border-width: 5px;
border-color: #996633;
}
/* Side menu div*/
#wrapper #content #menu {
float: right;
padding: 0px;
margin: px;
width: 220px;
height: 1118px;
}
/* Side menu*/
#menu ul {
list-style-type: none;
float: right;
text-align: right;
width: 170px
}
#menu li {
background-image: url('../images/pg_menu_bg.png');
}
/* Side menu link */
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 0px;
}
/* Side menu hover attribute */
#menu a:hover {
color: darkgrey;
}
/* Footer div */
#wrapper #footer {
height: 40px;
background-color: #82AAF1;
width: 960px;
margin: 0px, auto;
position: relative;
bottom: 0;
}
/* Foot note */
#footer p {
text-align: center;
color: #6A1B1B;
padding-top: 15px;
font-size: 10px;
}
.padext {
padding-top:2px
}
Sorry i am still a beginner.
Thank you for you time.
If you HTML is like this:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
apply the following CSS.
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
The padding-bottom of the #content is set as the height of the footer.
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
I recommend you to refer the following link : How To Keep Your Footer At The Bottom Of The Page With CSS
I need help centering my CSS menu. Not sure why it isn't centered. I played around with the padding but it didn't change anything really. I know you just can't center it like you can with HTML though.
Here is the CSS:
Here is the page:
Thank you!
-Mike
Try adding margin:auto in the css menu
#cssmenu {
background: #000000;
height: 44px;
position: relative;
width: 595px;
margin: auto;
}
FIDDLE
Add margin: 0 auto; to #CssMenu
#cssmenu {
position: relative;
height: 44px;
background: #000000;
width: 595px;
margin: 0 auto;
}
#cssmenu > ul {
position: relative;
display: block;
background: #000000;
height: 32px;
width: 100%;
z-index: 500;
text-align: center; /*add this to center your li itens*/
white-space: nowrap; /*add this if you dont want brake the 'HISTORY' link in another line*/
#cssmenu > ul > li {
display: inline-block; /*you must remove float:left; and add change display to inline-block to display your li items side by side*/
vertical-align: top; /*add this to make you li itens align by top*/
position: relative;
padding: 0;
}
I have setup a fiddle: http://jsfiddle.net/BaWC8/2/
You can see that I have a wrapper div containing an ul with li's. The li's have a with of 25% so they get evenly spread across the 'page'. The wrapping div has a border of 1px. Since all li's also have a border of 1px, it looks like they all have a border of 2px (which I want).
Now. This looks all good on a desktop but when you open it on a mobile device (iphone, android) you see a small spacing on the right side of the wrapper between the last li and the wrapper border.
Here is the code (html):
<div class="wrap">
<ul>
<li><span>aaaa</span></li>
<li><span>bbbb</span></li>
<li><span>cccc</span></li>
<li><span>dddd</span></li>
</ul>
</div>
Css:
body{
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
float: left;
width: 100%;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
float: left;
width: 100%;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
I do not understand why so I hope someone here can help me out.
Remove the float and width from the .wrap and ul.
The border will on .wrap will collapse, which you can either solve with a clearfix, or by adding overflow:auto.
Here is my working CSS:
body {
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
overflow:auto;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
A working fiddle, at least on iOS: http://jsfiddle.net/designingsean/BaWC8/7/
You see a small spacing because .wrap width is 100%+2px(border-width*2).
If you want border (or padding) don't expand element's width/height,
you may use box-sizing: border-box; http://css-tricks.com/box-sizing/
add this css-property to .wrap and you will not see "small spacing" anymore))
How to center navigation horizontally inside the div? The CSS should be responsive preferably.
HTML:
<nav id="centermenu">
<ul>
<li>Business</li>
<li>Specialities</li>
<li>Contact us</li>
</ul>
</nav>
well, the css was, and changed the left: 50% to 25%, nada. hope this was enough
#centermenu {
float: left;
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}
#centermenu ul {
float: left;
clear: left;
position: relative;
list-style: none;
left: 50%;
display: block;
text-align: center;
}
#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}
Make sure your browser is not rendering in quirks mode. You should have a DOCTYPE specified on the first line of the HTML file to render in standards mode:
<!DOCTYPE html>
In standards mode, this works (tested and working for me):
#centermenu {
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}
#centermenu ul {
list-style: none;
display: block;
margin: 0 auto;
text-align: center;
}
#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}
#centermenu {
display:block;
width:100%;
text-align:center;
}
#centermenu > ul {
display:inline-block;
text-align:left;
overflow:auto;
}
#centermenu > ul > li {
float:left;
}
ul {
display: block;
margin: 0 auto;
}
u need to specified the width for ul, if you use margin: 0 auto; no need float: left; or left: 50%
#centermenu ul {
margin: 2 auto;
display: block;
width: 600px;
}
or make ul display inline;
#centermenu ul {
display: inline;
}
http://www.sc.x10.bz/test/awesome-menu.html
CSS
* { margin: 0; padding: 0; } /* Reset stuff */
ul#subheader {
width: 920px;
margin: 250px auto;
list-style: none;
}
ul#subheader li {
display: inline;
}
ul#subheader li a {
display: block;
float: left;
height: 45px;
background-image: url(images/subheader.png);
text-indent: -9999px;
}
ul#subheader li a.who {
width: 306px; background-position: 0 0;
}
ul#subheader li a.what {
width: 306px; background-position: -306px 0;
}
ul#subheader li a.why {
width: 306px; background-position: -612px 0;
}
a { outline: none; }
`
this works fine...
but as soon as i move this menu, inside my actual index page.. it doesnt show up correctly..
have a look here:
http://www.simplecreations.co.uk/
please help
Check your CSS there are errors.
div#header {
width:100%;
height:auto;
margin:0px auto;
text-align:center;
text-align: center;
background: url(images/header2.png) no-repeat;
background-position: left;
/* subheader */
{ margin: 0; padding: 0; } /* Reset stuff */
header CSS has no closing bracket.
subheader css has no selector
You forgot to close the div identified as header in your CSS
Change:
div#header {
width:100%;
height:auto;
margin:0px auto;
text-align:center;
text-align: center;
background: url(images/header2.png) no-repeat;
background-position: left;
To:
div#header {
width:100%;
height:auto;
margin:0px auto;
text-align:center;
text-align: center;
background: url(images/header2.png) no-repeat;
background-position: left;
}
Also, you might want to remove the HTML/XML(<!-- -->) comment markers from your CSS script.