CSS - Loading A Different Webpage W/in Current Page (like Frames But Using Css)

Hello,

I need some help. I have a personals website where I am going to start allowing users to personalize their profile page with css. My plan is to store their personal css scripts in a database and when their profile is viewed to dynamically load the css styles per individual. My question is, how do I implement this? How would I load style scripts from the database onto their page?

One question that may negate my above question is...is this the best way to implement this type of feature (profile personalization)? I beleive css is powerful and probably the best way to go but I am open to anyone elses ideas for css implementation.

Thank you very much for your time and help.

Just wondering if there is such code that when you click something it replaces a certain item to a different item? Or is it Javascript?

Any websites that feature this?

Hi,

I have this strange issuewhich is only happening in IE7. When the page loads, the scroll bars begin to flicker. It stops after the page loads completely. And if the page is loading after an ajax request, it scroll bars keep flickering even after ajax response is completed. Please let me know if anyone has any answers to this issue.

The HTML is as follows:

<div id="db-overlay-popup-box" class="overlay-popup-box">
<div id="database-list-popup"><form>....</form></div></div>

The CSS used for the div elements is given below.

#db-overlay-popup-box {
min-height: 200px;
height: 400px;
position: absolute;
width: 40%;
margin-left: 30%;
top: 15em;
border: 2px solid #3282b6;
z-index: 999;
padding: 10px;
background-color: #fff;
}

#databaselist-databases {
list-style-type : none;
clear: both;
overflow: auto;
position: absolute;
width: 90%;
margin-left: 1em;
padding-left: 1em;
right: 1em;
white-space: nowrap;
}

.overlay-popup-box {
position: absolute;
z-index: 999;
width: 40%;
margin-left: 30%;
border: 2px solid #3282b6;
padding: 10px;
background-color: #fff;
}

Dear all,

I want to add a print icon to my pages, which would print an alternate page (a printer friendly version).

I have the following code:
<link href="print.php?cli_id=2" rel="alternate" media="print" />

This works fine if I use the print icon in my browser, but if I use javascript:window.print(); within the page, it seems to ignore the alternate printer friendly page.

My page appears in frames, and I plan to remove the browser toolbar and replace with a custom one in the page once the application is complete.

Any ideas anyone?

many thanks, Mark

Hello,

Here's a link to a very short video (MOV format) showing the issue that I'm having. I'm guessing that it's CSS related. It seems like the screen update shouldn't be so obvious. The graphics involved are very small, as well.

What could be causing this?

Thanks for any help!

blendernewbies dot com slash tmp slash screen_update_issue dot mov

EDIT: well, it seems I can't post links! How am I supposed to accurately convey the issue without wasting people's time trying to describe it? Sigh. I will try to post the link in a written out format. I hope it doesn't violate anything doing it that way. The video is hosted on my own server and is about 800KB. Thanks.

Hello dear programers
This my problem If anyone can help me,I will be so thanksfull,:

I have a full site script package which is in php,(I dont knoe php !! )
There is a style.css file,which I could change in colors and fonts,...but
I want to change a page with new design and colors and style,I tried to edit style.css file
(I deleted,changed it :/body, td, .forTexts/ but NOTHING happend!!)to make this page OK,But I couldnt,page doesnt load with its fonts and colors.

------------------------------------------

I past the original style.css :

form { margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;}
.toptable {
background-color: FF8D00;
}

a.toplink, a.toplink:hover, a.toplink:visited, a.toplink:active {
color: white;
text-decoration: none;
}
.forCopyright {
font-family: Times New Roman;
font-size: 11px;
color: #EDD1D7;
text-align: center;
background-color: ff8d00;
}

body, td, .forTexts {
font-family: Times New Roman;
font-size: 13px;
color: #000000;
}
a.menutxt, a.menutxt:hover, a.menutxt:visited, a.menutxt:active {
font-family:Times New Roman;
font-size: 13px;
color: #F3FBB4;
}
.menutxt {
font-family: Times New Roman;
font-size: 12px;
color: #000000;
}
th {
font-family: Times New Roman;
font-size: 12px;
color: #000000;
}

.title {
font-family: Times New Roman;
font-size: 12px;
color: #FFFFFF;
background-color: #FF8D00;
}

.inpts {
font-family: Times New Roman;
font-size: 12px;
color: #5D0400;
background-color: #D1CDFF;
border: 1px inset #000000;
border-color: #000000;
border-style:dashed;
}
.sbmt {
font-family: Times New Roman;
font-size: 13px;
color: #1D0067;
background-color: #cccccc;
border: 5px outset #ffffec;
}
a.hlp, a.hlp:active, a.hlp:visited, a.hlp:hover { font-family: Times New Roman; font-size: 13px; color: black; text-decoration: none; cursor: help;}

.line {
background-color: 000000;

}
div.framebody {
text-align: left;
}
td.inheader {
background-color: cccccc;
font-weight: bold;
text-align: center;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
}
td.item {
background-color: cccccc;
}
h3 {
font-weight: bold;
font-size: 12px;


}
td.gray {
color: gray;


--------------------------------------------------------

and this is my new page styles :

.style1 {
color: #4c687e;
font-weight: bold;
font-size: 11px;
font-family: Arial;
}
.style2 {
font-family: Tahoma;
font-size: 10px;
}
.style3 {
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.style4 {
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #c10416;
}
.style5 {color: #FFFFFF}
.style6 {
font-size: 11px;
font-weight: bold;
}
.style8 {font-family: Tahoma; font-size: 10px; color: #4c687e; }
.style9 {font-size: 12px}
.style10 {
color: #0a2c50;
font-family: Tahoma;
font-size: 11px;
}
.style11 {color: #66809b}
.style12 {color: #c10416}
.style13 {
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
---------------------------------------------------

If I change the fonts and colors in new page manually,The page doesnt come up at all.
please help me if you can.
best regards

Hi all,
I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code:

Code:

<img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250">
 

this img tag was placed right after the <body> tag.

When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row!

Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help...


Any help would be appreciated..thanks..

I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't.

Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id.

This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in.


CSS Code:
Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }

  

 .nav1 {float:left; position:relative;display:block;}


 .nav1 li {margin:0px; padding:0px; display:inline;}


 .nav1 li a {height:30px; float:left; list-style:none;}


 a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/


  


 #home a{


     float:left;


     background-image: url(images/nav_main_1.png);


     display: block;


     height: 30px;


     width: 132px;


     text-decoration: none;


     background-position: 0px -31px;


 }


  


 }


 #home a:hover, a.current{


     background-image: url(images/nav_main_1.png);


     background-position: 0px 0px;


 }


 #news a{


     float:left;


     background-image: url(images/nav_main_2.png);


     display: block;


     height: 30px;


     width: 131px;


     text-decoration: none;


     background-position: 0px -31px;


 }


 #news a:hover, a.current {  


     background-image: url(images/nav_main_2.png);


     background-position: 0px 0px;


 } 

html4strict Code:
Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul>

  

 <ul class="nav1">


         <li id="home" class="current"><a href="#"><span>Home</span></a></li>


         <li id="news"><a href="#"><span>News</span></a></li>                    


 </ul> 

Any help is greatly appreciated, I would imagine I am missing something simple.

Hi Guys,

I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif.

Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen.

I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible.

What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS?

I am a chef by trade, but am re-doing my website for a better online experience for my clients. I want to keep my same css coding, but for the life of me, I cannot change the active menu page to a different background to show the current active page...please help and thanks!
Cheers ~Kat
Menu bar at: (cater-express dot com)

I am 99.99999% sure that there is no way to do this in pure CSS but just in case.

I have tabbed navigation. When a user clicks on a link it loads that page from the server (a page refresh). The corresponding nav tab should then be in its active state.

Does CSS support this at all? I am happy to run a server side script to set an item to "current" but I would like to know if there is any way around it.

Thanks.

Hi all. I've read through a lot of posts and for the life of me I can't figure out why this isn't working. I have navigation tabs at the top of the page, and my "tabber" function to change the clicked tab's className to 'on' for highlighting:

CSS
#header li a {
display: block;
width: 100%;
color: #fff;
padding-top: 7px;
}
#header li a.on,
#header li a:hover { background-color: #333; color: #9c0; height: 20px; }

JavaScript
<script language="JavaScript" type="text/javascript">
function tabber (tab) {
if (document.getElementById('header')) {
var getLinks = document.getElementById('header');
var links = getLinks.getElementsByTagName('a');
for (var i=0; i<links.length; i++) {
if (links[i].name == tab) {
links[i].className == 'on';
} else {
links[i].className == '';
}
}
}
}
</script>

HTML
<div id="header"><div>
<ul>
<li><a href="#" name="home" class="on" onClick="tabber(this.name);">Home</a></li>
<li><a href="#" name="stories" onClick="tabber(this.name);">Stories</a></li>
<li><a href="#" name="featured" onClick="tabber(this.name);">Featured</a></li>
<li><a href="#" name="contact" onClick="tabber(this.name);">Contact</a></li>
</ul>
</div></div>


The tabber function is finding matches for the clicked link, but the matched tab is never highlighted. I can highlight a tab using onClick="className='on';" but I need to be able to turn all other tabs off with a blank className at the same time.

Thank you!

I have the following: PHP Code:
<td id="nav-01" onmouseover="this.className='classover'" onmouseout="this.className=''">Home</td> 



I realise the "this.className" will produce a class of "classover" when I do a mouseover. However I already have an id="nav-o1" and therefore the class will not overwrite this.... they are both setting different background colours to the column.

Can anyone help me? PHP Code:
<td id="nav-01">Home</td> 



That is the basic code and I would like background colour to change when doing a mouseover and then revert to original when mouse goes away. As much CSS as possible and as little javascript...

Please!

I'm trying to use Eric Meyer's css tabbed navbar to navigate a form. It works, except that I can't seem to get the navbar to indicate the current tab by changing the tab background and bottom border to white. I've been reading and trying different css commands, but haven't been successful.

I'm including my html and css below and would appreciate any help.

Thanks, Keith Silva

CSS:

textarea{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
button{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
/*table{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}*/
caption{
font-size: 1.5em;
}
.add{
font-size: 0.6em;
text-align: right;
}
.frm_tbl{
border-spacing: 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: Navy;
}
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}

/*#navlist li:target*/

#mail_frm #mail_nav a,
#loc_frm #loc_nav a,
#other_frm #other_nav a{
background: white;
border-bottom: 1px solid white;
}
#mail_frm{display: none}
#mail_frm:target{display: block}

#loc_frm{display: none}
#loc_frm:target{display: block}

#other_frm{display: none}
#other_frm:target{display: block}

HTML:

//
#include settings
#cgivar id
#cgitextvar notes
#cgitextvar directions
#if @id != ""
//edit existing record
#sql load select * from tbl_org where org_id = @id
#else
//new record
#sqlblankrow tbl_org
#endif
<form method="POST" target="_self" name="org_form">
#formtarget org_save
<div id="navcontainer">
<ul id="navlist">
<li id="mail_nav"><a href="#mail_frm">Mail</a></li>
<li id="loc_nav"><a href="#loc_frm">Location</a></li>
<li id="other_nav"><a href="#other_frm">Other</a></li>
</ul>
</div>
<table id="mail_frm" class="frm_tbl" border="0">
<tr>
<td colspan="2">Office<br><input name="office" type="text" size="45" maxlength="45" value="@office" title=""></td>
<td>Type<br><select name="type" size="1" class="">
#optionlist selected=@type
#options
muni Municipality
state State
discharger Discharger
consultant Consultant
law_firm Law Firm
dischgr_assoc Discharger Assoc
elected Elected Official
lab Laboratory
public Public
academia Academia
tribe Tribe
other Other
</select></td>
</tr>
<tr>
<td colspan="2">Division<br><input name="division" type="text" size="45" maxlength="45" value="@division" title=""></td>
<td>Region<br><select name="region" size="1" class="">
#optionlist selected=@region
#options
none None
north AZ-North
central AZ-Central
south AZ-South
rb1 CA-North Coast(1)
rb2 CA-San Francisco Bay(2)
rb3 CA-Central Coast(3)
rb4 CA-Los Angeles(4)
rb5r CA-Central Valley North(5r)
rb5s CA-Central Valley(5s)
rb5f CA-Central Valley South(5f)
rb6 CA-Lahontan(6)
rb7 CA-Palm Desert(7)
rb8 CA-Santa Ana(8)
rb9 CA-San Diego(9)
</select></td>
</tr>
<tr>
<td colspan="2">Department<br><input name="dept" type="text" size="45" maxlength="45" value="@dept" title=""></td>
<td>Mail Code<br><input name="mail_code" type="text" size="15" maxlength="15" value="@mail_code" title=""></td>
</tr>
<tr><td colspan="2">Organization<br><input name="org" type="text" size="45" maxlength="45" value="@org" title=""></td></tr>
<tr><td colspan="2">Mailing Address<br><input name="mail_addr" type="text" size="45" maxlength="45" value="@mail_addr" title=""></td></tr>
<tr>
<td>Mailing City<br><input name="mail_city" type="text" size="20" maxlength="20" value="@mail_city" title=""></td>
<td>State<br><input name="state" type="text" size="20" maxlength="20" value="@state" title=""></td>
<td>Mailing Zip Code<br><input name="mail_zip" type="text" size="10" maxlength="10" value="@mail_zip" title=""></td>
</tr>
</table>
<table id="loc_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Location<br><input name="location" type="text" size="45" maxlength="45" value="@location" title=""></td></tr>
<tr><td colspan="2">Location Address<br><input name="loc_addr" type="text" size="45" maxlength="45" value="@loc_addr" title=""></td></tr>
<tr>
<td>Location City<br><input name="loc_city" type="text" size="20" maxlength="20" value="@loc_city" title=""></td>
<td>Location Zip<br><input name="loc_zip" type="text" size="10" maxlength="10" value="@loc_zip" title=""></td>
</tr>
<tr><td colspan="2">Directions<br><textarea name="directions" rows="7" cols="60">
#showtext ./directions/org_@org_id
#+ </textarea></td>
</tr>
</table>
<table id="other_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Main Office<br><input name="main" type="text" size="45" maxlength="45" value="@main" title=""></td></tr>
<tr><td colspan="2">Main Address<br><input name="main_addr" type="text" size="45" maxlength="45" value="@main_addr" title=""></td></tr>
<tr>
<td>Main City<br><input name="main_city" type="text" size="20" maxlength="20" value="@main_city" title=""></td>
<td>Main Zip<br><input name="main_zip" type="text" size="10" maxlength="10" value="@main_zip" title=""></td>
</tr>
<tr><td colspan="2">Web Site<br><input name="web_site" type="text" size="45" maxlength="45" value="@web_site" title=""></td></tr>
<tr><td colspan="2">Notes<br><textarea name="notes" rows="7" cols="50">
#showtext ./notes/org_@org_id
#+ </textarea></td>
<td><input name="selected" type="checkbox" value="y" title="">Select<br><br>
<input name="archive" type="checkbox" value="y" title="">Archive</td>
</tr>
</table><br>
org_id&nbsp;<input name="org_id" type="text" size="8" value="@org_id" title="">
<button name="save" class="save_org" onclick="save_form(this.form);return false;">Save</button>
<button name="cancel" class="cancel_org" onclick="cancel_form(this.form);return false;">Cancel</button>
</form>

I've been at this for hours and hours and I've tried about 50 different ways to get this to work but I'm totally stumped. I've switched the id and class around (in my site's theme.php and template.html) so often that I'm dizzy.

I've searched Google and these forums (among others) for help but still, I'm getting nowhere. Maybe my CSS skills are lacking but this seems simple enough (or is it?).

Anyway, here's the problem: The CSS (below) just won't work...so what's wrong with it? What am I missing?

Code:

ul#navigation {
  list-style: none;
  margin:0 auto;	
  padding:0;
  font-family: Arial, Verdana, Serif;
  font-weight:bold;
  background:#32478A;	
  text-transform:uppercase;
  height:25px;
  line-height:25px;	
  font-size:12px;
}

ul#navigation li {
  float:left;
  margin:0;
  padding:0;
  list-style:none;  
  white-space:nowrap;	
  background:none;	
}	

ul#navigation li a {
  display:block;
  padding:0 15px;
  text-transform:uppercase;
  letter-spacing:1px;
  border:none;
  color:#fff;
}

ul#navigation li a:hover, ul#navigation li a:active, ul#navigation li.current_page_item a {
 color:#242169;
 background:#fff;
}

My template.html UL ID looks like this...

Code:

<ul id="navigation">
  {SYS_MENU}
</ul>

...and the theme.php CLASS (login link for example) looks like this:

Code:

<!-- BEGIN login -->
  <li><a href="{LOGIN_TGT}" title="Click here to log in" class="current_page_item">&nbsp;Log in</a></li>
<!-- END login -->

Here's a link to my site: The hover and active bits seem to work but not the CURRENT...which is what I need to fix. Simply put, the current tab at the top of the page doesn't change to reflect what page you're on.

I apologize in advance for the coding mess on my site but I'm just now getting around to cleaning things up. I could really use a hand fixing this little monster. Anyone with stellar CSS skills ready to school this lazy bum?

Cheers.

EDIT: The link (BBCode) above (to my site) doesn't work, so click my homepage in the drop-down menu under my user name. Thanks.