HTML Problem

**Bill Crawley** · August 17th, 2009, 06:12 AM

Hi All,

I need a little bit of help placing some graphics on a screen.

My basic Markup is:

Code:

    <div class="right">
        First Name:<asp:TextBox ID="txtFirstName" runat="server" TabIndex="0"></asp:TextBox></div>
    <div class="right">
        Surname:<asp:TextBox ID="txtLastName" runat="server" TabIndex="1"></asp:TextBox></div>
    <div class="right">
        Phone Number:<asp:TextBox ID="txtPhone" runat="server" TabIndex="2"></asp:TextBox></div>
    <div class="right">
        Business Unit:<asp:DropDownList ID="lstBusinessUnit" runat="server" CssClass="dropdown" TabIndex="3"></asp:DropDownList></div>
    <div class="right">
        Department:<asp:DropDownList ID="lstDepartment" runat="server" CssClass="dropdown" TabIndex="4"></asp:DropDownList></div>

I've been given a gif consisting of a blue horizontal line, another of a vertical blue line and 4 gifs giving round corners. I need to use these gifs to make a box that the above code sits in. I assume I can use another DIV tag but how do I style it?

**PeejAvery** · August 17th, 2009, 08:13 AM

What exactly is it supposed to look like? Got a design concept drawing?

**dannystommen** · August 17th, 2009, 08:28 AM

try this (offcoure, replace the image urls)

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="Exchange.Website.test.WebForm4" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <style>
        div#main_login_container div.top {
            background: transparent url(  'horizontal_line.png' ) repeat-x scroll 0pt 0%;
        }
        div#main_login_container div.bottom {
            background: transparent url(  'horizontal_line.png' ) repeat-x scroll 0pt 100%;
        }
        div#main_login_container div.left {
            background: transparent url(  'vertical_line.png' ) repeat-y scroll 0pt;
        }
        div#main_login_container div.right {
            background: transparent url(  'vertical_line.png' ) repeat-y scroll 100% 0pt;
        }
        div#main_login_container div.topLeft {
            background: transparent url(  'topleft.png' ) no-repeat top left;
        }
        div#main_login_container div.topRight {
            background: transparent url(  'topright.png' ) no-repeat top right;
        }
        div#main_login_container div.bottomLeft {
            background: transparent url(  'bottomleft.png' ) no-repeat bottom left;
        }
        div#main_login_container div.bottomRight {
            background: transparent url(  'bottomrigth.png' ) no-repeat bottom right;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="main_login_container">
            <div class="top">
                <div class="bottom">
                    <div class="left">
                        <div class="right">
                            <div class="topLeft">
                                <div class="topRight">
                                    <div class="bottomLeft">
                                        <div class="bottomRight">
                                            <div class="content">
                                            Some text
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

**Bill Crawley** · August 17th, 2009, 08:29 AM

I've had to place it in a word doc. Hope you can see it.

**PeejAvery** · August 17th, 2009, 09:20 AM

Whoa, whoa, whoa! Way too obscure. Seriously, this can be accomplished with 3 divs.

Split your box into 3 sections: top, middle bottom. The top and bottom need to be big enough to fit the curve. That is why my example has 32 pixels in height. For the middle, just crop a 10 pixel tall image and it will automatically repeat.

Code:

<style type="text/css">
#box_top {width: 400px; height: 32px; background: #ffffff url(images/box/top.png);}
#box_middle {width: 400px; background: #ffffff url(images/box/middle.png) repeat-x;}
#box_bottom {width: 400px; height: 32px; background: #ffffff url(images/box/bottom.png);}
</style>

<div id="box_top">&nbsp;</div>
<div id="box_middle">
the inner content goes here.
</div>
<div id="box_bottom">&nbsp;</div>

**Bill Crawley** · August 17th, 2009, 11:08 AM

peejAvery

Can I use your solution when the images that I have been supplied with are made up of 4 images for the corners, 1 image for the horizontal and 1 image for the vertical. As I think for your solution I would need to use just 3 images. But I dont have this option?

**PeejAvery** · August 17th, 2009, 11:46 AM

Why can't you remake them? It's so much more efficient and clean for coding.

**Bill Crawley** · August 17th, 2009, 03:15 PM

I'm working on a client site with their kit and they have only given me access to VS2008. I have no graphic tool available to me and have been given the graphics from another dept. They have also said that I cannot use Javascript or any of the asp.net tools that might generate javascript in the background and I cannot use tables either, not even sparingly where to you and I it would be appropriate.

**dannystommen** · August 17th, 2009, 04:09 PM

Originally Posted by PeejAvery

Whoa, whoa, whoa! Way too obscure. Seriously, this can be accomplished with 3 divs.

That was an example I saw somewhere. But I agree, your solution is much better!

**PeejAvery** · August 17th, 2009, 04:23 PM

You don't want to use JavaScript to work with images...period! You should use an image editor to combine them. Perhaps even just use a trial of Photoshop. There are other freewares out there that can do it as well...Paint.Net.

Thread: HTML Problem

Thread Tools

Display

HTML Problem

Re: HTML Problem

Re: HTML Problem

Re: HTML Problem

Re: HTML Problem

Re: HTML Problem

Re: HTML Problem

Re: HTML Problem

Re: HTML Problem

Re: HTML Problem

Posting Permissions