Jump to content

Need Help with CSS


learnerdeveloper
 Share

Recommended Posts

I need help to center the menu bar. When i put in <P Align="Center"> in HTML file it works. But as i have read it's not the right way to do the coding, the styling like format of wordings, colors ect is used for CSS, but when i try the same code using CSS it does not work.

 

I need to center the tool menu bar 'Home page, About page, folio page, pet photography page. Using CSS.

 

 

I am just learning web development and very new to it, this is my practice website and want to get into web development.

 

 

 

HTML file: with the center code:

 

b9cbed399230922.jpg

 

<!DOCTYPE html><html><head><title> Land of Wonders </title></head><body><h2><P Align="Center"><a href="Home.html" title="to Home.html">Home page</a><a href="About.html" title="to About.html">About page</a><a href="folio.html" title="to folio.html">folio page</a><a href="pet photography my dog.html" title="to pet photography my dog.html">pet photography page</a></P></h2> <h1>Land of Wonders</h1><p>Hi my name is Mark and welcome to my website of my photography adventures. I love to travel to different countries and experience to see different cultures and it's people. Travellingis a fascinating adventure which opens up your eyes.</p> <p>Posted by: Mark</p> <a href="https://www.flickr.com/photos/56759154@N08/">My Flickr page</a> </body></html>

 

 

 

 

here is the CSS file with the same code, i deleted the <P Align="Center"> from the HTML file and put it in CSS file instead but doesn't work.

 

CSS: using the same code to center:

 

<!DOCTYPE html><html><head><title> Land of Wonders </title></head><body><h2><P Align="Center"><a href="Home.html" title="to Home.html">Home page</a><a href="About.html" title="to About.html">About page</a><a href="folio.html" title="to folio.html">folio page</a><a href="pet photography my dog.html" title="to pet photography my dog.html">pet photography page</a></P> </h2><h1>Land of Wonders</h1><p>Hi my name is Mark and welcome to my website of my photography adventures. I love to travel to different countries and experience to see different cultures and it's people. Travellingis a fascinating adventure which opens up your eyes.</p> <p>Posted by: Mark</p> <a href="https://www.flickr.com/photos/56759154@N08/">My Flickr page</a> </body></html>

 

CSS: does not center, is there anything i need to add or do for this to work?

3166c5399230148.jpg

Edited by learnerdeveloper
Link to comment
Share on other sites

also here is the screen capture of my HTML file and CSS file containing the codes: I use Notepad++

 

please tell me what i am doing wrong, is there any codes i need to add? I am really stuck and need to know what i'm doing wrong and need to know how to do it. I am a beginner and just learning web development.

 

fb21c0399234215.jpg 646b58399234234.jpg

Edited by learnerdeveloper
Link to comment
Share on other sites

Also trying to change the colour of the text. Try it in CSS doesn't work but when i try it in HTML file it works?

 

Same problem i am having with centering the wording. Do i put that code in the HTML and do some coding in CSS, i opened it in my browser firefox to test it and it works when i do the code in HTML code but when i delete the color code in HTML and put it in CSS it doesn't work? Please help.

 

92e4d9399243135.jpg 448c74399243138.jpg d9cc8d399243148.jpg 92ec1e399243153.jpg

Edited by learnerdeveloper
Link to comment
Share on other sites

In CSS

nav {	margin:0 auto; /* Enables Nav to center with the width of the screen*/	width:500px;}nav ul {	list-style:none;}nav li {	float:left;	padding:10px;}

In HTML

<nav>    <ul>    	<li><a href="Home.html">Home page</a></li>        <li><a href="About.html">About page</a></li>        <li><a href="folio.html">folio page</a></li>	<li><a href="pet photography my dog.html">pet photography page</a></li>    </ul></nav>

This is the correct way to deal with navigation

Link to comment
Share on other sites

In CSS

nav {	margin:0 auto; /* Enables Nav to center with the width of the screen*/	width:500px;}nav ul {	list-style:none;}nav li {	float:left;	padding:10px;}

In HTML

<nav>    <ul>    	<li><a href="Home.html">Home page</a></li>        <li><a href="About.html">About page</a></li>        <li><a href="folio.html">folio page</a></li>	<li><a href="pet photography my dog.html">pet photography page</a></li>    </ul></nav>

This is the correct way to deal with navigation

 

 

really confused here pleae help not working.

 

please explain in easy terms as i am very new to web development. When i the <li> in html it lists the menu tool bar which is not what i want. I copied and paste the html code and css code which i believe is for navigation but don't see any difference.

 

Have no idea how to change color of text, center text in middle of page. It works in HTML but when i delete the HTML and put this in CSS it doesn't do a thing. Sorry I am a bit slow and need someone to explain in simple terms so i fully understand what to do thanks,

 

