|
 |
|
|
|
| Thread title: [Help] Using Eight <div> for Curved Corners (tl, t, tr, r, br, b, bl, l) |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
02-13-2007, 05:23 PM
|
#1
|
Status: I love this place
Join date: Dec 2005
Location: Bay Area, CA
Expertise:
Software:
Posts: 734
|
 [Help] Using Eight <div> for Curved Corners (tl, t, tr, r, br, b, bl, l)
Hi tfl,
I am having trouble getting the top left corner to show for the forms on my page.
The site is http://www.sendbackup.com/
Any help would be appreciated. I have attached an excerpt of the coded portion. The CSS file is here.
Thanks,
Edwin
Code:
<div id="tl2">
<div id="t">
<div id="l">
<div id="b">
<div id="r">
<div id="bl2">
<div id="br2">
<div id="tr2">
<textarea name="textarea" class="message" >you shall put in here any words you may wish to send.....</textarea>
<input name="media" type="hidden" id="media" value="upfile">
</div>
</div></div></div>
</div></div></div></div>
|
|
|
|
02-13-2007, 08:24 PM
|
#2
|
Status: Junior Member
Join date: May 2005
Location:
Expertise:
Software:
Posts: 44
|
why don't you just do it like this?
HTML Code:
<div class="box-wrapper">
<img src="images/box_top.jpg" alt="" />
<div class="box-middle">
you shall put in here any words you may wish to send.....
</div>
<img src="images/box_bottom.jpg" alt="" />
</div>
the image "box_top.jpg":
the image "box_bottom.jpg":
and in the css you would put this:
HTML Code:
div.box-wrapper{
width: 544px;
}
div.box-middle{
background-image: url(images/box_middle.jpg);
background-repeat: repeat-y;
padding: 3px 10px; /* first value is for top/bottom, the second for left/right */
color: white;
}
the image "box_middle.jpg":
I hope this works...
|
|
|
|
02-14-2007, 08:30 PM
|
#3
|
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
Posts: 249
|
Originally Posted by noodles 
why don't you just do it like this?
HTML Code:
<div class="box-wrapper">
<img src="images/box_top.jpg" alt="" />
<div class="box-middle">
you shall put in here any words you may wish to send.....
</div>
<img src="images/box_bottom.jpg" alt="" />
</div>
the image "box_top.jpg":
the image "box_bottom.jpg":
and in the css you would put this:
HTML Code:
div.box-wrapper{
width: 544px;
}
div.box-middle{
background-image: url(images/box_middle.jpg);
background-repeat: repeat-y;
padding: 3px 10px; /* first value is for top/bottom, the second for left/right */
color: white;
}
the image "box_middle.jpg":
I hope this works... |
I'm guessing he is used to using tables and seeing as I am too, we like to make things be able to expand both vertically and horizontally.
|
|
|
|
02-15-2007, 06:23 PM
|
#4
|
Status: I love this place
Join date: Mar 2005
Location:
Expertise:
Software:
Posts: 714
|
|
|
|
|
02-16-2007, 07:01 AM
|
#5
|
Status: I love this place
Join date: Dec 2005
Location: Bay Area, CA
Expertise:
Software:
Posts: 734
|
|
|
|
|
02-16-2007, 08:42 AM
|
#6
|
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
Posts: 249
|
Originally Posted by Edder
|
Glad you got it working, one thing you may want to work on is keeping your code clean and well organized/formatted... Makes it much easier to read.
Here is an example of your code after I formatted it some.
HTML 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">
<head>
<meta http-equiv="Content-Type" content="text/html; ch****t=iso-8859-1"/>
<title>SendBackup</title>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
<body>
<div id="container">
<a href="http://www.sendbackup.com"><img src="images/logo.gif" alt="Logo"/></a>
<div>
<ul id="nav">
<li class="backup"><a href="index.php">Backup</a></li>
<li class="about"><a href="aboutus.php">About</a></li>
<li class="privacy"><a href="privacy.php">Privacy</a></li>
<li class="terms"><a href="terms.php">Terms</a></li>
<li class="contact"><a href="contact.php">Contact</a></li>
</ul>
</div>
<div class="instructions">
<div id="tl">
<div id="tr">
<div id="bl">
<div id="br">
Enter your email address, choose a file to backup, and click
<br/>
the "send it" button to backup.
<a href="privacy.php">Your privacy</a>
is guaranteed.
</div>
</div>
</div>
</div>
</div>
<div id="content">
<div id="table1" style="visibility: hidden; display: none">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td><h4 class="ltxt"> SendBackup.com - We provide free document backups via email
<br/> Sending Your File. Please Stand By...</h4></td>
</tr>
<tr>
<td> <!-- <iframe src="progress.html" frameborder="0" marginWidth=0 marginHeight=0 scrolling="auto" width="100%" height="5"></iframe> -->
<img src="images/sending_progress.gif" width="150" height="5" alt="sending progress"/></td>
</tr>
<tr>
<td class="ltxt"><b>Note:</b>
Don't close this page or browse away while the progress bar is being displayed above. You'll see a confirmation screen when your file has been successfully sent. Keep in mind that a one megabyte (1MB) file can take 1 to 5 minutes to send depending on your connection speed.</td>
</tr>
</table>
</div>
<div id="table2SD">
</div>
<div id="table2" style="visibility: visible; display: inline">
<div style="text-align: center;">
<form action="" method="post" onsubmit="return isUpFormOk(this)" enctype="multipart/form-data">
<div id="youremail">
</div>
<div class="t">
<div class="r">
<div class="b">
<div class="l">
<div class="tr2">
<div class="br2">
<div class="bl2">
<div class="tl2">
<input name="emailto" type="text" id="emailto2" maxlength="50" class="message" value="yoursite@yoursite.com"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="selectfile">
</div>
<div class="t">
<div class="r">
<div class="b">
<div class="l">
<div class="tr2">
<div class="br2">
<div class="bl2">
<div class="tl2">
<input name="upfile" type="file" id="upfile" class="message"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="messageto">
</div>
<div class="t">
<div class="r">
<div class="b">
<div class="l">
<div class="tr2">
<div class="br2">
<div class="bl2">
<div class="tl2">
<textarea name="textarea" class="message" rows="3" cols="1">you shall put in here any words you may wish to send.....</textarea>
<input name="media" type="hidden" id="media" value="upfile"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sendit">
<input name="input" type="image" src="images/sendit.gif"/>
</div>
</form>
</div>
</div>
</div>
<div id="footer">
<a href="index.php">Home</a>
|
<a href="contact.php">Contact Us</a>
| © 2006 SendBackup.com. SendBackup is a division of
<a href="http://www.unlucky8.com/">Unlucky 8</a>.
</div>
</div>
</body>
</html>
|
|
|
|
02-16-2007, 11:12 AM
|
#7
|
Status: Junior Member
Join date: May 2005
Location:
Expertise:
Software:
Posts: 44
|
Originally Posted by Phaaze
I'm guessing he is used to using tables and seeing as I am too, we like to make things be able to expand both vertically and horizontally.
|
yes, but he didn't use tables for those boxes... and as far as I can see, the page has a fixed width, so he wouldn't have to make it expand horizontally...
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed