The look I am striving for in redesigning the look of our entire site, can be found at: URL This page was created as a layout tool only using Photoshop and ImageReady.
The actual page (as coded thusfar) can be found at: URL
My problem is this: I would love to be able to use a simple css border, but the boss doesn't like the squared corners and wants them rounded. The css border would work best, as it would collapse and expand based on content. However, I can't use it as I mentioned, so I've come up with the look and the code to imitate a css border, but with rounded edges. (I'm new to css and am learning as I go along and as a note, have not worked hardly at all using div or span - in case someone wonders why I used tables). Anyway, If you open URL and shrink the screen width, the table images break apart.
I'm not sure whether there would be a better way to accomplish my task, or if anyone who knows more about css could tell me how to fix the table, so it remains solid, but expands and contracts with the content.
The index.asp page for the temp address contains multiple server side includes to pull in each section of the page.
My code for my index.asp page is as follows:
Code:
<HTML>
<HEAD>
<TITLE>Rock Island County Home Page</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"><LINK href="/Temp/style/global.css" type=text/css rel=stylesheet><LINK href="/Temp/style/text.css" type=text/css rel=stylesheet>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<noscript>Your browser does not support script</noscript>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<!--#include virtual="/Temp/Header.asp"-->
</TABLE>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" valign="top">
<TR>
<TD width="136px" valign="top"><!--#include virtual="/Temp/Nav.asp"--></TD>
<TD width="*" valign="top"> <!--#include virtual="/Temp/Main_Content.asp"--></TD>
<TD width="183px" valign="top"><!--#include virtual="/Temp/Content_Right.asp"--></TD>
</TR>
</TABLE>
</BODY>
</HTML>
The Main_Content.asp code is where the problem lies. Its code is as follows:
Code:
<CENTER><TABLE WIDTH="90%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=2><IMG SRC="/Temp/images/Top_Left.jpg" WIDTH=13 HEIGHT=13 ALT="" class="topleft"></TD>
<TD COLSPAN=2 background="/Temp/images/Top_Pixel.jpg" WIDTH="100%" HEIGHT=2 class="toppix"></TD>
<TD ROWSPAN=2><IMG SRC="/Temp/images/Top_Right.jpg" WIDTH=13 HEIGHT=13 ALT=""></TD>
<TD background="/Temp/images/spacer.gif" WIDTH="100%" HEIGHT="100%" class="stretch"></TD>
</TR>
<TR>
<TD COLSPAN=2 ROWSPAN=4 class="PgText"><br><UL> <%
strDBPath ="C:\Inetpub\wwwroot\News\WhatsNew.mdb"
Set cnnSearch = Server.CreateObject("ADODB.Connection")
cnnSearch.Open "Provider=MSDASQL.1;Persist Security Info=False;Data Source=WhatsNew"
' Build query based on the input.
strSQL = "SELECT START, LAST, DESCRIP " _
& "FROM CALENDAR " _
& "WHERE START <=DATE() " _
& "AND LAST >=DATE() " _
& "ORDER BY START;"
Set rstSearch = cnnSearch.Execute(strSQL)
%>
<% 'Loop through the recordset to make each entry in the list.
If Not(rstSearch.BOF And rstSearch.EOF) Then
Do While Not rstSearch.EOF
%>
<LI>
<%= rstSearch.Fields("DESCRIP").Value %>
<br>
<%
rstSearch.MoveNext
Loop %>
<% else %>
<% Response.Write "No Announcements Today." %>
<% End If %>
<%
' Close our recordset and connection and dispose of the objects
rstSearch.Close
Set rstSearch = Nothing
cnnSearch.Close
Set cnnSearch = Nothing
%>
<!--<IMG SRC="/Temp/images/Content_Cell.jpg" WIDTH=183 HEIGHT=44 ALT="">--></UL></TD>
<TD background="/Temp/images/spacer.gif" WIDTH="100%" HEIGHT="100%" class="stretch"></TD>
</TR>
<TR>
<TD ROWSPAN=2 background="/Temp/images/Left_Pixel.jpg" width=13 height="100"% class="leftpix"></TD>
<TD ROWSPAN=2 background="/Temp/images/Right_Pixel.jpg" width=13 height="100"% class="rightpix"></TD>
<TD background="/Temp/images/spacer.gif" WIDTH="100%" HEIGHT="100%" class="stretch"></TD>
<!--<TD><IMG SRC="/Temp/images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>-->
</TR>
<TR>
<TD background="/Temp/images/spacer.gif" WIDTH="100%" HEIGHT="100%" class="stretch"></TD>
<!--<TD><IMG SRC="/Temp/images/spacer.gif" WIDTH=1 HEIGHT=24 ALT=""></TD>-->
</TR>
<TR>
<TD ROWSPAN=2><IMG SRC="/Temp/images/Btm_Left.jpg" WIDTH=13 HEIGHT=13 ALT=""></TD>
<TD ROWSPAN=2><IMG SRC="/Temp/images/Btm_Right.jpg" WIDTH=13 HEIGHT=13 ALT=""></TD>
<TD background="/Temp/images/spacer.gif" WIDTH="100%" HEIGHT="100%" class="stretch"></TD>
<!--<TD><IMG SRC="/Temp/images/spacer.gif" WIDTH=1 HEIGHT=9 ALT=""></TD>-->
</TR>
<TR>
<TD COLSPAN=2 background="/Temp/images/Btm_Pixel.jpg" WIDTH="100%" HEIGHT=4 class="btmpix"></TD>
<TD background="/Temp/images/spacer.gif" WIDTH="100%" HEIGHT="100%" class="stretch"></TD>
<!--<TD><IMG SRC="/Temp/images/spacer.gif" WIDTH=1 HEIGHT=4 ALT=""></TD>-->
</TR>
</TABLE></CENTER>
And, just in case you need it, my global.css file is as follows:
Code:
.stretch {
BACKGROUND-POSITION: left;
BACKGROUND-REPEAT: repeat;
}
.leftpix {
BACKGROUND-POSITION: top;
BACKGROUND-REPEAT: repeat-y;
}
.rightpix {
BACKGROUND-POSITION: top;
BACKGROUND-REPEAT: repeat-y;
}
.toppix {
BACKGROUND-POSITION: left;
BACKGROUND-REPEAT: repeat-x;
}
.btmpix {
BACKGROUND-POSITION: left;
BACKGROUND-REPEAT: repeat-x;
}
.buttons {
BACKGROUND-IMAGE: url(/Temp/images/BtnBG.jpg);
BACKGROUND-REPEAT: no-repeat;
}
.NDir {
BACKGROUND-IMAGE: url(/Temp/images/Dir_BG.jpg);
BACKGROUND-REPEAT: no-repeat;
}
.NFaq {
BACKGROUND-IMAGE: url(/Temp/images/Faq_BG.jpg);
BACKGROUND-REPEAT: no-repeat;
}
.NPol {
BACKGROUND-IMAGE: url(/Temp/images/Pol_BG.jpg);
BACKGROUND-REPEAT: no-repeat;
}
.NCal {
BACKGROUND-IMAGE: url(/Temp/images/Cal_BG.jpg);
BACKGROUND-REPEAT: no-repeat;
}
.image {
border-style: dotted;
border-color: #25385A;
border-width: 5px;
padding: 2px;
margin-left: 10px;
}
.across {
BACKGROUND-POSITION: left;
BACKGROUND-REPEAT: repeat-y;
}
.topleft {
BACKGROUND-IMAGE: url(/Temp/images/Top_Left.jpg);
BACKGROUND-REPEAT: no-repeat;
}
.topright {
BACKGROUND-IMAGE: url(/Temp/images/Top_Right.jpg);
BACKGROUND-REPEAT: no-repeat;
}
.btmleft {
BACKGROUND-IMAGE: url(/Temp/images/Btm_Left.jpg);
BACKGROUND-REPEAT: no-repeat;
}
.btmright {
BACKGROUND-IMAGE: url(/Temp/images/Top_Right.jpg);
BACKGROUND-REPEAT: no-repeat;
}
Hopefully, I haven't overwhelmed everyone with the issue, but the boss has also told the powers that be, that we will be launching the new look, along with new content, by the end of February. So, it's kind of a rush, as I'm the solitary web programmer. Any help would really be appreciated. Thank you!!!
ASP Free Forums Sponsor:
January 11th, 2004, 01:30 AM
css: problem using images to create rounded corner type border
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
