HTML Problem

Printable View

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

HTML Problem

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?
August 17th, 2009, 08:13 AM
PeejAvery

Re: HTML Problem

What exactly is it supposed to look like? Got a design concept drawing?
August 17th, 2009, 08:28 AM
dannystommen

Re: HTML Problem

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>
August 17th, 2009, 08:29 AM
Bill Crawley

1 Attachment(s)

Re: HTML Problem

I've had to place it in a word doc. Hope you can see it.
August 17th, 2009, 09:20 AM
PeejAvery

Re: HTML Problem

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"> </div> <div id="box_middle"> the inner content goes here. </div> <div id="box_bottom"> </div>
August 17th, 2009, 11:08 AM
Bill Crawley

Re: HTML Problem

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?
August 17th, 2009, 11:46 AM
PeejAvery

Re: HTML Problem

Why can't you remake them? It's so much more efficient and clean for coding.
August 17th, 2009, 03:15 PM
Bill Crawley

Re: HTML Problem

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.
August 17th, 2009, 04:09 PM
dannystommen

Re: HTML Problem

Quote:

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!
August 17th, 2009, 04:23 PM
PeejAvery

Re: HTML Problem

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.