|
CSS - Ajax Loading Message Image Causes Entire Page Content To Shift Down!
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.. Similar TutorialsHello, i have a DIV in which i have put a javascript for my top advertisement banner. This banner is one of those that when the user moves their mouse over it, it expands.. is there anyway i can make it so when the banner inside the div expands, the DIV height expands accordingly to the height of the banner? and when it collpases, the div will shift back to original height? thanks my website, uk-adult-deed-polldotcodotuk Ive jsut added a background but the background was within the content in the middle of the page in the empty spaces so i created a div i called wrapper and wrapped from under the global navigation bar to ablove the footer and i gave this div a white backgroung.. For the homepage, as you see, it worked and all the other divs and pictures stayed where they were. Please look at contact uk-adult-deed-polldotcodotuk/contact/ when i apply the same div, it pushes all the content down the page, why is it not remaining inside the div i wrapped it in like on the homepage? Im confused, any help greatly appreciated! The index page of my site shifts to the far left in IE. The background does not move (stays in center) but the rest of the page shifts far left. It only happens on the index page all others are fine. I would link to it but I am new and cannot post links...any suggestions? Thanks. I am editing a CSS layout I have found. Basically, I want a fixed header. The original layout had the fixed header (AP Div) take up 100% width with right positioning of 16px to allow for the scrollbar, but this was making it awkward for me to centre another div within the Header/AP Div, so I have edited my layout like this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
#printhead {
display:none;
}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: Arial, Helvetica, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-color: #EAEBEB;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
}
#info {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #666666;
padding-right: 25px;
padding-left: 25px;
}
#head {
position:absolute;
width:800px;
height:137px;
z-index:5;
border-top-style: none;
border: none;
background-color: #FFFFFF;
left: -400px;
margin-left: 50%;
}
.top-spacer {
display:block;
height:137px;
}
.btm-spacer {
display:block;
height:30px;
background-color: #FFFFFF;
width: 800px;
margin-right: auto;
margin-left: auto;
}
</style>
<style type="text/css" media="print">
html {
padding:0;
margin:0;
border:0;
background:#fff;
font-size:10pt;
font-family: arial, sans-serif;
min-height: 100%;
margin-bottom: 1px;
}
body {
padding:0;
margin:0;
border:0;
}
#content {
display:block;
position:relative;
z-index:3;
word-wrap:break-word;
}
#head {
display:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#printhead {
height:100px;
background:#fff;
font-size:24pt;
color:#000;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="head"></div>
<div id="content">
<div class="top-spacer"></div>
<div id="info">
<p>Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here </p>
<p> </p>
</div>
<div class="btm-spacer"></div>
</div>
</body>
</html>
Basically, I have cheated to centre the AP Div, but now in Firefox, when there is overflow, the Div underneath the header moves over to accommodate the scrollbar, but the header doesn't. Can anyone suggest a workaround for this? Thanks. Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hi, I'm trying to make a div in my website take up the entire height of the page, or more if the page is longer. However when I've managed to get the div the full height of the page, the contents leave the div when it's longer than the page. I want the div to stretch, but be at least as long as the page. Here is a simplification of my code as an example: Code:
<html>
<head>
<style>
.contentdiv{
height: 100%;
width: 758px;
top: 0px;
position: relative;
border: 1px solid #89a9c7;
padding-top: 0px;
padding-bottom: 0px;
border-spacing: 5px;
bottom: auto;
}
.footerdiv
{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div class="contentdiv">
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
<div class="footerdiv">a</div>
</div>
</body>
</html>
For caching purposes and/or maximum performance would it be more beneficial to have the same large css document referenced in every page on my site or to have a much smaller different one referenced for each page in my site. I'm using this html: Code: <div id="titlebox">
<div id="title">
<img src="images/title.png" alt="Garden Pub & Grille" />.
</div>
</div>
with this css: Code: html, body {
font-family: Century Gothic;
text-align: center;
background-color: #DEF9FA;
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
top: 0px;
position: relative;
}
body > #container {
height: auto;
min-height: 100%;
min-width: 100%;
}
#titlebox div {
background-color: black;
position: absolute;
min-width: 100%;
margin-left: 0px;
margin-right: 0px;
left: 0px;
top: 0px;
height: 64px;
z-index: 1000;
}
#title div {
width: 1000px;
background-color: black;
}
Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks. URL Image doesn't seem to be showing up, link: http://img15.imageshack.us/img15/5697/29946518.png Hello all. I am working on a sign on page that uses two divs nested in a table. I have a header above them, and a footer below, and I want the divs (which have a nice gradient background) to stretch all the way down to the footer, regardless of the amount of content. In a simplified format, I have: Code:
<table cellpadding="0" cellspacing="0" style="height:100%; padding-top:20px; padding-bottom:20px; width:976px;" border="0">
<tr>
<td class="wrapper1" id="wrapper1" valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top" width="100%" style="border:3px dotted black; height:100%;">
<table style="width:100%; height:100%;" border="1">
<tr>
<td valign="top" style="height:100%;">
<xsl:call-template name="bodyContainerTemplate"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
The tables stretch just fine. Where I am running into problems is in my bodyContainerTemplate. That template looks like: Code:
<!--bodyContainerTemplate-->
<div class="bgcolor1" style="width:976px; height:100%; border:2px solid;">
<div class="login_bg" style="height:100%;" id="login_bg">
<table width="100%" height="100%" border="0" style="position:relative;">
<tr>
<td>
My content goes here
</td>
</tr>
</table>
For some reason, once it gets into the template, height:100%; doesn't work anymore, and the divs simply stretch big enough to make room for the content. What styles am I missing for those divs to be 100%? I have messed with: min-height height:auto, relative, etc. margin:0 and a few other things, none of which are seeming to make a difference. Thanks! example is at http://bluewebpages.com/arch.php I am fairly proficient at coding css and think it's about time to clean(organize) it all up, even though it does validate. Anyway I was wondering if someone could please help me with the overlap problem for the right (smaller) column. I want the entire main content of the page, the part before the footer, to extend down when there is more content to side, not just the left/main content side. EDIT: Fixed .. thanks! The `clear:both;` was what it needed On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. 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. I have a page that will not load external CSS. Tested in Firefox and Opera. If I remove the doctype then the CSS loads and affects the page. This is the HTML: Code: <!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' xml:lang='en' lang='en'> <head> <title>Insert Notes</title> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='cache-control' content='no-cache' /> <meta http-equiv='pragma' content='no-cache' /> <meta http-equiv='expires' content='0' /> <link rel='stylesheet' type='text/css' href='/test.css' /> </head><body> <h1>Beer</h1> <p>test</p> </body></html> And this is the CSS: Code:
body{ background-color: gray;}
p { color: blue; }
h1{ color: white; }
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; } Hi, I have a problem when trying to load an image (as background) from a css file. My scenario is as follows; I have a css file named default.css under the folder root/css/. Then I have page1.html, page2.html and page2.1.html under the root/, root/page2/, and root/page2/page2.1/ folders respectively. My css is as follows: Code: body {
background-image: url('../images/bg.GIF');
}
My problem is this. The background image is loaded correctly when visiting page1.html and page2.html however when I visit page2.1.html I can not view the background image. Is this problem because ../images/bg.GIF is not accessable from root/page2/page2.1/ ? (even though the css file is always at root/css/) or? I have attached the example just in case my above explanation was not clear enough. What I would like to achieve is have the same background image loaded on each page. Regards, Sim085 Hey all, I have a webpage w/a top, left column, and content column. The page has been designed using CSS. Is there anyway to load a seperate HTML page (of which I have no control) in my content column and keep the top (and possibly left) columns in place? Is there a way to do this w/CSS? (Basically I want frame functionality using CSS). So far my instincts say no... but before I spend too much time on solution I thought I'd check here. Thanks! BB 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 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. |
|||||||