|
|
|
|
|||||
|
|
|
|
|
|
|||
| Welcome
to Tech Support Forum home to more then 136,000 problems solved. Issues
have included: Spyware, Malware, Virus Issues, Windows, Microsoft,
Linux, Networking, Security, Hardware, and Gaming Getting your
problem solved is as easy as: 1. Registering for a free account 2. Asking your question 3. Receiving an answer Registered members: * See fewer ads. * And much more..
|
| Want to know how to post a question? click here | Having problems with spyware and pop-ups? First Steps |
|
|||||||
| Web Design & Programming Discussion of web design, and server-side & client-side scripting |
 |
|
|
Thread Tools |
06-11-2008, 08:53 AM
|
#1 (permalink) |
|
Registered User
Join Date: Apr 2006
Posts: 17
OS: XP VISTA
|
Website Background
I'm trying to figure out how to make a background for my website that looks like this the red x's would be buttons that can't be stretched but must stay aligned. Is there anyway to make the background stay the same in the middle so the crown at the top of the arch doesn't move when the window size is changed but the sides to always reach the sides of the window. It's hard to explain.. check LRG's website to see what I mean. The have a straight line across so it may be easier to do.. I wanted to use a curve. Please let me know if I have to explain further, thanks for any help in advance!
|
|
     
|
|
06-16-2008, 04:03 PM
|
#4 (permalink) |
|
Design Team Member
Join Date: Feb 2008
Location: Deming, NM
Posts: 288
OS: XP SP2 & Vista
|
Re: Website Background
Sorry for the lack of response, but I believe it's due to the fact that no one knows. It's very easy when working with straight lines, but I am not aware of how to do it with a curved image. I'm sure it could be done with the right amount of programming, but that is out of my area. Hopefully someone else can chime in with something that could possibly help.
Good luck on your hunt! Have you thought about using the curve in the "middle" of the site but leave the liquidity to the outer ends which could have straight lines? Hope that makes sense 
__________________
|
|
|
|
|
06-18-2008, 07:46 AM
|
#5 (permalink) |
|
Registered User
Join Date: Apr 2006
Posts: 17
OS: XP VISTA
|
Re: Website Background
Well yea I think I know what you mean. Can I do something like this?
Then just have the straight lines on the side stretch and nothing in the middle stretch?? If so please help me out on how this would be done. Thanks!! |
|
|
|
|
06-19-2008, 01:00 AM
|
#6 (permalink) |
|
Design Team Member
Join Date: Feb 2008
Location: Deming, NM
Posts: 288
OS: XP SP2 & Vista
|
Re: Website Background
That is exactly what I was thinking about. Don't have a lot of brain power left tonight, so I will think of how the layout could work like that in the next couple of days.
__________________
|
|
|
|
|
06-28-2008, 02:09 AM
|
#9 (permalink) |
|
Design Team Member
Join Date: Feb 2008
Location: Deming, NM
Posts: 288
OS: XP SP2 & Vista
|
Re: Website Background
Hey sharp15!
Sorry took so long to reply back. Life is busy right now. Check out link below for a sample page I uploaded with what I think could make your idea work. I colored the different parts just to make them stand out. Source code is below too. Not sure if there is a better way, but this is the way I figured it out :) Technically I think the image is off by 1px. You will just want to play with it until it's perfect. IE7 is breaking the line but I believe that is just a css issue with using %. Also, the code in bold is really what makes the image sit where it does. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style>
.wrapper {
margin-top:100px;
width:100%;
min-height:500px;
text-align:center;
position:absolute;
left:0;
top:0;
z-index:10;
background-color:#000000;
}
.headerwrapper {
width:100%;
z-index:inherit;
}
.headerleft {
width:25%;
float:left;
background-color:#666666;
z-index:inherit;
border-top-color:#00FF00;
border-top-style:dashed;
border-top-width:thick;
}
.headermiddle {
width:50%;
float:left;
background-color:#999999;
z-index:inherit;
border-top-color:#FF0000;
border-top-style:dashed;
border-top-width:thick;
}
.headerright {
width:25%;
float:left;
background-color:#666666;
z-index:inherit;
border-top-color:#00FF00;
border-top-style:dashed;
border-top-width:thick;
}
.placeholder {
position:absolute;
left:50%;
width:1px;
height:1px;
background-color:#FFFFFF;
z-index:2;
}
.roundedimage {
position:relative;
left:-250px;
top:-250px;
z-index:1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="headerwrapper">
<div class="headerleft"> </div>
<div class="headermiddle"> </div>
<div class="headerright"> </div>
</div>
<div class="placeholder">
<div class="roundedimage"><img src="images/half-sun.gif" width="500" height="250" alt="SUN" /></div>
</div>
</div>
</body>
</html>
Hope that woks for you. If you need me to explain any of it let me know.
__________________
|
|
|
|
|
| Thread Tools | |
|
|
