Rja
Members
-
Joined
-
Last visited
Everything posted by Rja
-
Ok thanks for the tips will work on it but just got into the hang of not having # with colors! I'll work on it though, try to get into the habit of putting the #!
-
Excellent work. The designs seems to fit with the business and works well. Nothing I coudl suggest to be honest, maybe do something with the news section of the site, it's a bit boring at the moment.
-
Hello mate. I'm pretty new to the forum myself, and I must say it's inspiring to see others just like myself here, experienced and unexperienced members alike. I'm new to web development, but over the past week I've learnt the ins and outs of basic HTML and CSS and most of the intermediate stuff is coming for me, with my now creating simple header-navigation-content-footer pages, and two-column layouts. It's good to be with a group of people pursuing the same thing you are - the web! /rant over. Welcome!
-
I'm sorry for not being able to upload this, but since it's not a proper project and I'm doing this just for practice, if you want to see it just save it in notepad as html and view it! The only tutorial I followed was a w3schools one on the navigation. The rest I did without reference. Been practicing without reference for a few days now, and I feel it's really coming on! I just want to get a review of how my site design looks, but also how my coding is. So, what do you think? Any comments are useful! <html> <head> <style type="text/css"> #header { background-color: 8eaf34; width: 100%; height: 100px; border: 1px solid black; border-bottom: 5px solid black; } #header h1 { text-align: center; color: black; font-size: 40px; } #navigation { background-color: 8eaf34; width: 100%; height: 30px; border: 1px solid black; margin-bottom: 20px; } ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left } a:link,a:visited { display:block; width:316px; height: 30px; background-color: 8eaf34; text-align: center; text-weight:bold; text-decoration:none; color:#FFFFFF; } a:hover,a:active { background-color: 7A991A; } #content { width: 70%; margin: auto; height: 500px; border: 1px solid black; } #content h2 { background-color: 8eaf34; height: 30px; color: white; text-align: center; margin: 0px; padding: 0px; border-bottom: 1px solid black; } #content p { margin-left: 5px; margin-right: 5px; margin-top: 1px; } #content p:first-letter {margin-left: 20px;} #footer { position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 14px; background-color: 8eaf34; height: 30px; color: black; border-top: 1px solid black; } </style> </head> <body> <div id="header"> <h1>Website Name</h1> </div> <div id="navigation"> <ul> <li><a href="http://www.homepage.com/">Home</a></li> <li><a href="http://www.homepage.com/Services">Services</a></li> <li><a href="http://www.homepage.com/Portfolio">Portfolio</a></li> <li><a href="http://www.homepage.com/Contact">Contact</a></li> </ul> </div> <div id="content"> <h2>Welcome</h2> <p>Welcome to the site. I hope you like the design! I'm just practicing with HTML and CSS to try to create some basic-looking web pages, and I think they're gettin' better and better!</p> </div> <div id="footer"> Copyright, 2010. Rja Designs. All Rights Reserved. </div> </body> </html>
-
Thanks. Done a few of these now and I'm getting used to the style of: Header Navigation - Content Footer I just need to practice some more and develop more skills on styling now. Moving well on with the intermediate stuff now!
-
I'm just trying to practice the basics of html and css. Does anyone know how I remove the bottom bit below the "contact" within the navigation? Any other tips on anything within this code? Am I doing anything wrong? <html> <head> <title>Practicing HTML / CSS</title> <style type="text/css"> #header { background-color: black; border-bottom: 5px solid orange; border: 1px solid orange; margin-bottom: 20px; height: 150px; width: 100%; } #header h1 { text-decoration: underline; color: white; font-size: 40px; text-align: center; } #navigation { background-color: black; border: 1px solid orange; margin-right; 20px; margin-bottom: 20px; float: left; width: 15%; } #navigation h1 { color: white; text-align: center; border-bottom: 1px solid orange; font-size: 25px; margin: 0px; padding: 0px; } #content { background-color: black; border: 1px solid orange; margin-bottom: 20px; float: right; height: 400px; width: 80%; } #content h1 { color: white; font-size: 25px; text-align: center; margin: 0px; padding: 0px; border-bottom: 1px solid orange; } #footer { background-color: black; border: 1px solid orange; height: 50px; position:absolute; bottom: 0px; width: 99%; color: white; text-align: center; font-size: 14px; } ul {text-decoration: none; list-style-type: none; margin: 0px; padding: 0px; text-align: center} a {text-decoration: none; color: white;} li {border-bottom: 1px solid orange;} </style> </head> <body> <div id="header"> <h1>Website Name</h1> </div> <div id="navigation"> <h1>Navigation</h1> <p><ul> <li><a href="http://www.sitename.com/">Home</a></li> <li><a href="http://www.sitename.com/Forums">Forums</a></li> <li><a href="http://www.sitename.com/Services">Services</a></li> <li><a href="http://www.sitename.com/Contact">Contact</a></li> </ul></p> </div> <div id="content"> <h1>Welcome!</h1> </div> <div id="footer"> <p>Copyright 2010. All Rights Reserved.</p> </div> </body> </html>
-
Yet another good site is htmldog (for CSS and HTML).
-
The point of having bookmarks is that there to most useful sites, not just useful sites. Have just the most useful sites which provide the best information and refences to whatever you need, then if you need anything else that isn't within those sites then google it.
-
It all depends on what suits the site design, really. Different designs call for different styles of navigation. Be creative, but don't be idiotic.
-
Thanks guys, I will look into both pieces of advise when I practice coding again later. Any more comments?
-
Now you've spent money on the course I think it would be better to do that and bag yourself an extra qualification. While your portfolio and knowledge is what matters the most, a qualification can't hurt when you're putting yourself as a candidate for a job.
-
Well I'm still only a beginner tbh, so I don't really know a lot about stuff like this, so I don't know any other way you could do it.
-
Instead of using a <div> just use: body {background-img (url)} .. that would work the same, right?
-
After I've studied more and got a bit better (and can make a site someone will actually want to upload), I'll be doing free projects to get my portfolio ready and also advanced my skills.
-
Welcome! This site is great, I'm a beginner (as you are it would seem), and when I came here I couldn't do nothing, but with the helpful links and members I can now do basic and some intermediate html and css and I've only been studying it a week! Hope you'll enjoy it here!
-
I thought I'd put my knowledge to the test by creating a basic layout without any references or tutorial. Here's the code, there's only really one problem, there's a gap between the navigation and content, as I had to put them at width:70% and width:29% due to the borders taking space and the content going below the navigation (but to the right). I've done another one too, the code underneath. It's also got the same problem, the navigation and content has a gap between! How can this be fixed? And is there anything I'm doing wrong? Thanks! Any comments appreciated! <html> <head> <title>CSS Practice</title> <style type="text/css"> #header { background-color: black; color: white; width: 100% height: 300px; border-bottom: 5px solid orange; border: 1px solid orange; } #header h1 { font-size: 40px; color: white; text-align:center; } #navigation { background-color: black; color: white; width: 29%; font-size: 12px; float: left; border: 1px solid orange; height: 300px; } #navigation h1 { background-color: black; border-bottom: 1px solid orange; color: white; } #content { background-color: black; color: white; border: 1px solid orange; font-size: 12px; width: 70%; height: 300px; float: right; } #content h2 {font-size: 20px; text-align:center; text-decoration: underline;} #footer { background-color: black; color: white; border: 1px solid orange; width: 100%; height: 70px; position: absolute; top: 400px; } </style> </head> <body> <div id="header"> <h1>Header</h1> </div> <div id="navigation"> <h1>Navigation</h1> <ul> <li><a href="www.sitename.com/">Home</a></li> <li><a href="www.sitename.com/Forum">Forum</a></li> <li><a href="www.sitename.com/Services">Services</a></li> <li><a href="www.sitename.com/Contact">Contact</a></li> </ul> </div> <div id="content"> <h1>Welcome!</h1> <p>Welcome to the site. How can I help? </p> </div> <div id="footer"> <p>Copyright 2010. All Rights Reserved</p> </div> </body> </html> Next code: There is an extra problem on this, with the headings on the navigation and content.. I wanted to set a background color for navigation title, but why has it not done it properly (check it in web if you will, it has a white space above it). <html> <head> <title>CSS Practice</title> <style type="text/css"> #header { background-color: 8eaf34; border: 1px solid black; border-bottom: 5px solid black; width: 100%; height: 100px; } #header h1 {position:absolute; top: 10px; left: 300px; font-size: 40px; color: black;} #navigation { font-size: 12px; border: 1px solid black; width: 19%; height: 500px; float: left; } #navigation ul {list-style: none;} #navigation h2 { font-size: 20px; background-color: 8eaf34; border-bottom: 1px solid black; } #content { font-size: 12px; border: 1px solid black; width: 80%; height: 500px; float: right; } #content h2 { font-size: 20px; background-color: 8eaf34; border-bottom: 1px solid black; } #footer { font-size: 12px; border: 1px solid black; position:absolute; top: 615px; width: 100%; } </style> </head> <body> <div id="header"> <h1>Website Name</h1> </div> <div id="navigation"> <h2>Navigation</h2> <ul> <li><a href="http://www.websitename.com/">Home</a></li> <li><a href="http://www.websitename.com/forums">Forums</a></li> <li><a href="http://www.websitename.com/services">Services</a></li> <li><a href="http://www.websitename.com/contact">Contact</a></li> </ul> </div> <div id="content"> <h2>Welcome to the site!</h2> <p>Hello, and welcome to the site.</p> </div> <div id="footer"> Copyright 2010. All Rights Reserved. </div> </body> </html>
-
Read, put it to practice, re-read, put it to practice, re-read, re-read, try it alone without any references, then tweak with references when you've finished. That's how I'm learning and I'm now ready to move onto the more intermediate stuff now the beginner stuff has settled in.
-
It's much better to use nesting than <span> tags anyway.
-
Welcome to the forum. I recently joined here with very basic information and lacking the desire to continue due to the vast amount of information to learn. After joining this and being able to communicate to many people in the same situation and who have been in the same situation and you can see how people have gradually got much better over time, it's inspired me to continue and I'm now moving on to the intermediate stuff. It's great to be able to see how other people are going (or have gone) thorugh same as you.
-
Welcome to the forum, I'm quite new also, it's great to get help and reviews on work!
-
Pretty good for a first site, I just don't like the stretched images.
-
Anyone??
-
Hey. Check here may help. The first two results: You gotta pay up! Free. If you're wanting a professional look I'd advise you to pay at least something, even if you don't pay a large amount for a unique design, pay £30 or so for a decent looking template, or for a membership to a site to download a few templates to have a play around with.
-
Hello. I'm new to HTML & CSS but steadily getting the hang of things. I've been searching for some help on the web over the last few days and found some great sites and tools. If anyone has anything to add to this, please PM me or just post, and I'll add them. Here's a list of the sites that have helped me over the the last week or so: w3schools - This is by far the best site to start with. Covers basically every web language out there. HTML Dog - For HTML and CSS. Similar to w3schools, but a little less 'formal'. Great site to move onto after you have some basics as it's less explantory than w3schools and gets to that point. westciv - Great for tools, resources, tutorials, and courses for HTML / CSS. Smashing Magazine - Graphics, web design, web coding articles. Really helpful and varied. Great site http://www.good-tutorials.com/ - Great site for tutorials on HTML, CSS, Photoshop, Javascript, PHP and much more. Check it out for some nice tutorials! Firefox addons for developers - Use Mozilla FIrefox? If so, check out these web development add-ons! This one is especially good. W3C Markup Validation Service - Validate your web documents. Hope this helps, good luck!
-
Ok thank you. Made some fixes to it. I'm going to do some more practicing later on Thanks for the comments guys.