So here's my code:
.nav-item {
display: inline;
color: white;
padding: 30px 10px;
font-style: bold;
font-family: sans-serif;
font-size: 20px;
width: 1000px;
margin: 0 auto;
}
.nav-container {
background-color: black;
}
<nav class="nav-container">
<span class="nav-item">ABOUT ME</span>
<span class="nav-item">CONTACT ME</span>
<span class="nav-item">PORTFOLIO</span>
</nav>
I want to make my navigation bar centered in the middle of the page, with margin: auto, but for some reason, it doesn't work. When I set display: block, it works, but doesn't display in a line. Could someone tell me why this is?
Thanks a ton...
Inline elements behave just like text, so you need to put the alignment on the parent.
In your CSS, remove the margin:0 auto; and add text-align: center; on .nav-container:
.nav-item{
display:inline;
color:white;
padding:30px 10px;
font-style:bold;
font-family:sans-serif;
font-size:20px;
width:1000px;
}
.nav-container {
text-align: center;
}
http://jsfiddle.net/5v7Lppkf/
For inline elements like this, use text-align:center on the parent element, so add to your css:
.nav-container { text-align:center }
Just add the following rule to your CSS:
.nav-container { text-align: center; }
This should do all the magic.
Related
I'm having a very basic problem with the CSS in my React website, and I was looking for some help.
I have a very barebones header section set up
HTML:
<div className="nav">
<div className="menu">
Menu
</div>
<div className="logo">
<a className="title" href="/">Brand Name</a>
<a className="subtitle" href="/">Slogan</a>
</div>
<div className="lang">
<ul>
<li>FB</li>
<li>IG</li>
<li>TW</li>
</ul>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.nav{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: white;
text-decoration: none;
font-family: Visual;
letter-spacing: 1px;
width: 100%;
.menu{
a{
text-decoration: none;
color: white;
letter-spacing: 1.3px;
font-size: 1.2rem;
}
}
.logo{
.title{
font-size: 2rem;
}
.subtitle{
text-align: center;
margin-top: 5px;
}
a{
text-decoration: none;
color: white;
display: block;
}
}
.lang{
font-size: 1.2rem;
ul{
li{
display: inline;
margin-left: 10px
}
}
}
}
The flex seems to be working, but when I resize the window horizontally, the center element gets pushed off center and eventually out of the screen on one side.
Is this related to media queries?
add padding: 0; property to ul in your css
ul {
padding: 0;
li {
display: inline;
margin-left: 10px;
}
}
You can use border styling something like
border: 1px solid black;
when have problems with css. In this way, you can see which elements have unexpected properties like paddings or margins. When you use border styling for your ul, you will see it has padding. Make padding zero and your items will be centralized.
Well, I have a site and it's happening something that I just can't fix.
I have a code like this:
aside {
font-size: 150%;
font-family: fantasy;
font-variant: small-caps;
line-height: 2em;
background: rgba(187,219,136,0.75);
width: 90%;
height: 50px;
text-align: center;
}
aside {
margin: auto;
margin-top: 20px;
}
aside li {
float: left;
padding: 0 2%;
font-size: 100%;
}
<aside>
<ul>
<li id="matematica">Matemática</li>
<li>Geografia</li>
<li>Física</li>
<li>História</li>
<li>Português</li>
<li id="quimica">Química</li>
</ul>
</aside>
So, the problem is that I want to centralize the li elements inside the ul, and I can't use text align because li is not text!
Can anyone help me?
is this what you want?
aside {
font-size: 150%;
font-family: fantasy;
font-variant: small-caps;
line-height: 2em;
background: rgba(187,219,136,0.75);
width: 90%;
height: 100px;
text-align: center;
}
aside{
margin: auto;
margin-top: 20px;
}
aside li{
display: inline-block;
padding: 0 2%;
font-size: 100%;
}
<aside>
<ul>
<li id="matematica">Matemática</li>
<li>Geografia</li>
<li>Física</li>
<li>História</li>
<li>Português</li>
<li id="quimica">Química</li>
</ul>
</aside>
try to :
aside li{
display:inline-block;
padding: 0 2%;
font-size: 100%;
}
remove the float too ;
If I understood correctly what you want to achieve, you may try changing:
aside li{
float: left;
padding: 0 2%;
font-size: 100%;
}
to
aside li{
display: inline;
padding: 0 2%;
font-size: 100%;
}
See it on JSFiddle and, also, check the attribute list-style-type for your <ul> tag.
I don't think you can select that circle because it's not an element. You can see it yourself. Just go to inspect and try to find that element.
But you can make a custom list.
<center><div id="b">
<div class="a"><span></span> List 1</div>
<div class="a"><span></span> List 2</div>
<div class="a"><span></span> List 3</div>
</div></center>
<style>
span {
background:black;
height:10px;
width:10px;
border-radius:30px;
display:inline-block;}
</style>
My navbar won't align with the center of the page. In fact any code i added to change the margins between each individual link is also not working, idk why that is. I made the position absolute because I couldn't find any other way to get the navbar to go in front of the background/ the slideshow in my side (not shown here). I have included a fiddle. Also I tried making a centered navbar that would be transparent, have my next element be behind it but I couldn't.
https://jsfiddle.net/ep93zz08/
HTML:
<div id="navbar" class="li flex-container nav row">
<a class="nav-link flex-item " href="index.html">PHOTOGRAPHER</a>
<a class="nav-link flex-item" href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item " href="idex.html"><img id="logo" src="http://www.dynamicaudiovideo.com/_Media/samsung_logo_large.jpeg" alt=""></a>
<a class="nav-link flex-item" href="Investment.html">INVESTMENT + FAQ</a>
<a class="nav-link flex-item" href="#">BLOG</a>
</div>
CSS:`
body{
margin:0;
overflow-x: hidden;
font-family: Calibri;
font-style: normal;
font-variant: normal;
background:black;
}
.nav{
position: absolute;
list-style-type: none;
display: inline;
z-index: 2;
text-align: center;
}
.resize-anchor{
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a{
display: inline-block;
height: auto;
width: 200px;
min-width: 200px;
}
a:hover{
color:#D1946F;
text-decoration: none;
}
a:link{
color:#D1946F;
text-decoration: none;
}
.navlink, .hplogo-a{
text-align: center;
display:inline-block;
margin-left: 50px;
margin-right: 50px;
padding:0;
}
.nav-link{
color:white;
text-decoration: none;
white-space: nowrap;
text-align: center;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
margin-top: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
z-index: 3;
}
.li{
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
img{
width: 100%;
}
`
It would be better to add CSS rules for #navbar selector. Because rules for .nav will affect to all HTML elements with .nav class. Using the #navbar selector, the rules will only affect the specific div with that id. Try to remove the rules for .nav and add this:
#navbar {
position: relative;
list-style-type: none;
z-index: 2;
justify-content: center;
}
to adjust the margins between links:
#navbar a {
margin-right: 20px;
}
https://jsfiddle.net/ep93zz08/8/
One easy way that I used when trying to center the navbar is under .li or ul.li use the following:
margin-left: auto;
margin-right: auto;
Or you can use the following and add your own flare to it:
#nav {
width:750px;
margin:0 auto;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
With the following html to follow up:
<ul id="nav">
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>
You can add this styling to the navbar ID.
left:50%; transform:translateX(-50%);
You should look at some of your CSS because you are using position absolute on the navbar ID and then display flex on the flex-container class of that same div. It looks like you are trying to center the div using two different methods.
I have problems with hover css.
Text in the class don't change the color when I hover on the picture but changes when traffic on the word.
I want to make the color change when the hover on the picture as well because the background of the picture is the same as the original font color.
HTML
<li class="category-location">
<div id="category-location-table">
<div class="category-location-row">
<div class="category-location-description">
<h3>description</h3>
</div>
</div>
</div>
</li>
CSS
ul.subcategories-location{
float :right;
list-style: none;
margin: 0;
}
ul.subcategories-location li{
float :right;
display: inline-block;
margin-left: 10px;
margin-bottom: 30px;
width: 230px;
vertical-align: top;
}
ul.subcategories-location li h3 a{
font-family: #fancyFont;
font-size: 17px;
font-weight: normal;
}
#category-location-table{
color:#F7A51E;
margin-left: 65px;
background: url('design/img/category-itmes-1.png') no-repeat;
height:60px;
width:230px;
display: table;
display: table-row;
float :right;
}
#category-location-table a{
color:#A20734;
}
#category-location-table a:hover{
color:#fff;
}
#category-location-table :hover{
background: url('design/img/category-itmes-2.png') no-repeat;
height:60px;
width:230px;
color:#fff;
}
I hope this makes sense and somebody will be able to help.
Is it something like this?
#category-location-table:hover .category-location-description a {
color: #fff;
}
There's a typo on the last line. #category-location-table:hover not #category-location--table :hover.
I would like to know what is the 'correct' way to change my current menu, that looks like this:
to this:
The problem I have is making the buttons into these blocks that would change background on hover, and the vertical alignment, do I use padding? blocks? table? Help :S
(The color doesn't matter)
CSS:
.menu{
clear: both;
background-image:url(meniuBG.jpg);
height:55px;
line-height: 10px;
}
.menu a{
text-align: center;
text-decoration: none;
font-style:italic;
color:rgb(193,193,193);
margin-right: 25px;
margin-left: 25px;
}
HTML (for no apparent reason):
<div class="meniu">
NAUJIENOS
KREPSINIO VADOVAS
TRENIRUOTES
IDOMYBES
GALERIJA
APIE MUS
</div>
.menu {
...
height:55px;
/* line-height: 10px; delete this */
}
.menu a {
...
line-height: 55px; /* add this */
}
Because you want to center vertically your <a> , there is many way to do this you can search on google there's many tuto.
the solution i give you is to make line-height equal to the heigh (55px). this solution work when your text is just on one line.
and for the hover just make <a> display: inline-block; and replace margin with padding
.menu a{
text-align: center;
text-decoration: none;
font-style: italic;
color: rgb(193,193,193);
/* margin-right: 25px; */
/* margin-left: 25px; */
padding: 0 25px;
line-height: 55px;
display: inline-block;
}
here's a FIDDLE
try to add this
.menu a{
text-align: center;
text-decoration: none;
font-style:italic;
color:rgb(193,193,193);
margin-right: 25px;
margin-left: 25px;
line-height:55px;
display: inline-block;
}
.menu a:hover{
background-color: #E7550C;
}