this is my results:

 

1eb19e399440522.jpg 571269399440531.jpg

 

ca3c2e399441186.jpg

Edited by learnerdeveloper
Link to comment
Share on other sites

If I put this code in HTML file for colour:

 

In HTML file:

<div style="color:#0000FF"><p>Hi my name is Mark and welcome to my website of my photography adventures. I love to travel to different countries and experience to see different cultures and it's people. Travellingis a fascinating adventure which opens up your eyes.</p></div>86b8d1399441866.jpg

 

what do i need to put in CSS?

 

I am very confused and need help. Thanks i just need a clear understanding how the process works in HTML and CSS. If I am doing styling do i need to put codes in both HTML and CSS?

Link to comment
Share on other sites

it works when i do this in HTML file. But not sure what to put in CSS. If this works in HTML code then why do i need to do CSS? i understand that it will not work properly if i do all the styling in HTML file that is why you have to do coding in CSS but i am very confused what to put into CSS, is the code above the right code to pit into HTML? do you have to do coding for both HTML and CSS when you do styling likes colours, fronts, position text?

 

here is the screen capture when i change the colour of text to blue when i did this in HTML file.

 

a12efa399444640.jpg

Link to comment
Share on other sites

CSS is to be written in <head> section...... CSS is used to give style to the html below.....

 

this is how the entire code looks like with css...

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><style type="text/css">nav {	margin:0 auto;	background-color:red;	width:500px;}nav ul {	list-style:none;}nav li {	float:left;	padding:10px;}nav li a{    color:red;    text-decoration:none;}	</style></head><body><nav>  <ul>    <li><a href="Home.html" title="to Home.html">Home page</a></li>    <li><a href="About.html" title="to About.html">About page</a></li>    <li><a href="folio.html" title="to folio.html">folio page</a></li>    <li><a href="pet photography my dog.html" title="to pet photography my dog.html">pet photography page</a></li>  </ul></nav></body></html>

to give colour to text or background or any sort of style.....you need not to add it in html.....you just have to add it in css which is in the head section

 

You will have to understand the concept of CSS.....

http://www.w3schools.com/css/default.asp

 

Take a look...it is easy....

Link to comment
Share on other sites

ok i must be doing something seriously wrong because it is not doing nothing.

 

I put the following code in CSS:

 

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><style type="text/css">nav { margin:0 auto; background-color:red; width:500px;}nav ul { list-style:none;}nav li { float:left; padding:10px;}nav li a{ color:red; text-decoration:none;} </style></head><body><nav> <ul> <li><a href="Home.html" title="to Home.html">Home page</a></li> <li><a href="About.html" title="to About.html">About page</a></li> <li><a href="folio.html" title="to folio.html">folio page</a></li> <li><a href="pet photography my dog.html" title="to pet photography my dog.html">pet photography page</a></li> </ul></nav></body></html>

 

 

fa8e4b399446968.jpg b3a71b399446993.jpg

 

 

 

44bba0399447481.jpg

Edited by learnerdeveloper
Link to comment
Share on other sites

<h1>Land of Wonders> on same line as menu toolbar.

 

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><link rel="stylesheet" href="style.css"> </head><body><nav> <ul> <li><a href="Home.html" title="to Home.html">Home page</a></li> <li><a href="About.html" title="to About.html">About page</a></li> <li><a href="folio.html" title="to folio.html">folio page</a></li> <li><a href="pet photography my dog.html" title="to pet photography my dog.html">pet photography page</a></li> </ul></nav><body><h1>Land of Wonders</h1><p>Hi my name is Mark and welcome to my website of my photography adventures. I love to travel to different countries and experience to see different cultures and it's people. Travellingis a fascinating adventure which opens up your eyes.</p></body><body> <p>Posted by: Mark</p> <a href="https://www.flickr.com/photos/56759154@N08/">My Flickr page</a> </body></html>

 

7aaea3399675913.jpg

 

 

need it to be on the next line as a heading/title.

Link to comment
Share on other sites

doing some css looking good so far.

 

CSS:

 

nav { margin:0 auto; background-color:red; width:500px;}nav ul { list-style:none;}nav li { float:left; padding:10px;}nav li a{ color:red; text-decoration:none;}h1 { color:blue; font-family:verdana; font-size:200%; }p { color:black; font-family:courier; font-size:160%;}

 

 

still not sure how to put my <h1>Land of Wonders</h1> onto the next line by itself as it is the title of the page?

 

html:

 

<body><h1>Land of Wonders</h1><p>Hi my name is Mark and welcome to my website of my photography adventures. I love to travel to different countries and experience to see different cultures and it's people. Travellingis a fascinating adventure which opens up your eyes.</p></body>

 

e1f60c399678007.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...