Html Xhtml Tutorial 4 Review Assignment #8

Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

 
  1. 09-26-2010, 09:26 PM#1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hw help!

    need help with my code. I just can't get the images to align right. I have to align them in the screen.css file using the coordinates that they gave me, but something I am doing is wrong please help. attached are the files. ok couldnt upload them so the img files are attached. and here is the code.

    code for main page:

    <html> <head> <!-- New Perspectives on HTML and XHTML Tutorial 4 Review Assignment Online Scrapbooks: May Gallery Author: Kyle Loring Date: 9/26/10 Filename: gallery.htm Supporting files: back.jpg, marker.gif, printer.css, sample1.jpg, sample2.jpg, sample3.jpg, sample4.jpg, scraps.jpg, screen.css --> <title>Online Scrapbooks: May Gallery</title> <link href="screen.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="outer_container"> <h1 id="head"> <img src="scraps.jpg" alt="Online Scrapbooks" width="314" height="75" /> </h1> <div id="links"> <ul> <li Class="newGroup"><a href="#">Home</a></li> <li Class="subGroup"><a href="#">Getting Started</a></li> <li Class="subGroup"><a href="#">Scrapbooking Tips</a></li> <li Class="subGroup"><a href="#">Supply List</a></li> <li Class="subGroup"><a href="#">Glossary</a></li> <li Class="newGroup"><a href="#">Online Classes</a></li> <li Class="subGroup"><a href="#">Sample Pages</a></li> <li Class="subGroup"><a href="#">Online Store</a></li> <li Class="subGroup"><a href="#">Shopping Cart</a></li> <li Class="subGroup"><a href="#">Checkout</a></li> <li Class="subGroup"><a href="#">Your Account</a></li> <li Class="subGroup"><a href="#">Order Status</a></li> <li Class="subGroup"><a href="#">Wish List</a></li> <li Class="subGroup"><a href="#">Customer Service</a></li> <li Class="newGroup"><a href="#">About Us</a></li> <li Class="subGroup"><a href="#">Newsletter</a></li> <li Class="subGroup"><a href="#">FAQ</a></li> <li Class="subGroup"><a href="#">Contact Us</a></li> </ul> </div> <div id="content"> <h2>Scrapbook Gallery</h2> <p>Every month Online Scrapbooks presents the best scrapbooking samples from our customers. Scroll through the list of images to view this month's submissions. Click the image to view a full-size version of the sample page.</p> <p>Interested in showcasing your work? Contact <a href="mailto:kathy_pridham@onlinescraps.com">kathy_pridham@onlinescraps.com</a> to receive a copy of our submission guidlines. Please one submission per person. </p> <ul> <li><a href="#">April Gallery</a></li> <li><a href="#">March Gallery</a></li> <li><a href="#">February Gallery</a></li> </ul> <div id="samples_container"> <div id="sample1" Class="samples"> <h3>Paint Ball Fun</h3> <a href="sample1.jpg"><img src="sample1.jpg" alt="" /></a> </div> <div id="sample2" Class="samples"> <h3>Longs Peak Memories</h3> <a href="sample2.jpg"><img src="sample2.jpg" alt="" /></a> </div> <div id="sample3" Class="samples"> <h3>Trick or Treat!</h3> <a href="sample3.jpg"><img src="sample3.jpg" alt="" /></a> </div> <div id="sample4" Class="samples"> <h3>Michael's First Concert</h3> <a href="sample4.jpg"><img src="sample4.jpg" alt="" /></a> </div> </div> <address> Online Scrapbooks &#183; 212 Sunset Drive &#183; Richmond, KY 40475 &#183; (859) 555-8100 </address> </div> </div> </body> </html>
    code for css:

    /* New Perspectives on HTML and XHTML 5th Edition Tutorial 4 Review Assignment Online Scrapbooks Style Sheet Author: Kyle Loring Date: 9/27/10 Filename: screen.css Supporting Files: back.jpg, marker.gif */ body {margin: 0px; color: black; background: white url(back.jpg) repeat-y} h1, h2, h3 {font-family: Arial, Helvetica, sans-serif; color: black; margin: 0px} h3 {font-size: 10pt} h1 {border-bottom: 2px solid orange; background-color: white; margin: 0px; padding: 0px} ul {margin-top:0px} #links ul { list-style-type:none;margin-left: 15px; padding-left: 0px;} .newGroup { margin-top: 20px;} .subGroup { margin-left: 20px;} #content ul { list-style-image: url(marker.gif);} #outer_container {width: 780px} #head {text-align: right} #links {float: left; width: 200px;} #links a:link {text-decoraton:none;} #links a:visited {text-decoration:none;} #links a:active {text-decoration:none;} #links a:hover { color: black; background-color: white; text-decoration:underline; text-decoration:overline;} .samples {position:absolute;} .samples img { width 150px; height: 193px; border-width: 0px;} #samples_container { positon:relative; top: 0px left: 0px; height: 450px;} #sample1 {position:absolute; left:0px; top:0px} #sample2 {position:absolute; left:170px; top:0px} #sample3 {position:absolute; left:0px; top:220px} #sample4 {position:absolute; left:170px; top:220px} #content {margin-left: 200px} address {text-align: center; font-style: normal; font-variant: small-caps; border-top: 2px solid orange; color: orange; padding-bottom: 50px; }
    thanks

    Kyle
    Last edited by turtle_byte; 09-26-2010 at 09:50 PM.

  2. 09-26-2010, 10:52 PM#2
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can anyone help me? please I still havent figured this out. it is driving me crazy!

  3. 09-26-2010, 10:56 PM#3
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Last edited by tfburges; 09-26-2010 at 11:01 PM.
    First, people aren't going to do your homework for you. Do some research... try multiple relevant google queries until you find the information you need to do it correctly. Learn troubleshooting techniques... and if you don't know how to do that... google "CSS troubleshooting" as well.

    Second, you didn't give enough information for someone to adequately guide you in the right direction (which I don't mind doing... but like I said, not gonna do it for you)... i.e., we don't know what coordinates you're trying to match or what exactly is the problem. You gave a fairly generic problem description and posted a ton of code.

  4. 09-26-2010, 11:27 PM#4
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, I am not trying to get anyone to do my hw, I have done it all excpt this one part I am having trouble with. I just was looking for someone to help point me in the right direction to what i was doing wrong.

    The problem is a the 4 images sample1 through sample 4 are supposed to appear in a 2x2 square. I can get them appearing as a square, but they are in the top left hand corner of the screen.

    here are the instructions in my book:
    place the #sample 1 selector at the page coordinates (0,0). place the #sample2 selector at the coordinates (170,0). Place #sample3 selector at the coordinates (0,220). Place the #sample4 selector at the coordinates (170,220).

    I have tried everything. this part of the code is in my .css file that i have the code for on here. I have searched google and troubleshooted for 3 hrs. I have been trying to figure out what i did wrong. but i cant.

    so if I could get some help that would be greatly appreciated.

    thanks

    Kyle
    Originally Posted by tfburges
    First, people aren't going to do your homework for you. Do some research... try multiple relevant google queries until you find the information you need to do it correctly. Learn troubleshooting techniques... and if you don't know how to do that... google "CSS troubleshooting" as well.

    Second, you didn't give enough information for someone to adequately guide you in the right direction (which I don't mind doing... but like I said, not gonna do it for you)... i.e., we don't know what coordinates you're trying to match or what exactly is the problem. You gave a fairly generic problem description and posted a ton of code.

  5. 09-26-2010, 11:34 PM#5
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Last edited by tfburges; 09-26-2010 at 11:54 PM.
    Try removing the class "samples" and all references.

    If that's not it... it has to do with your structure/inheritance.

    Google "css inheritance" and/or "css structure" for more information.

    Worse comes to worse, changing all of the sample1, sample2, etc. from IDs to classes should work but it may not be what your teacher wanted.

  6. 10-13-2010, 10:39 AM#6
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I know whats wrong

    { positon:relative; top: 0px left: 0px; height: 450px;}

    Hopefully it's not too late. You spelled position wrong. Thanks by the way I was stuck at a different part for like 4 hours. Change position and it should work it did for me.

  7. 09-21-2011, 08:24 PM#7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    does anyone have Tutorial 4 Case problem 3 completed I am having trouble with this

  8. 09-21-2011, 08:28 PM#8

  9. 09-28-2011, 04:30 AM#9
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Answer to the problem.

    Try reading the tutorial, lol you need to put the correct coordinates in place of the old ones you are replacing.The book provides the correct cords.

    .samples {position:absolute}
    .samples img {width 150px; height: 193px; border-width: 0px}
    #samples_container {position:relative; top: 0px left: 0px; height: 450px}

    #sample1 {position:absolute; left:0px; top:0px; width: 156px; height: 224px}
    #sample2 {position:absolute; left:170px; top:0px}
    #sample3 {position:absolute; left:0px; top:220px}
    #sample4 {position:absolute; left:170px; top:220px}

    I might not be perfect but this makes my page look like it is supposed to. I posted the answer because there is not one on the net, and I am sure your assignment is already long done by now.

