SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slight Layout problems

    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 Code:
    <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
    Code:
    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

  2. #2
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have now moved the doc type to the top of the html where it is supposed to be, d'oh, and that has fixed the internet explorer issue.
    However other problems persist and now it seems the links menu on the right hand side has disappeared!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    You have a number of errors where you have used ids more than once.

    e.g.
    Code:
     <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>
    id's are unique and can only be used once per page. Indeed on the example above you only need the id on the parent as all the inner elements can be targetted without classes or ids.

    Code:
     <ul  id="Links">
        <li><a href="#">Code Snippets</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">Blog</a></li>
     </ul>
    The inner elements can be targetted with:

    #links li{color:#000} etc...

    Lists have a default left margin and in some browsers a default left padding so you need to remove both.

    #links{margin:0;padding:0}

    Also don't bother saying div#links as it is a waset of space and makes the browser work harder than it needs to. Just #links is fine.

    It's a bad idea to create explicit global styles like this:

    Code:
     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;}
    Unless you are 100% sure that every p element you use is going to be styled like that which is highly unlikely. You would rarely give a width to p elements as their width should usually be controlled from the context they are in. It's usually the parent container that would be sized to fit the space and then the content just inserted into that container without the need for any more widths.

    You can't do this either:

    Code:
    <ul id="skills">Skills
        <li><em>C and C
    The word Skills is in no-mans-land and no content is allowed at that position. It must be inside list tags. You probably should have done something like this:

    Code:
    <h3>Skills</h3>
    <ul id="skills">
    <li><em>C and C etc......
    When you have anchors make sure you put a dummy path when testing . e.g. <a href="#'"> and not just <a href>

    If you want horizontal content then you need to float the elements but they will need an appropriate width if they hold fluid content. To make content start after a floated element you will then need to add clear:both to the element. Also remember that when you float something the float must come higher in the html than the content you want to wrap around it.

    Work your way through the above and then validate your html and fix the missing tags (as well as the doctype you mentioned) and once tidied up post the result and we can take it step by step if you are still having problems
    Last edited by Paul O'B; Sep 21, 2011 at 01:50.

  4. #4
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mr Paul O'B - thank you very much for your pointers. Out of courtesy even if I fix it all by myself I will post the result here so you can see the result of your comments. Thanks again

  5. #5
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firebug and the hints helped me an awful lot - but there are still a couple of things happening - due to some css fundamentals I must be missing

    Here's the latest state of the site:

    6169926057_610083893a_b.jpg
    6170464392_ccb4abcb6b_b.jpg

    This is via the heavily edited HTML and CSS as follows

    HTML Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>Lloyd-Crawley.com(ロイドクラレエ)</title>
        <link rel = "stylesheet" type="text/css" href="websitestyle.css"/>
        <meta name="description" content="Lloyd Crawley programmer online site"/>
        <meta name="keywords" content="C++,games,programmer,opengl,directx,japanese,japan">
        <meta name="author" content="Lloyd Crawley">
      </head>
    
      <div id="page">
    
        <div id="MainTitle">
          <h1>Lloyd Crawley(ロイドクラレエ)</h1>
        </div>
    
        
        <div id="SubHeadings">
          <div id="EnglishSub"><h2>Game Programmer</h2></div>
          <div id="JapaneseSub"><h2>ゲーム プログラマー</h2></div>
        </div>    
    
        <div id="MainArea">
            <div id="EnglishArea">
        	  <p>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>
        
        	  <h3>Skills</h3>
        	  <ul id="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>
            </div>
     
            <div id="ProfilePic"> 
              <img src="kitten2.jpg"/>
            </div>
       
            <div id="JapaneseArea">
            <p>Lloyd Crawley はゲーム業に入りたいプログラマーです。 test testtest test test test test test test test test 
           test test test test test test test test test test test test test test test test test test test 
           test test test test test test test test test test test test test test test test test test test </p>
            </div>
        </div>
    
        <div id="Contact">
        <p>Email Address / メール: lloyd.crawley@gmail.com</p>
        </div>
    
        <div id="Links">
        
        <ul>
          <li><a href="#">Code Snippets</a></li>
          <li><a href="#">Works</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
        
        </div>
    
      </div>
    
    </html>
    Code:
    body {
         background: none repeat scroll 0% 0% red;
         margin: 0px;
    }
    
    #page {
         font-family: "Arial";
         margin-left: 20px;
    }
    
    #MainTitle, #SubHeadings {
         color: white;
         display: inline-block;
    }
    
    div #SubHeadings
    {width:20%;}
    
    #SubHeadings div {
         padding-left: 20%;     
    }
    
    #SubHeadings h2 {
         font-size: 200%;
    }
    
    #MainTitle {
         width: 50%;
    }
    
    #MainTitle h1 {
         border-radius: 35px 35px 35px 35px;
         border: 5px solid white;
         font-size: 400%;
         padding: 20px;
    }
    
    
    
    #MainArea, #Contact, #Links {
         background: none repeat scroll 0% 0% white;
         border-radius: 35px 35px 35px 35px;
         color: red;
         font-weight: bold;
    }
    
    #Contact, #Links {
         text-align: center;
         width: 20%;
    }
    
    #Links {
         padding-bottom: 5%;
         padding-top: 5%;
    }
    
    #MainArea {
         font-size: 20px;
         text-align: justify;
         width: 80%;
    }
    
    #MainArea div {
         display: inline-block;
         padding: 5px 5px 5px 25px;
         vertical-align: top;
         width: 33%;
    }
    
    ul {
         list-style-type: none;
         padding-left: 0px;
    }
    
    #MainArea ul li {
         padding-bottom: 30px;
    }
    
    #Links a {
         color: red;
         font-size: 40px;
         padding: 20px;
         text-decoration: none;
    }
    
    #Links a:hover {
         background: none repeat scroll 0% 0% red;
         border-radius: 35px 35px 35px 35px;
         color: white;
    }
    
    #Contact {
         font-size: 25px;
    }
    
    #Links li {
         padding: 35px;
    }
    
    #MainArea ul li em {
         font-style: normal;
         text-decoration: underline;
    }
    
    #MainArea div img {
         width: 100%;
    }
    The main questions I have are

    1) The main text area with div id "MainArea" has all of its children that are divs to have 33% width of the available space, and are inline-block, but for some reason the test image has gone to the right and the next div element in the html after the image is underneath the first div element on the container instead of to the right of the test image. My brain hurts.

    2) the sub headings next to my name and the div that they are in make no sense layout wise - in firebug I check their
    box dimensions re: padding etc but after tweaking they're still not lined up how I want...

    thanks again

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MrWulf View Post
    1) The main text area with div id "MainArea" has all of its children that are divs to have 33% width of the available space, and are inline-block, but for some reason the test image has gone to the right and the next div element in the html after the image is underneath the first div element on the container instead of to the right of the test image. My brain hurts.
    You have added padding to the elements so their overall width is now much wider that the 33% you set and thus there is no room for them to align horizontally anymore. If you add some percentage padding then reduce the width they should fit. You always need to leave a little leeway with inline block because white space nodes get in the way just like the space between words.

    Code:
    #MainArea div {
    	display: inline-block;
    	padding: 5px 1% 5px 2%;
    	vertical-align: top;
    	width: 30%;
    }
    * html #MainArea div{display:inline}/* inlne block fix for ie6 and must follow original rule*/
    *+html #MainArea div{display:inline}/* inlne block fix for ie7 and must follow original rule*/
    You need the fixes above for ie6 and 7 and will need to add them for any other inline-block elements you use.

    Also be careful width this:

    #MainArea div{styles etc...}

    If you later on need an extra div in that section in the inner content then it will be hit by those rules also. You would have been safer to style the actual parents by classname with the rule above rather that hitting every single div that may appear. It's fine as you have it now but I can see that at some stage you will need extra divs in the middle and come unstuck.


    2) the sub headings next to my name and the div that they are in make no sense layout wise - in firebug I check their
    box dimensions re: padding etc but after tweaking they're still not lined up how I want...

    thanks again
    When using inline-block remember to set the vertical-alignment as browsers vary on the default. The usual is vertical-align:top and it looks like that's what you wanted for your main title. There is actually no need for that maintitle div as all styles could be applied to the h1 directly and save mark up.

    Large border-radius dimensions will clip your content so ensure there is enough padding to protect the content inside.

    Remember that padding and borders add to the overall width of elements so if your issues are one of spacing then this must be taken into account.

    You seemed to have tidied up the page quite a bit although I'm not keep on your mixed case names. e.g. you have #page but then you have #Links. Choose one or the other and be consistent. I prefer all lower-case and use hyphens rather than camelCase but that's just me

    I couldn't really see what you were aiming for so couldn't be more specific
    Last edited by Paul O'B; Sep 22, 2011 at 07:58. Reason: typo

  7. #7
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help again Paul. I'm afraid the camel case abuse comes from years of C and C++ and a dislike of underscores, that seemigly crosses over into hyphens for CSS! I have adjusted the widths of the internal divs and it looks a lot more how I would like it. However, despite some tweaking of other div widths the 'links' div isn't popping into the spot I'd like it to.

    6171917047_e2154d16ae_b.jpg
    6172446458_4485f69ece_b.jpg

    Here is my intended appearance:

    6171845605_033a329556_b.jpg

    Here is the new CSS
    Code:
    body {
         background: none repeat scroll 0% 0% red;
         margin: 0px;
    }
    
    #Page {
         font-family: "Arial";
         margin-left: 20px;
    }
    
    #Page div
    {display:inline-block;vertical-align:top;}
    
    #MainTitle, #SubHeadings {
         color: white;
         display: inline-block;
    }
    
    div #SubHeadings
    {width:40%;}
    
    
    #SubHeadings div {
         padding-left: 10%;   
         display: block;  
    }
    
    #SubHeadings h2 {
         font-size: 200%;
    }
    
    #MainTitle {
         width: 40%;
    }
    
    #MainTitle h1 {
         border-radius: 35px 35px 35px 35px;
         border: 5px solid white;
         font-size: 350%;
         padding: 20px;
    }
    
    
    
    #MainArea, #Contact, #Links {
         background: none repeat scroll 0% 0% white;
         border-radius: 35px 35px 35px 35px;
         color: red;
         font-weight: bold;
    }
    
    #Contact, #Links {
         text-align: center;
         width: 15%;
    }
    
    #Links {
         padding-bottom: 2.5%;
         padding-top: 2.5%;
    }
    
    #MainArea {
         font-size: 25px;
         line-height: 40px;
         text-align: justify;
         width: 75%;
    }
    
    #MainArea div{
         display: inline-block;
         padding: 5px 5px 5px 25px;
         vertical-align: top;
         width: 30%;
    }
    
    ul {
         list-style-type: none;
         padding-left: 0px;
    }
    
    #MainArea ul li {
         padding-bottom: 30px;
         padding-right: 20px;
    }
    
    #Links a {
         color: red;
         font-size: 40px;
         padding: 20px;
         text-decoration: none;
    }
    
    #Links a:hover {
         background: none repeat scroll 0% 0% red;
         border-radius: 35px 35px 35px 35px;
         color: white;
    }
    
    #Contact {
         font-size: 25px;
    }
    
    #Links li {
         padding: 35px;
    }
    
    #MainArea ul li em {
         font-style: normal;
         text-decoration: underline;
    }
    
    #MainArea div img {
         width: 100%;
          border-radius: 35px 35px 35px 35px;
         border: 5px solid white;
         margin-top:10%;
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You still didn't allow for the padding.

    You can't mix percentage width and pixel padding because it won't add up. If you want pixel padding then make the container the percentage width and then add the padding to the widthless inner elements.

    If you want the contact details in the header section then put it there to start with and not at the end of the html.

    I think this is what you were trying to achieve (although I may have messed up some of the inner styling a bit).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Lloyd-Crawley.com(ロイドクラレエ)</title>
    <link rel = "stylesheet" type="text/css" href="websitestyle.css">
    <meta name="description" content="Lloyd Crawley programmer online site">
    <meta name="keywords" content="C++,games,programmer,opengl,directx,japanese,japan">
    <meta name="author" content="Lloyd Crawley">
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    ul {
    	list-style-type: none;
    	margin:0;
    	padding:0;
    }
    body {
    	background:red;
    	color: white;
    }
    #page {
    	font-family:Arial, Helvetica, sans-serif;
    	margin:0 20px;
    	zoom:1.0;
    }
    #header {white-space:nowrap;width:100%}
    #MainTitle, #SubHeadings, #Contact {
    	color: white;
    	display: inline-block;
    	width: 36%;
    	padding: 20px 2%;
    	word-wrap:break-word;
    	overflow:hidden;
    	vertical-align:middle;
    	white-space:normal;
    }
    * html #MainTitle, * html #SubHeadings, * html #Contact { display:inline }/* ie6 inline-block fix*/
    *+html #MainTitle, *+html #SubHeadings, *+html #Contact { display:inline }/* ie7 inline-block fix*/
    #SubHeadings { width:30% }
    #Contact { width:20% }
    #SubHeadings h2 { font-size: 200%; }
    h1#MainTitle {
    	border-radius: 35px 35px 35px 35px;
    	border: 5px solid white;
    	font-size: 350%;
    }
    #MainArea, #Contact, #Links {
    	background:white;
    	border-radius: 35px 35px 35px 35px;
    	color: red;
    	font-weight: bold;
    }
    #Contact, #Links { text-align: center; }
    #Links {
    	padding-bottom: 2.5%;
    	padding-top: 2.5%;
    	margin:0 0 0 1%;
    }
    #MainArea {
    	font-size: 25px;
    	line-height: 40px;
    	text-align: justify;
    	width: 75%;
    }
    #Links a {
    	color: red;
    	font-size: 40px;
    	padding: 20px;
    	text-decoration: none;
    	display:block;
    }
    #Links a:hover {
    	background:red;
    	border-radius: 35px 35px 35px 35px;
    	color: white;
    }
    #Contact { font-size: 25px; }
    #Links li { padding: 35px; }
    #ProfilePic { background:blue }/* for testing only */
    #MainArea, #EnglishArea, #JapaneseArea, #Links, #ProfilePic {
    	display:inline-block;
    	vertical-align:top;
    	word-wrap:break-word;
    }
    #EnglishArea, #JapaneseArea, #ProfilePic {
    	padding: 5px 1% 5px 1%;
    	vertical-align: top;
    	width: 30%;
    }
    #Links { width:23%; }
    * html #MainArea, * html #EnglishArea, * html #JapaneseArea, * html #Links, * html #ProfilePic { display:inline }/* ie6 inline-block fix */
    *+html #MainArea, *+html #EnglishArea, *+html #JapaneseArea, *+html #Links, *+html #ProfilePic { display:inline }/* ie7 inline-block fix */
    #MainArea ul li {
    	padding-bottom: 30px;
    	padding-right: 20px;
    }
    #MainArea ul li em {
    	font-style: normal;
    	text-decoration: underline;
    }
    #ProfilePic img {
    	width: 95%;
    	border-radius: 35px 35px 35px 35px;
    	border: 5px solid white;
    	margin-top:20px;
    }
    </style>
    </head>
    
    <div id="page">
    		<div id="header">
    				<h1 id="MainTitle">Lloyd Crawley(ロイドクラレエ)</h1>
    				<div id="SubHeadings">
    						<h2 id="EnglishSub">Game Programmer</h2>
    						<h2 id="JapaneseSub">ゲーム プログラマー</h2>
    				</div>
    				<p id="Contact">Email Address / メール: lloyd.crawley@gmail.com</p>
    		</div>
    		<div id="MainArea">
    				<div id="EnglishArea">
    						<p>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>
    						<h3>Skills</h3>
    						<ul id="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>
    				</div>
    				<div id="ProfilePic"><img src="kitten2.jpg"></div>
    				<div id="JapaneseArea">
    						<p>Lloyd Crawley はゲーム業に入りたいプログラマーです。 test testtest test test test test test test test test 
    								test test test test test test test test test test test test test test test test test test test 
    								test test test test test test test test test test test test test test test test test test test </p>
    				</div>
    		</div>
    		<div id="Links">
    				<ul>
    						<li><a href="#">Code Snippets</a></li>
    						<li><a href="#">Works</a></li>
    						<li><a href="#">Blog</a></li>
    				</ul>
    		</div>
    </div>
    </html>

  9. #9
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    MrWulf, just as a slight curiosity, I was wondering why you styled your background as

    Code:
    background: none repeat scroll 0% 0% red;
    Isn't that the same as

    Code:
    background: red;
    You don't need positioning values if you have nothing to position and you don't need to specify background: none unless you are overriding a less specific style, which would be odd in this case since you are styling the body not a more specific element.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sdt76 View Post
    MrWulf, just as a slight curiosity, I was wondering why you styled your background as

    Code:
    background: none repeat scroll 0% 0% red;
    Isn't that the same as

    Code:
    background: red;
    I'm guessing it was copied frOm Firebug which shows all the default values. I changed it to just red in my example also

  11. #11
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdt76 View Post
    MrWulf, just as a slight curiosity, I was wondering why you styled your background as

    Code:
    background: none repeat scroll 0% 0% red;
    Isn't that the same as

    Code:
    background: red;
    You don't need positioning values if you have nothing to position and you don't need to specify background: none unless you are overriding a less specific style, which would be odd in this case since you are styling the body not a more specific element.
    Ah! The magic of firebug. I simply set it as
    Code:
    background:red
    but after it went through the live edit feature in firebug it is somehow got rewritten/interpreted by the editor as

    Code:
    background: none repeat scroll 0% 0% red
    Since I cant save in firebug itself I've had to copy/paste the above output back into my original css file.

  12. #12
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul! You're too kind sir. I will give that a test in a sec, it's 00:50 in the UK and I will reply tomorrow with hopefully success!

  13. #13
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul that works fine, it looks fantastic!
    Thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •