How do I move just the navigation bar to the right hand side? Why can't I change the font of the text?

Question

0.00/5 (No votes)

See more:

I have two questions: How do I move just the navigation bar to the right?

How do I move all the links to the right but keep the title on the left. The title meaning 'Grass World Sport News'. Every time I use float, it moves the whole think including the title.

2nd Question:

Every time I try to change the font for the title which is Grass World Sport News, the font doesn't change. The font doesn't change at all: the whole font: 15px; is ignored.

How do i fix this?

What I have tried:

1st Question:

Here is my html: 

<pre><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>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">World Cup</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            <div class="banner">
                <img class="banner-image" src=img/banner1.jpeg>
            </div>
        </header>
    </body>

Here is my css:

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;
}

header ul{
    list-style-type: none;
    padding: 0;
    margin: 22px 0 0 0;
    float: right;
    
}

header ul li{
    display: inline-block;
    text-decoration: underline;
}

header li a:hover{
    color: #D3D3D3
}

header ul li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px;
    display: block;
}

.banner-image {
    width: 100%;
    
}

2nd Question;

It is the same coding but focusing on this part of the css:

header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
font: 10px;
}

When I open up the website and inspect element on chrome: there is a line through the 'font' part of the css.
Why is it that I can't make it bigger or smaller?

Posted 5-Jul-18 16:04pm

Jack the Christian

Updated 5-Jul-18 17:19pm

Add a Solution

Comments

Bryian Tan 5-Jul-18 22:25pm

should be font-size.

Jack the Christian 7-Jul-18 3:01am

Thanks

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Answer 1 · 2018-07-05T17:20:00

Solution 1

1. Can I suggest to use Bootstrap. Here is an example: CP_menu_bootstrap - JSFiddle[^]

2. the syntax should be font-size

3. To stick with current design: [CP_menu_orig]

Posted 5-Jul-18 17:20pm

Bryian Tan

Comments

Jack the Christian 6-Jul-18 18:30pm

How does this bootstrap thing work? Do I just insert [CP_menu_orig] under header h1 ?

Bryian Tan 7-Jul-18 10:44am

You just need to add the bootstrap and jQuery references. Look at this page, https://fiddle.jshell.net/bryiantan/dpLjxgec/show/ , right click the browser, view source.