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;
}
Related
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".
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/
I have a simple horizontal list menu that was working fine when I had a global (*) setting of padding: 0. For other reasons, I needed to take out that padding as a global setting, but I can't figure out how to make it apply to the list.
Now, each entry in the list has a blank block of maybe half an inch to the left of the first entry. If I can get rid of that, I'll be set. Here is a fiddle (http://jsfiddle.net/eha77way/), and I'll paste the code.
Thank you!
CSS
* {
border:0;
margin:0;
}
/* navigation */
#navigation, #episodenav, #pivotnav {
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
list-style:none;
}
#pivotnav {
background:#F0F0F0;
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
width:755px;
height:25px;
list-style:none;
}
#navigation {
background:#E0E0E0;
width:755px;
height:40px;
}
#episodenav {
width:756px;
background:#F0F0F0;
height:25px;
}
#pivotnav {
width:755px;
background:#F0F0F0;
height:25px;
}
#navigation li, #episodenav li, #pivotnav li {
border-left:1px solid #FFF;
float:left;
list-style:none;
}
#navigation li, #pivotnav li {
width:150px;
}
#episodenav li {
width:41px;
}
#navigation a, #episodenav a, #pivotnav a {
color:#000;
display:block;
text-align:center;
}
#navigation a {
line-height:40px;
}
#episodenav a, #pivotnav a {
line-height:25px;
}
/* content */
#content {
height:auto;
margin:50px auto;
position: relative;
padding:30px;
width:751px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
#content h1 {
border-bottom:1px dashed #999;
font-size:2em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h2 {
font-size:1.6em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h3 {
font-size:1.1em;
padding:20px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content p {
padding: 10px 5px;
line-height: 21px;
}
#content textarea {
border: 1px solid #cccccc;
}
#list {
margin-left: 50px;
}
HTML
<body>
<div id="content">
<div id="navigation">
<ul>
<li><i>Ulysses</i> by Episode</a></li>
<li>Pivot Points</a></li>
<li>Projects</a></li>
<li>Collections</a></li>
<li>About Ashplant</a></li>
</ul>
</div>
<h2>TEST</h2>
</div>
</body>
</html>
Is this what you mean?
#navigation ul{
padding: 0;
}
The padding is in the ul element, not the lis. This is a default of the browser, that is much needed when bullets are visible.
You can add a css rule-set such as:
#navigation ul {
padding: 0;
}
at least on my jsbin, this does the trick.
Maybe you want to remove padding-left without {padding-left:0px}?
Please use it
ul > li {position: relative; left: -20px;}
I have a dropdown menu which works exactly as expected in Chrome.
The dropdown list is with position absolute, and the parent with position relative. However, it seems to render differently in Firefox. The dropped menu appears to be relative to the ul element rather than the li element
This dropdown is activated using javascript, adding a display:block on click
Any ideas why?
I did not use a table.
Fiddle
http://jsfiddle.net/eyJ8e/1/
HTML
<div id="menubar">
<div class="container">
<ul class="menu-container title" style="float:left;">
<li>NEW
</li>
<li class="dropdown"> <a class="click-dropdown" href="#">MEN</a><span class="caret"></span>
<ul class="dropdown-menu" style="display:block"> <li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
body
{
width: 100%;
margin: 0px;
padding: 0px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 10pt;
/* background-color: #f0f0f0; */
}
.title{
/*font-family: Impact, Charcoal, sans-serif;*/
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
font-family: SourceSans Pro Bold;
}
.container{
width:1024px;
margin:0 auto;
}
a, a:active, a:visited
{
color: #000000;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: none;
}
#menubar {
width:100%;
min-width:1000px;
height:75px;
background-color:#000;
line-height: 75px;
color:white;
}
#menubar .brand{
display: block;
height:75px;
width: 120px;
margin-right:30px;
margin-top:3px;
float:left;
color:white!important;
}
#menubar .menu-container{
list-style:none;
margin:0px;
}
#menubar .menu-container li:first{
border-left: 1px solid grey;
}
#menubar .menu-container li{
position:relative;
display:inline;
padding:0px 15px;
font-size: 14px;
text-transform: uppercase;
border-right: 1px solid grey;
height:75px;
}
#menubar .menu-container > li.shopping-bag-wrapper:hover{
text-decoration: none;
}
#menubar .menu-container li.shopping-bag-wrapper{
border-right:none;
padding-right:0px;
}
#menubar .authentication-fb-form{
display:inline;
}
#menubar .menu-container li a{
color: white!important;
}
#menubar .menu-container li:last-child{
border:none;
}
#menubar .menu-container .dropdown ul.dropdown-menu > li:hover{
background-color:#555555;
}
#menubar .menu-container ul.dropdown-menu{
border:none;
position:absolute;
z-index:1000;
background-color:black;
display:none;
margin-top:-20px;
}
#menubar .menu-container .dropdown-menu li{
display:block;
min-width:150px;
max-width: 250px;
height:auto;
}
#menubar .menu-container .dropdown-menu a{
display:block;
line-height:25px;
padding: 5px 0px;
height:auto;
border: 2px solid white;
border-bottom:0px;
}
#menubar .menu-container .dropdown-menu a:last-child{
border: 2px solid white;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
.inline-block{
display: inline-block;
}
.pull-right{
float:right!important;
}
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
There are a couple of issues here. Firstly, you are nesting <li>'s within <a>'s which is invalid. You need to fix this:
<ul class="dropdown-menu">
<li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
secondly, you arent actually giving your nested <ul> a left position which FF seems to need:
#menubar .menu-container ul.dropdown-menu{
left: 0;
}
You will then also need to move your border from the <a> to the <li> to keep the styling that you had before making these changes.
DEMO
just put left:0 in #menubar
.menu-container ul.dropdown-menu{left:0}
refer http://jsfiddle.net/aashi/eyJ8e/8/
For a drop down menu you may check this demo link :
The html part:
<ul class="menubar">
<li>NEW</li>
<li>MENU
<ul class="dropmenu">
<li>JEANS</li>
<li>PANTS</li>
<li>SHIRTS</li>
<li>SHORTS</li>
<li>TEES</li>
</ul>
</li>
</ul>
the CSS part:
*{ margin:0; padding:0;}
ul.menubar{
margin:0 auto;
width:100%;
background:#000;
height:40px;
display:block;
}
ul.menubar li{
list-style-type:none;
display:inline-block;
float:left;
position:relative;
}
ul.menubar li a{
display:block;
text-decoration:none;
color:#fff;
padding:10px;
}
ul.menubar li ul.dropmenu{
position:absolute;
width:120px;
padding:10px 10px 10px 0;
display:none;
}
ul.menubar li:hover ul.dropmenu{
display:block;
top:30px;
}
ul.menubar li:hover ul.dropmenu li{
background:#222;
width:100%;
}
ul.menubar li:hover ul.dropmenu li a:hover{
background:#333;
}
Here is the JS fiddle:
http://jsfiddle.net/ameysawant/LPdqV/1/
I cannot put my menu in the center of the page, i've inserted all "margin: 0 auto;" i can and all "text-align: center", and the div is separated from everything, is not a child of something else..
here's the css code:
.more{
margin: 0 auto;
position:relative;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 40%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
}
.more ul li{
display: block;
padding: 10px 3px;
float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
float:left;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
And here's the HTML code:
<div class="more">
<ul>
<li class="selected">Homepage Blog</li>
<li>Cerca</li>
<li>Archivio</li>
<li>Tags</li>
</ul>
</div>
How-to make the div permanently in the center of my page? I've tried lot, lot, lot of possible moves.
Thank you.
p.s. I've also tried to put a <div align=center> ...my menu (class=more) list ...</div>
Remember that you can't use margin:0 auto on floatted element.
Keys for margin 0 auto are:
1) element must have display:block
2) no float, absolute or fixed position
.more{
float:left;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 100%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
margin:0 auto;
}
.more ul li{
display: inline-block;
padding: 10px 3px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}