I am new in programming and I have a simple question: I want to make the words in this navigation bar be further from each other.
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100%;
overflow: hidden;
top: 0;
position: fixed;
}
li{
float: right;
transform: translateX(-300px);
transform: translateY(-30px;);
}
li a{
display: block;
text-align:center;
padding: 12px 16px;
text-decoration: none;
color: #fff ;
font-size: 37px;
font-family: 'Alegreya', serif;
}
<div class="header">
<header class="title">CSS Tricks</header>
<ul>
<li>
Home
</li>
<li>
Contact
</li>
<li>
About
</li>
<li>
News
</li>
</ul>
</div>
I don't see the point of using transform.. use display: flex instead of float: right and if you would like to have it on the right side, do justify-content: flex-end. About your question, if it is having space between the <a> use the margin: 0 30px or if your meant between letters, do letter-spacing: 5px like in the example below..
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
top: 0;
position: fixed;
display: flex;
}
li a {
display: block;
padding: 12px 0;
margin: 0 30px;
text-decoration: none;
color: #000;
font-size: 3em;
font-family: 'Alegreya', serif;
letter-spacing: 5px;
}
<div class="header">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
</ul>
</div>
you have a typo on this property transform: translateY(-30px;);
it should be without ; after value -30px
👇
transform: translateY(-30px);
Currently you've got a padding of 16px on the sides of your hyperlink tags. Because it's on both the left and right sides, that adds up to 32px between the text of each. Increasing that value will increase the space between the links.
Adding padding or margin to the <li> elements would also work.
Related
I have a logo image on the upper left side of the site and want my nav to show on the upper right side of the site. The nav is showing on the right side of the page but instead of being parallel to the logo it is below it even thought the logo is on the left side. Any idea what I am missing in the code below that is preventing the nav from moving up.
#charset 'UTF-8';
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
<!-- font-size: 1vw;>
background: white;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
a, a:visited {
color: inherit;
}
header {
position: fixed;
padding: 1.5em;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.site-logo {
width: 30%;
max-width: 30%;
position: relative;
display: block;
}
.site-logo img {
width: 22em;
}
.logo {
opacity: 1;
}
.site-nav {
position: relative;
float: right;
z-index: 400;
top: 0;
left: 0;
display: block !important;
width: 68%;
padding: .75em 1em 0 0;
opacity: .95;
background: none;
}
.site-nav ul {
list-style-type: none;
margin: 0;
text-align: right;
}
.site-nav ul li {
display: inline-block;
margin-bottom: 0;
margin-left: 1.5em;
}
.site-nav ul li a {
font-size: .85em;
padding-bottom: .5em;
text-decoration: none;
letter-spacing: .15em;
text-transform: uppercase;
color: #000000;
-webkit-transition: color .3s;
transition: color .3s;
}
.site-nav ul li a:hover {
outline: none;
border-bottom: 1px solid black;
}
HTML
<header>
<!-- Logo -->
<a class="site-logo">
<img class="logo" src="images/SBI Logo.png" alt=""/>
</a>
<!-- Navigation Menu -->
<nav class="site-nav">
<ul>
<li>Home</li>
<li>Rooms</li>
<li>Gift Certificates</li>
<li>About Us</li>
<li>Things To Do</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</nav>
</header>
enter image description here
You are getting bogged down in the style sheet and using EM too, it would be much easier for you to use PIXELS instead of EM to position your elements.
<style>
.mysitelogo
{
margin-top: 16px;
width: 458px;
height: 114px;
}
.mysitenav
{
float: right;
padding: 8px;
opacity: .95;
}
</style>
<header>
<!-- Logo -->
<img class="mysitelogo" src="logo.gif" alt="" />
<!-- Navigation Menu -->
<nav class="mysitenav">
<ul>
<li>Home</li>
<li>Rooms</li>
<li>Gift Certificates</li>
<li>About Us</li>
<li>Things To Do</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</nav>
</header>
Using the code above you can get the layout you desire, THEN fine tune your layout in the stylesheet.
Some times it is easier to break the bigger problem down into basic parts.
Read this page for better understanding of using EM which is relative to FONT SIZE
https://www.w3schools.com/CSSref/css_units.asp
Okay after a lot of googling I finally found out how to centre the menu links in the middle of the nav bar. After that I came across another problem...adding a logo in the navigation bar.
My problem is, the logo doesn't come into the navigation bar, it instead goes above the bar.
I would like to have the logo floating to the left in the nav bar.
I have tried a few things, including adding display: inline-block/inline to all the main elements, but no difference. Though I tried adding display: inline to the nav ul, but the background of the nav bar disappears (see second image) and I can't add a background via adding height and width.
P.s Excuse me If there are few amateur mistakes, I have only started to code a few months ago.
Thanks for your time!
How the nav bar looks now:
How the nav bar looks with display: inline;
Here is my HTML and CSS:
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
<nav>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"></img>
<ul>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
Just insert it inside your ul.
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
The easiest way is to probably do a position:absolute
https://jsfiddle.net/fj1r6b1e/
#logo {
height: 50px;
width: auto;
position:absolute;
}
Also, img tag should be written like this <img src="..." /> instead of <img></img>
Give the logo img position: fixed. This will not affect the position/centering of the menu items.
https://jsfiddle.net/kjmm3du5/
I'm trying to create a very basic page of weblinks, arranged into 7 columns. Some of the links have sub-links. What I want to happen is when the mouse is held over a link that has sub-links, the sub-links are to appear just below it and just to the right (as shown in menu 2.2)
I've cobbled the code together from various websites (I'm not a coder!), and I'm almost there I think, but if you take a look at the jsfiddle you will see there is a problem with the 3rd column (I've cut the menu down in the example).
HTML
<div id="container">
<ul id="menu">
<li><h3>Menu 1</h3></li>
<li>1.1</li>
<li>1.2</li>
</ul>
<ul id="menu">
<li><h3>Menu 2</h3></li>
<li>2.1</li>
<li>2.2
<ul id="sub1">
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
</ul>
<ul id="menu">
<li><h3>Menu 3</h3></li>
<li>3.1
<ul id="sub2">
<li>3.1.1</li>
<li>3.1.2</li>
<li>3.1.3</li>
</ul>
</li>
<li>3.2</li>
<li>3.3</li>
</ul>
CSS
a {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration:none;
color:black;
display:block;
padding-top: 17px;
padding-bottom: 17px;
outline: 0;
}
a:visited {
color:black;
background-color:#fff;
}
a:hover {
color:#fff;
background-color:#302403;
display:block;
}
ul {
padding: 10px 0px 0px 0px;
margin: 1px;
display: inline-block;
text-align: center;
position:relative;
list-style-type:none;
float: left;
width: 160px;
background-color: #fff;
height: 400px;
}
ul#sub1 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#sub2 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#menu li:hover #sub1 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
ul#menu li:hover #sub2 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
http://jsfiddle.net/87u27aw0/
I can get it to work if I give each sub-menu it's own absolute position, but I'm sure there is a better way than how I'm doing it - using relative maybe? Oh, and it has to work in IE8 onwards.
Thanks in advance.
Graybags
Is there a better way of making footer menu for responsive? rather than duplicating and display: none; in the css?
Here are my attempts:
<header class="row">
<div class="container">
<div class="col-12 columns">
<img src="images/logo.png" alt="" class="logo">
Navigation
<nav role="primary" >
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
Footer nav. Commented out the nav for the purpose of this question.
<nav role="secondary_menu">
<!-- <ul id="nav2">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav> -->
<footer id="footer">
<div class="container">
<p>Created by: </p>
</div>
</footer>
CSS:
a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}
nav[role="primary"] ul{
list-style-type: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}
.container .columns{
float: left;
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}
.row{
float: left;
clear: both;
width: 100%;
}
.columns.col-12 { width: 100%; }
So the codes above shows when the screen is below 600px however this way it pushes the footer the menu rather than at the bottom, Sure I positioned the footer absolute but it just sits above the menu rather than under it. So I made another attempt which I duplicated the nav and just hiding the when its below 600px.
position:none
position:absolute
Trying to achieve without duplicating and remove whitespace
I saw your main nav was set to position: absolute. I would suggest looking at CSS templates to see how they structure things like footers. For example, http://bootswatch.com/default/ Try this CSS:
a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}
nav[role="primary"] ul{
list-style-type: none;
bottom: 0;
left: 0;
width: 100%;
}
nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}
.container .columns{
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}
.row{
margin-right: -15px;
margin-left: -15px;
clear: both;
width: 100%;
}
.columns.col-12 { width: 100%; }
I have following code:
<div class="settingsMenu" style="top: 135px; left: 149px; display: block;">
<ul>
<li class="download" onclick="downTemplate('template1')">Download</li>
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
<div class="deleteItemConfirmation">
<div class="confirmationText">Are you sure?</div>
<div class="buttons"><button onclick="deleteTemplate ('template1')">Yes</button> <button onclick="hideConfirmationDialog();">No</button></div>
</div>
</li>
<li class="info">Info</li>
</ul>
</div>
CSS:
.settingsMenu{
position: absolute;
top: 0;
left: 0;
display: none;
background-color: #FFFFFF;
border: 1px solid #b5044a;
border-radius: 5px;
width: 150px;
padding: 10px 0;
margin: 0;
z-index: 200;
}
.settingsMenu ul{
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0;
}
.settingsMenu ul li {
color: #000000;
cursor: pointer;
float: left;
font-size: 14px;
font-weight: normal;
font-family: Arial;
height: 18px;
max-width: 100px;
margin: 5px 20px;
padding: 0;
display: block;
padding-left: 30px;
}
.settingsMenu ul li.edit{
background: url("../img/edit-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.delete{
background: url("../img/delete-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.info{
background: url("../img/info-context-menu-icon.svg") no-repeat scroll center left white;
}
Problem is: while div.deleteItemConfirmation has "display: none;" everything is displaying correctly, when it`s display property becomes "display: block;" strange space appears before text of
<li>Delete</li>
Try changing
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
To
<li class="delete" onclick="showConfirmationDialog ($(this))">Delete
Could this help you out:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I took the idea from http://css-tricks.com/fighting-the-space-between-inline-block-elements/ and helped me in a few similar situations.