...

View Full Version : Issue with margins/borders



dijitaljedi
11-07-2010, 01:18 AM
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:



<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..

dijitaljedi
11-07-2010, 02:46 AM
Hate to bump my own thread, but still need help with this. Thanks in advance.

teedoff
11-07-2010, 02:59 AM
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?

Chris Hick
11-07-2010, 03:01 AM
It works if you take out that margin-left: 185px; and that margin:-185 in your img style.. btw only use lowercase...



<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..

dijitaljedi
11-07-2010, 03:05 AM
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.

teedoff
11-07-2010, 03:05 AM
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.

teedoff
11-07-2010, 03:07 AM
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

dijitaljedi
11-07-2010, 03:08 AM
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?

dijitaljedi
11-07-2010, 03:11 AM
Alright just so you guys can get a clear view of the code itself, here it is (and it's not live)


<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.

teedoff
11-07-2010, 03:14 AM
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.


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

teedoff
11-07-2010, 03:19 AM
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.

Chris Hick
11-07-2010, 03:22 AM
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..

dijitaljedi
11-07-2010, 03:25 AM
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.nsf/03C9756545B075A485256E90004FADFE/34BF6F7F77A9B63C85256E900051B406?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.

dijitaljedi
11-07-2010, 03:27 AM
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?

teedoff
11-07-2010, 03:28 AM
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

Chris Hick
11-07-2010, 03:30 AM
Can you attach your images so I can put them on my editor to work on it a little better than seeing broken image boxes?

Teedoff, it happens from time to time XD lol

Chris Hick
11-07-2010, 04:25 AM
Ight, I fixed it.. here you go:



<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 type="text/css">
body {
background: #ffffd0 url('C:\Users\Rob\Desktop\Week2\Lab1\back.gif') repeat-y;
margin-left: 185px;
}
#menu {
width:173px;
height: 295PX;
float:left;
border-width: 0px;
margin-left: -185px;
}
</style>

</head>
<body>
<img src="C:\Users\Rob\Desktop\Week2\Lab1\MENU.GIF" alt"" id="menu" />


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

dijitaljedi
11-07-2010, 06:17 AM
Issue has been resolved, thanks everyone



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum