horse*chica
12-18-2004, 01:39 AM
I'm attempting to make a layout for a friend, but the vertical line on the background refuses to line up just right. At first, I had the background as a 1024px in width image, where it would tile down the page. It looked fine for me, but not her. So, I then tried making the entire background a color instead, and had the line image (which I cropped to be shorter in width) line up as the navagation div's background image. Again, worked for me, not for her (and I got another online friend to see, and it didn't work for her, either). I am using IE and AOL. In AOL, it looks slightly off unless I maximize the screen (but AOL is cruddy anyway, so I'm not upset by that), but always looks fine in IE to me.
Here is the page: http://www.geocities.com/reverie_xoxo/fplayout.html
I'm trying to get the line from the image to line up with the line on the background.
My coding:
(CSS...)
body {
font-size: 8pt;
font-family: tahoma, arial, sans-serif;
color: #000000;
line-height: 12px;
letter-spacing: 0pt;
cursor: url(http://riverbottom.250free.com/paw.cur);
background-color: #509FDF;
scrollbar-face-color: #60A8E1;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #60A8E1;
scrollbar-darkshadow-color: #60A8E1;
scrollbar-track-color: #60A8E1;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #60A8E1;
direction: rtl;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 5;
padding-bottom: 5;
padding-left: 5;
padding-right: 5;
border: 0;
}
a:link{color: #FFFFFF; text-decoration: none; filter: dropshadow (color="#92CBE7", offX= 1, offY= 1,); opacity: 50; height: 5;}
a:visited{color: #FFFFFF; text-decoration: none; filter: dropshadow (color="#92CBE7", offX= 1, offY= 1,); opacity: 50; height: 5;}
a:active{color: #FFFFFF; text-decoration: none; cursor: se-resize; filter: dropshadow (color="#92CBE7", offX= 1, offY= 1,); opacity: 50; height: 5;}
a:hover{color: #FFFFFF; filter: dropshadow (color="#92CBE7", offX= 1, offY= 1,); opacity: 50; height: 5;}
h1 {
font-weight: bold;
font-size: 8pt;
font-family: tahoma;
color: #000000;
line-height: 10px;
letter-spacing: 0pt;
border-bottom: 1px dashed #000000;
text-indent: 10px;
font-variant: small-caps;
}
b {
font-family: tahoma;
font-variant: small-caps;
font-size: 10pt;
}
#maindiv {direction: ltr;}
#nav {
width: 152px;
height: 100px;
background-image: url(/reverie_xoxo/bg.gif);
position: absolute;
top: 417px;
left: 528px;
z-index: 2}
(HTML...)
<html>
<head>
<title>
disturbed reality...[dotNET]
</title>
<link href="/reverie_xoxo/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="maindiv">
<img src="/reverie_xoxo/header.png" style="position: absolute; top: 0px; right: 0px; z-index: 1;">
<div id="nav">test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br></div>
</div>
</body>
</html>
Thanks in advance for any help...I am desperate :-D
Here is the page: http://www.geocities.com/reverie_xoxo/fplayout.html
I'm trying to get the line from the image to line up with the line on the background.
My coding:
(CSS...)
body {
font-size: 8pt;
font-family: tahoma, arial, sans-serif;
color: #000000;
line-height: 12px;
letter-spacing: 0pt;
cursor: url(http://riverbottom.250free.com/paw.cur);
background-color: #509FDF;
scrollbar-face-color: #60A8E1;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #60A8E1;
scrollbar-darkshadow-color: #60A8E1;
scrollbar-track-color: #60A8E1;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #60A8E1;
direction: rtl;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 5;
padding-bottom: 5;
padding-left: 5;
padding-right: 5;
border: 0;
}
a:link{color: #FFFFFF; text-decoration: none; filter: dropshadow (color="#92CBE7", offX= 1, offY= 1,); opacity: 50; height: 5;}
a:visited{color: #FFFFFF; text-decoration: none; filter: dropshadow (color="#92CBE7", offX= 1, offY= 1,); opacity: 50; height: 5;}
a:active{color: #FFFFFF; text-decoration: none; cursor: se-resize; filter: dropshadow (color="#92CBE7", offX= 1, offY= 1,); opacity: 50; height: 5;}
a:hover{color: #FFFFFF; filter: dropshadow (color="#92CBE7", offX= 1, offY= 1,); opacity: 50; height: 5;}
h1 {
font-weight: bold;
font-size: 8pt;
font-family: tahoma;
color: #000000;
line-height: 10px;
letter-spacing: 0pt;
border-bottom: 1px dashed #000000;
text-indent: 10px;
font-variant: small-caps;
}
b {
font-family: tahoma;
font-variant: small-caps;
font-size: 10pt;
}
#maindiv {direction: ltr;}
#nav {
width: 152px;
height: 100px;
background-image: url(/reverie_xoxo/bg.gif);
position: absolute;
top: 417px;
left: 528px;
z-index: 2}
(HTML...)
<html>
<head>
<title>
disturbed reality...[dotNET]
</title>
<link href="/reverie_xoxo/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="maindiv">
<img src="/reverie_xoxo/header.png" style="position: absolute; top: 0px; right: 0px; z-index: 1;">
<div id="nav">test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br>test 123<br></div>
</div>
</body>
</html>
Thanks in advance for any help...I am desperate :-D