#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    How can I adjust the text to be more above and to the right of a image?


    For a school assignment I'm making a website with career fair tips

    Code:
    <!DOCTYPE html>
    <html>
      <head>
    
    
    	<style type="text/css">
    	body{ margin:0em 10em 3em 10em;  }
       .hcenter{text-align: center ;}
    	.icenter {<!--margin:auto-->vertical-align:middle;<!--display:block;-->}
    	a {color:blue; text-decoration:none;}
    	a:hover { text-decoration:underline; }
    	a:active  {color:gold;}
    	li.attention { font-style:italic;text-decoration:underline;} 
    	h2,h3,h4,h5 {color:firebrick; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
    	nav {background-color:black;line-height:200%;}
    	nav a {color:white; font-weight:bold;}
    	nav li {display:inline; text-decoration:none;padding-right:40px;}
    	p em {color:firebrick;}
    	ul{list-style-type:square}
    	ol{list-style-type:upper-alpha;}
    	ul.check li {list-style-image: url(green_checkmark_sm.jpg);}
    	.title { color:firebrick; font-size:200%; font-family:Verdana,Geneva,Arial,Helevetica,sans-serif; font-weight:bold;}
    	</style>
    	 
    	<title>Career Fair</title>
    	
    </head>
    
    <body>
    <nav>
    <ul>
    <li><a href="#/content/enforced/150164-23205.201315/Labs/Lab3/index.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z" title = "College Home">Home</a></li>	
    <li><a href="#/content/enforced/150164-23205.201315/Labs/Lab3/StudentLogin.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z" title = "Student Login">Student Login</a></li>
    <li><a href="#/content/enforced/150164-23205.201315/Labs/Lab3/about.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z" title = "About Our College">About Our College</a></li>
    <li><a href="#/content/enforced/150164-23205.201315/Labs/Lab3/contactus.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z" title = "Contact Us">Contact Us</a></li>
    </ul>
    </nav> 
    <p class="hcenter">
    <img class="icenter" src="graduate_small.jpg" alt="career fair logo image"  />
    <span class="title">Career Fair</span>
    </p>
    
    
    <p>Career fairs present an opportunity for you to showcase yourself before potential employers.<em>You do not have to be in your graduating year 
    to attend the career fair.</em> You may attend just to see what opportunities are available for employment after you graduate.</p>
    
    <h2>Attending the Career Fair</h2>
    
    <p>When you attend the career fair, remember the following:</p>
    
    <ul class="check">
    	<li>Dress professionally (business casual)</li>
    	<li>Bring several copies of your resume</li>
    	<li>Be prepared to be interviewed on the spot!</li>
    	<li>Bring a pen and paper so you can take notes</li>
    </ul>
    
    <p>If you are a graduating senior, let's start by talking about your resume. A good resume alone won't get you the job, but it should &ndash; in one page &ndash; sum up your accomplishments to date.</p>
    
    <h3>Your Resume</h3>
    <p>Your resume is a reflection of yourself, and like yourself, it should be the best it can be. There is absolutely no room in your resume for typographical errors, punctuation errors, spelling errors, or any other errors. Choose a paper that has substantial weight; don't type your resume on copying paper. Choose white or beige for both the resume and the cover letter. Some tips to remember about the resume and the cover letter:</p>
    
    <ul>
      <li>The resume should contain the following sections:</li>
    	<ol>
    		<li>Your name and contact information</li>
    		<li>Education</li>
    		<li>Skills</li>
    		<li>Work Experience</li>
    		<li>Volunteer Experience</li>
    	</ol>
      <li>The cover letter should state the position you are applying for. <a href="#/content/enforced/150164-23205.201315/Labs/Lab3/cover.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z">Tips for Writing a Good Cover Letter</a></li>
      <li>Both the resume and the cover letter must not contain spelling or grammatical errors.</li>
    </ul>
    
    
    <h3>Dress the Part</h3>
    <p>You only get one chance for a first impression, so make the most of it! Here are some tips for a great first impression:</p>
    
    <ul>
    	<li>Be neat and well-groomed</li>
    		<ul>
    			<li>Dress conservatively</li>
    			<li>Do not wear clothes with large logos or slogans</li>
    			<li class="attention">Do not wear earbuds or headphones around your neck</li>
    			<li>Do not chew gum</li>
    			<li>Choose clothing with solid colors rather than busy patterns</li>
    		</ul>
    	<li>Carry only what you'll need</li>
    	<li>Don't bring a large bag or backpack</li>
    </ul>
    
    <h3>Make the Right First Impression</h3>
    <p>Most people make judgments about you in the first five seconds. Give the right non-verbal signals. 
    Stand up straight, walk confidently, give a firm handshake.
    Make eye contact, exhibit good listening skills, and above all, 
    remember the name of the person whom you've been introduced to.
     Turn off your cell phone. Carry all your paperwork in a professional-looking briefcase or attache case.</p>
    
    <h3>Speak Up</h3>
    <p>In all your dealings at the fair, make sure that the person you are speaking to can hear you. This is not the time to be too shy, nor too pushy. Strike a balance between the two that will convey self-confidence without being pompous or overbearing.</p>
    
    <h3>Don't Overstate</h3>
    <p>If you are asked if you meet a particular qualification for a job, tell the truth. 
    If you don't have training in an area, stress that you have always been a quick learner and look forward to training in that area.</p>
    
    <footer class="hcenter">
    <h4>Contact Information</h4>
    
    <strong><em>Our Mohawk college Career Fair<br />
    P.O. Box 3567<br />
    Hamilton, ON<br />
    L8T 4N1<br /></em></strong>
    </footer>
    
    </body>
    </html>
    My problem is that instead of looking like this top of this picture like it's suppose to be my browser output it looks like the middle picture with the words "career fair" to the right but slightly down

    link to the browser outputs I'm talking about

    When I did try to change it,it was only after having to mess around with the in sheet CSS classes that it was finally align to the right of the grad hat picture but for some reason (likely due to me messing around with the classes) for some reason when that happens the words aren't as big and not in red anymore.The producing code below.

    Code:
    <!DOCTYPE html>
    <html>
      <head>
    
    	<style type="text/css">
    	body{ margin:0em 10em 3em 10em;  }
       <!--.hcenter{text-align: center ;}-->
    	<!--.icenter {<!--margin:auto-->vertical-align:middle;<!--display:block;}-->
    	a {color:blue; text-decoration:none;}
    	a:hover { text-decoration:underline; }
    	a:active  {color:gold;}
    	li.attention { font-style:italic;text-decoration:underline;} 
    	h2,h3,h4,h5 {color:firebrick; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
    	nav {background-color:black;line-height:200%;}
    	nav a {color:white; font-weight:bold;}
    	nav li {display:inline; text-decoration:none;padding-right:40px;}
    	p em {color:firebrick;}
    	ul{list-style-type:square}
    	ol{list-style-type:upper-alpha;}
    	ul.check li {list-style-image: url(green_checkmark_sm.jpg);}
    	
    	.title {color:firebrick; font-size:200%; font-family:Verdana,Geneva,Arial,Helevetica,sans-serif;font-weight:bold;text-align:center;}
    	
    	.tcenter { text-align:center;}
    	
    	.hat { vertical-align:middle; } 
    	
    	</style>
    	 
    	<title>Career Fair</title>
    	
    </head>
    
    <body>
    <nav>
    <ul>
    <li><a href="#/content/enforced/150164-23205.201315/Labs/Lab3/index.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z" title = "College Home">Home</a></li>	
    <li><a href="#/content/enforced/150164-23205.201315/Labs/Lab3/StudentLogin.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z" title = "Student Login">Student Login</a></li>
    <li><a href="#/content/enforced/150164-23205.201315/Labs/Lab3/about.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z" title = "About Our College">About Our College</a></li>
    <li><a href="#/content/enforced/150164-23205.201315/Labs/Lab3/contactus.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z" title = "Contact Us">Contact Us</a></li>
    </ul>
    </nav> 
    
    <p class="tcenter">  <!--class="hcenter"-->
    <!--<img class="icenter" src="graduate_small.jpg" alt="career fair logo image"  />-->
    <img class="hat" src="graduate_small.jpg" alt="career fair logo image />
    <span class="title">Career Fair</span>
    </p>
    
    
    <p>Career fairs present an opportunity for you to showcase yourself before potential employers.<em>You do not have to be in your graduating year 
    to attend the career fair.</em> You may attend just to see what opportunities are available for employment after you graduate.</p>
    
    <h2>Attending the Career Fair</h2>
    
    <p>When you attend the career fair, remember the following:</p>
    
    <ul class="check">
    	<li>Dress professionally (business casual)</li>
    	<li>Bring several copies of your resume</li>
    	<li>Be prepared to be interviewed on the spot!</li>
    	<li>Bring a pen and paper so you can take notes</li>
    </ul>
    
    <p>If you are a graduating senior, let's start by talking about your resume. A good resume alone won't get you the job, but it should &ndash; in one page &ndash; sum up your accomplishments to date.</p>
    
    <h3>Your Resume</h3>
    <p>Your resume is a reflection of yourself, and like yourself, it should be the best it can be. There is absolutely no room in your resume for typographical errors, punctuation errors, spelling errors, or any other errors. Choose a paper that has substantial weight; don't type your resume on copying paper. Choose white or beige for both the resume and the cover letter. Some tips to remember about the resume and the cover letter:</p>
    
    <ul>
      <li>The resume should contain the following sections:</li>
    	<ol>
    		<li>Your name and contact information</li>
    		<li>Education</li>
    		<li>Skills</li>
    		<li>Work Experience</li>
    		<li>Volunteer Experience</li>
    	</ol>
      <li>The cover letter should state the position you are applying for. <a href="#/content/enforced/150164-23205.201315/Labs/Lab3/cover.htm?_&amp;d2lSessionVal=Ri5y38WxzZhumo6eSXLWw0j1Z">Tips for Writing a Good Cover Letter</a></li>
      <li>Both the resume and the cover letter must not contain spelling or grammatical errors.</li>
    </ul>
    
    
    <h3>Dress the Part</h3>
    <p>You only get one chance for a first impression, so make the most of it! Here are some tips for a great first impression:</p>
    
    <ul>
    	<li>Be neat and well-groomed</li>
    		<ul>
    			<li>Dress conservatively</li>
    			<li>Do not wear clothes with large logos or slogans</li>
    			<li class="attention">Do not wear earbuds or headphones around your neck</li>
    			<li>Do not chew gum</li>
    			<li>Choose clothing with solid colors rather than busy patterns</li>
    		</ul>
    	<li>Carry only what you'll need</li>
    	<li>Don't bring a large bag or backpack</li>
    </ul>
    
    <h3>Make the Right First Impression</h3>
    <p>Most people make judgments about you in the first five seconds. Give the right non-verbal signals. 
    Stand up straight, walk confidently, give a firm handshake.
    Make eye contact, exhibit good listening skills, and above all, 
    remember the name of the person whom you've been introduced to.
     Turn off your cell phone. Carry all your paperwork in a professional-looking briefcase or attache case.</p>
    
    <h3>Speak Up</h3>
    <p>In all your dealings at the fair, make sure that the person you are speaking to can hear you. This is not the time to be too shy, nor too pushy. Strike a balance between the two that will convey self-confidence without being pompous or overbearing.</p>
    
    <h3>Don't Overstate</h3>
    <p>If you are asked if you meet a particular qualification for a job, tell the truth. 
    If you don't have training in an area, stress that you have always been a quick learner and look forward to training in that area.</p>
    
    <footer class="hcenter">
    <h4>Contact Information</h4>
    
    <strong><em>Our Mohawk college Career Fair<br />
    P.O. Box 3567<br />
    Hamilton, ON<br />
    L8T 4N1<br /></em></strong>
    </footer>
    
    </body>
    </html>
    What can I do to have the browser output look like how it does in the top picture in my link?.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Welcome to DevShed Forums, bluejay10.

    New users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    CSS uses a different style of comments from HTML (often called "C style"):
    /*.hcenter{text-align: center ;}*/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    the picture is on deviantart-->sidetrack1 account gallery-->scraps-->homework related question just to say

    Thanks the advice including the bit about links but I still don't know what you mean by the code you quoted from me.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    http://sidetrack1.deviantart.com/gal...craps#/d5tdmzd

    A double-quote is missing from that <img> element. Does adding it make a difference for you?

    Nested lists need to be nested within an <li> from the parent list. In this case the problem is an <ol> nested directly within a <ul>.

    You're using HTML comments inside a <style> element:
    Code:
    <!--.hcenter{text-align: center ;}-->
    you should use CSS comments instead:
    Code:
    /* .hcenter{text-align: center ;} */
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo