Here is the link: http://jessiskiptoncampbell.com/jessi-wp/
At the moment its aligned right, but i want it to be aligned in the center.
#header {
padding: 15px 0 45px 0;
margin-left: auto;
margin-right: auto;
}
{
margin-left: auto;
margin-right: auto;
}
#logobar1, #logobar2 {
display:block;
width:100%;
position:absolute;
center:0px;
z-index:1;
}
#logobar1 {
border-top:2px solid #231f20;
border-bottom:2px solid #231f20;
background-color:#f49cb1;
height:102px;
margin-top:197px;
}
#logobar2 {
background-color:rgba(255, 255, 255, 0.7);
height:80px;
margin-top:208px;
}
#logodiv, #logodiv a, #logo {
display:block;
margin:0 auto;
position:relative;
z-index:2;
}
.nav {
text-align: center;
width: auto;
margin: -45px auto 15px auto;
z-index:3;
position:relative;
font-family:'Montserrat Alternates', sans-serif;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
list-style:none;
}
.nav ul li {
float: left;
margin-left: 8px;
font-size: 14px;
position: relative;
}
.nav ul li a {
display: block;
padding: 2px 20px;
color: #000;
text-decoration: none;
}
.nav ul li a:hover, .nav li.current_page_item a, .nav ul li.current-menu-item a {
color: #931b20;
}
just Give width:100%; for the .jr_logo class
Set up your header image width to this width: 1240px; and it should be centered
your maincontainer has a margin and its is setting everything off...
take your header out of your maincontainer...
its simple.just give your image an id or class..likeke
#myimg
{
float:left;
margin-left:-116px;
}
now it will perfectly become in center.
Related
I have designed a menu.
HTML code is give
<div class="navi">
<ul class="menu">
<li class="current_page_item">Women</li>
<li>Men</li>
<li>Junior</li>
<li>Accessories</li>
<li>Collections
<ul class='children'>
<li>Year</li>
<li>2014
<ul class='children'>
<li>SUMMER</li>
<li>AUTUMN</li>
<li>WINTER</li>
<li>SPRING</li>
</ul>
</li>
<li>2013</li>
</ul>
</li>
<li>Sale</li>
<li class="last"><a href='#'>MY ACCOUNT</a>
</li>
</ul>
<br style="clear:both;" />
</div>
The CSS is give bellow
.navi {
width:1000px;
margin:0 auto;
border-bottom:5px solid #000;
height:50px;
}
.menu {
width:1000px;
margin:0 auto;
}
.menu, .menu ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
border: 0 none;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
z-index: 5;
}
.menu li:hover {
white-space: normal;
z-index: 10000;
}
.menu li li {
float: none;
}
.menu ul {
left: 0;
position: absolute;
top: 0;
visibility: hidden;
z-index: 10;
}
.menu li:hover > ul {
top: 100%;
visibility: visible;
}
.menu li li:hover > ul {
left: 100%;
top: 0;
}
.menu:after, .menu ul:after {
clear: both;
content: ".";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.menu, .menu ul {
min-height: 0;
}
.menu ul {
margin: -10px 0 0 -30px;
padding: 10px 30px 30px;
}
.menu ul ul {
margin: -30px 0 0 -10px;
padding: 30px 30px 30px 10px;
}
.menu ul li a:hover, .menu li li a:hover {
color: #484848;
text-decoration: none;
}
.menu ul {
min-width: 15em;
width: auto;
}
.menu a.arrow
{
background: url(arrow.gif) no-repeat right center;
}
.menu ul a.arrow
{
background: url(right.gif) no-repeat 97% center;
}
.menu .menuRight
{
float: right;
margin-right: 0px;
}
.menu a {
font-family:Harvest;
color: #314350;
display: block;
height:55px;
line-height:55px;
margin: 0 0px 0 0;
padding: 0 1em;
position: relative;
text-decoration: none;
font-size:18px;
}
.menu a:hover {
background-color: #1c2b36;
color: #ffffff;
box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0;
}
.menu .current_page_item a {
background-color:#1c2b36;
color: #ffffff;
box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0;
}
.menu li li {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #B2B2B2 #B2B2B2;
border-image: none;
border-right: 1px solid #B2B2B2;
border-style: none solid solid;
border-width: medium 1px 1px;
color: #444444;
filter: none;
width: auto;
}
.menu li li a {
background-position: 50% 50%;
background-repeat: no-repeat;
border: medium none;
color: #444444;
font-size: 12px;
font-weight: 400;
height: 20px;
line-height: 20px;
padding: 5px 10px;
text-shadow: none;
white-space: nowrap;
}
.menu li li a:hover {
background:#E5E4E4;
border: medium none;
color: #333;
filter: none;
}
.menu ul > li + li {
border-top: 0 none;
}
.menu li li:hover > ul {
left: 100%;
top: 0;
}
.menu > li:first-child > a {
border-left: medium none;
}
.menu > li:first-child > a, .menu li + li + li li:first-child > a {
}
.menu ul.children a, .menu .current_page_ancestor, .menu .current_page_ancestor ul a {
background: none;
filter: none;
}
.menu ul.children a{background:url(images/arrow.png) no-repeat 93% 70%;}
.menu ul.children a:hover{background:url(images/arrow.png) no-repeat 93% 70% #999;}
ul.sub-menu .current_page_item a {
background:none;
}
.footer-box-last {
width:420px;
float:left;
background:#b6c2c9;
height:150px;
}
.footer_outer {
background:url(mail-icon.png) repeat:none;
width:400px;
border-radius:5px;
margin:5px;
background-color:#fff;
}
.footer-box-last h2 {
color:#e8ecee;
font-size:20px;
font-weight:lighter;
margin:15px 15px 15px 7px;
}
.footer-box-last label {
color:#9B9B9A;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.icon {
width:20px;
height:30px;
float:left;
margin:11px 0 0 5px;
}
.field-2 {
border: medium none;
width:220px;
height:30px;
border-radius:5px;
border:none;
color:#4c565f;
margin:5px;
}
.form_btn {
background-color:#3bc0c3;
color:#ffffff;
float:right;
border-radius:5px;
height:34px;
width:120px;
border:none;
margin:4px;
}
.last {
float:right;
padding-left:60px;
font-style:italic;
}
</style>
I want to move the last li item to the left. then it will look like this n pic
I need a space between SALES and MY ACCOUNT
please help me in this.
Thank you in advance
Try adding this:
.menu li.last {
float:right;
}
You had the right CSS in your code (.last), but you need to give it more authority as it is being overwritten by #menu li code. So on your last declaration change it to ".menu li.last" instead of ".last"
Try This
.menu li.last {
float:right;
}
OR
.menu li:last-child {
float:right;
}
Try this
.menu li:last-child {
float:right;
}
Try this:
.last{
position: relative;
left: -50px;
}
I am developing a wordpress them and the homepage consists of a fixed header and footer and a vertical slider in the middle including content and images. I am building the website responsive but what I am noticing is that when the screen is resized the content in the vertical sliders is being cut off(Forget the images - just the boxes with the title and text). How can I make the main cont always start beneath the header and above the footer ?
Here is a js fiddle of what I am talking about: http://jsfiddle.net/tdWb9/
Some css:
#charset "UTF-8";
/* CSS Document */
* {
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
}
/* Style for our header texts
* --------------------------------------- */
h1{
font-size: 4em;
color: #fff;
margin:0;
padding :0;
}
html,body{
margin: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.home-button {
-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
box-shadow:inset 0px 1px 0px 0px #cae3fc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #00baf2) );
background:-moz-linear-gradient( center top, #79bbff 5%, #00baf2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#00baf2');
background-color:#79bbff;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topright:10px;
border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-bottomright:10px;
border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomleft:10px;
border-bottom-left-radius:10px;
text-indent:0;
border:1px solid #469df5;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:17px;
font-weight:bold;
font-style:normal;
height:38px;
line-height:38px;
width:128px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #287ace;
}
.home-button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00baf2), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #00baf2 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00baf2', endColorstr='#79bbff');
background-color:#00baf2;
}.home-button:active {
position:relative;
top:1px;
}
.home-button h3{
text-align:center;
}
.intro{
background-color: rgba(255, 255, 255, 0.8);
width:30%;
border-radius:10px;
padding-bottom:20px;
padding-left:3%;
padding-right:3%;
margin-left:10%;
}
.intro2{
background-color:white;
width:30%;
border-radius:10px;
opacity:0.8;
filter:alpha(opacity=80);
padding-bottom:20px;
margin-right:10%;
float:right;
}
.intro h1, .intro2 h1{
color:black;
padding-top:3%;
}
.intro p, .intro2 p{
color: black;
}
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:left;
}
/* Backgrounds will cover all the section
* --------------------------------------- */
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
/* Defining each sectino background and styles
* --------------------------------------- */
#section0{
background-image: url(images/image1.jpg);
}
#section2{
background-image: url(images/image2.jpg);
}
#section3{
background-image: url(images/image3.jpg);
}
/* Overwriting styles for control arrows for slides
* --------------------------------------- */
.controlArrow.prev {
left: 50px;
}
.controlArrow.next{
right: 50px;
}
/* Fixed header and footer.
* --------------------------------------- */
#header, #footer{
display:block;
width: 100%;
background: #05556d;
text-align:center;
color: #f2f2f2;
}
#footer{
padding:10px 0px;
font-size:12px;
}
.home #header, .home #footer{
position:fixed;
z-index:9;
}
.home #header{
top:0px;
}
.home #footer{
bottom:0px;
}
#footer a{
color:#00baf2;
}
#footer-other{
z-index:9999;
width: 100%;
background: #05556d;
text-align:center;
color: #f2f2f2;
}
#footer-other{
padding:10px 0px;
font-size:12px;
}
#footer-other a{
color:#00baf2;
}
/* Bottom menu
* --------------------------------------- */
#infoMenu {
bottom: 80px;
}
#infoMenu li a {
color: #fff;
z-index: 999;
}
*Main Menu CSS*/
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
background: #05556d;
border-bottom: 4px solid #00baf2;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 16px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #05556d;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 80px; }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #00baf2; }
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a, #cssmenu ul li.current-menu-item > a {
background: #00baf2;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#down{display:none}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
.logo{
margin-top:5px;
float:left;
margin-left:20%;
padding-right:10px;
position:relative;
z-index:10000;
}
#Media screen and (max-width:480px) {
.intro{
width:70%;
margin-top:20%;
}
.intro h1, .intro2 h1{
color:black;
padding-top:3%;
}
.intro p, .intro2 p{
color: black;
}
.main-container{
width:85% !important;
}
#sbs{position: absolute;
width: 20px;
padding: 8px;
cursor:pointer;
height: 20px;
border: 0px solid white;
border-radius: 5px;
top: 5px;
left: 10px;}
.sb{width: 100%;
height: 4px;
display: inline-block;
border-bottom: 2px solid white;
float: left;
clear: both;}
#down{cursor:pointer;display:table;width:350px; margin:0 auto; margin-bottom:10px; text-align:center;padding: 15px 0px; background: #00baf2; color: white;margin-top: 10px;position:relative;}
#cssmenu *:not{ float :left !important; width: 100%;padding-left: 0px !important; padding-right: 0px !important;}
#cssmenu {
width: 87%;
display: table;
margin: 0 auto;
}
#down + #cssmenu { display: none;}
#down.open + #cssmenu { display: block;}
.logo{margin:0;padding:0;width: 100%;text-align: center;margin-bottom:10px;}
#cssmenu .logo > a{margin:0;padding:0}
#cssmenu ul li { display: block ; width: 100% ; text-align:center; }
#cssmenu > ul > li > a { line-height: 50px; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
width: 100%;
/* float: left; */
}
#cssmenu ul ul ul {display:none;}
#cssmenu .has-sub:hover > ul {
border-top: 0 none;
visibility:visible;
display: block;
float: left;
clear: both;
position:relative;
right: 0;
}
#cssmenu ul li.hover, #cssmenu ul li:hover{
display:inline-block;
}
.content1{font-size:100%;}
}
}
#Media screen and (max-width:768px) {
.logo{ margin-left:10%;}
}
.login{
background-color:#00baf2;
width:5%;
margin-right:10%;
margin-top:-60px;;
float:right;
padding:10px 10px 10px 10px;
}
.main-container{
width:60%;
height:100%;
margin-left:auto;
margin-right:auto;
padding-top:3%;
}
.imgsection{
float:left;
padding-right:5%;
}
.main-container img{
max-width:100% !important;
height:auto;
display:block;
}
It's hard to tell because the text wont feet all in the page because it's a slider, so when you pull down to see more text it will change to the next slider,
The best way that I find better and simpliest to do it is by adding this css code:
p {font-size:82%}
Or if you want to keep the font-size to 100% you can do it by adding this css code which makes the div scroll:
.section{
height:55%;
overflow-y: scroll;
overflow-x: hidden;
}
.intro{
height:55%;
overflow-y: scroll;
overflow-x: hidden;
}
I think the scroll will work fine as you drag the mobile mouse into the text area without conflict with changing to the next slide, but I can't tell for sure because I'm not testing it on a mobile, but you can do the test.
Or... in a last resort, you could create a smaller logo and put it on the left side of the menu and compact the header size.
Regards
here it is, this is the css, and the media queries is down below, just search #media and it will find it.
Thanks so much for your help, idk why it is not working, the media query has no effect on the ipad emulator, in portrait mode, i changed the background just to see if it would work and it still did not, so not sure whats going on.
body {background-image:url('../images/space1.jpg');
background-repeat:no-repeat;
background-size:200%;
}
body {
color:white;
}
a, a:visited {
color:#3399FF; text-decoration:none;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul {
display: block;
}
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.1 {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:120%;
}
div.header1 {
text-align:right;
font-size:85%;
}
div.logo{
margin-top:-40px;
}
div.logo {
img
height:150px;
width:320px;
}
#nav{
width:85%;
height:3%;
font-size: 30%;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul {
display: block;
}
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.1 {
text-align: center;
}
.left {
float: left;
margin-left:0%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:0%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
}
So, the problem is primarily twofold:
1) You have several errors in your css. Using the validator, I found 13 errors.
- There's declarations that are unclosed (missing a closing curly-brace - }), such as your declaration for #nav a:hover
- There's extra / stray closing curly-braces in other locations.
- There's invalid background color and color properties
- You have div.1, which implies a class of "1". That's not a valid class according to the validator.
2) The media query contains far too many rules. You should only put rules in the media query that replace / override previous rules, or are new rules. You've got many rules that are simply repeats of your other common css rules.
Clean up the errors. Try running them through the W3C CSS validator - you can copy-and-paste your css directly, to see if / where there are errors.
Then, simplify your media query css to only include the necessary changed rules (and only the specific properties that need to be changed).
Note: I was able to get it to validate by cleaning up the errors. For your reference, the valid / clean CSS is below.
You still need to simplify, and the code below is not necessarily guaranteed to work. I'd encourage you to over-simplify - put one rule in your media query for a border, background color, or something, just to see if the media query is getting picked up. Then you can work on adding in the different styles you need.
body {background-image:url('../images/space1.jpg');
background-repeat:no-repeat;
background-size:200%;
}
body {
color:white;
}
a, a:visited {
color:#3399FF;
text-decoration:none;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:120%;
}
div.header1 {
text-align:right;
font-size:85%;
}
div.logo{
margin-top:-40px;
}
div.logo {
height:150px;
width:320px;
}
#nav{
width:85%;
height:3%;
font-size: 30%;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:0%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:0%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
}
How do I center my navigation bar links using CSS while keeping the sides grey?
Blogs and History have a drop a down menu. Here is a screenshot:
(source: gyazo.com)
CSS:
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
width: 100px;
background-color: #444444;
text-align: center;
border-right: 1px solid white;
position: relative;
height: 30px;
line-height: 30px;
}
.navbar li ul li {
float: none;
width: 150px;
text-align: left;
padding-left: 5px;
border-top: 1px solid white;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar li ul {
position: absolute;
top: 30px;
left: 0;
visibility: hidden;
}
.navbar li:hover ul {
visibility: visible;
}
.navbar li:hover {
background-color: maroon;
}
Edited my answer.. I've made your Container div clear the float, and set a defined width to navbar.
http://jsfiddle.net/jFdhM/
#container {
border-radius: 10px;
box-shadow: 3px 3px 4px;
padding: 8px;
background-color: #FFFFFF;
width: 748px;
margin: 0 auto;
}
#top {
width: 748px;
}
.navbar {
width: 505px;
margin:0 auto;
}
.navbar ul {list-style:none; padding:0; margin: 0 auto;text-align: center;}
.navbar li {float:left; width:100px; background-color:#444444; text-align:center;
border-right:1px solid white; position:relative;
height:30px; line-height:30px;}
.navbar li ul li {float:none; width:150px; text-align:left; padding-left:5px;
border-top:1px solid white;}
.navbar a {text-decoration:none; color:white;}
.navbar li ul {position:absolute; top:30px; left:0; visibility:hidden;}
.navbar li:hover ul {visibility:visible;}
.navbar li:hover {background-color:maroon;}
#maincontent {
clear: both;
padding: 10px;
font-family: "Microsoft Sans Serif";
font-size: medium;
}
I tried to add some social media icons to my header just now and they are about 10 times larger than they should be. I've gone through the css and used firebug and I can't find what is doing this.
I would like them to be their regular size and sit on the top right of the header. Thanks in advance!!
Here's what it looks like ( http://www.bolistylus.com ):
Here's the style.css:
a {
color: #254655;
}
ul, ol {
margin: 0 0 0 5.5em;
}
#page {
margin: 0 auto;
}
body{
background: #f3f3f3;
border-top: none;
border-top: 10px solid #666666;
}
#page {
margin: 0em auto;
width: 1000px;
}
.singular.page .hentry {
padding: 0.5em 0 0;
}
#branding{
background: #f3f3f3;
color: #000000;
border-top: none;
position: relative;
z-index: 2;
}
#site-title {
/*margin-right: 270px;*/
padding: 0.66em 0 0 0;
}
#site-title a {
color: #111111;
font-size: 60px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#branding h1, header#branding a{
text-align: left;
margin-right: 0;
}
#branding span{
text-align: center;
}
#branding img {
height: auto;
margin-bottom: -.66em;
width: 30%;
}
#branding .widget{
position: absolute;
top: 2em;
right: 7.6%;
}
#respond{ background: #E7DFD6; }
.welcome{
margin: 15px 60px;
background: #f3f3f3;
border: 1px solid #f6ff96;
padding: 15px;
text-align: center;
}
/* =Menu
-------------------------------------------------------------- */
/*.header_nav ul{
margin: 0;
padding: 0;
text-align: center;
width: 400px;
}
*/
#branding img .sm-img {
height: auto;
margin-bottom: -.66em;
width: 100%;
}
.header_nav {
background: #f3f3f3
}
.header_nav .head-nav {
border-bottom: 1px solid #cfcec9;
border-top: 1px solid #cfcec9;
margin-top: 30px;
padding-top: 5px;
padding-bottom: 5px;
text-align: right
}
.header_nav ul li{
display: inline;
}
.header_nav ul li a{
padding: 10.5px 21px;
color: #000000;
}
.header_nav ul li a:hover, .menu ul li .current{
color: #a8cb17;
text-decoration: none;
}
#access {
background: #f3f3f3; /* Show a solid color for older browsers */
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: center;
position: relative;
display: inline;
}
#access a {
}
#access ul ul {
}
#access ul ul ul {
}
#access ul ul a {
}
#access a:focus {
}
#access li:hover > a,
#access a:focus {
}
#access ul li:hover > ul {
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}
You're specifying a percentage width multiple times in your CSS, here are the lines:
style.css (line 70)
#branding img {
height: auto;
margin-bottom: -0.66em;
width: 30%; //remove
}
style.css (line 530)
#branding img {
height: auto;
margin-bottom: -7px;
width: 100%; //remove
}
Remove those and they should display ok.
Try to change your css here:
#branding img {
height: auto;
margin-bottom: -0.66em;
width: 3%; /* 3 not 30 */
}
In style.css line 70
Line 70 of your style.css is setting a width attribute with a value of 30%. This is causing your images to stretch to 30% of their container.
#branding img {
height: auto;
margin-bottom: -.66em;
width: 30%;
}
Adjust the width to a lower percentage or remove the line entirely.