The below flexbox code doesn't work in firefox. It's a horizontal nav list that stretches across the browser width. In all other browsers the li's space out equally, but in firefox they don't. Any ideas? Thanks in advance.
.wrapper {
position: fixed;
padding: 0;
width: 100%;
top: 0em;
}
.flex-container-top {
padding: 1em;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-item {
font-family: sans-serif;
font-size: 1em;
color: #fff;
text-align: center;
}
<div class="wrapper">
<ul class="flex-container-top">
<li class="flex-item">Link 1
</li>
<li class="flex-item">Link 2
</li>
<li class="flex-item">Link 3
</li>
<li class="flex-item">Link 4
</li>
</ul>
</div>
Your example didn't work in Chrome, either.
You need to add flex: 1 to .flex-item. Then it will work:
.flex-item {
flex: 1; /* add this line */
font-family: sans-serif;
font-size: 1em;
color: #fff;
text-align: center;
}
Related
I am trying to move #nav-bar elements to the right but it's not working. I want to put .logo to the left using flex-start but I don't think that's working. I think it's on the left by default.
I am new to css and html.
I tried making it into a flex box and using flex-end. I dont want to use inline or blocking. From what I understand, making display to flex and using flex-end will put the item to the right in a set row flex-direction .
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
background-color:#b6eaf1;
font-family:Cambria, sans-serif;
}
header{
display:flex;
top:0;
width:100%;
border:5px solid blue;
}
.logo img{
width:17vw;
display:flex;
justify-content:flex-start;
align-items:center;
}
img{
height:100%;
width:100%;
}
#nav-bar{
display:flex;
}
#nav-bar ul{
list-style:none;
display:flex;
flex-direction:row;
justify-content:flex-end;
height:100%;
gap:4vw;
letter-spacing:2.5px;
}
#nav-bar li{
list-style:none;
}
#nav-bar a{
text-decoration:none;
color: blue;
}
<header id="header">
<div class="logo">
<img id="img-header" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.zjBOOZwVgo-4VI476pnY1QHaFk%26pid%3DApi&f=1&ipt=55595a40798b691f4deffe4af60285dc33326fe0932e67b4acb29ea273dcffaa&ipo=images" alt="pikachu face logo">
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#About_us">About us</a></li>
<li><a class="nav-link" href="Services">Services</a></li>
<li><a class="nav-link" href="#Contact_us">Contact us</a></li>
</ul>
</nav>
</header>
So what's happening is that the navbar is not getting the complete width to align the nav-bar elements to the right. Well if you give the width:100% and add the justify-content: right to your #nav-bar it should fix the alignment. Please refer the complete code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #b6eaf1;
font-family: Cambria, sans-serif;
}
header {
display: flex;
top: 0;
width: 100%;
border: 5px solid blue;
}
.logo img {
width: 17vw;
display: flex;
justify-content: flex-start;
align-items: center;
}
img {
height: 100%;
width: 100%;
}
#nav-bar {
display: flex;
justify-content: right;
width: 100%;
}
#nav-bar ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 100%;
gap: 4vw;
letter-spacing: 2.5px;
}
#nav-bar li {
list-style: none;
}
#nav-bar a {
text-decoration: none;
color: blue;
}
<header id="header">
<div class="logo">
<img id="img-header" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.zjBOOZwVgo-4VI476pnY1QHaFk%26pid%3DApi&f=1&ipt=55595a40798b691f4deffe4af60285dc33326fe0932e67b4acb29ea273dcffaa&ipo=images" alt="pikachu face logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#About_us">About us</a>
</li>
<li><a class="nav-link" href="Services">Services</a></li>
<li><a class="nav-link" href="#Contact_us">Contact us</a></li>
</ul>
</nav>
</header>
I have tried everything, including "text-decoration: none;" and making sure all padding is removed. Should be a pretty basic and elemental procedure but nothing works.
Yes, I have read all I can find here and tried it or looked elsewhere on the net for a solution. Nothing is working.
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="site.css"/>
</head>
<style>
#main-nav {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 100%;
height: 30px;
margin: auto;
padding: 0;
text-decoration: none;
background-color: #D6D5D6;
list-style-type: none;
text-align: center;
}
.nav-list {
text-decoration: none;
text-align: center;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 1000px;
margin-: auto;
padding: 0;
}
.nav-list > li {
margin: 0;
float: left;
width: 200px;
height: 30px;
position: relative;
line-height: 30px;
}
.nav-list > li > a {
width: 200px;
height: 30px;
text-align: center;
padding-top: 12px;
list-style-image: none;
}
.nav-list > li > a:hover {
background-color: #FFF;
}
#dropdown {
position: relative;
top: 30px;
width: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
list-style-image: none;
list-style-type: none;
color: #F00;
}
.dropdown: li{
background-color:#697;
position:relaive;
width:200px;
height:30px;
text-decoration: none;
}
.dropdown: li a {
color: #ddd;
text-decoration:none;
position: absolute;
width:200px;
height:30px;
padding: 10px 0 0 10px;
box-sizing: border-box;
}
.dropdown: li a:hover {
background-color: #CCC;
}
body {
margin-left: 0px;
margin-top: 0px;
}
#transbar {
position: absolute;
z-index: -1;
width: 1000px;
left: 0px;
top: 0px;
}
#wrap {
width: 1000px;
top: 668px;
position: absolute;
margin-right: auto;
margin-left: auto;
}
#textbox {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-style: normal;
height: 575px;
width: 1000px;
position: absolute;
z-index: -1;
margin-top: 80px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
</style>
<div id="wrapper">
<body>
<nav class="main-nav">
<ul class="nav-list">
<li>About
<ul style="list-style: none;" class="dropdown">
li>The Film</li>
<li>The Park</li>
</ul>
</li>
<li>Updates
<ul style="list-style: none;" "dropdown">
<li>Slideshow<li>
</ul>
</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Add this to your CSS to remove underline effect for <li> links:
a:link {
text-decoration: none;
}
As for displaying <li> elements in the center of the page I've provided a simplified version of your code that centers each <li>.
HTML:
<ul>
<li>About</li>
<li>The Film</li>
<li>The Park</li>
<li>Updates</li>
<li>Slideshow</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
CSS:
a:link {
text-decoration: none;
}
ul {
text-align: center;
list-style-type: none;
}
ul li {
display: inline-block;
}
NOTE: you may want to adapt this to your current code, next time you ask a question like this probably best to post a link to a jsfiddle example of your code.
I got it to work. Fooling around with the width in the CSS "Box" attribute did the trick. I am using Dreamweaver as my text editor, btw. A width of 123px added to the ul CSS script did it for the first listed column. For the ul li column I had to mess with that as well. A measure of 68px on the width centered that. I don't know why this works, and as you tell I'm a novice at this.
I'm working on a horizontal menu with a vertical submenu. I have most of the display features set the way I want, but I'm running into trouble with displaying the submenu items with the same width. I want to display them as a nice, even block, but I'm left with a jagged edge on the right side of the submenu.
Here's a snippet of the html I'm using for the menu itself.
<nav class="navbar">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >item with sub</a>
<ul>
<li><a href="#" >sub item 1</a></li>
<li><a href="#" >sub item 2 which is longer</a></li>
<li><a href="#" >sub item 3</a></li>
</ul>
I'm not sure which part of the css I'm using might be affecting the width of the dropdown menu, so here's everything.
.navbar {
font-size: 20px;
text-align: center;
position: relative;
z-index: 1;
white-space: nowrap;
}
.navbar a {
background-color: #333;
color: #999;
text-decoration: none;
}
.navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
.navbar li {
float: left;
position: relative;
min-width: 120px;
padding: 10px 10px 10px 10px;
background-color: #333;
color: #999;
}
.navbar li ul {
display: none;
position: absolute;
left: 0;
}
.navbar li > ul {
top: 42px;
left: 0px;
}
.navbar li:hover,
.navbar li:hover > a,
.navbar li a:hover{
background-color: #999;
color: #333;
text-decoration: none;
display: block;
}
.navbar li:hover ul,
.navbar li:hover ul li {
display: block;
clear: both;
min-width: 120px;
}
The fiddle is here: http://jsfiddle.net/jasotastic/yso6v2po/
Possible that this is a duplicate, but I haven't been able to find a similar question asked.
You could set 100% width to <li> to adjust with content width.
.navbar li ul li {
display: block;
width: 100%;
text-align: left;
}
Fiddle: http://jsfiddle.net/yso6v2po/4/
You can set a width to li and use white-space: normal. Then you will have a fixed width and break the phrase if it is bigger than the width.
Your code modified:
.navbar li ul li {
width:200px;
white-space:normal;
display: block;
}
Here is the jsfiddle: http://jsfiddle.net/yso6v2po/3/
I have a nav bar with a drop down when you hover over 'services' but there seems to be a block before the first sub menu item and i don't know how to get rid of it....
here is my HTML:
<header>
<div class= "header">
<div class= "nav">
<ul>
<li>
Services
<ul>
<a href=""><li><img class="imgcenter" src="images/Brand-Design-Circle-Blue.png" width="100px" onmouseover="this.src='images/Brand-Design-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Design-Circle-Blue.png'" /> <br>Brand Design</li></a>
<a href=""><li><img class="imgcenter" src="images/Brand-Online-Circle-Blue.png" width="100px" onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Online-Circle-Blue.png'" /> <br>Brand Online</li></a>
</ul>
</li>
<li>
Portfolio
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</header>
and here is my CSS:
.header {
position: fixed;
display: block;
float: left;
width: 100%;
height: auto;
background-color: #666;
z-index: 9999;
}
.nav {
position: static;
float: right;
width: 700px;
height: 50px;
margin: 10px 5px;
}
.nav a {
text-decoration: none;
color: #FFFFFF;
}
.nav ul > li:first-child {
padding-bottom: 25px;
}
.nav a:hover {
text-decoration: none;
color: #6db6e5;
}
.nav li {
font-family: "eras_demi_itcregular", Arial, Helvetica;
list-style: none;
float: left;
margin-right: 50px;
}
.nav li:hover a:hover {
padding-bottom: 5px;
border-bottom: 2px solid #6db6e5;
color: #6db6e5;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
list-style: none;
position: absolute;
display: inline-block;
margin-top: 23px;
}
.nav ul ul {
background: #6db6e5;
}
.nav ul ul li {
padding: 10px;
margin-left: -1px;
margin-right: 0;
border-left: 1px solid #666;
}
.nav ul ul li:hover {
background: #666;
}
jsfiddle here: http://jsfiddle.net/2mnm5/
does anyone know what this could be?
thanks
You should eliminate the padding on that second ul tag
.nav ul ul {
display: none;
padding-left:0;
}
http://jsfiddle.net/2mnm5/1/
I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}
This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/