I can't work out how to get my list items on one line:
HTML:
<div id="navbar">
<ul>
<li class="navbutton">About</li>
<li class="navbutton">Galleries</li>
<li class="navbutton">Info</li>
<li class="navbutton">Contact Us</li>
</ul>
</div>
CSS:
#navbar{width:960px; height:46px; list-style-type: none; margin:0 auto; margin-top:1px; text-align:center;}
#navbar li{list-style:none; text-align:center; margin:0 auto; background-position:center; background-repeat:no-repeat; padding-left:50px; padding-right:50px;}
.navbutton{background:url(images/nav/lights_lit.jpg); width:138px; height:45px; display:block; background-position:center; background-repeat:no-repeat;}
.navbutton a{background-image:url(images/nav/lights.jpg); width:138px; height:30px; display:block; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; color:#FFF; text-shadow:#000 0px 1px 4px; font-size:16px; padding-top:15px; text-decoration:none; cursor:pointer; background-position:center; background-repeat:no-repeat;}
#navbar a:hover {background-image: url(images/nav/lights.jpg);background-position:center; background-repeat:no-repeat;}
Live Link:
http://brownbox.net.au/clients/matchlessphotography/
Is this what you intended?
jsFiddle containing your code
Here's the code I changed. Float the li and get rid of the left/right padding:
#navbar li
{
list-style: none;
text-align: center;
margin: 0 auto;
background-position: center;
background-repeat: no-repeat;
float: left;
}
UPDATE
In that case, you have to reduce the width of the #navbar and make sure the left and right margins are set to auto. Here's what I did after reading your comment:
#navbar
{
width: 566px;
height: 46px;
list-style-type: none;
margin: 0 auto;
margin-top: 1px;
}
You will have to play with the width to get it right.
You can float it
#navbar {
height:50px;
width: 500px; /* just an example */
margin: 0 auto; /*will center */
}
.navbutton{
background:url(images/nav/lights_lit.jpg);
width:118px;
height:35px;
display:block;
background-position:center;
background-repeat:no-repeat;
float:left;
padding:5px 10px;
}
Related
BACKGROUND
Years ago, I built my first Weebly website for my business ( www.smehelper.com )
The mobile version 'used to' look great!
SINCE THEN
However... Weebly made some changes a year or so ago ( I don't know what ),
since then, regardless of what CSS I've tried in an attempt to overide things, I can't seem to make it change.
NOOB APOLOGIES
Apologies if I'm using wrong terminology, I work in Marketing for a living and specialise in Lead Generation, however, I love to learn various items.
www.smehelper.com
SOURCE CODE
The following is ALL the CSS. Apologies for being a noob - Let me know if there's any other code/files you need 👍
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input{margin:0; padding:0}
ul{list-style:none}
fieldset{border:0}
img{
/*box-shadow: 2px 2px 7px #AAAAAA;*/
/*-webkit-box-shadow: 4px 2px 7px #AAAAAA;*/
/*16px=1em*/
}
html{width:100%}
body{
width:100%;
margin:0;
padding:0;
background-color:#eeeded;
font-family:Trebuchet MS,sans-serif;
/*font-size:14px;*/
color:#eeeded;
/*background: url(bodybg1400x790_planks.jpg);*/
background:url("Swansea-Marketing-Consultant-Workshops-1280x1024.jpg") top no-repeat fixed; /* top center no-repeat fixed */
background-size: 100% auto;
}
/* #bg{ */
/* background:url("Swansea-Marketing-Consultant-Workshops-1280x1024.jpg") top center no-repeat fixed;*/
/* } */
blockquote{
margin: 5px 0;
padding-left: 10px;
border-left: 7px solid orange !important;
font: normal 1.3em;
/*font-size:1.2em;
font-style: normal !important;
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;*/
line-height: 160%;
}
blockquote em {
/*font: #ffcc00 !important;*/ /*orange*/
/*font-style: bold !important;
font-size: 1.4em !important;*/
font: bold 1.4em #ffcc00 !important;
}
/*.thought via https://codepen.io/quadbaup/pen/rKOKQv (also in GglDrv_growth-dev_*/
a img{border:0}
a{text-decoration: underline; color:#4db7c8;}
.clear{clear:both}
p{line-height:130%; color:#eeeded; font-size:14px; padding-bottom:10px}
em, ul em {
color:#ffcc00;/*yellow*/
}
h1{font-size:24px; font-weight:bold; color:#4db7c8; margin:0px 0px 10px 0px}
h2{
font-family:arial,sans-serif;
font-size:18px;
line-height:130%;
font-weight:normal;
letter-spacing:2px;
color:#ffc000; /*orig-turqiouse: #4db7c8*/ /*cccccc=Orig grey SW chose OR ffbc66=orange equiv of h2:first-line OR ffc000=warm-bright-yellow */
margin:18px 0px 2px 0px; /*12px 0px 12px 0px*/
/*background-color:yellow;*/
}
h2:bold {
font-size:11px;
color:#4B4B4B;
font-weight: normal;
text-transform:uppercase;
letter-spacing:-3px;
padding: 8px 0px 0px 0px;
}
/*
h2 a:link {
color:white;
text-decoration:none;
/*line-height:150%;*/
/*}*/
/*h2 a:visited {*/
/*color:white;*/
/*}*/
h2 a:hover {
color:white;
text-decoration:underline;
}
h2 a:active {
text-decoration:underline;
/*background-color:yellow;*/
}
h2:first-line {
text-transform:uppercase;
font-size:1.5em; /*SW's orig 18px pre feb'14 - 16px=1em - pre march 15: 1.3em*/
/*font-variant: small-caps; /*pre mar'15=normal*/
line-height:150%; /*pre mar'15=130%*/
color:#66ccff;/*lime: #9dc205*/
letter-spacing:normal;
}
#header{
position:fixed;
top:0px; left:0px;
width:980px;
height:auto;
margin:0pt;
padding:0pt;
border:1px solid green;
background:pink;
}
#line {position:fixed; width:100%; height:125px; margin-top:60px; background:transparent url(navbg.png) repeat-x; z-index:2; border:1px solid green;}
#wrapper { /* this is the header to footer but not whole site background */
position:relative;
z-index:2;
width:980px;
height:100%/*150px*/;
margin:0pt auto;
}
.logo {
z-index:1000;
position:fixed;
top:0px; /*left:0px;*/
margin:0px auto;
width:980px; height:125px;/*width:980px; height:165px;*/ /*Area independent of Nav.*/
background:url("small-business-helper-digital-marketing-for-UK-small-businesses-80pc-30pc.png") no-repeat left center; /*fyi.logo is 980x118*/
/*background:url("small-business-helper-holistic-e-business-consultancy.png") no-repeat left center; /*fyi.logo is 980x118*/
/*background-color:black; opacity:0.50; -moz-opacity:92; filter:alpha(opacity=95);*/ /*use shaded header png instead*/
}
.logo a{
/*display:block;*/
width:100%; height:100%;/*set clickable area*/
text-indent:-9999px;
overflow:hidden;
}
#telephone { /*for right hand side div element*/
float: right;
width: 500px;
font-family: Georgia, "Times New Roman", Times, serif;
color: white;
font-size: 14px;
text-align: right;
}
#telephone .number { /*for addressing class:number within right hand side div telephone element*/
font-size: 34px;
}
#telephone #email a {
text-transform: uppercase;
color: white;
text-decoration: none;
font-size: 15px;
line-height: 24px;
}
.navContainer{ /*FULL WIDTH BAR*/
z-index:5;
position:fixed; top:125px; left:0;
height:35px /*50px*/; width:100%; /*aligns whole nav elements*/
/*margin:2px auto;*/
background:url("shadow1.png");
}
.frame{/*frame for nav area*/
/*width:980px; height:55px;*/
width:980px; height:35px; /*width:980px; height:173px;*/
margin:0px auto/*4px auto 0px auto*/;
/*border:1px solid purple;*/
}
.wsite-mobile-menu {
background: url(theme/shadow1.png?1645107290);!important
}
.wsite-mobile-menu .wsite-menu-mobile-arrow {
color: red; !important
<!-- border: none; -->
<!-- width: 16px; -->
<!-- height: 16px; -->
<!-- top: 5px; -->
<!-- left: 0; -->
<!-- background: url(theme/shadow1.png?1645107290) top left no-repeat; -->
background: url(theme/shadow1.png?1645107290);!important
<!-- background-size: 16px 16px; -->
}
.wsite-mobile-menu li a {
<!-- font-weight: 300; -->
color: red;!important
<!-- padding: 15px; -->
<!-- font-size: 16px; -->
<!-- border-bottom: 1px solid #111 !important; -->
<!-- text-shadow: 0 1px 0 rgb(0 0 0 / 70%); -->
<!-- box-shadow: inset 0 0 1px rgb(255 255 255 / 20%), inset 0 1px 2px rgb(255 255 255 / 10%); -->
background: url(theme/shadow1.png?1645107290);!important
}
.wsite-mobile-menu li a {
<!-- font-size: 1em; -->
<!-- line-height: 1.5; -->
<!-- padding: 8px 10px; -->
<!-- color: white; -->
<!-- text-decoration: none; -->
<!-- display: block; -->
cursor: pointer;
-webkit-tap-highlight-color: blue;!important
}
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x;!important
background-position:0 100%;!important
color:blue/*txt hover color*/;!important
}
.mainNav{ /*actual nav textual area*/
width:980px; /*changing this width wraps all main nav bullet elements*/
font:14px Arial,sans-serif;
color:#fff;
/*margin:0px; */
/*background:url("weebly-menu.png") no-repeat -9999px -9999px;*/
margin:0px auto;
/*border:1px solid red;*/
}
/*when changing all nav height change line-height also.*/
.mainNav a{
display:inline-block;
color:white;
text-decoration:none;
padding:0px 13px;
width:auto;
height:34px;
line-height:34px/*42px*/; /*this aligns the nav text elements vertically*/
margin:0px auto;
background:transparent url("MainNavActive.png") no-repeat -9999px -9999px;
/*border:1px solid red;*/
/*background-color:black; opacity:0.92; -moz-opacity:92; filter:alpha(opacity=95);*/
}
.mainNav a:hover, #active a{
background-repeat:repeat-x;
background-position:0 100%;
color:#00a1b4/*txt hover color*/;
}
.mainNav ul{
margin:0 auto;
list-style:none;
background:url("bullet-weebly-menu.png") no-repeat -9999px -9999px;
}
.mainNav li{
float:left;
}
.mainNav ul li.weebly-nav-more{
background:none;
} /*unsure of usage*/
#weebly-menus .weebly-menu-wrap{
position:absolute; top:25px; left:70%;
width:250px; /*use to set + constrain width for drop downs*/
margin:0px;
/*background:black; opacity:0.85; -moz-opacity:92; filter:alpha(opacity=95);*/ /*initial excess blocks upon initial expansion*/
}
#weebly-menus span.weebly-menu-more{ /*controls the 'more arrows' i.e.>. */
height:100% /*39px*/;
Margin:auto 0px;
padding:auto 0px;
}
#weebly-menus .weebly-menu{
margin:0;
list-style:none;
}
#weebly-menus .weebly-menu li{
float:none; /*controls float/alignment from one sub item to the next e.g.vertical v left=horizontal*/
clear:none;
width:100%; /*sets background width of drop downs*/ vertical-align:top;
}
#weebly-menus .weebly-menu li a{/*this is the actual drop down backgrounds in total*/
font:12px Arial,sans-serif; color:#fff; text-decoration:none;
display:block;
border:0 none;
background:black; /*background:url("bullet-weebly-menu.png") no-repeat 10px 100%*/
width:auto; /*sets text area*/
line-height:15px; height:auto; min-height:18px;
padding:14px 20px 10px 20px;
}
#weebly-menus .weebly-menu li a:hover, #weebly-menus .weebly-menu li.weebly-nav-current a{
background:#003366 /*#336699 #006666 #009999 #00a1b4*/ /*url("bullet-weebly-menu.png") no-repeat 30px */; /*blue hover background on sub-menu*/
/*background:#003366/*#336699/*#006666/*#009999/*#00a1b4*/ /*url("bullet-weebly-menu.png") no-repeat 30px ;*/ /*30px /*50%*/
}
#weebly-menus span.weebly-menu-title{display:inline; padding:0px;}
/* START MOBILE - MOBILE BURGER-MENU & BACKGROUND DROP-DROWN */
/* DESIGN GOAL: DOWN(dark). Standard: White Font. Hover: Blu Background highlight. Slect: Blue Font.*/
/* END MOBILE */
#container{position:relative; z-index:1; width:980px;}
.sliderContainer{width:980px; min-height:200px; height:auto; max-height:400px; overflow:hidden; padding:0px 0px 0px 0px; /*margin-bottom:17px;*/ /*background: url("sliderShadow.png") no-repeat 50% 100%*/}
.sliderContainer-noheader{padding-top:100px;}
.sliderContainer-short{padding-top:125px; width:980px; min-height:200px; height:auto; max-height:400px; overflow:hidden;}
#slider-tall{ position:center; width: 980px;height: 400px; overflow: hidden}
.wsite-header{ width:980px; height:200px; background:url(%%HEADERIMG%%) no-repeat; margin:0px 0px 0px 0px }
#slider-short{ position:center; width: 980px;height: 200px; overflow: hidden}
#slider-medium{ position:center; width: 980px;height: 250px; overflow: hidden}
#slider-home{ position:center; width: 980px;height: 250px; overflow: hidden}
#bar{position:relative; width:980px; height:45px;/*height:50px;*/ margin:4px 0px 2px 0px; background:transparent url(headerbg.png) repeat-x; /*margin-top:25px*/}
#bar-short{position:relative; width:980px; height:45px;/*height:50px;*/ background:transparent url(headerbg.png) repeat-x; border:1px solid green;}#bar-short{position:relative; width:980px; height:50px;/**/ background:transparent url(headerbg.png) repeat-x; border:1px solid green;}
#sitename{float:left; /*width:810px;*/ padding:10px;/*padding:13px 0px 0px 15px;*/ color:#eeeded; font-family:Georgia; font-style:italic; font-weight:bold; text-align:left; font-size:19px; letter-spacing:0.1em; /*background-color:red; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50);*/}
.clearfix:after{content:"."; clear:both; display:block; height:0; visibility:hidden}
* html .clearfix{/*height:1%*/}
.framer{/*float:right;*/}
#viewcart{float:right; padding:14px 10px 0px 10px; /*background-color:yellow; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50);*/}
#social{float:right; padding:8px; /*background-color:blue; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50); margin:-21 10 0 0;*/}
#social li{float:right; /*floats individual elements alongside each other*/list-style-type:none}
#social li a{display:block; margin:0 3px; padding:0; height:30px; width:30px; text-indent:-9999px}
#social li a#rssf{background:url(rss.png) no-repeat top left}
#social li a#rssf:hover{background-position:bottom left}
#social li a#fb{background:url(facebook.png) no-repeat top left}
#social li a#fb:hover{background-position:bottom left}
#social li a#mail{background:url(mail.png) no-repeat top left}
#social li a#mail:hover{background-position:bottom left}
#social li a#twitter{background:url(twitter.png) no-repeat top left}
#social li a#twitter:hover{background-position:bottom left}
#social li a#linkedin{background:url(linkedin.png) no-repeat top left}
#social li a#linkedin:hover{background-position:bottom left}
#content_container{position:relative; z-index:1; width:980px; margin:0px auto;}
#contentbg{position:relative; width:980px; height:auto !important; min-height:300px; background:transparent url(contentbg-98pc-prplGrad.png) repeat-y}
#content{position:relative; width:940px; height:auto !important; min-height:300px; padding:20px 20px 20px 20px}
#footerbg {position:relative; width: 980px; height:60px; background:transparent url(footerbg.png) repeat; margin:4px 0px 20px 0px; padding:10px 0px;}
#footer {position:relative; width:940px; /*height:80px;*/ /*text-align:right;*/ background: url(footerbg.png) repeat; margin:4px 0px 30px 0px; padding:15px 20px 0px 20px;/*border:green 1px solid;*/}
#footer li{}
#footer a{color:#a2a1a0; text-decoration:underline;}
#footer a:hover{color:orange;}
#footer .weebly-footer a{color:#e6e6e6; border:green 1px solid;}
/**************plugin for index.html Layout start HERE*******************************************/
.flash_slider{
width:980px;
height:300px;
overflow:hidden;
/* margin:250px 0px 0px 0px;*/
/* orig margin-left:-7px;*/
/*background:green;*/
}
/***************Splash Page and Landing page CSS Starts Here *************************************/
/*************** START Stick Contact Tab ******************************/
/* http://mojotech.github.io/stickymojo/ */
#sticky-contact-tab {
width: 120px;
background-color: #ccc;
min-height: 200px;
margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
padding: 15px 10px;
float: left; /* float right for a right aligned sidebar */
}
/*************** END Stick Contact Tab ******************************/
WHAT I TRIED
I tried overiding various css elements using !important
I'm guessing, either:
a) I've incorrect css-selection
or
b) I need to add HTML scripts
or
c) It's not doable via Weebly's Manual CSS
EXAMPLE:-
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x;!important
background-position:0 100%;!important
color:blue/*txt hover color*/;!important
}
🤷♀️
Your example is using !important incorrectly. In CSS, the !important must come before the semi-colon, e.g. background-repeat: repeat-x !important;. This appears to be why your styles are not applying.
If you replace your code with the following, you should see the difference:
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x!important;
background-position:0 100%!important;
color:blue/*txt hover color*/!important;
}
As for actually making things more visible, it took a while to find what menu items you were referring to, but I believe you're talking about these:
In this example, I've just overridden color to make them stand out a bit more.
You should be able to get the same result with .wsite-mobile-menu a { color: #000 !important }.
I am trying to build a navigation menu. Here are some pieces.
#main-menu .nav-bar { list-style:none; margin-top: 40px;}
#main-menu .nav-bar li { display:inline; padding:0 10px;}
#main-menu .nav-bar li a {
text-decoration: none;
padding-left: 50px;
text-transform: uppercase;
color: #333;
display: inline-block;
text-shadow: 1px 1px 1px #ccc;
}
.nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px transparent;}
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home">Home</li>
</ul>
</nav>
What happens is that li element is not tall enough to show the picture.
Any idea how I can increase a height li element so will show the whole picture?
Thanks
I don't think there's a way to make your li stretch dynamically to the size of your background image. You can easily do the reverse however, set a definite height to your li, then set your background to 'contain'. This scales the image down to fit inside your li without clipping.
Updated jsFiddle
css
li {
height:180px;
width:240px;
background-image: url("http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303");
background-size: contain;
background-repeat: no-repeat;
border:1px solid #656565;
display:inline-block;
position:relative;
}
span {
position:absolute;
top:140px;
width:100%;
text-align:center;
background-color:rgba(255, 255, 255, 0.9);
padding:10px 0 10px 0;
border:1px solid #656565;
}
Remove background Property "transparent"
#main-menu .nav-bar { list-style:none; margin-top: 40px;}
#main-menu .nav-bar li { display:inline; padding:0 10px;}
#main-menu .nav-bar li a {
text-decoration: none;
padding-left: 50px;
text-transform: uppercase;
color: #333;
display: inline-block;
text-shadow: 1px 1px 1px #ccc;
}
.nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px;}
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home">Home</li>
</ul>
</nav>
<style type="text/css">
body { font-family: sans-serif; }
#main-menu .nav-bar { list-style:none; margin-top: 40px; }
#main-menu .nav-bar li { display:inline; padding:0px 30px; }
#main-menu .nav-bar li a {
height:48px;
width:48px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
text-decoration: none;
padding-left: 25px;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;
position:relative;
}
.nav-bar .nav-button-home a { background:url("commons/imgs/prism/home.png") 0px -0px; }
.nav-bar .nav-button-assets a { background:url("commons/imgs/prism/assets.png") 0px -0px; }
.nav-bar .nav-button-alarms a { background:url("commons/imgs/prism/alarms.jpg") 0px -0px; }
span {
position:absolute;
top:50px;
left:0px;
width:100%;
text-align:left;
padding:10px 0 10px 0;
}
</style>
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><span>Home</span></li>
<li class="nav-button-assets"><span>Assets</span></li>
<li class="nav-button-alarms"><span>Alarms</span></li>
</ul>
</nav>
The only problem I have is that text center is not fully aligned with a center of an image.
I am trying to center my menu which contains the ul menu.
The menu is float to the left and I can't seem to center the menu to the middle of the screen.
HTML
<section>
<nav>
<ul>
<li><a href='#'>item1</a></li>
<li><a href='#'>item2</a></li>
<li><a href='#'>item3</a></li>
<li><a href='#'>item4</a></li>
<li><a href='#'>item5</a></li>
</ul>
</nav>
</section>
CSS
nav ul{
display: inline-block;
background-color: red;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
//the and margin text align doesn't seem to work...
section {
text-align:center;
margin:0 auto;
}
Can anyone help me about it? Thanks a lot!
As pointed out by xec, the problem seems to be with the invalid comment syntax. The correct syntax for comments in CSS is /*Comment Here */. When the comment syntax is corrected, your code does center the menu.
/*the and margin text align doesn't seem to work...*/
section {
text-align:center;
margin:0 auto;
}
Demo
You're not styling the nav. The nav inside the section is a block, and therefore it will be the full width of its container, whether you give the container margin:0 auto or not.
Solution: give the nav the same style as the section. Or, remove the section altogether, since it is not necessary here.
If you don't particularly care about IE 7 and under (which have only partial support for inline-block - see http://caniuse.com/inline-block), this works, and has the advantage of making the links easier to hit: http://jsfiddle.net/V97tR/1/
nav
{
text-align:center;
}
nav ul{
display: block;
background-color: red;
}
nav ul li{
display:inline-block;
list-style: none;
font:bold .6em arial;
margin: .3em;
background-color: #A8A8A8;
}
nav ul li a
{
display:block;
padding: 1.3em;
}
Like this
DEMO
CSS
nav ul{
display: inline-block;
background-color: red;
margin:0;
padding:0;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
/*the and margin text align doesn't seem to work...*/
section {
text-align:center;
margin:0 auto;
}
You can use flex-box:
section {
text-align:center;
margin:0 auto;
display: flex;
}
Here's a fiddle: http://jsfiddle.net/2c8LB/
Try this:
JSFiddle
#wrapper {
float:left;
width:100%;
background:#fff;
overflow:hidden;
position:relative;
}
nav ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
nav ul li {
list-style: none;
font:bold .6em arial;
float: left;
background-color: red;
display:block;
list-style:none;
margin:0;
padding:5px;
position:relative;
right:50%;
}
nav ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
I am trying to scale a menu bar according to screen size. I've tried float, #media etc. but it hasn't worked properly. Full screen on my 13' looks great. However, as soon as I scale it down, the menu bar shifts to the right, but the page elements are fine. Menu is at the bottom #navsite.
CSS
* {
margin:0;
padding:0;
}
html{
min-width:770px;
}
body{
background:white url(candy/background.png) 0 0 repeat;
text-align:center;
}
/*=====[ Set up container divs and add background tiles ]=====*/
#pageheadContainer,
#contentContainer,
#footContainer{
width:100%;
}
#pageheadContainer{
background:transparent url(candy/pageheadBackground.png) 0 100% repeat-x;
}
#contentContainer{
background:#F7F7F7 url(candy/contentBackground2.png) 50% 100% repeat-y;
float:left;
}
#footContainer{
background:transparent url(candy/footBackground.png) 0 0 repeat-x;
clear:both;
}
#pagehead,
#content,
#foot{
width:770px;
margin:0 auto;
position:relative;
text-align:left;
}
#pagehead{
height:130px;
}
#foot{
height:150px;
}
#pagehead{
background:transparent url(candy/pageheadBackground2.png) 0 100% no-repeat;
}
#content{
background:transparent url(candy/contentBackground.png) 0 0 no-repeat;
min-height:300px;
_height:300px;
}
#foot{
background:transparent url(candy/footBackground2.png) 100% 0 repeat-x;
}
#article{
width:450px;
float:left;
padding:40px 0 20px 0;
margin-left:25px;
}
#subContent{
display:inline;
width:180px;
float:left;
padding:25px 0 20px 0;
margin-left:30px;
color:#8B725A;
font-size:.9em;
}
#foot ul{
position:absolute;
top:45px;
}
#foot li{
list-style-type:none;
}
#foot #foot1{
width:200px;
position:absolute;
left:300px;
}
#foot #foot2{
width:200px;
position:absolute;
left:570px;
}
#foot #pageTop{
position:absolute;
left:482px;
top:-40px;
}
#foot #pageTop a{
display:block;
width:26px;
height:26px;
text-indent:-9999px;
text-decoration:none;
background:transparent url(candy/pageTop.png) 0 0 no-repeat;
float:left;
}
body{
font:normal 62.5%/1.8em Arial, Helvetica, sans-serif;
}
#content ul{
margin:0.8em 0 0.6em 1em;
padding-left:1em;
list-style-type:square;
}
ol{
margin:0.8em 0 0.6em 2em;
padding-left:1em;
list-style-type:lower-roman;
}
blockquote{
margin:0.8em 0 0.6em 1em;
padding-left:1em;
font-style:italic;
border-left:4px solid #E2D7CF;
}
img{
padding:2px;
border:1px solid #F2F2F2;
}
#content{
font-size:1.25em;
}
p{
margin:0.3em 0 0.6em 0;
}
a{
color:#9D6141;
font-weight:bold;
text-decoration:none;
}
a:hover{
background:#9D6141;
color:#FFE;
}
#article{
line-height:1.7em;
color:#635141;
}
h1,
h2,
h3,
h4{
font-family:Georgia, Times New Roman, Times, serif;
}
h2{
color:#98533B;
margin-bottom:.5em;
line-height:1.7em;
font-size:1.7em;
}
h3{
margin:0.8em 0 0.6em 0;
font-size:1.3em;
}
h4{
margin:0.8em 0 0.6em 0;
font-size:1.1em;
}
#subContent h2{
font-size:1.3em;
}
#subContent h3{
font-size:1.1em;
}
/* menu navigation */
.navsite {width: 845px; height: 35px; z-index: 100;
margin-bottom: 3px; margin-left: 155px;}
/* menu bar */
#headermenu {width: 800px; height: 35px; z-index: 100; position: absolute}
#headermenu ul {
text-align: center;
list-style: none;
line-height: 20px;
font-size: small;
}
#headermenu a {
display: block;
width: 8em;
color: white;
text-decoration: none;
padding: 0.3em;
white-space: nowrap;
}
#headermenu li {
float: left;
padding: 0;
width: 8em;
background-color: #B67357; /* medium brown */
}
#headermenu li ul { /* second level lists */
position: absolute;
z-index:500;
left: -999em;
height: auto;
width: 8em;
border-width: 0.25em;
margin: 0;
}
#headermenu li:hover ul, #nav li.shfhover ul {
left: auto;
z-index:100;
}
#content {
clear: left;
color: #ccc;
}
#media screen and (max-width: 770px)
{
#headermenu {
width:770px;
margin:0 auto;
position:relative;
text-align:left;}
}
So your problem is you're absolutely positioning the menu from the left of the browser. So when you resize it it moves.
If you want the whole site to be centered but fluid you can use the following
width:100%; max-width:400px; margin:auto;
Here's a Fiddle
What's up with my Footer CSS ?
Using the Web Dev toolbar in Firefox I can see that it's got a box and it seems to be pushing it all down to the next line - no padding or margins that I can see..
I'm sure it's an easy fix - if someone could point out what's up that would be ace!
Thanks guys!
Website is here for Love Jungle Clothing Brand
Here is the code:
/****** Footer *****/
/*new div Neil */
#footerwrap
{width: 100%;
margin: 0 auto;
text-align:left;
height:40px;
background-color:#000;
clear:both;
margin-top:10px;
overflow:hidden;
z-index:1000;
}
/*new div container Neil */
#footer {
width: 990px;
height:60px;
margin: 0 auto;
padding-top:10px;
background-color:#000;
clear:both;
text-align:center;
z-index:1000;
}
#footer ul {
padding: 0px 0 0 0;
margin: 0 0 0 0px;
list-style-type: none;
}
#footer li {
float: right;
padding: 0;
margin: 0 auto;
display: inline;
}
#footerLeft ul {
padding: 0px 0 0 0;
margin: 0 0 0 0px;
list-style-type: none;
}
#footerLeft li {
float: left;
}
#footer a {
display: block;
height: 40px;
background-repeat: no-repeat;
display: inline;
text-decoration:none;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
white-space:nowrap;
margin:0 auto;
z-index:1000;
}
#footerwrap a {
display: block;
color:#fff;
height: 20px;
background-repeat: no-repeat;
padding-right:40px;
margin:0 auto;
z-index:1000;
}
/****** Footer *****/
/*new div Neil */
#footerwrap
{width: 100%;
margin: 0 auto;
text-align:left;
height:40px;
background-color:#000;
clear:both;
margin-top:10px;
overflow:hidden;
z-index:1000;
}
/*new div container Neil */
#footer {
width: 990px;
height:60px;
margin: 0 auto;
padding-top:10px;
background-color:#000;
clear:both;
text-align:center;
z-index:1000;
}
#footer ul {
padding: 0px 0 0 0;
margin: 0 0 0 0px;
list-style-type: none;
}
#footer li {
float: right;
padding: 0;
margin: 0 auto;
display: inline;
}
#footerLeft ul {
padding: 0px 0 0 0;
margin: 0 0 0 0px;
list-style-type: none;
}
#footerLeft li {
float: left;
}
#footer a {
display: block;
height: 40px;
background-repeat: no-repeat;
display: inline;
text-decoration:none;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
white-space:nowrap;
margin:0 auto;
z-index:1000;
}
#footerwrap a {
display: block;
color:#fff;
height: 20px;
background-repeat: no-repeat;
padding-right:40px;
margin:0 auto;
z-index:1000;
}
Are you trying to use the "footer stick" method? Or do you just want to have the text content sort of vertically centered. If the latter, try this:
Look in your footer file, you have the following html:
<div id="footerwrap">
<div id="footer">
<div id="footerLeft">
<li>Made in Australia</li>
</div>
<ul>
<span>
<center>
<li>Store</li>
<li>About</li>
<li>Press</li>
<li>Stockists</li>
<li><span>Contact</span></li>
</center>
</span>
</ul>
</div>
</div>
This line: <li>Made in Australia</li> needs to be removed.
If you want more info on the footer-stick method check out http://bonrouge.com/~home