How do I properly fix up the layout in terms of where the pictures and the text stands on the website?

Question

1.00/5 (1 vote)

See more:

I recently did some coding for a school project and needed some help with the layout.
Here are my questions:

1. What do I do on my css to change how the text "NRL 15/07/18 looks?
2. How do I move the text saying "World Cup" next to the second picture? ( I need to save a little space so I can put Soccer 16/07/18 above the "World Cup" text but beside the picture. See what I did with the NRL; same thing but
3. How do I fix up the website layout and how it looks in general? (colour, background colour, font-size, what improvements should I make to get more marks?)

What I have tried:

Here is the html:

<DOCTYPE html>
        <head>
            <title> GWS News- Home</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
        </head>
    
    <body>
        <header>
            <div class="container">
                <h1> Grass World Sport News</h1>
                <img src=img/logo.jpg class="logo">
                <ul class="nav">
                    <li class="active"><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html">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>    
        <div class="body">
            <h1> Latest Sport News</h1>
        </div>
        <div class="pics">
            <img class="nrl-image" src="img/dvw.jpg">
            <p3> NRL   15/07/18</p3>
            <h2> Can St George Illawarra Dragons keep their place on top of the ladder?</h2>
            <p1> West Tigers beat St George Illawarra Dragons, 20-16. Robbie Farah stuns all of Dragons with a match-winning performance that leads to Dragons first loss at their home ground. Farah carried the tigers by running 42 metres to go with two linebreak assists, two try assist and 42 tackles in a complete performance. This win for the Tigers allow them to stay in top 8 and possibly have a chance to win the finals. The Dragons were disappointing in front of their home crowd and now faces the possibility of dropping out of the top place on the ladder, with the Panthers and Sharks right behind them. They did produce some good plays second half and closed the gap, but it proved to be not enough. </p1>
        </div>
        <div>
        <div style="clear: both;"></div>
        <div style="margin-top:20px"></div>
            <img class="world-cup" src="img/wcf.jpg"
        </div>
        <div> 
        <h1> World Cup</h1>    
        </div>
    </body>
</DOCTYPE html>

Here is the css:

CSS

html,body{
            background-color: #ffffff;
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

    div.container{
        margin: 0;
        padding: 0 30px;
    }

    header{
        background-color: #000000;
        float: left;
        width: 100%;
    }

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

    .logo{
        margin: 10px 50px;
        height: 120px;
        float: left;
    }

    .nav {
        float: right;
        list-style-type: none;
        list-style: none;
        padding: 10px 100px;
        margin: 20px;
    }

    .nav li {
        display: inline-block;
        margin: 10px 5px;
    }

    ul.nav li a{
        color: #ffffff;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 20px;
        font-family: "Roboto", sans-serif;
        margin-bottom: inherit;
        padding: 5px 10px;
        letter-spacing: 2px;
        border: 1px solid #ffffff;
    
    }

    .nav li a:hover{
        background: #fff;
        transition: .4s;
        color: #000000
    }

    .nav li.active a{
        border: 2px solid white;
        background: #ffffff;
        color: #000;
    }

    .banner-image {
        width: 100%;
    }

    .body{
        border: 1px solid black;
        background: #000000;
        color: #ffffff;
        font-size: 20px;
    }

    .nrl-image{
        float: left;
    }

Posted 20-Jul-18 20:12pm

Jack the Christian

Updated 20-Jul-18 21:11pm

v2

Add a Solution

Comments

Richard Deeming 23-Jul-18 13:58pm

Your HTML is invalid. It should start with:

<!DOCTYPE html>
<html>

and end with:

</html>

One of your img tags is not closed.

There is no such tag as "p1" or "p3" in the HTML specification. These will be treated as unknown generic block-level elements by most browsers.

And your question basically boils down to "how do I style a website", which is far too broad to be answered here.

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)