I'm a noob with this stuff so please try to dumb it down. I'm working on this blog slider: https://fluoresblog.blogspot.ca/
The images in the slider are cropped and not center. I'd like to keep the size of the slide but have the image centered. How would I do this? Thanks!
.flexslider ul.slides li .feature_text h2 a {
color: #fff;
line-height: 1.2em;
margin-bottom: 12px;
display: block;
font-family: Raleway;
font-size: 35px;
font-weight: 400;
font-style: normal;
line-height: 1.25;
letter-spacing: 3px;
text-transform: uppercase;
}
.flexslider ul.slides li .feature_text p {
color:#fff;
font-size:15px;
padding:1px 8px;
display:inline-block;
margin-bottom:40px;
}
.flexslider ul.slides li .feature_text span.feature_button {
display:block;
}
.flexslider ul.slides li .feature_text span.feature_button a {
border:3px solid #FFF;
color:#FFF;
padding:11px;
text-transform:uppercase;
font-size:14px;
font-weight:700;
letter-spacing:2px;
font-family:Sans-serif;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.flexslider ul.slides li .feature_text span.feature_button a:hover {
background:#000;
color:#fff;
border:3px solid #FFF;
}
.flexslider ul.slides li .feature_text span.feature_button a i.fa {
margin-left:1px;
font-size:14px;
}
/*** flexslider gallery **/
.flexslider.gallery {
margin-bottom:30px;
}
.flexslider .slides a.thumb {
display:block;
height:540px;
overflow:hidden;
position: relative;
}
If your slider images are put as background images try to set background-position css property as "center".
Related
I am hoping somebody can help me with a problem I have with my own site.
Basically I am setting up media queries for a site I am working on. However, when displayed on an iphone, or similar device it is displaying a black background or margin, almost like as if there is a div with a width of 1800px or something hidden in the background.
I have tried everything I can think of to sort this out, but I'm having no luck!
I've got the site back down to a simplified version which you can view at www.creekharmonics.uk
CSS for this simplified version is below:
html,body { text-align: center;
margin: 0 auto;
background-color:#000000;
height:100%;
}
#main
{
background-color:#000000;
}
#body
{padding-bottom:500px;}
#wrapper { display: block; width:100%; margin:0px auto; }
#headerbg
{
margin-left: auto;
margin-right: auto;
background-color:#000000;
width:100%;
height:312px;
z-index:999;
}
#headerimg
{
margin-left: auto;
margin-right: auto;
background-image:url(images/header.jpg);
width:358px;
height:312px;
z-index:1000;
}
#font-face {
font-family:bebasneuebold;
src: url(bebasneuebold.otf);
}
#font-face {
font-family:bebasneueregular;
src: url(bebasneueregular.otf);
}
#font-face {
font-family: bebas neue thin;
src: url(bebasneuethin.otf);
}
#delimiter { clear: both; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
#navigation ul {
text-align: center;
display: inline;
margin: 0;
padding: 30px 4px 30px 4px;
list-style: none;
}
#navigation ul li {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
display: inline-block;
margin-right: -4px;
position: relative;
background: #000000;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#navigation ul li a {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
text-decoration:none;
display: inline-block;
margin-right: -4px;
padding: 30px 30px;
}
#navigation ul li:hover {
background: #1b9bff;
color: #fff;
}
#navigation ul li ul {
padding-top:30px;
padding-left:0px;
position: absolute;
top: 56px;
left: 0;
width: 220px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-align:center;
}
#navigation ul li ul a{
padding: 30px 67px;
}
#navigation ul li ul li {
background: #1b9bff;
display: block;
color: #fff;
border-bottom: 1px solid #0082e7;
}
#navigation ul li ul li:hover { background: #158eed; }
#navigation ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#content2
{
display:block
width:100%;
background-color:#000000;
height:auto;
}
#garratt
{
background-color:#000000;
background-image:url(images/jackgarratt.jpg);
background-size:cover;
background-position: center center;
background-repeat:no-repeat;
position:relative;
top:-10px;
left:0px;
width:100%;
height:499px;
margin:0px;
padding:0px;
border-top:10px solid #000000;
display:block;
clear:both;
}
#garrattabout
{
height:300px;
width:914px;
position: relative;
top: 48%;
transform: translateY(-52%);
font-family: bebasneuebold;
font-size:72px;
color:#ffffff;
line-height:20px;
padding:0px;
text-align:center;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#garrattabout h1
{
font-family: bebas neue;
font-size:72px;
color:#00deff;
line-height:55px;
display: inline;
padding:0px;
}
#garrattabout h2
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:90px;
background-color:#000000;
margin-left: auto;
margin-right: auto;
line-height:15px;
font-weight:normal;
padding-top:14px;
padding-bottom:14px;
text-decoration:none;
border:2px solid #ffffff;
}
#garrattabout h3
{
font-family: helvetica;
font-size:16px;
font-weight:normal;
color:#ffffff;
line-height:20px;
padding:0px;
}
#garrattabout p
{
font-family: helvetica;
font-size:18px;
color:#ffffff;
width:850px;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding:0px;
}
#garrattabout a
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:850px;
height:200px;
background-color:#1b9bff;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#garrattabout a:hover
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:850px;
height:200px;
background-color:#0d81db;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#navcentre {
position: relative;
top:0px;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:968px;
z-index:1004;
}
#navcentrewidth {
position: relative;
top:0px;
border-top:1px solid #181818;
border-bottom:1px solid #181818;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:100%;
z-index:1005;
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
html,body { text-align: center;
margin: 0 auto;
background-color:#000000;
height:100%;
width:568px;
overflow:hidden;
}
#main
{
background-color:#000000;
}
#body
{padding-bottom:500px;}
#wrapper { display: block; width:568px; margin:0px auto; }
#headerbg
{
margin:0px auto;
background-color:#000000;
width:568px;
height:312px;
z-index:999;
}
#headerimg
{
margin:0px auto;
background-image:url(images/header.jpg);
width:358px;
height:312px;
z-index:1000;
}
#font-face {
font-family:bebasneuebold;
src: url(bebasneuebold.otf);
}
#font-face {
font-family:bebasneueregular;
src: url(bebasneueregular.otf);
}
#font-face {
font-family: bebas neue thin;
src: url(bebasneuethin.otf);
}
#delimiter { clear: both; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
#navigation ul {
text-align: center;
display: inline;
margin: 0;
padding: 30px 4px 30px 4px;
list-style: none;
}
#navigation ul li {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
display: inline-block;
margin-right: -4px;
position: relative;
background: #000000;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#navigation ul li a {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
text-decoration:none;
display: inline-block;
margin-right: -4px;
padding: 30px 30px;
}
#navigation ul li:hover {
background: #1b9bff;
color: #fff;
}
#navigation ul li ul {
padding-top:30px;
padding-left:0px;
position: absolute;
top: 56px;
left: 0;
width: 220px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-align:center;
}
#navigation ul li ul a{
padding: 30px 67px;
}
#navigation ul li ul li {
background: #1b9bff;
display: block;
color: #fff;
border-bottom: 1px solid #0082e7;
}
#navigation ul li ul li:hover { background: #158eed; }
#navigation ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#content2
{
display:block
width:568px;
background-color:#000000;
height:auto;
}
#garratt
{
background-color:#000000;
background-image:url(images/jackgarratt.jpg);
background-size:cover;
background-position: center center;
background-repeat:no-repeat;
position:relative;
top:-10px;
left:0px;
width:568px;
height:499px;
margin:0px;
padding:0px;
border-top:10px solid #000000;
display:block;
clear:both;
}
#garrattabout
{
height:300px;
width:400px;
position: relative;
top: 48%;
transform: translateY(-52%);
font-family: bebasneuebold;
font-size:40px;
color:#ffffff;
line-height:20px;
padding:0px;
text-align:center;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#garrattabout h1
{
font-family: bebas neue;
font-size:72px;
color:#00deff;
line-height:55px;
display: inline;
padding:0px;
}
#garrattabout h2
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:90px;
background-color:#000000;
margin-left: auto;
margin-right: auto;
line-height:15px;
font-weight:normal;
padding-top:14px;
padding-bottom:14px;
text-decoration:none;
border:2px solid #ffffff;
}
#garrattabout h3
{
font-family: helvetica;
font-size:16px;
font-weight:normal;
color:#ffffff;
line-height:20px;
padding:0px;
}
#garrattabout p
{
font-family: helvetica;
font-size:18px;
color:#ffffff;
width:400px;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding:0px;
}
#garrattabout a
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:400px;
height:200px;
background-color:#1b9bff;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#garrattabout a:hover
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:400px;
height:200px;
background-color:#0d81db;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#navcentre {
position: relative;
top:0px;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:568px;
z-index:1004;
}
#navcentrewidth {
position: relative;
top:0px;
border-top:1px solid #181818;
border-bottom:1px solid #181818;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:568px;
z-index:1005;
}
}
Header HTML is below:
<html>
<head>
<a name="top"></a>
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> </title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '226562807717253',
xfbml : true,
version : 'v2.6'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="wrapper">
<div id="headerbg">
<div id="headerimg">
</div>
</div>
<div id="navcentrewidth">
<div id="navcentre">
<div id="navigation">
<ul><li>Home</li>
<li>News</li>
<li>
Reviews
<ul>
<li>Global</li>
<li>Underground</li>
<li>Gear</li>
<li>Live</li>
</ul>
</li>
<li>
Community
<ul>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- .main -->
</div>
Index code is here:
<?php get_header(); ?>
<div id="content2">
<div id="garratt">
<div id="garrattabout">
<h2>Global</h2>
<br/>
Jack Garratt - Phase
<p>Phase takes risks and most of them are pulled off with class and distinction, it’s fun, it’s largely original and it’s one I, nor anybody can claim to know inside out in it’s youth- that time will come. In all, Jack Garratt’s debut is immense, driven, sexy, mad- but most of all, fearless.</p>
<br/>
<p>Read More</p>
</div>
</div>
</div>
This is how it currently loads on an iphone:
iphone image
This is how I want it to load:
without black background
This is the first website I have created from scratch using Wordpress, so it's been a constant learning curve and I am sure there are things I should have done differently, but this is one hurdle I just can't seem to get over!
Any help would be really appreciated.
You can set an appropriate zoom level using a meta tag. Put this into your head:
<meta name="viewport" content="width=586">
This tells the phone to treat the viewport as 586 pixels wide, which matches your content.
More info here https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
And loads more here http://www.quirksmode.org/mobile/metaviewport/
Yes.. A re-post because apparently my last question didn't make much sense. The current navigation I have is this http://www.nerdcrown.net - and after putting in the code for the drop down, I get this http://www.fantasy-anime.com/nerdcrown/ . The drop down seems functional, but I don't know how to make it look like the original. (fantasy-anime is just my test site)
To clarify, what I want is to have the navigation in the first link, look the exact same.. Just be used as a drop down. I can include the code I've used for both. I'd like to know what I'm missing or what I'm doing wrong. Here is the original coding, used in the healthy looking menu.
/*menu*/
.menu { padding:0; margin:0; float:right; width:530px;}
.menu ul { text-align: left; padding:15px 0 0 0; margin:0; list-style:none; border:0; float:right;}
.menu ul li { float:left; margin:0; padding:13px 5px; border:0; }
.menu ul li a { float:left; margin:0; padding:13px 0 13px 0; color:#5e5e5e; font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:13px 10px; background:none; }
.menu ul li a:hover { color:#fff; background: url(images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span {color:#fff; background:url(images/l_menu.gif) no-repeat left; }
.menu ul li a.active { color:#fff; background:url(images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { color:#fff; background:url(images/l_menu.gif) no-repeat left; }
/* search */
Here is the unhealthy code. It functions properly, but I can't seem to make it look like the first.
/*menu*/
{
width:auto !important;
margin:0;
padding: 0px;
background-image: url(../../../images/headerlinks_sprite.png);
background-repeat: no-repeat;
list-style: none;
}
#menu li {
margin: 0 7px;
display:inline;
}
#menu li a {
display:inline-block;
background-color: #ffffff;
border: 1px solid #fff;
opacity: 0.6;
padding-left: 20px;
background-image: url(../../../images/headerlinks_sprite.png);
background-repeat: no-repeat;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #fff;
}
#menu li a:hover {
color: #c00;
background-color: #ffffff;
border: 1px solid #fff;
opacity: 0.6;
}
#menu li ul{display:none;}
#menu li:hover ul{display:block;}
#menu li ul li, #nav li ul li a
{
display:inline-block;
padding-left: 30px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
}
You can see a great example of nested lists styled with CSS for a dropdown menu here: http://cssdeck.com/labs/another-simple-css3-dropdown-menu I think this is what you're looking for.
I'm usually pretty good at solving this, but my usual methods aren't working here. Friend of mine asked me to try to fix the CSS here (http://www.latheaterfestival.com/) and the menu ul just isn't centering. Tried 100% width, margin: 0 auto; text-align: center....nothing will budge. Here's the menu HTML (condensed a bit):
<div class="nav-container"><ul class='wsite-menu-default'><li id='active'><a href='/index.html'>Home</a></li><li id='pg440106722136607103'><a href='/about.html'>About</a></li></ul></div>
and here's the CSS Weebly spews out:
#nav-wrap .nav-container { float:center; position:relative; left:-50%; text-align:left; margin-top:10px; z-index:2; }
#nav-wrap .nav-container ul{ list-style:none; position:relative; left:50%; z-index:2; }
#nav-wrap .nav-container li{float:center;position:relative;}
#nav-wrap .nav-container a{ text-decoration:none; font:600 12px 'Josefin Sans', sans-serif; text-transform:uppercase; margin:10px 15px; float:left; color:#666; letter-spacing:2px; padding:1px 2px; text-align:center; white-space:nowrap; }
#nav-wrap .nav-container a:hover{border-bottom:1px dashed #666;}
#nav-wrap .nav-container li#active a {border-bottom:1px solid #888;}
#nav-wrap .nav-container a:active{padding:2px 2px 0px;}
#nav-wrap {overflow:hidden}
Any ideas?
Do not use float and position relative, use display: inline-block. Here's the jsfiddle
#nav-wrap .nav-container
{
margin-top: 10px;
text-align: center;
z-index: 2;
}
#nav-wrap .nav-container ul
{
display: inline-block;
list-style: none;
padding: 0;
z-index: 2;
}
#nav-wrap .nav-container li
{
display: inline-block;
}
#nav-wrap .nav-container a
{
color: #666;
float: left;
font: 600 12px 'Josefin Sans', sans-serif;
letter-spacing: 2px;
margin: 10px 15px;
padding: 1px 2px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
#nav-wrap .nav-container a:hover
{
border-bottom: 1px dashed #666;
}
#nav-wrap .nav-container li#active a
{
border-bottom: 1px solid #888;
}
#nav-wrap .nav-container a:active
{
padding: 2px 2px 0px;
}
#nav-wrap
{
overflow: hidden;
}
Whenever I hover over the #email all the social icons move to the left for a portion. Ideas were to use positition: fixed or float. I want to do that the icons stay intact but the #email still hovers.
HERE is the code - http://codepen.io/anon/pen/jyubq
#header ul li {
width:48px;
height:48px;
margin-left:15px;
margin-top: 5px;
display:inline-block;
background-color:#000000;
padding:0;
text-align: center;
}
#google{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('images/googleplus.png');
display:block;
}
#facebook{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('http://bradsknutson.com/wp-content/themes/bradsknutson/images/facebook-48circle.png');
display:block;
}
#twitter{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('http://www.gmailnotifier.se/img/icon_twitter.png');
display:block;
}
#header ul li#google{
background-color:#d34836;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#google:hover{
background-color:#c23725;
}
#header ul li#facebook{
background-color:#3b5998;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#facebook:hover{
background-color:#2a4887;
}
#header ul li#twitter{
background-color:#2447B2;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#twitter:hover{
background-color:#1F3D99;
}
#email {
float: right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email:hover {
font-weight: bold;
}
Your font becomes greater . And padding calculates from greater font (bold), not the regular.
I can advise you this. When you hovering,text-shadow: 0px 0px 2px #000; appears instead of font-weight:bold;.
I think Animus's answer is better but if you want to use font-weight:bold then you have to absolute position it http://codepen.io/anon/pen/jqyzs
#email{
position:absolute;
right:0;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
this is what I have
http://jsfiddle.net/ftKw5/
/* CSS element classes */
#font-face {
font-family:'myriad-webfont';
src: url('webfont/myriad-webfont.ttf') format('truetype'), url('webfont/myriad-webfont.svg#myriad_webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: myriad-webfont;
color: #000000;
background: url('img/silk_pat#2x.png');
letter-spacing: 2px;
}
h2 {
;
font-size: 3;
}
::-webkit-input-placeholder {
color:#222222;
opacity:0.1;
}
/* CSS element IDs */
#outer-wrapper {
width: 50em;
margin: 1em auto;
background-position:inherit;
border: 2px solid #dcdcdc;
border-radius: 1.5em;
position:relative;
background-color: #ffffff;
}
#surtitle {
border-bottom: 1px solid #dcdcdc;
text-align: center;
opacity: 0.3;
font-size:15px;
letter-spacing: 7px;
}
#topnavbar {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
opacity: 0.5
}
/* Dropdown */
.nav {
padding-top:-10;
height:36px;
background:#aaa;
color:#fff;
text-shadow:1px 1px #888;
z-index:400
}
.menu a {
float:right;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px
}
.menu span {
float:right;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px
}
.menu a:hover {
color:#fff
}
.menu {
list-style:none;
font:10px;
text-align:center;
width:600px;
margin:0;
}
.menu li {
position:relative;
float: right;
width:120px;
z-index:400
}
.menu ul {
margin:0;
padding:0;
outline:0;
display:none;
position:absolute;
font:10px;
top:36px;
left:0;
background:#aaa;
display:none;
list-style:none
}
.menu ul li {
float:none;
border-top:1px solid #ccc;
width:120px
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
background:#999;
color:#fff
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px
}
.menu ul ul {
left:120px;
top:0
}
.menu li.submenu {
}
.menu li.noborder {
border-top:none
}
li.menuhover a, li.menuhover li.menuhover a {
color:#fff;
background:#999
}
li.menuhover span, li.menuhover li.menuhover span {
color:#fff;
background:#999
}
For some reason, when I run it, it won't hug the top etc. I added the jsfiddle so that it's a little better to read and you can see the html to go with it.
If i am understanding your questio0n correct the below css will help you.
CSS:
body {
font-family: myriad-webfont;
color: #000000;
background: url('img/silk_pat#2x.png');
letter-spacing: 2px;
padding:0; // it will remove padding from body tag
margin:0; // it will remove margin from body tag
}
Answer of new requirement in comments (Menu shoul be center of top bar ):
.menu {
list-style: none outside none;
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 368px;
}
.menu li {
float: left;
width: 120px;
z-index: 400;
}