for some reason my LI elements are not floated to the left in internet explorer, they are showed each below the other. Anybody knows how I could fix this?
#books ul{
list-style:none;
margin:0px;
float:left;
display:inline;
}
#books ul li{
float:left;
margin-right: 20px;
padding-bottom: 20px;
height:300px;
display:inline;
}
If I understand your issue correctly, it may have to do with setting display: inline. Changing to display:block; seems to solve the issue in IE and FF.
#books ul{
list-style:none;
margin:0px;
float:left;
display:block;}
#books ul li{
float:left;
margin-right: 20px;
padding-bottom: 20px;
height:300px;
display:block;}
There is no need to use float, if you just want each LI to be inline you can use just the display property.
#books ul{
width: 100%;
list-style: none;
margin: 0px;
}
#books ul li{
margin-right: 20px;
padding-bottom: 20px;
height: 300px;
display: inline-block;
}
Related
I'm working on a css and html navigation menu on google sites but I can't seem to be able to 'rollover' my menu and have the sub menus show over the text that I have underneath? This is the link to the site and this is the css bit of the code I'm using for it but I really don't know how to go about this.
<style media="screen" type="text/css">
#primary_nav_wrap
{
width: 100%;
float: left;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: relative;
}
#primary_nav_wrap ul
{
list-style: none;
width: 500px;
height: 500px;
margin: 0 auto;
padding: 0;
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
</style>
I've been copying and pasting mostly for css and then trial and error but i would like to be able to copy and paste this in every single one of my pages (in the google sites html box gadget) and just treat it as a fixed menu bar - is that possible?
thanks in advance!
Looking at your CSS here
#primary_nav_wrap ul
{
list-style: none;
width: 500px;
/* height: 500px; */
margin: 0 auto;
padding: 0;
}
Commenting out the line I have above seems to fix the problem of the nav bar pushing your text aside.
I am having problems with my navigation bar. I want it to show a different color after the link has been visited. I read an answer from code academy, Stack O/F and other sites saying that "The pseudo-class_selector must follow the following order for it to work.
:link
:visited
:hover" (codeacademy-Submitted by Samrudhi Sharma). I tried this, but nothing happened. I've really gotten myself confused now. Thanks for your help.
My code:
#nav {
width:100%;
float: left;
margin: 20px;
padding: 0;
border-top: 5.5px solid red;
border-bottom: 5.5px solid red;
line-height: 1.8em;
display:inline-block;
clear:both;
}
#nav ul {
float: left;
margin: auto;
width: 1024px;
margin:0px;
list-style: none;
}
#nav ul li {
color: orange;
font-size:1.5em;
float: left;
width: 150px;
padding: 0px;
margin:0px;
list-style:none;
}
#nav ul li a {
border-left:1px solid #fff;
text-align:center;
display: block;
width: auto;
height: 25px;
text-decoration: none;
}
#nav ul li:visited a{
background:yellow;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li:hover a{
background:#C60;
color:#FFFFFF;
text-decoration:none;
}
Place a:visited on the <a>.
Have a fiddle - Fiddle link! (Click "Run" in the jsfiddle header if the yellow does not render.)
CSS
#nav li a:visited {
background:yellow;
color:#F00;
text-decoration:none;
}
you should use the pseudo-classes on your anchor, not on the list element. So a:visited instead of li:visited, because you visit the anchor's link, not the list element's ;)
I am trying to center my menu which contains the ul menu.
The menu is float to the left and I can't seem to center the menu to the middle of the screen.
HTML
<section>
<nav>
<ul>
<li><a href='#'>item1</a></li>
<li><a href='#'>item2</a></li>
<li><a href='#'>item3</a></li>
<li><a href='#'>item4</a></li>
<li><a href='#'>item5</a></li>
</ul>
</nav>
</section>
CSS
nav ul{
display: inline-block;
background-color: red;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
//the and margin text align doesn't seem to work...
section {
text-align:center;
margin:0 auto;
}
Can anyone help me about it? Thanks a lot!
As pointed out by xec, the problem seems to be with the invalid comment syntax. The correct syntax for comments in CSS is /*Comment Here */. When the comment syntax is corrected, your code does center the menu.
/*the and margin text align doesn't seem to work...*/
section {
text-align:center;
margin:0 auto;
}
Demo
You're not styling the nav. The nav inside the section is a block, and therefore it will be the full width of its container, whether you give the container margin:0 auto or not.
Solution: give the nav the same style as the section. Or, remove the section altogether, since it is not necessary here.
If you don't particularly care about IE 7 and under (which have only partial support for inline-block - see http://caniuse.com/inline-block), this works, and has the advantage of making the links easier to hit: http://jsfiddle.net/V97tR/1/
nav
{
text-align:center;
}
nav ul{
display: block;
background-color: red;
}
nav ul li{
display:inline-block;
list-style: none;
font:bold .6em arial;
margin: .3em;
background-color: #A8A8A8;
}
nav ul li a
{
display:block;
padding: 1.3em;
}
Like this
DEMO
CSS
nav ul{
display: inline-block;
background-color: red;
margin:0;
padding:0;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
/*the and margin text align doesn't seem to work...*/
section {
text-align:center;
margin:0 auto;
}
You can use flex-box:
section {
text-align:center;
margin:0 auto;
display: flex;
}
Here's a fiddle: http://jsfiddle.net/2c8LB/
Try this:
JSFiddle
#wrapper {
float:left;
width:100%;
background:#fff;
overflow:hidden;
position:relative;
}
nav ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
nav ul li {
list-style: none;
font:bold .6em arial;
float: left;
background-color: red;
display:block;
list-style:none;
margin:0;
padding:5px;
position:relative;
right:50%;
}
nav ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
The image is the menu list items which displays vertically in IE7 but I want to display it horizontally. I am using smart wizard plugins (framestyle.css) which displays perfectly in all other browsers except IE7.
framestyle.css: this is the css for smart wizard plugins.
.swMain ul.anchor {
position:fixed;
z-index:1099;
display:inline;
float:left;
list-style: none;
padding: 0px;
margin: 5px 5px 0 0;
}
.swMain ul.anchor li{
position: relative;
margin: 0;
padding: 0;
padding-top:3px;
padding-bottom: 3px;
clear:both;
display:inline;
float: none;
}
.swMain ul.anchor li a {
display:block;
position:relative;
float:left;
margin:0;
padding:3px;
height:35px;
width:146px;
text-decoration: none;
outline-style:none;
}
IE7.css: this is the css for the menu list item for IE7 browser
.swMain ul.anchor {
display:inline;
position:relative;
list-style: none;
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 10px;
zoom:1;
float:left;
clear:both;
}
.swMain ul.anchor li{
margin: 0;
padding: -10px;
padding-top:0px;
padding-bottom: 0px;
clear:both;
display:inline;
float:left;
}
.swMain ul.anchor li a {
display:block;
position:relative;
float:left;
margin:0px 0px 0px 0px;
padding:3px 3px 3px 3px;
text-decoration: none;
outline-style:none;
}
If you want something to display inline horizontally, you shouldn't have clear: both; in the first place, because that will put the floating items on a new line.
You should also remove the float: left; from .swMain ul.anchor li in your IE7 stylesheet.
For clarity, the following code will put your list-items inline horizontally:
li {
display:inline;
}
If you want to style the list-items with some padding and other fancy stuff, you can try inline-block, but this will cause a few issues with IE7. You will find a solution here.
By the way, I was required to support IE7 for some specific purpose projects, but in general you may very well drop IE7 support altogether.
Hope this helps.
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