learnerdeveloper Posted March 24, 2015 Share Posted March 24, 2015 (edited) 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: <!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? Edited March 24, 2015 by learnerdeveloper Link to comment Share on other sites More sharing options...
learnerdeveloper Posted March 24, 2015 Author Share Posted March 24, 2015 (edited) 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. Edited March 24, 2015 by learnerdeveloper Link to comment Share on other sites More sharing options...
learnerdeveloper Posted March 24, 2015 Author Share Posted March 24, 2015 (edited) 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. Edited March 24, 2015 by learnerdeveloper Link to comment Share on other sites More sharing options...
dsonesuk Posted March 24, 2015 Share Posted March 24, 2015 Look at html and css tutorials for the modern method of styling, <font> has not been used for many, many, many years, and also validate, you can't use paragraph within header, use div instead of header. Link to comment Share on other sites More sharing options...
tejasamrute Posted March 24, 2015 Share Posted March 24, 2015 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 More sharing options...
learnerdeveloper Posted March 25, 2015 Author Share Posted March 25, 2015 (edited) 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: Edited March 25, 2015 by learnerdeveloper Link to comment Share on other sites More sharing options...
learnerdeveloper Posted March 25, 2015 Author Share Posted March 25, 2015 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> 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 More sharing options...
learnerdeveloper Posted March 25, 2015 Author Share Posted March 25, 2015 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. Link to comment Share on other sites More sharing options...
tejasamrute Posted March 25, 2015 Share Posted March 25, 2015 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 More sharing options...
learnerdeveloper Posted March 25, 2015 Author Share Posted March 25, 2015 (edited) 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> Edited March 25, 2015 by learnerdeveloper Link to comment Share on other sites More sharing options...
dsonesuk Posted March 25, 2015 Share Posted March 25, 2015 A css file should only contain css styling code only, no html, no style tag as in html document. You should link from all the html documents to the external css stylesheet.http://www.w3schools.com/css/css_howto.asp 1 Link to comment Share on other sites More sharing options...
learnerdeveloper Posted March 26, 2015 Author Share Posted March 26, 2015 <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> need it to be on the next line as a heading/title. Link to comment Share on other sites More sharing options...
learnerdeveloper Posted March 26, 2015 Author Share Posted March 26, 2015 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 26, 2015 Share Posted March 26, 2015 You should only have one single opening and closing body tags (<body>...</body>) within page.The h1 should move to its own line, as it is a block element, but it may be affected by a previous floated element before it, by using clear: both; on h1 it should fix this. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now