2 replies [Last post]
selaine
Offline
newbie
Illinois
Last seen: 16 years 1 week ago
Illinois
Timezone: GMT+6
Joined: 2003-12-09
Posts: 3
Points: 0

The look I am striving for in redesigning the look of our entire site, can be found at: http://www.co.rock-island.il.us/rico1g/ This page was created as a layout tool only using Photoshop and ImageReady.

The actual page (as coded thusfar) can be found at: http://www.co.rock-island.il.us/Temp/

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 http://www.co.rock-island.il.us/Temp/ 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:

<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">&nbsp;<!--#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:

<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:

.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!!!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

problem using images to create rounded corner type border

This should help

http://www.csscreator.com/css-node/

Regards
Day

The only way to learn is to do it yourself

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 16 years 7 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

problem using images to create rounded corner type border

This page links to many ways of rounding corners:

http://css-discuss.incutio.com/?page=RoundedCorners

http//www.positioniseverything.net/