h1{
text-align:center;
font-family: 'Nosifer', cursive;
font-size:35px;
}
nav {
border-top: 5px solid black;
padding:5px 5px;
text-align:center;
}
nav a:link,a:visited {
border-radius: 0 0 15px 15px;
padding:0px 15px;
}
nav a {
float: left;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
nav a:hover {
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
.active{
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
body{
background-color: #ffe6e6;
}
<nav>
HOME
COMPUTER PARTS
BUILD A COMPUTER
MEDIA
GO TO MAIN
</nav>
Can anyone please help me. I tried to use align="center", text-align:center;
and I tried many other things but for some reason, it's not centering my nav bar in the center of my web page. Also when I tried to display an image at the bottom of the nav bar and center it, it does not center.
Without seeing your markup, it's hard to say. But probably because of float: left on nav a. Remove that from nav a, and add display: inline-block;.
You're not even positioning anything...
Use the properties top: value, left: value, right: value, and bottom: value to position your navigation bar. You can use these properties in combination with transform: translate(X, Y).
text-align will only align text within an element, if there is indeed text. If there isn't any text, it won't do anything.
You need remove 'float: left' from 'nav a' selector and re-write code following way:
nav a {
display: inline-block;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
Related
This is my first ever HTML project and I'm trying to clone the Google Nigeria homepage. I'm about 90% completed, but I have issues that I've tried fixing, to no avail.
The 'app logo' and "Sign in" on the navigation is further up than the other items. I tried using margin-top on those nth items, but it affects the entire nav items.
Here: jsfiddle.net/mux9xbam/
Thanks.
remove float:left; from .first li a{}
write
.first li a {
text-decoration: none;
color: #000;
font-size: .8em;
margin-right: 15px;
margin-top: 13px;
padding: 1px;
}
instead of
.first li a {
text-decoration: none;
color: #000;
font-size: .8em;
margin-right: 15px;
margin-top: 13px;
padding: 1px;
float:left;
}
and adjust margin padding of <ul>
use
img
{
vertical-align: middle;
}
to align image middle.
jsfiddle
I was wondering - when making my website - how i can put a bottom margin that lifts an a-tag up.
CSS:
.navbar a {
background-color: #494949;
border: 1px solid #ffffff;
font-family: sans-serif;
font-weight: bold;
padding: 5px 10px;
text-decoration: none;
}
.navbar a:hover {
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
color: #494949;
padding: 10px 10px;
border: 1px #494949 solid;
background-color: #67E727;
}
And here's also my html:
<div class="navbar">
Home
Info
Doneren
Gallerij
Contact
</div>
I really hope you can help me out :)
greetings form the Netherlands!
You do not have to repeat all properties in hover state, only those you want to change. a tag is a inline element, see how box model works. To push it top on hover you can't use margin, you can use something like this:
.navbar a:hover {
position: relative;
top: -10px;
}
Is something like this what you're looking for? It moves the whole nav bar down a bit so the highlighting doesn't get cut off, and it moves the text up on hover. Here is the changed parts:
.navbar{
margin-top:20px;
}
.navbar a:hover {
position: relative;
top: -5px;
}
I need some help. I am trying to make a horizontal navigation using only CSS and HTML. I don't want to have the menu labels as images, in case they change in the future. I have most of it working, but the issue is when I try to include an icon (image) for one of the LI. I want the icon to swap out as well. Here's my code so far:
CSS:
body {
padding: 50px;
margin: 0;
}
ul {
padding: 5px;
margin: 10px 0;
list-style: none;
background-color: #fff;
float: left;
clear: left;
}
ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 9px;
}
ul li a {
text-decoration: none;
float:left;
color: #111;
cursor: pointer;
font: 14px/22px "Segoe UI", Arial, Helvetica, sans-serif;
}
ul li a span {
margin: 0px 10px 0px -10px;
padding: 1px 4px 1px 14px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
ul.green li a:hover {
color: #fff;
background: url(images/green.png) no-repeat top right;
}
ul.green li a:hover span {
background: url(images/green.png) no-repeat top left;
}
ul.green li.home {
color: #111;
background: url(images/home-idle.png) no-repeat;
background-position: -1px;
padding-left: 18px;
}
ul.green li.home a:hover {
background: url(images/home-over.png) no-repeat -10px;
}
HTML:
<ul class="green">
<li class="home"><span class="home">Home</span></li>
<li><span>Archives</span></li>
<li><span>Rooms & Resources</span></li>
<li><span>Productivity</span></li>
<li><span>Get Training</span></li>
<li><span>FAQs</span></li>
</ul>
Like I said, here's what I am attempting do have happen:
Use CSS for the navigation (aside from the icon & background)
Change the background to a green, rounded corner rectangle (I used a
.png image for the background)
Change the Home icon from blue to white
Please let me know if anyone can help.
I'm working on a website where I have a ul menu with list items. I want the items to be centred on the screen. But it seems like my lists items have an annoying offset. See image:
My (HAML) is built up like this:
.menu
%ul
%li
#- content
My (SASS) css looks like this:
.menu {
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
ul {
height: 30px;
background-color: black;
li {
background-color: white;
padding-top: 2em;
.active_menu {
border-top: 1px $red solid;
a {
color: $link-hover-color;
margin-bottom: 10px;
}
}
}
}
a {
font-family: "ff-meta-web-pro",sans-serif;
font-weight: normal;
font-size: 22px;
&:hover {
border-top: 1px $red solid;
}
}
}
ul li {
list-style: none;
display: inline;
margin: 0 1em 0 1em;
text-align: center;
a {
font-family: "ff-meta-web-pro",sans-serif;
font-weight: normal;
font-size: 22px;
}
}
Any ideas how I can get the menu/list items to center align?
You need to reset the horizontal margin and padding on the containing ul and list items to margin:0px; and padding:0px then define the individual padding or margins you need underneath them.
Also using margin:0px auto; in the right place should center the elements you specify.
I am trying to make my nav span the entire div, I want their background colour/target to have a width of 33%
<nav>
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</nav>
#nav1 {
background-color: #a43200;
color: white;
text-decoration: none;
padding: 10px 100px 10px 100px;
font-size: 1.3em;
}
#nav2 {
background-color: #c73d00;
color: white;
padding: 10px 100px 10px 100px;
font-size: 1.3em;
text-decoration: none;
}
There are a couple things wrong with your setup (for example: you have multiple ids, which is a no-no, so I've changed them to classes).
I've also gone through and tried remove some repetitious styling. So you'll see that a lot of the button styles have been condensed into one #nav a style, then the custom colours have been applied in separate styles.
I've set the font-size property in #nav to 12px, but that was only for demonstration purposes. Please edit this to your liking.
This fiddle should help:
Fiddle:
http://jsfiddle.net/fACmM/
HTML:
<div id="nav">
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</div>
CSS:
#nav
{
width:100%;
font-size:12px;
}
#nav a
{
width:33%;
float: left;
color: white;
padding: 10px 0px;
font-size: 1.3em;
text-decoration: none;
text-align:center;
}
.nav1 {
background-color: #a43200;
}
.nav2 {
background-color: #c73d00;
}
Added display:block to your CSS.
See fiddle: http://jsfiddle.net/djwave28/audAt/6/
<nav>
<ul>
<li>Home
</li>
<li>Lesson 1: Intro
</li>
<li>Lesson 2: Creating a Project
</li>
</ul>
</nav>
nav ul {
list-style:none;
}
nav ul li {
float:left;
width:30%;
}
#nav1 {
position:relative: float:left;
background-color: #a43200;
color: white;
text-decoration: none;
padding: 10px 0px 10px 0px;
font-size: 1.3em;
display:block;
}
#nav2 {
display:block;
position:relative: float:left;
background-color: #c73d00;
color: white;
padding: 10px 0px 10px 0px;
font-size: 1.3em;
text-decoration: none;
}
use class instead of id by the way this article help you understand why you used class instead of id with your current code
html
<nav>
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</nav>
css
nav {width:960px}
nav a {
float:left;
text-decoration: none;
padding: 10px 50px 10px 50px;
font-size: 1.3em;
color: white;
}
.nav1 {
background-color: #a43200;
}
.nav2 {
background-color: #c73d00;
}
working demo
hope this help you