I am using #media all and (max-width: 600px) {} in my css for responsive menu, the thing is that it does not show correctly.
I want the orange fill the green space.. and turn the green space to transparant of course. Basically it's just a size/position problem.
CSS:
#media all and (max-width: 600px) {
.example-header .container {
width: auto;
height:auto;
margin:0 auto;
padding:auto;
}
/*Zwarte MENU balk */
a.menu-link {
display: block;
color: #fff;
background-color: #333;
text-decoration: none;
padding: 19px 10px;
width:auto;
height:auto;
margin:0 auto;
padding:auto;
margin-bottom:2em;
}
.menu {
border-top: 10px solid #333;
border-bottom:10px solid #333;
height:13.2em;
margin:0 auto;
padding:auto;
width:100%;
background-color:blue;
}
.menu ul {
width:auto;
height:auto;
margin:0 auto;
padding:auto;
}
.menu > ul {
height:auto;
margin-top:;
background-color:TRANSPARANT;
}
.menu li, .menu > ul > li {
width:100%;
height:auto;
margin:0 auto;
padding:0px;
background-color:green;
}
.menu li a {
color: #000;
display: inline;
border-bottom: 1px solid #333;
position: relative;
height:auto;
margin:0 auto;
padding:auto;
background-color:orange;
}
}
It looks like a padding-related issue, try setting it to 0 instead of auto for .menu ul. HTML would be helpful though.
My guess is that the anchor elements' should be display: block; instead of display: inline;. And possibly their margin should also be just 0 instead of 0 auto
Can't say much without the HTML.
Related
I can't figure out what is going on here, perhaps it's just too early!!
See this FIDDLE
When clicking on the links below the grey box, it will eventually scroll the relative content from right to left etc. However, when clicking items 2 & 3 in the nav, transport or scholarships, the navigation menu seems to move to the left or disappears completely! If someone could cast an eye, and correct my stupidity it'd be gratefully appreciated!
HTML:
<div class="finance-galleryWrapper">
<div class="galleryView">
<div class="swapView">
<li class="gallery-item" id="Fees"></li>
<li class="gallery-item" id="Transport"></li>
<li class="gallery-item" id="Scholarships"></li>
</div>
<nav class="toggle-nav">
<ul>
<li>Fees</li>
<li>Transport</li>
<li>Scholarships</li>
</ul>
</nav>
</div>
</div>
CSS:
/* --- Galleries --- */
.finance-galleryWrapper {
width: 860px;
height: 559px;
margin: 0 40px;
overflow: scroll;
}
.galleryView {
width: 860px;
overflow: hidden;
display: block;
}
.swapView {
width: 2580px;
height: 427px;
background: #666;
overflow: scroll;
}
li.gallery-item {
width: 860px;
height: 427px;
display: inline;
float: left;
}
/* toggle-nav */
/* toggle-nav */
.toggle-nav {
width:720px;
margin:50px auto 30px;
text-align:center;
position:relative;
z-index:1001;
}
.toggle-nav ul {
margin:0 auto;
}
.toggle-nav li, .toggle-nav li a {
display:-moz-table-cell;
display:inline-block;
*display:inline;
*zoom:1;
}
.toggle-nav li {
width:168px;
}
.toggle-nav li a {
width:171px;
margin:0 auto;
padding:6px 0 7px;
border:1px solid #cfcfcf;
font-family:Open Sans;
font-size:16px;
color:#666;
text-align:center;
text-decoration:none;
background-color:#fff;
}
.toggle-nav li a:hover {
color:#08c;
}
.toggle-nav li a:first-child {
border-left:1px solid #cfcfcf;
}
.toggle-nav li:first-child a {
border-radius:6px 0 0 6px;
box-shadow:none;
}
.toggle-nav li:last-child a {
border-radius:0 6px 6px 0;
}
.toggle-nav li a.active {
position:relative;
cursor:default;
text-decoration:none;
border:1px solid #2284d1;
color:#fff;
background-color:#59b1f6;
}
There you go it works now, however themenu looks different as I was working on it. Change it back again. Your code was very messy and was calling the same ids and classes so many times , i bet your html page was confused as hell and ya like the guy below said that you forgot to put proper position types. Your main one should have had position:absolute. You also missed out on proper display types like display:block
/* --- Galleries --- */
.finance-galleryWrapper {
width: 860px;
height: 559px;
margin: 0 40px;
overflow: scroll;
}
.galleryView {
width: 860px;
overflow: hidden;
display: block;
}
.swapView {
width: 2580px;
height: 427px;
background: #666;
overflow: scroll;
}
li.gallery-item {
width: 860px;
height: 427px;
display: inline;
float: left;
}
/* toggle-nav */
/* toggle-nav */
.toggle-nav {
width:720px;
margin:50px auto 30px;
text-align:center;
position:relative;
z-index:999;
display:block;
position:absolute;
}
.toggle-nav ul {
margin:auto;
display:block;
position:relative;
padding:0px;
}
.toggle-nav li {
display:inline-block;
position:relative;
margin:0px auto;
padding:0px;
}
.toggle-nav a {
width:171px;
margin:0 auto;
padding:6px 0 7px;
border:1px solid #cfcfcf;
font-family:Open Sans;
font-size:16px;
color:#666;
text-align:center;
text-decoration:none;
background-color:#fff;
}
.toggle-nav li a:hover {
color:#08c;
}
.toggle-nav li a:first-child {
border-left:1px solid #cfcfcf;
}
.toggle-nav li:first-child a {
border-radius:6px 0 0 6px;
box-shadow:none;
}
.toggle-nav li:last-child a {
border-radius:0 6px 6px 0;
}
.toggle-nav li a.active {
position:relative;
text-decoration:none;
border:1px solid #2284d1;
color:#fff;
background-color:#59b1f6;
}
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
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
Below is the codes to the menu bar.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center">Products</div>
</li>
<li>
FAQ</li>
</ul>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
EDIT: Its like having some space after each button but instead theres a horizontal line
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
I added below lines in your css code. I hope this is what you want.
ul{
display:inline-block;
overflow:hidden;
}
div{
text-align:center;
}
li:after{
border-right:50px solid black;
content:"";
position:relative;
left:10px;
top:-27px;
z-index:-1;
display:block;
height:1px;
}
li:last-child{
margin-right:-14px
}
Working Fiddle
Now just remove float:left in your li and add display:inline-block; and add text-align center in your ul tag
as like this
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
Demo
from your current css remove float:left; on li's and add text-align:center; and it should work:
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
Update
In that case you can change the CSS to.
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle
I'm a bit new to css. I'm trying to make a horizontal navigation bar with only 3 text items for mobile device viewing. I have width set to 100% and each section width set to 32% (I tried 33% but it would place the 3rd item on a new line.) It looks ok as it is, but when I hover (or click on using a mobile device) the background color changes and you can see the margins.
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
display:inline-block;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:33%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.nav a:hover {
background:#A26A42;
border:none;
width:32%
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
End of CSS
<ul class="nav">
<li>Search</li>
<li>Legend</li>
<li>Info</li>
</ul>
<div id="map_canvas" style="position:absolute;left:0;right:0;"></div>
Thank you for any help.
I'd rework your CSS like this jsFiddle example.
CSS
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
Try this:
* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already)
.nav li {
display:block;
float:left;
width: 33%;
}
.nav li a {
display:block;
text-align: center;
}
Fiddle: http://jsfiddle.net/kboucher/duaa6/
On "hover" you make the menu items narrower than normal. Plus you remove ther border which will narrow it even more. Also, It looks like you are using a 1px border left and right for spacing. If this is the case use margin instead. Use jsfiddle to practice.
Try this:
ul.nav {
width:100%;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:32%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
margin-left: 1px;
background: #62564A;
}
.nav a:hover {
background:#A26A42;
}
ul.nav li:first-child a{
margin-left: 0;
}
http://jsfiddle.net/mVv75/4/
I'd like to have my navigation menu on my site span the width evenly. Here is an example of what I'm trying to accomplish, notice how the links are spaced evenly and stretch the entire width of the navigation bar.
I'm not exactly sure what code to use to accomplish this. I tried margin:auto but that didn't seem to work.
Here is the CSS that I have:
.mainNav{
height:30px;
padding-bottom:0px;
margin:0 !important;
position: relative;
border-top: 1px #d5d5d5 solid;
border-bottom: 1px #d5d5d5 solid;
}
.mainNav a {
font-size:16px;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
transition:none;
position: relative;
}
.mainNav ul {
list-style-type: none;
list-style-image: none;
}
.mainNav li {
float:left;
margin: 0 auto;
position: relative;
list-style-type: none;
list-style-image: none;
}
.mainNav li a {
text-transform:uppercase;
padding:0 0 0 36px;
display:block;
padding-bottom:13px;
}
.mainNav li ul {
display: none;
margin:0 !important;
}
.mainNav li:hover > ul, .mainNav li.hover > ul {
display: block;
position: absolute;
top: 35px;
left: 0;
z-index: 1000;
width: 180px;
}
.mainNav li > ul {
height:auto;
width: auto;
background: #fff;
border:1px solid #efefef;
padding:0;
}
.mainNav li > ul li {
width:180px;
padding: 0;
position: relative;
height:35px;
border-bottom:1px solid #efefef;
}
.mainNav li > ul li:last-child{
border-bottom:none;
}
.mainNav li > ul li a {
text-transform:none;
height:22px;
padding: 5px 10px 0px 15px;
text-align: left;
font-size: 13px;
line-height:25px;
color:#333;
}
.mainNav li > ul li a:hover {
border:none;
}
.mainNav li ul li:hover > ul, .mainNav li ul li.hover > ul {
display: block;
position: absolute;
top:0;
left: 180px;
z-index: 0;
width: 180px;
}
If you turn off javascript and reload that wordpress theme that you want to replicate, you'll notice that the styling breaks.
That is because the margin's set on the list items to space them out evenly, is calculated using javascript and then applied.
You could write a javascript solution to style your list items or a quick fix would be to hard code the widths of the list items, e.g:
Change your current block of CSS:
.mainNav li a {
text-transform:uppercase;
padding:0 0 0 36px;
display:block;
padding-bottom:13px;
}
To the following:
.mainNav li a {
text-transform:uppercase;
text-align: center; /*added*/
width: 117px; /*added*/
padding:0; /*edited*/
display:block;
/*padding-bottom:13px;*/ /*removed*/
}
It looks fixed to me. Screenshot of your site in firefox, with applied styles seen in firebug: