Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Issue with margins/borders

    Alright this is for a class, I pretty much have everything down, but for some reason the menu.gif is not showing up on the left margin correctly. It'll float left like it's supposed to, but it's cut off so I can only see the lower half of the image. I am trying to make it so the whole image is on the left, and not half (obviously). Here's the code:

    Code:
    <html>
    <head>
    <!-- 
       New Perspectives on HTML and XHTML
       Tutorial 3
       Case Problem 1
    
       Pixal Home Page
       Author: 
       Date:
       
       Filename:         pixal.htm
       Supporting files: back.gif, logo.jpg, menu.gif
    -->
    <title>Pixal Inc.</title>
    
    <style>
    BODY  {
       BACKGROUND: WHITE URL("C:\Users\Rob\Desktop\Week2\Lab1\back.gif");
       background-repeat:REPEAT-Y;
       MARGIN-LEFT:185PX;
    }
    </style>
    </head>
    <body>
    <IMG SRC="C:\Users\Rob\Desktop\Week2\Lab1\MENU.GIF" alt"" width="173" height="295" style="float:left;margin:-185" BORDER-width="0">
    <body style="background-color:#FFFFD0">   ----this is the code in question, I left out the rest because everything else is fine..

  • #2
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hate to bump my own thread, but still need help with this. Thanks in advance.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    How big is the image? If you have an image thats wider than the width of your screen resolution, then it may get cut off on the sides.

    Do you happen to have this site live?

  • Users who have thanked teedoff for this post:

    dijitaljedi (11-07-2010)

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    It works if you take out that margin-left: 185px; and that margin:-185 in your img style.. btw only use lowercase...

    Code:
    <html>
    <head>
    <!-- 
       New Perspectives on HTML and XHTML
       Tutorial 3
       Case Problem 1
    
       Pixal Home Page
       Author: 
       Date:
       
       Filename:         pixal.htm
       Supporting files: back.gif, logo.jpg, menu.gif
    -->
    <title>Pixal Inc.</title>
    
    <style>
    body  {
       background: white url("C:\Users\Rob\Desktop\Week2\Lab1\back.gif");
       background-repeat: repeat-y;
    }
    </style>
    </head>
    <body>
    <img src="C:\Users\Rob\Desktop\Week2\Lab1\MENU.GIF" alt"" width="173" height="295" style="float:left;" border-width="0" />
    <body style="background-color:#FFFFD0">   ----this is the code in question, I left out the rest because everything else is fine..
    Last edited by Chris Hick; 11-07-2010 at 03:04 AM.

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hmm, it does work. Thanks for the insight, but unfortunately the assignment is as follows:

    *Set the background color to ivory and display the background image file back.gif.
    The image file should be tiled only in the y-direction and should scroll with the web page
    *Set the size of the left margin to 185 pixels.

    Then it gives instructions on menu.gif:

    Set the border width to zero, float the image on the left margin, set the size of the left margin to -185 pixels; this will have the effect of shifting the image to the left margin. Set the dimensions of the image to 173 pixels wide by 295 pixels high.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    oh wow I didnt see the inline margin style of -185px

    Remember, inline styles take presidence over embedded and external styles for the same element.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I have this book, but its at work. I worked through this same book when I was in school for web design.

    I cant remember this off the top of my head though..lol

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    oh wow I didnt see the inline margin style of -185px

    Remember, inline styles take presidence over embedded and external styles for the same element.
    Alright, but how would that force the .gif up and to the left instead of just to the left?

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Alright just so you guys can get a clear view of the code itself, here it is (and it's not live)
    Code:
    <html>
    <head>
    <!-- 
       New Perspectives on HTML and XHTML
       Tutorial 3
       Case Problem 1
    
       Pixal Home Page
       Author: 
       Date:
       
       Filename:         pixal.htm
       Supporting files: back.gif, logo.jpg, menu.gif
    -->
    <title>Pixal Inc.</title>
    
    <style>
    BODY  {
       BACKGROUND: WHITE URL("C:\Users\Rob\Desktop\Week2\Lab1\back.gif");
       background-repeat:REPEAT-Y;
       
    }
    </style>
    </head>
    <body>
    <IMG SRC="C:\Users\Rob\Desktop\Week2\Lab1\MENU.GIF" alt"" width="173" height="295" style="float:left;" BORDER-width="0">
    <body style="background-color:#FFFFD0">
    
    
    <p style="text-align: center">
       <img src="logo.jpg" alt="Pixal Digital Products" WIDTH="281" HEIGHT="96">
    </p>
    
    <p>Pixal is the industry leader in the field of digital equipment. Pixal's digital cameras have
    won Best Buy of the Year awards from <i>Digital Imaging</i> for the past three years. In
    addition, the DC100, Pixal's newest model for the home user, has won the the prestigious 
    Product of the Year award by <i>Digital Camera Magazine</i>.</p>
    
    <p>All digital cameras come bundled with Pixal Photoware<sup>&trade;</sup>, Pixal's award-winning
    software.</p>
    
    <P>
    <FONT SIZE="0.7" FACE="ARIAL" COLOR="BLUE" FONT:STYLE="NORMAL">
    <HR COLOR="#FF0000">
    <address style="text-align: center">
       Pixal Inc. • 
       400 Stewart Ave. •
       Akron, OH &nbsp;&nbsp;60311 •
       1 (800) 555-8761
    </address><HR COLOR="#FF0000"></P>
    
    
    <p style="text-align: center">
    <a href="pixal.htm">Home Page</a> <br />
    <a href="dc100.htm">DC100</a> &nbsp;&nbsp;
    <a href="dc250.htm">DC250</a> &nbsp;&nbsp;
    <a href="dc500.htm">DC500</a> &nbsp;&nbsp;
    <a href="#">Accessories</a> &nbsp;&nbsp;
    <a href="#">Pixal Photoware</a> <br />
    <a href="#">FAQ</a> &nbsp;&nbsp;
    <a href="#">User's Manuals</a> &nbsp;&nbsp;
    <a href="#">Technical Documents</a> &nbsp;&nbsp;
    <a href="#">Driver Downloads</a> &nbsp;&nbsp;
    <a href="#">Software Updates</a> &nbsp;&nbsp;
    <a href="#">Contact Us</a> <br />
    <a href="#">Corporate Information</a> &nbsp;&nbsp;
    </p>
    
    </body>
    </html>
    I took the margins out and all that, but its still required. Also, it messed up the bottom portion with all the links.
    Last edited by dijitaljedi; 11-07-2010 at 03:12 AM. Reason: more info

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You know you can set background-color AND background-image as well.

    Again, Im not clear as to what exactly your results should be.

    but try this.

    Code:
    body{background-color: white; background-image: (pathToImage.gif);}

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    BODY {
    BACKGROUND: WHITE URL("C:\Users\Rob\Desktop\Week2\Lab1\back.gif");
    background-repeat:REPEAT-Y;

    }
    <body style="background-color:#FFFFD0">
    You have essenatially over written the first style in your head section with the second style. You dont need both...and the color #FFFFD0 is a dark color. almost black. Again, dont capitalize your style declarations.

  • Users who have thanked teedoff for this post:

    dijitaljedi (11-07-2010)

  • #12
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Man, what are they teaching you in that class?? lolXD Learn proper technique by writing in lowercase...

    TeeDoff... you are wrong my friend.. it is a very light color... ivory... but you are right about the overriding it..

  • #13
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    You have essenatially over written the first style in your head section with the second style. You dont need both...and the color #FFFFD0 is a dark color. almost black. Again, dont capitalize your style declarations.
    Here is where I got the code for ivory = http://pride.spfldcol.edu/web/color....6?OpenDocument

    But in any case, the style in the body was set there by the instructor (i am obviously a novice to web design) but yet I added the style in the head section because its the code for the left border. Let me know if you guys need anything from me in order to see this better.

  • #14
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Chris Hick View Post
    Man, what are they teaching you in that class?? lolXD Learn proper technique by writing in lowercase...

    TeeDoff... you are wrong my friend.. it is a very light color... ivory... but you are right about the overriding it..
    Yeah the teacher isn't exactly great at teaching, but will do as far as writing in lower case. Right now my main concern is having the margins corrected, any ideas guys?

  • #15
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Chris Hick View Post
    Man, what are they teaching you in that class?? lolXD Learn proper technique by writing in lowercase...

    TeeDoff... you are wrong my friend.. it is a very light color... ivory... but you are right about the overriding it..
    lol You are right!...lol I stand corrected, I think I typed in his color hex and somehow thought it brought up a dark...not sure why. I should know FFF is white.

    Anyway, after the OP gets the things we have suggested, then we can help get the repeat and margins right.

    I still dont remember this assignment from this book,....lol

  • Users who have thanked teedoff for this post:

    dijitaljedi (11-07-2010)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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