html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
}
.nav li {
display: inline-block;
}
.nav ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
font-family: "Roboto", sans-serif;
}
.nav li a:hover{
color: #D3D3D3;
border: 1px solid white;
}
.nav li.active a{
border: 1px solid white;
}
.banner-image {
width: 100%;
}
<DOCTYPE html>
<head>
<title> GWS News</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<ul class="nav">
<li class="active">Home</li>
<li>World Cup</li>
<li>Sports</li>
<li>Schedule</li>
<li>About</li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
</body>
I want to fix up my navigation bar but do not know how to do it.
Improvement I want to make are:
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
How do I make the link spaced out?
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
How do I make the title "Grass World Sport News" bigger?
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
The problem is your selector, should be ul.nav li a and not .nav ul li a
How do I make the link spaced out?
Just add to link element a left margin (since you want it to float right):
ul.nav li {
margin-left: 1rem // for example
}
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
The float is working correctly but you have a max width on parent container so it gets only to the far right of the container. If you want it to the right of the window remove max-width.
div.container{
margin: 0;
padding: 0 30px;
}
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
Same problem as number 1. Just set the selector to be ul.nav li a
How do I make the title "Grass World Sport News" bigger?
If you mean a bigger font just set a higher font-size.
header h1 {
// for example
font-size: 30px;
}
This is very broad, and looking at the code it appears much was either copy/pasted from another site expecting the same results which is not how coding works.
Here's a pen: https://codepen.io/codespent/pen/BVXyWO
To answer your questions:
To change font color, you use color: #fff in the parent rule.
Spacing can be done in multiple ways, but just learn box model before you start playing with anything so you know why you're using paddings or margin.
Moving the links to the right is also contextual, there's many ways you can do so, but you need to understand why you're doing it this way. text-align:right; may work, but Flexbox is recommended.
font is an outdated property. You may use font-size:20px; to change the font size.
This is also a broad question as there are many ways that are contextual to how you feel is best.
To understand these fundamentals, I highly recommend taking freeCodeCamp's Basic CSS courses and as well, you should see StackOverflow's "How to Ask" knowledge object to grasp how you should be presenting your questions when coming here for help.
Related
How can I add spacing in the navigation bar?
here's the code I have written btw I am still a noob learning coding so yeah!
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #FFFFFFF;
}
.topnav a {
float: left;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #FFFFFFF;
color: black;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Men
Women
Our Materials
Stores
</div>
<div style="padding-left:10px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
Please provide exact details I should do and better it be in html
You can add space un numerous ways. I advice you to delete the float:left; because is not the current best way to do this.
In spite of you can add display: inline-block to the elements or put display: flex to the topnav class.
If you user inline-block you will be able to add margin to the a, if you use flex type you can read more about on https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope you understand and learn more about flex and the display option.
The best case would be to give your a class or id and edit a child element. I did margin: 0; to eliminate any margin, and then declare the margin-right: 5px; this way it will all fall inline neatly without any weird gaps. In your CSS you can also add text-transform: uppercase; to get your navigation to be all caps.
As of Bootstrap 4, you can use the spacing utilities. Add for instance px-2 in the classes of the nav-item to increase the padding.
You can change this in your CSS with the property padding:
.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
Also, you can set margin
.navbar-nav > li{
margin-left:30px;
margin-right:30px;
}
I am trying to make a template for my webpage. I am creating a header and a footer, and have the content in between. But for some reason, I cant get any of it to work. I have been fooling with this for hours and cant find answers.
I have a logo, I am trying to position it inside the that way it looks clean. But I cant. I wont stay centered on my navigation text! I then notice when I resize my browser, it shifts all my navigation links until they all fit on the screen. How do I fix that?
Upon looking around for the fix, I noticed that I should instead convert all my position: absolute; top: (so many px) left: (so many px); to percent style measurements..no such luck. Once I get this working, I should be pretty much over the hardest part.
here is the css file:
//this is not in the div tag rather a test logo outside.
#logo{
display: inline;
float: left;
}
.nav{
display: inline;
float: left;
width: 5;
border: 1px solid #C0C0C0;
margin: auto;
text-align: center;
}
.nav ul{
list-style-type: none;
}
.nav li{
display: inline;
}
.nav li img{
height: 30px;
}
.nav a{
text-decoration: none;
padding: 20px 5px 20px 20px;
font-weight: 900;
color: #C0C0C0;
font-family: monospace;
font-size: 20px;
display: inline;
}
.nav a:visited{
color: #C0C0C0;
}
.nav a:hover{
color: black;
}
here is the html
</head>
<meta charset="UTF-8">
<meta name="description" content="This is a website that offers free information on IT">
<body>
<!--
Creating the navigation bar. I used nav as the dic class name with an unordered list
-->
<img src="Images/logo.png">
<div class="nav">
<ul>
<li><img src="Images/logo.png"></li>
<li> Home</li>
<li>Contact</li>
<li>Service</li>
<li>About</li>
</ul>
</div>
<div class="ad">
<center>
<img src="Images/head_pic.jpg">
<center>
</div>``
adding
min-width: (whatever);
fixed most of my issues.
So, I'm working on quickly building a website theme (Wordpress) with the aid of Twitter bootstrap, and I'm running into a problem.
I've got a header thrown together, and I've got this weird gap going on inside the "pull-right" section, not sure why:
I'm not sure what the deal is, I want them sitting on the line right at the same height of the text on the left.
Anyway, I've got the following relevant sections of code:
(HTML for header section):
<!-- Header -->
<div class="row header-container">
<div class="col-md-8 col-md-offset-2">
<div class="pull-left">
<h3>CharlesBaker.net</h3>
</div>
<div class="pull-right">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
</div>
</div>
(CSS for the same section):
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
}
.header-container h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', serif;
}
.header-container ul {
margin: 0;
padding: 0;
}
.header-container ul li {
display: inline;
margin: 0;
padding: 0;
}
.header-container a {
padding: 3px;
color: black;
}
.header-container a:hover {
text-decoration: none;
background-color: #880000;
color: white;
}
Not sure what the issue is, unless it's related to the fact that I'm using a tag instead of just styling a <span> or something, but since I removed the padding/margin using CSS, I wouldn't think that would be the problem.
Any help would be great. The idea is that when I hover over the links on the right, that they're enclosed in a scarlet colored box that "extends" from the 5px bottom border.
Thanks in advance!
Are you looking for this?
You need to set your .header-container as display: inline-block to align all elements inside. Therefore, you need to float your pull div elements (float and left).
Just one last change, set the width size of your header: I set 100%, but you can set whatever you like :)
CSS:
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
width: 100%;
display: inline-block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
There is a particular line-height property for h3 tag with bootstrap.
h1, h2, h3 {
line-height: 40px;//line 760
}
So you will have to add style to negotiate this additional height.
Also another set for your ul as :
ul, ol {
margin: 0 0 10px 25px; //line 812
}
Solution :
Over-ride the ul margin as follows :
.pull-right ul{
margin: 0;
}
Over-ride the line-height for the h3 as follows :
.pull-left h3{
line-height:20px;
}
First one is pretty straight forward and gives you correct alignment straighaway. Second solution will need you to work some more with tweaking the negative-margins for .pull-right.
Debugging URL : http://jsbin.com/oToRixUp/1/edit?html,css,output
Hope this helps.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
I haven't really ever done a background navigation rollover, I usually just change the colour of the text once it's been rolled over. However I'm try to do this now but can't seem to get it right.
I'm trying to do it all with CSS as I believe there is a way however I do see a lot of others using sprites and image rollovers. Which way is the best? I might end up having a lot of images on my website so I'm trying to stay away from them so I myself, am thinking strictly CSS. There is a way right?
This is my website
CSS
#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}
HTML
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>About</li>
<li>Current Season</li>
<li>Past Seasons</li>
<li>Contact</li>
<li>Partners/Sponsors</li>
</ul>
</nav>
But I want it to look like this
What am I missing?
Use this
#main-navigation li a:hover {
color: #c7bd89;
background-color: #900;
width: 120%;
line-height: 30px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 30px;
}
All the problem is that you're defining a height ... You should define a line-height instead and it will work flawlessly ... But I still can find a space for improvement in terms of padding and margin.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/quR4E/3/
demo: http://jsfiddle.net/quR4E/3/embedded/result/
screen shot:
Try changing your #main-navigation li a to this:
#main-navigation li a {
/*display: block;*/
text-decoration: none;
color: black;
padding: 5px;
}
Using display block was pushing the text outside the box. Adding the padding will give you some spacing around the text.
Sprites are definitely better than using multiple images but in the end they are essentially going to be the same thing. If you can create your images small enough (for bandwidth performance) it won't affect your site that much. Sprites are nice to group images. Using background colors and borders around text is also a very efficient way to go.
Have a look at what I did here: http://torontobanfffilmfest.com/splash
Each of the eight blocks has a single image in two versions, one light and one dark, attached side-by-side. In the top-left corner, for example, is an image, splash_buy_tickets_m.png, that is 582 pixels wide. But the space in which it's displayed is 291 pixels wide. We only see half the full image, and WHICH half depends on :hover.
The CSS that makes the image change on rollover is pretty simple:
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. {
background-position: -291px 0;
}
If each of the buttons in your button bar consists of an "active" and an "inactive" version, then you can just change the image position within the DIV in which it's shown, shifting horizontally or vertically.