I'm very new to Dreamweaver, CSS and HTML. So I apologise if there's any obvious mistakes or solutions.
I'm trying to figure out how to separate words in my navigation menu. Because they always seem to be centred. I've tried adding "word-spacing" and other adjustments but wasn't able to come to a solution.
Just wondering if anyone's able to offer any suggestions in how I can fix this.
Any help is much appreciated,
Thank you.
CSS
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
float: left;
text-color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
width: 100%;
}
HTML
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
Remove width:100% from li so menu start from left side
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
float: left;
color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
}
ul li + li{
margin-left:10px;
}
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
or You want menu start from center remove float:left from li and add display: inline-block
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
display: inline-block;
color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
}
ul li + li{
margin-left:10px;
}
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
Related
I am building a navbar with hover effects over the nav items and an inline button, however, the text in my button is not lining up with the other nav items. In addition I am having trouble figuring out how to get the red hover background to space itself evenly above and below the text of my nav items. What am I doing wrong?
<nav class="navbar">
<a id="header" href="#">Adopt <span class="me">Me</span> </a>
<ul >
<div id="rightitems">
<li>About Us</li>
<li>What we do</li>
<li>Benefits</li>
<li>Our Buddies</li>
<button class="btn">Contact Us</button>
</div>
</div>
</ul>
</nav>
.btn{
display: inline;
width: auto;
text-decoration: none;
margin: 0;
}
.btn a{
margin: 0;
}
body{
background-image: url(bulldog.jpg)
}
a{
text-decoration: none;
}
nav ul{
list-style-type: none;
margin: 0;
padding:0;
text-decoration: none;
display: flex;
position: relative;
}
nav a{
margin-right: 10px;
margin-left: 10px;
padding-top: 10px;
}
.navbar{
display: flex;
justify-content: space-between;
width: 100%;
}
#rightitems{
display: flex;
}
li{
width: auto;
}
li:hover{
width: auto;
}
li:hover {
background-color: #FF4850;
color: white;
border-radius: 10px;
}
nav li:hover{
color: white;
}
nav a:hover{
color: white;
}
Looks like some duplicate selectors and a bit of redundant styling. I've made some adjustments check out this fiddle:
nav a {
margin: 10px;
text-decoration: none;
}
nav a:not('me'):hover{
color: white;
}
.navbar #rightitems li{
padding: 10px 5px;
}
https://jsfiddle.net/cf2vd64y/2/
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 hoping someone might be able to help me with this. It looked fine in the preview mode of my program. However, when I opened it in IE and Chrome, the dropdown remains dropped at all times. I'm guessing it's a simple solution to fix it, but I have been staring at this screen for too long. To see what I'm talking about, please see the picture below.
http://img.photobucket.com/albums/v299/insane43/DropdownError_zpsa3e89f8a.jpg
CSS
body {
background: #eaeff2 url("BG Top.jpg") repeat-x right top }
.menu {
background-color: #97a7b7;
font-family: times;
color: #ffffff;
line-height: 50px;
text-align: center;
margin: 0px auto;
display: block}
.menu ul li:hover > ul {
display: block;
width: auto;}
.menu li:hover ul {
position: absolute;
display: block;
left: auto; }
.menu ul {
margin: 0px auto;
padding: 0;
display: inline-block;
text-align: center;
list-style-type: none; }
.menu ul ul{
background: #eaeff2;
top: 100%;
position: absolute}
.menu ul ul li {
float: none;
position: relative;
background-color: #97a7b7}
.menu li {
float: left;
position: relative:
width: 98%:}
.menu li ul {
display: none; }
.menu a:link, a:visited {
display: block;
height: 50px;
margin-left: 30px;
margin-right: 30px;
font-family: times;
font-size: 16px;
color: #ffffff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
text-decoration: none }
.menu a:hover, a:active {
background-color: #4f5963;
text-decoration: none }
.header {
font-family: times;
color: #ffffff;
font-size: 40px;
vertical-align: middle }
.frame {
width: 98%;
text-align: center;}
iframe {
overflow: hidden;
border: 0px;
padding: 0px;
margin: 0px }
.header img {
vertical-align: middle}
.petpics img {
opacity: 0.7;
filter: alpha(opacity=70);}
HTML
<div id="header" class="header" style="position: absolute; top: 0px; text-align: center; width: 100%"><img height="140px" src="Logo.png">   <span class="petpics" class="petpics"><img height="194px" src="Lily.jpg"><img height="194px" src="Annie.jpg"><img height="194px" src="Smoki.jpg"></span></div>
<div id="menu" class="menu" style="position: absolute; top:194px; left:0px; text-align: center; width: 100%; z-index:1"><center>
<ul>
<li>Home</li>
<li>About</li>
<ul>
<li>Our Board</li>
<li>Our Staff</li>
</ul>
<li>Adopt</li>
<ul>
<li>Cats</li>
<li>Dogs</li>
</ul>
<li>Lost Pets</li>
<ul>
<li>Lost</li>
<li>Found</li>
</ul>
<li>Volunteer</li>
<ul>
<li>Become a Volunteer</li>
<li>Volunteer Login</li>
</ul>
<li>How to Help</li>
<ul>
<li>Membership</li>
<li>Donate</li>
<li>Upcoming Events</li>
</ul>
<li>Education</li>
<ul>
<li>Information</li>
<li>Educational Events</li>
</ul>
</ul>
</center>
</div>
<div id="frame" class="frame" style="position: absolute; top: 280px; width: 98%; height: 100%; z-index:0">
<iframe name="display" width="100%" height="100%" overflow="visible" scrolling="hidden" seamless="seamless" border="0" margin="0" src="Home.html">
</iframe>
</div>
Thank you! Your help is appreciated. Edited to add full code.
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%; }
Bit new at CSS and been looking around at various sites and bits of code trying to get a centered drop down menu which I managed to get :).
However as soon as I added some images to make up the heading the menu shifted off to the left and I have not been able to budge it ever since, any help? Code is below.
<style type="text/css">
<!--
body {
background-image: url();
background-color: #0099FF;
}
.style1 {color: #FFCC00}
.style2 {color: #FF9900}
.style3 {
color: #FFCC00;
font-weight: bold;
font-size: 12px;
}
.style4 {
color: #000099;
font-weight: bold;
}
.style5 {color: #000099; font-weight: bold; font-size: 12px; }
.style6 {color: #000099}
* { padding: 0; margin: 0; }
body { padding: 5px; }
ul { list-style: none; margin: auto}
ul li { float: left; padding-right: 0px; position: relative; }
ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background-color: #0099EE; color: #000000; text-decoration: none; border: 1px solid #000000;}
ul a:hover { background-color: #0066FF; }
li > ul { display: none; position: absolute; left: 0; top: 100%; }
li:hover > ul { display: inline; }
li > ul li { padding: 0; padding-top: 0px; }
#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}
.table {
display: table;
margin: 0 auto;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display:inline
}
-->
</style></head>
<body>
<div id="menu-outer"></div>
<div class="table"></div>
<div align="center"><img src="logo_with_words_3.jpg" width="172" height="145"><img src="heading.gif" width="557" height="69"><img src="logo_with_words_3.jpg" width="172" height="145">
</div>
<ul id="horizontal-list">
<li>
Home
</li>
<li>About Us
<ul>
<li>History</li>
<li>Guest Comments</li>
</ul>
<li>News</li>
<li>Accommodation
<ul>
<li>Rooms</li>
<li>Bedrooms</li>
<li>St Joseph's Annexe</li>
</ul>
<li>Visiting St Katharine's
<ul>
<li>Retreats</li>
<li>B&B</li>
<li>Events</li>
<li>Conferences</li>
<li>Catering</li>
</ul>
<li>Contact Us
<ul>
<li>Find Us</li>
</ul>
<li>Walled Garden</li>
<li>Sue Ryder Legacy
<ul>
<li>Sue Ryder</li>
<li>Prayer Fellowship</li>
<li>LRWMT</li>
</ul>
</ul>
</body>
You aren't really using a table, but you can add something like this: #horizontal-list {margin: auto; width: 850px;}
JS Fiddle with your code