.:Piper_2051:. 0 Report post Posted November 8, 2009 Ok so I got the HTML done (I think) but I have no idea of how to do CSS or give the page more form... Im posting the code below for ideas... <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>.:Hire A Piper: Piper2051:.</title><meta name="Wedding Bagpipes Edmonton Funeral Ceremony Scotland Highland" content="" /><meta name="Hire A Piper" content="" /><link href="default.css" rel="stylesheet" type="text/css" media="screen" /></head><body><!-- start header --><div id="wrapper"><div id="header"> <div id="logo"> <h1><a href="#">Hire A Piper</a></h1> <p><a href= By: Piper_2051</a></p> </div> </div></div><!-- end header --><!-- star menu --><div id="menu"> <ul> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Tunes</a></li> <li><a href="#">Contact</a></li> </ul></div><!-- end menu --><!-- start page --><div id="page"> <!-- start ads --> <div id="ads"><a href="#"><img src="images/ad160x600.gif" alt="" width="160" height="600" /></a></div> <!-- end ads --> <!-- start content --> <div id="content"> <div class="post"> <div class="title"> <h2><a href="#">About Piper2051</a></h2> <p><small> <a href="#">Piper2051 AKA James Haslip</a></small></p> </div> <div class="entry"> <p><img src="image" alt="" width="120" height="120" class="left" /> <strong> </strong> </p> <p></p> </div> <p class="links"> <a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p> </div> <div class="post"> <div class="title"> <h2><a href="#">About </a></h2> <p><small> <a href="#"></a></small></p> </div> <div class="entry"> <p> </p> </div> <p class="links"> <a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p> </div> </div> <!-- end content --> <!-- start sidebar --> <div id="sidebar"> <ul> <li id="categories"> <h2> </h2> <ul> <li><a href="#"> </a> </li> <li><a href="#"> </a> </li> </ul> </li> <li> <h2> </h2> <ul> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> </ul> </li> <li> <h2> </h2> <ul> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> </ul> </li> </ul> </div> <!-- end sidebar --></div><!-- end page --><!-- start footer --><div id="footer"> <p class="legal"> ©2009 P4H Inc. All Rights Reserved. • • </div></div><!-- end footer --></body></html> I actually dug this out of an OLD file I had from way back in the day and just tweaked it a little to fit my needs, just can remember what comes next...basically what I need is someone to help me with figuring out how to give the page form and style... right now its lack lustre and in need of colour...Thanks in advance. Share this post Link to post Share on other sites
truefusion 3 Report post Posted November 10, 2009 What kind of colors are you looking for? And am i right to assume that you are looking for a three column layout? Or is the current structure just for testing things out, perhaps to gain some inspiration? Structure with CSS normally concerns margin, padding, width and the property "display."Here's a quick stylesheet you can use or learn from: <style>body { margin: 0; padding: 0;}div#header { background-color: #EEE; padding: 5px; text-indent: 15px;}div#header h1 a { color: black; text-decoration: none;}div#menu ul { list-style: none; margin: 0; padding-left: 15px; background-color: black;}div#menu ul li { display: table-cell;}div#menu ul li a { display: block; color: white; padding: 5px; padding-left: 7px; padding-right: 7px; text-decoration: none;}div#menu ul li a:hover { background-color: #EEE; color: black;}div#menu ul li.current_page_item a { background-color: white; color: black;}div#page > div { display: table-cell; vertical-align: top; padding: 15px;}div#page div#ads { background-color: #EEE; width: 165px; min-width: 165px;}div#page div#content { width: 100%;}div#page div#sidebar { background-color: #EEE; width: 165px; min-width: 165px;}div#footer { background-color: black; color: white; text-align: center; padding: 15px;}</style> Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted November 10, 2009 Also, you might want to review your Meta tags.Meta tags are a "name/value pair". The first piece of information is the name of the meta-data you are supplying and the second piece of information is the data relating to the meta-data.The first meta tag is valid and a useful bit of information. <meta http-equiv="content-type" content="text/html; charset=utf-8" />The remainder are useless as meta-data.<meta name="Wedding Bagpipes Edmonton Funeral Ceremony Scotland Highland" content="" /><meta name="Hire A Piper" content="" />Meta-data is "data about data", meaning: the meta tag is used to describe your data.Some valid meta tags are as follows:<meta name="generator" content="Bluefish"><meta name="author" content=""><meta name="date" content=""><meta name="copyright" content=""><meta name="keywords" content=""><meta name="description" content=""><meta name="ROBOTS" content="NOINDEX, NOFOLLOW"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="content-style-type" content="text/css"><meta http-equiv="expires" content="0"><meta http-equiv="refresh" content="5; URL=http://">The above meta tags can be used to describe the meta data about a file. In particular, these meta tags (when completed) will describe the 'generator' - which editor you used to write the code, who holds the copyright, what your keywords for the search engines are, a description of the file, whether you want the search bots to follow and/or index the file, what type of parsing the Browser should use for the file, what the style content type is, when the information expires, and how often you want an automatic refresh done on the page from the server.I would encourage you to correct your meta tags. There is no sense using the current meta tags since they are terribly incorrect.Switch what you have for the 'name' as the 'content' and define a standard value for the 'name' of the meta tags. Is the first one your keywords? They should be a comma separated list of words/phrases. Is the other one the Author name? You decide and let the search bots handle them accordingly. Share this post Link to post Share on other sites
anwiii 17 Report post Posted November 10, 2009 first of all, you need to include your html tag. you have your closing tag but not your opening one.title is good, but you aren't making sense in your metatags. follow jhaslips correct format for meta tags. there are two correct formats for metatags. yours isn't one of them. the most important metatags would be the description and keywords.body needs lots of work and i don't know exactly what you are intending.do you want a couple columns as truefusion asked. is everything going to be on one page only?i guess what you have is a start. i suggest creating a seperate css file if you plan on using it.i would add your html tag, correct your metatags, and think about how you want your layout so we can be more helpfull. Share this post Link to post Share on other sites
kittycatlover763 0 Report post Posted November 12, 2009 hi there! good luck with the html structure. html is very hard in the beggining . but if you keep at it you will be like me and have memorized almost every html tag :]first off, you will need to "declare" your doctype. (i noticed you didn't have this ) put this at the verrry top of your html document: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://forums.xisto.com/no_longer_exists/;your html structure looks pretty valid! but we also need to include meta info for the search engines to display. by doing this you can gain more traffic by listing important keywords/info about your site , these go in the head section : <meta name="KEYWORDS LOCATED IN YOUR SITE. SEPERATE EACH KEYWORD WITH A COMMA "> <meta name="description" content="THIS SECTION IS WHAT SEARCH ENGINES WILL SHOW BENEATH THE TITLE OF YOUR SITE, EDIT THIS TO MAKE IT A TINY DESCRIPTION OR SO. ">i noticed you had meta name, but it's meant to be for keywords. use meta name="desciptions" for the description.using css you can postion where everything will go by editing the top and left attributes like so : #content {position : absolute;top : HOW FAR FROM THE TOP;left : HOW FAR TO THE LEFT;width : HOW BIG;text-align : justify;}make sure you measure in px. for colors i recommend you use hex codes. there's a lot of online resources that display list of hex codes.you can change the color of objects or div's by specifying the background-color : #content {background-color : #HEXCODE;background-img : url('BACKGROUNDIMG;);}one last thing i recommend is that you use some type of scripting that will allow you to display your basic layout structure on every page without having to repeat it in every document (for example php) if you need help with that , just ask :] . i didn't feel like including detailed information on this subject since you didn't ask about it, but it's something i do recommend to make it easier to switch your layout and to update your documents :] Share this post Link to post Share on other sites
