The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> HTML help
gibkev
post Apr 26 2021, 07:36 AM
Post #1





Group: Members
Posts: 4
Joined: 26-April 21
Member No.: 27,912
Hi smile.gif

I need help with the below website

I need to add text and change the background colour but dont know how.

I have tried and tried but no luck.

Please help.

Thanks

Kevin



<!doctype html>
<html>
<head>
<title>GEDS</title>
</head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;a
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}
</style>

<ul>
<li><a href="home2.php">Home</a></li>
<li><a href="contacts2.php">Contacts</a></li>
<li><a href="doc.php">Docs</a></li>
<li><a class="active" href="#beneficiaries2.php">Beneficiaries</a></li>
<li><a href="faqs2.php">FAQs</a></li>
<li><a href="media2.php">Media</a></li>
<li><a href="social.php">Social Media</a></li>
</ul>

I want to change the text here and background colours

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 26 2021, 08:04 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
First, the STYLE element must be inside HEAD, while the visible content of the web page goes into BODY. Then you can style the BODY element in different ways:

CODE
<!doctype html>
<html>
    <head>
        <title>Title text</title>
        <style>
        body {color: #f00; background: #0f0;}
        </style>
    </head>

    <body>
        <ul>
         <li><a href="home2.php">Home</a></li>
         <li><a href="contacts2.php">Contacts</a></li>
         <li><a href="doc.php">Docs</a></li>
        <li><a class="active" href="#beneficiaries2.php">Beneficiaries</a></li>
        <li><a href="faqs2.php">FAQs</a></li>
        <li><a href="media2.php">Media</a></li>
        <li><a href="social.php">Social Media</a></li>
        </ul>
        I want to change the text here and background colours
    </body>
</html>

(I formatted the code to make it more readable, but this is not technically necessary).

Note that since the menu is positioned fixed at the top (in your CSS example), it will cover the first lines of text on the page. To prevent that, you might give the BODY element a top padding that's big enough to push the text down.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 26 2021, 08:08 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Just type the text there, put in appropriate elements. Like...

CODE
<p>
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>


As for the backgrounds, find the occurrences of background-color in the style sheet and change their values to you liking.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gibkev
post Apr 27 2021, 02:38 AM
Post #4





Group: Members
Posts: 4
Joined: 26-April 21
Member No.: 27,912
Thanks.

But it didnt work sad.gif

I lost the menu at the top...

I have added some pics for your perusal.

Thank you again and hope you can help me with this issue.

Kevin




QUOTE(Christian J @ Apr 26 2021, 08:04 AM) *

First, the STYLE element must be inside HEAD, while the visible content of the web page goes into BODY. Then you can style the BODY element in different ways:

CODE
<!doctype html>
<html>
    <head>
        <title>Title text</title>
        <style>
        body {color: #f00; background: #0f0;}
        </style>
    </head>

    <body>
        <ul>
         <li><a href="home2.php">Home</a></li>
         <li><a href="contacts2.php">Contacts</a></li>
         <li><a href="doc.php">Docs</a></li>
        <li><a class="active" href="#beneficiaries2.php">Beneficiaries</a></li>
        <li><a href="faqs2.php">FAQs</a></li>
        <li><a href="media2.php">Media</a></li>
        <li><a href="social.php">Social Media</a></li>
        </ul>
        I want to change the text here and background colours
    </body>
</html>

(I formatted the code to make it more readable, but this is not technically necessary).

Note that since the menu is positioned fixed at the top (in your CSS example), it will cover the first lines of text on the page. To prevent that, you might give the BODY element a top padding that's big enough to push the text down.
Attached Image Attached Image

This post has been edited by gibkev: Apr 27 2021, 02:43 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gibkev
post Apr 27 2021, 02:54 AM
Post #5





Group: Members
Posts: 4
Joined: 26-April 21
Member No.: 27,912
Thanks lets see what happens smile.gif

QUOTE(pandy @ Apr 26 2021, 08:08 AM) *

Just type the text there, put in appropriate elements. Like...

CODE
<p>
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<p>
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>


As for the backgrounds, find the occurrences of background-color in the style sheet and change their values to you liking.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 27 2021, 06:48 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(gibkev @ Apr 27 2021, 09:38 AM) *

Thanks.

But it didnt work sad.gif

I lost the menu at the top...

You have to add your CSS for that as well, I left it out in my example.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gibkev
post Apr 28 2021, 02:28 AM
Post #7





Group: Members
Posts: 4
Joined: 26-April 21
Member No.: 27,912
Thanks.

I will give it a go.

QUOTE(Christian J @ Apr 27 2021, 06:48 AM) *

QUOTE(gibkev @ Apr 27 2021, 09:38 AM) *

Thanks.

But it didnt work sad.gif

I lost the menu at the top...

You have to add your CSS for that as well, I left it out in my example.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 05:10 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC