Wrox Programmer Forums
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old November 30th, 2005, 10:44 AM
Authorized User
 
Join Date: Nov 2005
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default aspx inside of css

Please forgive me if this is a rather dumb question.

A colleague of mine has developed some very nice css pages using dream weaver.

I have written a vb asp.net application.

I would like to invoke my aspx application in a div section of the very nice css pages
so I can keep the same very nice look and feel.

I have tested the aspx application on an old asp web site that used an href to start a separate page with my application it works very well.

In dreamweaver when I try to set up an IFRAME with a source of my aspx application, the application starts but the fields do not display correctly and the submit button does not work.

Any points on how if possible to get my aspx application to run in a div section of a css page would be appreciated.



 
Old November 30th, 2005, 03:12 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

I am not sure I understand the problem. Can you elaborate a bit?

E.g. what is the page structure, what page goes in the iframe, where does the CSS come from, in what page is the button located, what does "does not work" mean exactly, and so on?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
 
Old December 1st, 2005, 09:15 AM
Authorized User
 
Join Date: Nov 2005
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default

My colleague is using dreamweaver 7.0. He has very nice pages
created with css saved with .asp extension.

I on the other hand have been learning asp.net and developed a aspx
application using vb.net. I am presently using MS frame works 1.1 and MS Development environment 2003 version 7.1.

I first tested my aspx page on our old intranet site by a href,
having it display in a layer on a aps page, it worked fine.

But under the new intranet site I would like the apsx to start on a page load when the page for the request form is called.

What I wanted to avoid is just starting my aspx application with a href call for I then loose the look and feel of all the drop down and list boxes consistent thru out all the other pages. I did not want to hard code it in my asp.net application for then we have dual code not only in 2 separate places but maintained differently, not to mention the addition of other asp.net applications.

I have tried:

1. Inserting an IFRAME with a source reference to my application.
   Does not display properly fields all grouped together (css?) submit button does not work.
2. A java script function call invoked by page load - did not load.

I am going to take another look at the old intranet web site and how my application worked there.

Here is a sample of the new intranet web page, they all have the same menu items.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XXXXHome</title>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 6;

//menu constructor
function menu(allitems,thisitem,startstate){
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;
  this.numberofmenuitems = 6;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
  }
  theobj.thediv.style.visibility="visible";
}

function closesubnav(event){
  if ((event.clientY <97)||(event.clientY > 156)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
  }
}
// -->
</script>
</head>
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
  <a href="index.asp"><img src="images/XXXXon_logo.gif" width="230" height="75" vspace="10" border="0"></a>
  <div id="utility">
    <a href="contact.asp">Contact</a> | <a href="suggestions.asp">Suggestions</a> | <a href="#">Utility
    Link</a>
  </div>
  <div id="globalNav">
    <img alt="" src="images/gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="images/glbnav_right.gif" height="32" width="4" id="gnr">
    <div id="globalLink">
      <a href="newsletter.asp" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Newslette r</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Departmen ts</a><a href="forms.asp" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Forms</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Photos</a><a href="links.asp" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Links</a><a href="up_events.asp" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Upcoming Events</a><a href="crystal_reports.asp" id="gl6" class="glink" onmouseover="ehandler(event,menuitem7);">Crystal Reports</a>
    </div>

    <form id="search" action="">
      <input name="searchFor" type="text" size="10">
      <a href="">search</a>
    </form>
  </div>

  <div id="subglobal1" class="subglobalNav">
    
  </div>
  <div id="subglobal2" class="subglobalNav">
    <a href="acct.asp">Accounting</a> | <a href="cust_service.asp">Customer Service</a> | <a href="erie.asp">Erie</a> |
    <a href="hr.asp">Human Resources</a> | <a href="iso.asp">ISO</a> | <a href="marketing.asp">Marketing</a> | <a href="mis.asp">MIS</a> | <a href="eng.asp">Engineering</a> |
    <a href="sales.asp">Sales</a> | <a href="tech_services.asp">Tech Services</a>
  </div>
  <div id="subglobal3" class="subglobalNav">
    
  </div>
  <div id="subglobal4" class="subglobalNav">
    <a href="m_america03.asp">XXXX XXXXXX 03</a> | <a href="m_america04.asp"> XXXXXXXXX 04</a> | <a href="company_picnic04.asp">Company Picnic 04</a> | <a href="company_picnic05.asp">Company Picnic 05</a>
  </div>
  <div id="subglobal5" class="subglobalNav">
     
  </div>
  <div id="subglobal6" class="subglobalNav">
   
  </div>
  <div id="subglobal7" class="subglobalNav">
   
  </div>
  <div id="subglobal8" class="subglobalNav">
    
  </div>
</div>

<div id="pagecell1">

  <img alt="" src="images/tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="images/tr_curve_white.gif" height="6" width="6" id="tr">

  <div id="pageName">
    <h2>IT REQUEST</h2>

  </div>
  <div>


  </div>

  <div id="siteInfo">
    <img src="" width="44" height="22"><a href="priv_policy.asp">Privacy Policy</a> | <a href="Contact.asp">Contact</a> | ©2005
    XXXX Products</div>
</div>

<br>
<script type="text/javascript">
    <!--
      var menuitem1 = new menu(7,1,"hidden");
            var menuitem2 = new menu(7,2,"hidden");
            var menuitem3 = new menu(7,3,"hidden");
            var menuitem4 = new menu(7,4,"hidden");
            var menuitem5 = new menu(7,5,"hidden");
            var menuitem6 = new menu(7,6,"hidden");
            var menuitem7 = new menu(7,7,"hidden");
    // -->
    </script>
</body>
</html>


 
Old December 1st, 2005, 09:25 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

If I understand you correctly, you can't do this.

The CSS from the main page doesn't bubble down to the .aspx in an iframe.
The same applies to JavaScript; code in the parent page won't work directly from within the document in the aspx page.

Did you use an ASP include in your previous site?

Why can't you just reference the same stylesheet (e.g. <link ...etc) in your ASPX page? That way, you get the same look and feel you have in the asp page.
ASPX pages stand on their own; you can't use them as include files as you could do in classis ASP pages...

Imar
 
Old December 1st, 2005, 09:35 AM
Authorized User
 
Join Date: Nov 2005
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thank you for your reply.

I have coded many asp pages but this is my first apsx page.

I was hoping that I could of had just added a layer and ran my aspx
application in that, because the aspx does run on its own, but as you stated that will not work.

I was hoping of not adding all the fancy links to my aspx pages becuase:
1. Then in the future when more fancy links are added to the css pages I have go in and make changes to my apsx page. I was hoping to keep the fancy style sheet stuff all in one spot and easily maintained by some one who did not necessarily have a programming back ground.

2. The fancy cascading style sheet has a diminishing color gradient from top to bottom and my in the future have other additions that I may not be able to duplicate in the future.

3. In the end users eyes having it all look the same would of been a good thing.




 
Old December 2nd, 2005, 11:22 AM
Authorized User
 
Join Date: Nov 2005
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default

A solution:

I was able to display my aspx application in a pop up window. This way the look and feel of the css pages is preserved and the
aspx application also works.



 
Old December 2nd, 2005, 05:20 PM
Authorized User
 
Join Date: Nov 2005
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default

If anyone is interested the following is how my popup window
is displaed in 2 steps. Others may have a more eloquent solutions I am only a nutrino passing by.

1. I have and include for the java script (no I did not write it):
<script language="javascript" type="text/javascript">
<!--

var win=null;

function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math .floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Mat h.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(scr een.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPositi on+',left='+LeftPosition+',scrollbars='+scroll+',l ocation=no,directories=no,status=no,menubar=no,too lbar=no,resizable=yes';
win=window.open(mypage,myname,settings);}

// -->
</script>

2. I invoke the function call with:
<a href="http://WWW.xxxxxxxx.COM/xxxxxxxxxxx.aspx" tabindex=-1 onclick="NewWindow(this.href,'xxxxxxxxxxxxxxx','80 0','550','yes','center');return false" onfocus="this.blur()">xxxxxxxxx</a>






Similar Threads
Thread Thread Starter Forum Replies Last Post
Ch 8: <asp:image> inside <a> & ext.CSS (pg. 274) epc BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 1 July 12th, 2008 04:37 AM
CSS HELP:! CSS EXPANDIBLE BACKGROUND FOR TITLE phpuser2000 CSS Cascading Style Sheets 2 December 19th, 2007 12:36 AM
Rich's new CSS book: Beginning CSS 2nd Edition jminatel BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 0 June 15th, 2007 11:55 AM
How can I a CSS into an aspx page? vafaee.kamran ASP.NET 2.0 Basics 2 September 13th, 2006 05:13 AM
HowTo Pass Form data from Page1.aspx to Page2.aspx dati ASP.NET 1.0 and 1.1 Basics 6 January 27th, 2004 06:57 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.