Posting Permissions

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

Forum Rules

All times are GMT +1. The time now is 09:47 AM.
Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

Tutorial 1: Getting Started with HTML5.
Tutorial 2: Developing a Web Site.
Tutorial 3: Designing a Web Page with CSS.
Tutorial 4: Creating Page Layouts with CSS.
Tutorial 5: Working with Tables and Columns.
Tutorial 6: Creating a Web Form.
Tutorial 7: Designing a Multimedia Web Site.
Tutorial 8: Enhancing a Web Site with Advanced CSS.
Tutorial 9: Working with XHTML.
Tutorial 10: Programming with JavaScript.
Additional Cases.
Tutorial 11: Working with Operators and Expressions.
Tutorial 12: Working with Arrays, Loops, and Conditional Statements.
Tutorial 13: Working with Objects and Styles.
Tutorial 14: Working with Events.
Appendix A: Color Names and Color Values, and HTML Character Entities.
Appendix B: Making the Web More Accessible.
Appendix C: HTML Elements and Attributes.
Appendix D: Cascading Styles and Selectors.
Appendix E: Frames and Framesets.
Appendix F: JavaScript and the HTML DOM.
Appendix G: Working with Cookies.
Appendix H: Exploring Regular Expressions.

0 Thoughts to “Html Xhtml Tutorial 4 Review Assignment #8

Leave a comment

L'indirizzo email non verrĂ  pubblicato. I campi obbligatori sono contrassegnati *