can somebody creat that for me and email it to me at and use this information to create it • The body of the page has a background color of red, and margin of 10px around all sides. • All of the information on the page is contained in a table 700px wide, border of 1, background color of white. • “The Bad News†is an h1 tag, Verdana font. • The left side of the second row is a small table with a border style of double, color red. • “News About Me†is a th tag with a gray background, font size of 10px • The all of the paragraph text (common words) are a Georgia font, size 10px. • The link “Click here for Mars.com†is orange and underlined. It’s hover state is black, with no underline, and visited is black with a line through it. • “Not So Bad News†is an h2 tag, blue font, Verdana. • “Really Bad News†is also and h2 tag, green font, Verdana.
Ok, I was bored and made the following for you. It doesn't use table and is valid XHTML 1.0 Strict and valid CSS Level 2.1. I didn't have time to get exactly the way you wanted and didn't add all your content so you will have to do that yourself also I could tweak it to use less code but that would take more time which I don't have. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page Title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { background-color: #F00; margin: 10px; text-align: center; font-family: Georiga; font-size: 0.9em; } h1, h2, h3, h4, h5, h6 { font-family: Verdana; } #wrapper { margin: 10px auto; width: 700px; border: 1px solid black; background-color: white; text-align: left; } #header { border-bottom: 1px solid black; margin-bottom: 5px; text-align: center; } #colone { float: left; border: 4px double red; width: 285px; margin-bottom: 5px; margin: 0 0 5px 5px; } #colone h2 { background-color: gray; margin-top: 0; margin-bottom: 0; text-align: center; padding: 5px; } #colone a:link { color: orange; text-decoration: underline; } #colone a:visited { color: black; text-decoration: line-through; } #colone a:hover { color: black; text-decoration: none; } .news { border-top: 4px double red; padding: 20px; margin-top: 0; margin-bottom: 0; } #coltwo { border: 1px solid black; width: 355px; float: right; padding: 0 5px 5px 5px; margin: 0 5px 5px 5px; } #headingstyleone { color: blue; } #headingstyletwo { color: green; } #clear { clear: both; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>The Bad News</h1> </div> <div id="colone"> <h2>News About Me</h2> <p class="news">Text text</p> <p class="news">la la <a href="#">link</a></p> </div> <div id="coltwo"> <h2 id="headingstyleone">Not So Bad News</h2> <p>la la la</p> <h2 id="headingstyletwo">Really Bad News</h2> <p>la la</p> </div> <div id="clear"></div> </div> </body> </html> HTML:
Hm. And you could have gotten paid. @ OP You should not expect people to just give you free code. At least attempt it and try to learn something on the way. If you don't then you need to expect to pay people ~eric
What did I say? lol. I want to be the best CSS person in the world. Too bad I am having trouble right now with Paul O'Briens CSS quiz number 12 at sitepoint. People have already submitted answers and I am stuck. I know I can do it very easily if I use css3 but I am trying to use css 2.1 and am googling css hacks and browser specific's like -moz- etc. It is really frustrating because I don't want to use css3 even though the answer is there. :l No. He hates it obviously. ~eric
If it makes you feel any better I never did get it working for IE6 with pure borders (instead it got some /// and \\\ text). #13 I just need time, I was happily crunching through it on Saturday until my internet connection puked. : ( Hope to have it done tues or wed... And yes you asked, I'm a girl. And no, I'm not one of the ones who are good at design. I'm better at code. My220x-- I also sometimes do stuff free for people, but I think you just did someone's homework so they could get a nice grade without lifting a finger : ) In which case, this kid's likely to become a Chief Executive Officer at some large, successful company. : )
Me? And I think I would rather work for a company because I could not imaging working for like 3 clients at a time who have no idea what they want and they have no design aspects. I would rather work for just one company that way I can just code by myself in an area by myself and I would get done faster then some guy hovering over me telling me to fix every simple thing
For future reference you dont really need CSS to create a page like that. Next time try using code similiar like this: adjust the "<div style="width:415px; height:58px; border:3px solid #FFFF00;" align="center">News about me</div>" accordingly to fit similiar to the boxes in that page
That is horrible code. CSS should not be mixed with html (inline style). CSS should be put in a seperate document. As with javascript. That code doesn't even have a doctype. Also I believe the attribute align="center" is depreciated except in table elements such as tr, td, th, etc...
Eric, I was referring to the OP. If it was homework and s/he got it done for them by someone else, they're ready to take on the business world because it's full of people who get successful on the backs of others : ) Agreed on easydolla-- inline CSS destroys the whole point of css. You might as well go back to tabled layouts, font tags and the align property. Oh wait, align was even in there! Inline CSS does have a place: HTML email, and RSS feeds and those sorts of things, where inline is your only option (unless you want to XSLT that).
If you saw some the code from CMS(s), sometimes its just faster to inline it Isn't a real excuse but sometimes its just more expedient. I was just working on a joomla component where the nesting was so deep (how deep was it...) web developer toolbar set to Outline Current Element would scroll off the screen. OSCommerce (table based hell) has to be the worst case. On the bright side of that, the code was a toolbar and reused so I didn't feel too bad about using inline CSS.
Oh yea css has to be used inline sometimes but when your applying inline style to divs and p tags, etc, there is no excuse for that. It doesn't take long to open up a css file and copy n paste it in there. Now if your just designing the site and coding it, then I myself would just put the css in the head section then when im done, just transfer to a different document. @ the guy who said the guy he was talking about was OP. Mb @ the post above I hate it when huge scripts such as wordpress, vbulletin, etc have like this in their html output //Just whippin up some code. Might be wrong <link rel="stylesheet" src="something/style/style.css" /> <link rel="stylesheet" src="something/style/style2.css" /> <link rel="stylesheet" src="something/style/iestyle.css" /> Code (markup): And inside each of them is like 3 import statements. How in heck are you supposed to edit the css if you cant even find the file. You can firebug but you might want the actual users seeing the site to have the same experience ~eric
Sweet Jesus yes, that's terrible code... when I was looking at shopping carts, I checked them out. They are the oldest though, that might explain the tables. ZenCart on the other hand doesn't have that excuse. Yeah, sure, they use divs, but they use them like this: <div> <div> <div> <div> <div> <div> <div> <div> <div><h1>Hello world! We're Zen Cart!</h1></div> </div> </div> </div> </div> </div> </div> </div> </div> Code (markup): Ew.