September 20, 201114 yr Hi All I'm a web programming n00b, been a programmer in c++, python etc for some time and always wanted to learn web programming so started a couple of weeks ago. I'm trying to make myself a website and have managed to make something like the following example, with some problems numbered and circled. My Html and css follows. After some experimentation, research and tweaking I still cannot understand why the page looks the way it does. 1) Even though the list has been given similar qualities to the paragraph above it the font-weight is much slimmer and there is an unintentional indentation 2) The sub heading h2 tags next to my main heading aren't lined up how I would like them to be 3)Unintentional indent on the list of links on the right hand side 4) for some reason the text "email" and "address" are on consecutive lines as opposed to the same line, although there is sufficent width for them to be on the same line. 5) I need the image in the centre between the two paragraphs, although it is here (the kitten is a test image!) 6) The second paragraph has moved down the page since inserting the list of 'skills' on the left hand side, before it looked like this: The above is more or less the kind of format I want to keep, except with a list of skills to be added to either side of the test picture Code is as follows: <html> <head> <title>Lloyd-Crawley.com(ロイドクラレエ)</title> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <link rel = "stylesheet" type="text/css" href="websitestyle.css"/> </head> <div class="page"> <div class ="title"> <h1>Lloyd Crawley(ロイドクラレエ)</h1> <h2 id="englishSub">Game/Web/App Programmer</h2> <h2 id="japaneseSub">ゲーム、ウェッブ、アッププログラマー</h2> </div> <div id="textarea"> <p class="english">Lloyd Crawley is a programmer looking to realise his ambition to get into the Japanese games industry. After entering a disappointing degree he decided to take responsibility for his own education, quit his degree and work full time again to save money and study game development in the evening. After sacrificing most of his social life for a year he has now come to japan for the last stage of his plan.</p> <ul id="skills">Skills <li><em>C and C++:</em>Including Object oriented programming, templates</li> <li><em>3D Programming:</em> Experience with Open GL, Direct X and good knowledge of 3D maths, experience with shaders in HLSL/Cg and GLSL, experience with animation programming</li> <li><em>Maths and Physics:</em> Kinematics, Rigid Body Dynamics</li> <li><em>Scripting:</em> Lua, python, experience in data driven design</li> <li><em>FMOD:</em> Sound Programming</li> </ul> <img src="kitten2.jpg"/> <p class="japanese">Lloyd Crawley はゲーム業に入りたいプログラマーです。 </p> </div> <div id="contact"> <p class="contact">Email Address / メール: lloyd.crawley@gmail.com</p> </div> <div id="Links"> <ul id="links"> <li id="links"><a href>Code Snippets</a></li> <li id="links"><a href>Works</a></li> <li id="links"><a href>Blog</a></li> </ul> </div> </div> </html> Css as follows body{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px } div.page {background: red; height:100%; width:100%; font-family:"arial"; color:white; padding:5px;} div#textarea,div#contact, div#skills,div#links {background-color:white; color:red; margin-left: 0.5%; margin-right: 1%; -moz-border-radius: 35px; border-radius: 35px;} div#textarea {float:left; font-size:16px;width: 80%;} div#contact, div#links {width: 17%;position:absolute;margin-left:81%;} div#contact {font-size:16px; height:22.2%; margin-top: 2%;} div#links {margin-top:35%;height:65%;} div#skills {padding: none;font-weight:bold; margin-left:0%;} h1,h2,h3 {font-size:auto;} h1 { text-align:left; margin-left: 0.5%; margin-right: 2%; float: left; -moz-border-radius: 35px; border-radius: 35px; border-color:white; border-size: 10px; border-style: solid; padding: 0.5em;} h2 {display: block; line-height:20px; width:33%; float:left;} h3#englishskills { text-decoration: underline; float:left;} ul#links {list-style-type:none;padding-left:none;text-align:center;} li#links {font-size: 26px; padding: none; text-align:center; line-height:45px; text-align:center;} ul#skills {list-style-type:none;padding-left:none;width:33%;} a {text-decoration:none; font-weight: bold; -moz-border-radius: 35px; border-radius: 35px; display:block; color:red;} a:hover {background:red; color:white;} p {width: 33.3%; font-family:"arial"; text-align:justify; font-weight: bold; padding:10px;} img {width: 25%; height: auto; float: left;padding: 1em;} .english {float: left;} .japanese {margin-left: 58.3%;width: 38.3%;} em {text-decoration:underline;} Also, there are problems with the rounded corners in IE - even though it is ie version 9. Any hints? Thankyou so much in advance
September 20, 201114 yr Author I've now moved the DOCTYPE tag where it is supposed to be, this has solved the ie issue but has made the layout look even more crazy than what it was! Please help
September 20, 201114 yr Author Thankyou, I have briefly flirted with firebug due to a CSS/HTML/javascript from the ground up google course. I will learn to use it properly. Thanks!
September 20, 201114 yr Author After some more poking around with firebug and going over some more css selection rules, my html is messily marked up. Thanks for the help so far, I think if I plan more carefully I can get this fixed.
September 20, 201114 yr http://www.w3schools.com/web/web_validate.asp <-- that's a nice tool if you can't spot any errors on your page.
September 21, 201114 yr I may be a bit late to come to the party, but I'll leave my two-cents' worth anyway. 1) Even though the list has been given similar qualities to the paragraph above it the font-weight is much slimmer and there is an unintentional indentation 2) The sub heading h2 tags next to my main heading aren't lined up how I would like them to be 3)Unintentional indent on the list of links on the right hand side 4) for some reason the text "email" and "address" are on consecutive lines as opposed to the same line, although there is sufficent width for them to be on the same line. 5) I need the image in the centre between the two paragraphs, although it is here (the kitten is a test image!) 6) The second paragraph has moved down the page since inserting the list of 'skills' on the left hand side, before it looked like this: Also, there are problems with the rounded corners in IE - even though it is ie version 9. Any hints? In your CSS, the "english" class has 'font-weight: bold;', but this class is only applied to the paragraph, not the list items. Hence the difference. The indentation would be a standard indent for UL and OL items, it's built-in so you'll need to set 'margin-left: 0;' for UL and/or OL items yourself. First off, I'd suggest you change the current class="title" to id="header" (for clarity), then move the div with id="contact" into that header. From here, I'd say pick one of these two options: id="header" should have 'position: relative;', and it's children (website name, subtitles and contact) should have 'position: absolute;', using 'left: x;', 'right: x', etc to position them. (read more) id="header" should have 'overflow: auto;' (prevents the height collapsing when it contains floated elements), then it's children can then be floated either left or right to get them into position. (read more) [*]As mentioned in (1): The indentation would be a standard indent for UL and OL items, it's built-in so you'll need to set 'margin-left: 0;' for UL and/or OL items yourself. [*]This is because of the 'width: 33.3%;' rule on all 'p' elements. Rather make these either class or id specific. [*]If you want the list of skills below that paragraph, place a wrapping div around the 'p' and 'ul' tags, and set that to 33.3% width and float it left. Then remove the 'width: 33.3%;' from 'p' (see previous point) and set it on the wrapping div. [*]This would've happened because the image was not floated. So, you ended up with 4 elements in a row: floated, floated, not-floated, floated. Any floated element, 'floats' in the direction you specify. A non-floated element after a floated element, simply starts on the next 'line'. Now that all that's out of the way, I have one other suggestion for you... It may be easier to use a website framework template instead of coding it all from scratch. If you want a fixed-width site, have a look at 960gs, for the same features in a fluid-width site, try the Fluid 960 Grid System. It can be a bit confusing the first time you look at it, so I'd suggest play around with the original 960gs first. The whole time keeping in mind that before ANY element is supposed to start on it's own 'line' on the page, there must be a div with class="clear". Once you see the pattern, it becomes easier than drinking beer. Hope this all makes sense; if you need clarification on any points, just ask..
Create an account or sign in to comment