|
CSS - Position Divs Next To Each Other
Hello all,
I have the following: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
.news-list-container { clear: both; }
.news-list-item {
padding:6px;
padding-left: 0;
padding-top: 10px;
clear: both;
} /* end .news-list-item */
.news-list-item-left { float: left; }
.news-list-item-left img { margin-right: -62px; }
.news-list-item-right {
vertical-align: middle;
margin-left: 72px;
width: 444px;
float: left;
} /* end .news-list-item-right */
.news-list-item-right a { font-size: 1.1em; }
</style>
</head>
<body>
<div class="news-list-container research-list-container">
<div class="news-list-item research-list-item">
<div class="news-list-item-left"><img src="img.jpg" width="63" height="43" alt="" title="" /></div>
<div class="news-list-item-right">
<a href="#">Link 1</a>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
</div>
</div>
<div class="news-list-item research-list-item">
<div class="news-list-item-left"><img src="#" width="63" height="43" alt="" title="" /></div>
<div class="news-list-item-right">
<a href="#">Link 2</a>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Tes</p>
</div>
</div>
<div class="news-list-item research-list-item">
<div class="news-list-item-left"></div>
<div class="news-list-item-right">
<a href="#">Link 3</a>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test T</p>
</div>
</div>
<div class="news-list-browse research-list-browse"></div>
</div>
</body>
</html>
This is code generated by a CMS. Notice that in the last case, there is no image which can happen. I would like to appear so that text always lines up even when there is no image to appear. This code works correctly in all browsers except IE6. IE6 makes the image appear really thin which is due to the negative margin. Is there a way to overcome this for IE6? Should I be using a different approach for this? Similar TutorialsI want to have one main div that is horizontally centered on the page. Inside of it I want two nested divs, located right next to each other. It seems that the top property of the second nested div is being ignored, as it is being placed directly below the first nested div. Here is a sample that demonstrates what is happening. Am I doing something wrong or is what I'm trying to do fundamentally the wrong way to do it? Code: <html>
<head>
<style type="text/css">
#a
{
width: 800px;
height: 800px;
margin: 0 auto;
text-align: center;
background-color: #ff0000;
}
#b
{
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: #0000ff;
}
#c
{
position: relative;
top: 50px;
left: 350px;
width: 300px;
height: 300px;
background-color: #00ff00;
}
</style>
</head>
<body>
<div id=a>
<div id=b>test</div>
<div id=c>test</div>
</div>
</body>
</html>
Hi, i am getting a delay in the css rendering the position of divs, on my page, in ie6. This doesn't happen every time i load the page, but every so often certain floated divs are out of position and then they snap back into position after 2-10 seconds. Anybody suggest a solution??? The link to my stylesheet is in the header, so i can't imagine its to do with the stylesheet not loading up before the page is displayed. Thanks for your help Hi, Basically I have two divs, and I want to position another div within each div using the absolute property of css. However for some reason, rather then having to absolute divs within my other divs I finish having the two abolute divs one on top of each other. Here is an example I did: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <!-- first box --> <div style="border:1px solid black;"> Hello <br><br><br><br><br><br><br><br> <div style="position:absolute; top:50px; left:50px; border:1px solid red">Helloooo</div> </div> <!-- second box --> <div style="border:1px solid black;"> Hello <br><br><br><br><br><br><br><br> <div style="position:absolute; top:50px; left:50px; border:1px solid red">Helloooo</div> </div> </body> </html> I have done some research and found that this is happening because when I set a div as absolute, this does not remain part of the parent div, and thus the absolute div is not positioned according to the parent div, but according to the whole website. What I want to achieve is to position my absolute divs taking in consideration the parent div, and this in the example above I would have the label 'helloooo' with red border in both parent divs and not one of top of each other!! Is this possible? Regards, Sim085 I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! Hei ppl. i am begenning of designing in css but i have a problem.. i have my website www.zyxep.net/byensguf/ i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border.. and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything.. here is my css code: Code:
body {
text-align: center; /* center things in pre-IE6 */
margin: 0px auto;
}
#container {
margin: 0px auto;
left:150px;
top:0px;
width:760px;
height:420px;
z-index:1;
border-left: 1px solid black;
border-right: 1px solid black;
}
#header {
margin: 0px auto;
left:0px;
top:0px;
width:760px;
height:200px;
z-index:2;
background-image: url(images/logo.jpg);
border-bottom: 1px solid black;
}
#menu {
margin: 0px auto;
left:0px;
top:200px;
width:760px;
height:20px;
z-index:3;
border-bottom: 1px solid black;
}
#content {
margin: 0px auto;
left:0px;
top:220px;
width:760px;
height:180px;
z-index:4;
border-bottom: 1px solid black;
}
#footer {
margin: 0px auto;
left:0px;
top:400px;
width:760px;
height:20px;
z-index:5;
}
#login {
margin: 0px auto;
left:760px;
top:15px;
width:400px;
height:50px;
z-index:6;
}
#username {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#password {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#loginsubmit {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
and my index.php Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>ByensGuf.dk - Byens bedste guf</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="zyxep"> <META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio"> <META NAME="Description" CONTENT="zyxep.net - portfolio"> <meta name="REVISIT-AFTER" content="1 DAYS"> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="menu">menu</div> <div id="content">content</div> <div id="footer">Footer</div> <div id="login"> <form action="login.php" method="post"> <div> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <input type="submit" value="login" id="loginsubmit"> </div> </form></div> </div> </body> </html> plz help me.. i am so confused How to make div stick to top of a page and align center Hello, I am having trouble understanding the positioning within CSS. I.E. the relative/absolute positions. I am creating a site with 1 banner and 2 columns underneath, all centered. The 2nd column I want to be right beside the left coumn. so it simply goes like So depending on where left is on the page, the main is always literally right beside it. Anyone have any suggested reads on this? My site is RegionalCreations.com if you want to see the issue for yourself. I actually haven't encountered this issue before with the countless sites I've made. I used the basic layout of an already made wordpress theme and redesigned it for my site, I didn't change the menu position however, so I think the issue is with the original theme. Here is an image showing the problem: Well apparently I can't post an image so go to my site and then add /images/IE-CSS-bug.jpg on to see it, thanks. As you can see my image across the top is off center in IE even though it looks fine in Firefox. My menu is also spaced down in IE when it shouldn't be. Here are the locations of my stylesheets, the second 1 loads after the main 1 if you view the page in IE. (I can't post the url so go to my site and add the rest of the url on.) Stylesheet: /main/wp-content/themes/cleanmachine/style.css IE additional style: /main/wp-content/themes/cleanmachine/ie-win.css If anyone can look at my stylesheets and tell me the problem that would be great. Thanks. I'm having an issue using position: relative in IE6. Basically I'm doing this: Code:
<style>
.class1 {
width: 900px;
padding: 0px;
margin: 0 auto 0 auto;
}
.floatimg {
position: relative;
top: -200px;
left: 0px;
padding: 0px;
margin: 0px;
}
</style>
<div class="class1">
<img class="floatimg" src="foo.gif" />
<p>Some text.</p>
</div>
So, basically I'm trying to move the image up a bit in the div. This works in the latest firefox and IE7, but in IE6 the image moves up, but the text does not. It stays as if the image had not been moved and this leaves a big gap. I have a couple of nav lists that I'm trying to position. For the first part, in FF the top list (home|site map|help) is not positioning at the top of my div. I want it aligned at the top with no margin or padding so it's flush. I have included a link which shows an image of how I want it to look. The site is APOD The way I want it to look is HERE The CSS is : Code:
#hright {
width: 240px;
height: 66px;
float: right;
text-align: right;
padding-top: 0;
}
#hright ul {
list-style: none;
}
#hright ul li {
display: inline;
}
HTML Code: <div id="hright"><ul><li><img src="images/apod_new_04.gif" alt="home" title="home"/></li><li><img src="images/apod_new_05.gif" alt="site map" title="site map"/></li><li><img src="images/apod_new_06.gif" alt="help" title="help"/></li></ul> </div> The second issue arises in IE. I have another horizontal list, that I want to appear on the same line. In FF it's behaving properly, but in IE it's not. The CSS is: Code:
#hnav {
width: 740px;
height: 29px;
clear: both;
background-color: #FFFFFF;
padding: 0;
text-align: left;
}
#hnav ul {
list-style: none;
padding: 0;
text-align: left;
}
#hnav ul li {
display: inline;
padding: 0;
text-align: left;
}
The HTML is: Code: <div id="hnav"><ul><li><img src="images/apod_new_08.gif" alt="About Us" title="About Us"/></li><li><img src="images/apod_new_09.gif" alt="News" title="News"/></li><li><img src="images/apod_new_10.gif" alt="High School" title="High School"/></li><li><img src="images/apod_new_11.gif" alt="College" title="College"/></li><li><img src="images/apod_new_12.gif" alt="Contact Us" title="Contact Us"/></li></ul></div> There's probably a better way to do this than I'm trying and I'm open to any suggestions. Hi, I got a very basic problem here. my site http://www.destroyclothing.com/destroy.htm what im tryen to do is move that top image, with the logo on the left, to go down to be even with the black bar. ive tried padding and margin, but it wont go down. i tried moving the black bar up with margin and padding also. nothing seems to work. ive even tried z-index properties. I dont get it. I dont want to use position relative. i dont even know if that will work either. someone know? Thanks I'm attempting to get a background image to stay in the position I've defined in the 'bannerAd" css. The problem I'm having is that when I change the position (margins or padding) of the objects in the css class code for the bannerAd-top-right, the background image in the bannerAd div is effected. How can I move the content in the bannerAd-top-right css without the content in the bannerAd div getting affected? Below is the code for the index.php showing the class definitions: Code: <div id="bannerAd">
<div class="bannerAd-top-left">
<jdoc:include type="modules" name="user5" style="bannerAd-top-left" />
</div>
<div class="bannerAd-top-right">
<jdoc:include type="modules" name="rightBanner" style="bannerAd-top-right" />
</div>
</div>
Below is my css for the above: Code: #bannerAd {
background:url(../images/banner-right.jpg) no-repeat right 0;
margin-bottom: 10px;
width: 100%;
}
.bannerAd-top-left {
margin-bottom: 10px;
height: 230px;
width: 400px;
float:left;
}
.bannerAd-top-right {
height: 60px;
width: 400px;
padding:178px 0px 0px 445px;
}
I need the .bannerAd-top-right which contains my banner to be moved in position independently from the background image found in the bannerAd css. I just need to move the position of the .bannerAd-top-right up about 10px but every time I do that it shrinks the background image. Any help would be greatly appreciated. thanks. Hi guys, I have a Photoshop sliced page. Needed to create a login area. Inserting a form tag sent all sliced images running for the hills...lol. I solved this with a div tag. Now the problem is that the text boxes for Username and Password do not alling correctly in all resolutions. It is as if the text boxes are floating, not anchored to the specified XY position. For example on the design PC IE7 all looks good. On my laptop also with IE7 text boxes are slightly to the right of where they should be. I am wandering if any one could help please. My code is below. Thanks. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Customer Zone</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
background-image: url(../background.jpg);
}
#apDiv1 {
position:absolute;
width:164px;
height:147px;
z-index:1;
left: 560px;
top: 498px;
float:none
}
.AccountNumber {
font-size: 9px;
font-style: normal;
background-color: #151515;
height: 19px;
width: 148px;
border: 1px solid #5C5C5C;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #999999;
text-align: center;
vertical-align: middle;
}
.EnterButton {
top: 3px;
right: 7px;
position: relative;
left: 92px;
bottom: 20px;
}
.CheckButton {
height: 10px;
width: 10px;
top: 75px;
bottom: 15px;
right: 10px;
position: absolute;
left: 0px;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
position: absolute;
left: 11px;
top: 75px;
right: 10px;
bottom: 15px;
color: #999999;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" topmargin="0" marginheight="0">
<!-- ImageReady Slices (customerzone.psd) -->
<table width="777" height="681" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="30">
<img src="images/up.jpg" width="776" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="12"> <img src="images/logos.jpg" width="215" height="157" alt="" /></td>
<td rowspan="43">
<img src="images/r2.jpg" width="7" height="567" alt="" /></td>
<td colspan="16" rowspan="7"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','524','height','292','src','../../../flash/6048','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../../flash/6048' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="524" height="292">
<param name="movie" value="../../../flash/6048.swf" />
<param name="quality" value="high" />
<embed src="../../../flash/6048.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="524" height="292"></embed>
</object></noscript></td>
<td rowspan="46">
<img src="images/customerzone_05.jpg" width="30" height="656" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="157" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q1.jpg" width="215" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/q1-08.jpg" width="30" height="107" alt="" /></td>
<td colspan="2">
<img src="images/x10.jpg" width="59" height="94" alt="" /></td>
<td colspan="9" rowspan="2">
<img src="images/q1-10.jpg" width="126" height="107" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="94" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/q1-11.jpg" width="59" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q2.jpg" width="215" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q3.jpg" width="215" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="12" rowspan="4">
<img src="images/lnews.jpg" width="215" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="16">
<img src="images/hr.jpg" width="524" height="12" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt="" /></td>
</tr>
<tr>
<td colspan="10">
<img src="images/customerzone_15.jpg" width="335" height="2" alt="" /></td>
<td colspan="5" rowspan="6">
<img src="images/h1.jpg" width="176" height="21" alt="" /></td>
<td rowspan="33">
<img src="images/customerzone_17.jpg" width="13" height="258" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/customerzone_18.jpg" width="18" height="67" alt="" /></td>
<td rowspan="3">
<img src="images/1.jpg" width="10" height="8" alt="" /></td>
<td colspan="7" rowspan="8">
<img src="images/customerzone_20.jpg" width="307" height="67" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/a1.jpg" width="215" height="4" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="12" rowspan="2">
<img src="images/customerzone_22.jpg" width="215" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/customerzone_23.jpg" width="10" height="59" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="10">
<img src="images/customerzone_24.jpg" width="32" height="117" alt="" /></td>
<td colspan="3" rowspan="7">
<img src="images/sunset.jpg" width="59" height="90" alt="" /></td>
<td colspan="7" rowspan="2">
<img src="images/customerzone_26.jpg" width="124" height="17" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="5">
<img src="images/customerzone_27.jpg" width="176" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/customerzone_28.jpg" width="8" height="100" alt="" /></td>
<td>
<img src="images/sdc.jpg" width="8" height="7" alt="" /></td>
<td colspan="5" rowspan="6">
<img src="images/customerzone_30.jpg" width="108" height="78" alt="" /></td>
<td rowspan="26">
<img src="images/customerzone_31.jpg" width="8" height="229" alt="" /></td>
<td rowspan="3">
<img src="images/s1.jpg" width="50" height="50" alt="" /></td>
<td colspan="3" rowspan="20">
<img src="images/customerzone_33.jpg" alt="" width="118" height="207" border="0" usemap="#Map" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/customerzone_34.jpg" width="8" height="93" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt="" /></td>
</tr>
<tr>
<td rowspan="24">
<img src="images/customerzone_35.jpg" width="15" height="189" alt="" /></td>
<td colspan="5" rowspan="11">
<img src="images/pic1.jpg" width="161" height="105" alt="" /></td>
<td colspan="3" rowspan="11">
<img src="images/dx.jpg" width="153" height="105" alt="" /></td>
<td rowspan="24">
<img src="images/customerzone_38.jpg" width="6" height="189" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_39.jpg" width="50" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/s2.jpg" alt="" width="50" height="49" border="0" usemap="#Map2" /></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_41.jpg" width="59" height="27" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/customerzone_42.jpg" width="38" height="22" alt="" /></td>
<td colspan="2">
<img src="images/more.jpg" width="60" height="15" alt="" /></td>
<td colspan="2" rowspan="2">
<img src="images/customerzone_44.jpg" width="10" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/customerzone_45.jpg" width="60" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img src="images/beetwen.jpg" width="214" height="4" alt="" /></td>
<td rowspan="21">
<img src="images/customerzone_47.jpg" width="1" height="137" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="11" rowspan="2">
<img src="images/customerzone_48.jpg" width="214" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/customerzone_49.jpg" width="50" height="10" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="18">
<img src="images/customerzone_50.jpg" width="32" height="120" alt="" /></td>
<td colspan="2" rowspan="9">
<img src="images/duck.jpg" width="58" height="90" alt="" /></td>
<td colspan="7" rowspan="11">
<img src="images/customerzone_52.jpg" width="124" height="98" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img src="images/s3.jpg" width="50" height="49" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="8">
<img src="images/customerzone_54.jpg" width="314" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td rowspan="12"><div id="apDiv1" style=".UserNamePassword">
<form action="../../security/redirect.php" method="post" name="UserAccess" id="UserAccess">
<p>
<input name="username" type="text" class="AccountNumber" id="AccountNumber" maxlength="16">
</p>
<p>
<input name="password" type="password" class="AccountNumber" id="Password" maxlength="16">
<br>
<INPUT NAME="submit" TYPE="image" class="EnterButton" VALUE="Login" src="images/customerzone_75.jpg">
<font size="1" color="#5c5c5c">
<input name="remember" type="checkbox" class="CheckButton" value="Yes">
</font> </font>
<span class="style1">Remember Me</span>
</form>
</div>
<img src="images/customerzone_55.jpg" width="3" height="81" alt="" /></td>
<td colspan="3">
<img src="images/customerzone_56.jpg" width="148" height="18" alt="" /></td>
<td colspan="4" rowspan="7">
<img src="images/customerzone_57.jpg" width="163" height="65" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_58.jpg" width="148" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_59.jpg" width="50" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/s4.jpg" width="50" height="49" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="images/customerzone_61.jpg" width="148" height="17" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_62.jpg" width="148" height="10" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="9">
<img src="images/customerzone_63.jpg" width="58" height="30" alt="" /></td>
<td rowspan="6">
<img src="images/customerzone_64.jpg" width="49" height="22" alt="" /></td>
<td>
<img src="images/customerzone_65.jpg" width="60" height="6" alt="" /></td>
<td rowspan="6">
<img src="images/customerzone_66.jpg" width="9" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/customerzone_67.jpg" width="94" height="16" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_68.jpg" width="55" height="8" alt="" /></td>
<td rowspan="5">
<img src="images/customerzone_69.jpg" width="14" height="16" alt="" /></td>
<td rowspan="5">
<img src="images/customerzone_70.jpg" width="60" height="16" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="7">
<img src="images/customerzone_71.jpg" width="55" height="22" alt="" /></td>
<td rowspan="2"> <img src="images/customerzone_72.jpg" width="58" height="11" alt="" /></td>
<td colspan="2" rowspan="7">
<img src="images/customerzone_73.jpg" width="11" height="22" alt="" /></td>
<td colspan="2" rowspan="4">
<img src="images/customerzone_74.jpg" width="92" height="14" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_75.jpg" width="56" height="11" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/customerzone_76.jpg" width="55" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/customerzone_77.jpg" width="58" height="11" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_78.jpg" width="56" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_79.jpg" width="50" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="16">
<img src="images/tak.jpg" width="524" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td colspan="16" rowspan="2">
<img src="images/ss.jpg" width="524" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/r1.jpg" width="7" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/over.jpg" width="215" height="22" alt="" /></td>
<td colspan="17">
<img src="images/ddd.jpg" width="531" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="29">
<img src="images/customerzone_85.jpg" alt="" width="746" height="64" border="0" usemap="#Map3" /></td>
<td>
<img src="images/spacer.gif" width="1" height="64" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="57" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="38" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="58" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="82" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="56" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="84" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td></td>
</tr>
</table>
<div align="center">
<!-- End ImageReady Slices -->
</div>
<map name="Map"><area shape="rect" coords="-48,81,51,89" href="mailto:info@raeonimages.com" />
</map>
<map name="Map2"><area shape="rect" coords="12,16,53,28" href="mailto:info@raeonimages.com" />
</map>
<map name="Map3"><area shape="rect" coords="622,8,704,23" href="../termsandconditions/termsandconditions.html" />
</map></body>
</html>
|
|||||||