My text menu items are not vertically aligning correctly in IE6 in my horizontal menu.
Example - http://blacktownworkersgroup.worldsecuresystems.com/bwc09/home
They seem to be ok in Firefox 3 and IE7.
I've made the background red for each item to make it more obvious.
Any ideas?
chage this class
#nav_468891 li { /* all list */
list-style: none;
margin: 0;
padding: 0;
display: inline;
line-height: 30px;
}
you can delete "vertical-align: middle;"
Related
I have looked around for many solutions and I am currently redoing the code of a website I own as I had all of my CSS individually laid out on each HTML page. Eventually I had too many pages to handle, and I decided to make a stylesheet to clean it all up but my EVERYTHING was a mess. Indentation, comments, etc...
Currently, I am working on my Navigation Bar on the Website, but for some reason which I can't figure out (I've tried many things) the bar is positioned exactly in the middle which leaves a small amount of white space at the top, left and right of the bar. Here is the HTML:
ul { /* unordered list properties */
list-style-type: none; /*takes out bullet points */
margin: 0; /* scaling */
padding: 0; /* scaling */
overflow: hidden; /* clipping rules: https://www.w3schools.com/cssref/pr_pos_overflow.asp */
background-color: #0c1f2e; /* colour */
}
li { /* list item properties */
float: left; /* move item to the left */
font-size: 14px; /* set the font size to 14 pixels */
}
li a { /* vertical style */
display: block; /* display style */
color: #ffffff; /* text colour */
text-align: center; /* centres the text */
padding: 19px; /* vertical padding */
text-decoration: none; /* remove any text effects */
font-family: 'Dosis', sans-serif; /* change the font to selected font: Dosis */
}
li a:hover { /* vertical style items when hovered upon by cursor properties */
background-color: #639ddf; /* set the background colour */
font-size: 20px; /*set the font size to 20 pixels */
}
<nav> <!-- begin navigation element -->
<div id="menu"> <!-- create and start new element with the id: menu -->
<ul> <!-- begin unordered list -->
<li>Home</li><!-- list items -->
<li>Competitions</li>
<li>Builds</li>
<li>Images</li>
<li>Videos</li>
<li>Fight Club</li>
<li>Articles</li>
<li>Forums</li>
<li>Tools</li>
<li>News</li>
<li>Shop</li>
<li>Allies</li>
<li>More</li>
</ul> <!-- end the unordered list -->
</div> <!-- end the 'menu' element -->
</nav> <!-- end navigation element -->
Thanks all in advance, I hope I have provided enough info and please don't be too harsh with my over-commenting or anything just keep those opinions to yourself. As for my question structure and code, please correct me on anything I've done wrong and point out how I can fix. Thank you very much for taking your time to read this,
Is this what you're looking for?
Link to JSFiddle
If so, in your CSS. Add this
body {
margin: 0px;
}
None of the solutions I've were working for me, but I found one that did. In my CSS:
.navbar{
margin-left: -15px;
margin-right: -15px;
}
It seemed like mine had about 15 pixels of margin on just that I couldn't get away by setting the margin to 0.
It looks like the browser default css style is adding margin: 8px; to the body. To remove it add this to your css:
body {
margin: 0;
}
Setting margin on your nav to 0px and setting body padding to 0px; should works.
I tried left:0; It worked like a charm!
I hope I am right here, I need your help with my upcoming online shop. I would like to center the main categorie menu on the top but I am missing the right CSS order.
This is what it looks right right now and there are 2 ways I want to test the looking.
First I want is a centered menu where "home" and "Kollektionen" have the same distance to the left or right.
And secondly I want to try out what it looks like when every li-element 'pushes' the next element to the right so that it's centered at the last one.
You know what I mean? 2 different ways of centering my menu and I don't find the right command....
I hope you can help me.
Thanks in advance.
PS: sorry for my bad english, it's not my native language.
EDIT: I cannot post code I'm afraid as it's not mine. But maybe this is enough: the basic template is made of this http://www.shopwaredemo.de/
2nd EDIT: after trying Asko's, Mike's and Tom's answer and both works I ask myself why? What is the difference between display:flex and display:inline-box and between text-align and justify-content set to center???
Perhaps use display: inline-block? E.g the following:
.menu {
text-align: center;
}
.menu li {
float: none; /* assuming the template has set this to 'left' */
display: inline-block;
margin-left: 20px; /* tweak this for the space inbetween items */
margin-right: 20px; /* and this, too */
}
Note that I didn't look at the code, so the div .menu is an example.
You can try to make the <ul> display: inline-block and apply text-align: center on parent.
JSFiddle Demo: http://jsfiddle.net/Q2hSv/1/
Without seeing some code, maybe this will help.
.topmenu {
width: 80%;
margin: auto;
}
.menuitems {
float: left;
width: // Here you take the number of items divided by 100%
// remember to take borders and margins into account
Dependent on your browser scope you could use display:flex;
HTML:
<nav>
<ul>
<li>Home</li>
<li>Neuheiten</li>
<li>Orschmuck</li>
<li>Ringe</li>
<li>Halsketten</li>
<li>Armbander</li>
<li>Kollecktion</li>
</ul>
</nav>
CSS:
nav {
background: #000;
margin: 0 auto;
width: 70%;
}
ul {
display: flex;
justify-content: center;
}
li {
list-style: none;
}
Example http://codepen.io/tom-maton/pen/AFpnJ
back to work and managed to achieve my goal:
Thanks again for every answer, I used and played a lot with your snippets and and I ended up using this (click click!):
#mainNavigation {
margin: 0 auto;
width: 98%;
}
#mainNavigation ul {
display: flex;
justify-content: center;
}
#mainNavigation li {
list-style: none;
width: 15%;
text-align: center; /* to center the li-elements itself */
}
which works perfectly! Still figuring out what excatly justify-center and display:flex do but I want you to know that you helped a lot.
CHEERS!
PS: how come my thread got a negative rating? it says -1 to me!? Did I do anything wrong?
This question already has answers here:
CSS 3 slide-in from left transition
(6 answers)
Closed 8 years ago.
Please find this jsfiddle jsfiddle . When the screen size is less than 600px, the top menu bar is converted into responsive menu. When user hovers on "Menu" text (this text is used only for the demo), the menu appears. This works well on desktop and smartphones. Now I tried to implement slide right transition when user clicks on "Menu" text. I modified below css class
.nav ul:hover li{
display: block;
margin: 5px 0 0 0;
}
and add transition property. But it didn't work.
How do I make slide right responsive menu from css ???
This is not how i'd do it. You've to consider altering your HTML and CSS.
for example, the word menu is simply written in HTML, which is semantically incorrect and becomes a blocker while trying to animate the element, because you've to keep the text visible and deal with the rest of <li>, meaning this prevents you from being able to easily animate the <ul> altogether upon hovering menu. IMHO Menu should be a separate element.
However, to help you out with your current HTML and css, you can try something like this
.nav ul {
padding: 20px 0;
position: absolute;
top: 0;
left: 0;
background: url(../images/icon-menu.png) no-repeat 10px 11px;
width: 74px;
background-color: #5B9BD5;
z-index: 1000;
height:0px;
-webkit-transition:all 1s;
}
.nav li {
-webkit-transition:-webkit-transform 1s;
-webkit-transform:translate(-100%);
/* hide all <li> items*/
transform:translate(-100%);
margin: 0;
width:75px;
}
.nav ul:hover {
height:auto;
}
.nav ul:hover li {
display: block;
margin: 5px 0 0 0;
-webkit-transform:translate(0%);
transform:translate(0%);
}
JSFiddle
side note: above works in webkit browsers and latest browsers that doesn't require prefix for css3 transitions. remember to specify other browser prefixes to make it work cross browser
Is there a way I can get all <li> elements to fit in one line to the width of the window (and the text wraps accordingly?
HTML:
<ul>
<li>laksdjf laksdj flasdj fladjs flaksd</li>
<li>laksdjf laksdj </li>
<li>laksdjf laksdj flasdj fladjs flaksd fladjs flaksd</li>
<li>laksdjf laksdj flasdj fladjs flaksd</li>
</ul>
CSS:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
list-style-type: none;
padding: 0;
padding: 0 30px;
float:left;
}
The width of the li should be relative to the amount of text they have in it. If I put a fixed size on it, then the longer text ones are too squeezed.
http://jsfiddle.net/5gP3b/
You can use the display table and table-cell property to achieve it: http://jsfiddle.net/5gP3b/1/
Notice that this display property do not work on Internet Explorer 6 & 7 ...
I'm trying to find a good why to display my Icons.
I want to use a CSS and not an img tab.
My code:
<span id="Span1" class="iconPrinter"></span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 8px;}
or
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; width:16px;}
It works fine on FF but on IE6 I can't see the Icons, only if I insert a span in the span.
When I use a div or display:block; it work fine, but I need it to be inline.
Thanks
The simplest way I found to insert an inline tag like span what will work with IE6 is:
(for 16px icon)
<span id="Span1" class="iconPrinter"> </span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}
IE6 probably won't show the inline element with padding if it has no content. Try adding into the span;
<span id="Span1" class="iconPrinter">& nbsp;</span>
(Note that there is an extra space in the as the code coloring mangles it otherwise)
On the other hand, in order to give the span a width, you could also try using
.iconPrinter { display: inline-block; }
In order to get around FF2 issues with inline-block I found a suggestion online which worked for my setup. Now for my setup I have a text which also has padding-left and a background-image set to the left side of the text. I needed the whole span to fire an event when clicked, which just wasn't happening when I used display block in IE6 or IE7.
I came here and it was suggested to use inline-block which fixed my issues, but left me with FF2 compatibility issues. I then found this solution.
display: -moz-inline-box;
display: inline-block;
Having both display calls doesn't seem to have any adverse effects in any of the browsers I tested IE6,7,8, FF2, 3.
What is your purpose with the icons? Do you just want to show the icons, why not use the "img"-tagg. If you should be able to click them wrap them in an "a"-tagg.
ie6 has a bug with vertical-padding on inline elements. You could also use divs and float them.
What is inside of the span? Anything?
Try adding:
#iconPrinter{
background:url(../images/BWIcons.gif) no-repeat 0 0;
padding: 8px;
text-indent: -100000px;
overflow: hidden;
}
And if the span is just there for the icon, add some kind of html special character. This may force IE to acknowledge that something is there, and it's more accessible for those without CSS or with screen readers, something like:
<span id="iconPrinter">⎙</span>
Try to give css height to the span class. Something like
.iconPrinter{
background:url(../images/BWIcons.gif)
no-repeat 0 0;
width:16px;
height: 16px;
}
I realize this is an older post, but I came across this question while searching and thought that this might help others. I was using CSS background images for links and also had trouble with IE6 and IE7.
Here's the HTML:
Edit Admin
Delete Admin
Here's my css for browsers other than IE6 and IE7.
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box; /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}
Here's the additional css that I conditionally add only for IE6 and IE7:
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}
Use padding and add a zoom: 1 in your css class
<span id="Span1" class="iconPrinter"></span>
.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }