|
HTML - Problems With Width And Scrolling
i have the following code. i have two problems.
1. with width of 'html, body, #wrapper' when it is fixed e.g., 1200px it works fine but when it is auto on scrolling and checking the contect on right side after scrolling the background images disappears. 2. with width of 'DivWithTextnImage' when it is fixed e.g., 400px on scrolling text moves with picture but when 100% text does not move with picture. can anyone solve my problems. 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Introduction</title>
<style type="text/css">
html, body, #wrapper {
height:100%;
width: auto;/* issue is here. when it is fixed e.g., 1200px it works fine but when it is auto on scrolling and checking the contect on right side after scrolling the background images disappears. */
margin: 0;
padding: 0;
border: 0;
}
#OverAllDiv{
width:100%;
height:100%;
z-index:10;
margin-top:-60px;
vertical-align:middle;
text-align:center;
position:relative;
}
#DivWithTextnImage {
width: 100%; /* issue is here. when it is fixed e.g., 400px on scrolling text moves with picture but when 100% text does not move with picture. */
height: 1000px;
/*
margin-left: auto;
margin-right: auto;
top:22.8%;
margin-top:-210px;
*/
margin-left: auto;
margin-right: auto;
margin-top:-50px;
position:relative;
z-index:11;
}
</style>
</head>
<body>
<div id="OverAllDiv">
<div id="DivWithTextnImage">
<div style="width:auto; height:284px;">
<img src="images/test-pic_01.jpg" width="598" height="284" />
</div>
<div style="background-image:url(images/test-home_05.jpg); background-repeat:repeat; width:auto; height:4px;" >
</div>
<div style="width:auto;height:623px; background-color:#EEEEEE;" >
<div style="width:auto; height:14px;" align="left" >
<img src="images/test-home_08.jpg" width="1074" height="14"/>
</div>
<div style="width:500px;height:491px; margin-left:100px;">
<strong><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet molestie tortor, et accumsan nibh aliquam ac. Nunc hendrerit vestibulum risus ut condimentum. In ac purus interdum nisi auctor dapibus a sit amet velit. Praesent augue erat, malesuada vitae semper vel, luctus in ligula. Nam tincidunt imperdiet posuere. Aliquam ante lacus, scelerisque at hendrerit vel, molestie in risus. Phasellus ullamcorper convallis consectetur. Suspendisse vehicula pulvinar nibh at scelerisque. Sed nec velit ligula. Pellentesque tristique blandit lacinia. Nullam vitae metus et ante consequat rhoncus.</b>
</strong>
</div>
</div>
</div>
</div>
</body>
</html>
Similar Tutorialsgreetings! i found an excellent scrolling marquee generator at: http://www.htmlbasix.com/marquee.shtml but i am having a problem. the scrolling marquee does not work in all browsers. for instance, check out the scrolling marquee in for "FREE MLS" at this url: http://www.phoenixfinder.com/ it scrolls perfectly in firefox, but it does not scroll and looks really bad in windows explorer and google chrome. i am pulling my hair out trying to resolve this. any advice as to what i am doing wrong will e greatly appreciated! please email advice to me at: backcountryjournal@hotmail.com thanks in advance! mike Hello. First time here asking for help. Hope there's a solution! The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped. The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms. On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen. So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation. On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE) The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly. In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE. Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up. The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer. Hope someone can help me out here! Cheers, Jason. What is wrong with this table. My table is not showing correctly. The column on the right side is sticking out a little to much. Please help thx. Code: <table width="122" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="122" height="30" colspan="3" background="http://findacreditsolution.com/images/left_blue_title.gif">
</td>
</tr>
<tr>
<td width="1" background="http://findacreditsolution.com/images/left_mid_bg.gif">
</td>
<td align="center">some code here</td>
<td width="1" align="left" background="http://findacreditsolution.com/images/right_mid_bg.gif">
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="3" width="122" height="10" background="http://findacreditsolution.com/images/left_bot_bg.gif">
</td>
</tr>
</table>
im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon Hey all. I have been working on this website that my friend had been designing, and was just wondering if this was possible. The way it is now, the topmost div's are supposed to stay in their position at all times, and the only part that would scroll would be the main body. The two body divs (left and right) have been placed inside the div that should be scrolling. I know there is the css overflow, but the problem is, there is no fixed height on the div, so this method isn't quite right. If anyone knows of a way where we could just start the scrolling at a certain point down the page, that would be great. Here is a link to the page so far - don't worry, it won't look close to that when finished... Image/text placeholders are horrid, I know. http://http://pixelconcepts.zxq.net/ -Thanks in advance. So, I would like to make a one-line textfield that will automatically scroll when too much text is added. So, for example, if I have a field that has room for 20 characters, and someone enters 10 characters, it looks as expected. However, if someone enters 30 characters, only characters 10-30 would be visible. Is this possible? Im really not sure if the title of this thread is right. Anyway, i dont know too much about HTML coding, but id like help with something on my .... MySpace haha Alright, so this is my myspace at the moment. www.myspace.com/cj_x3 As you can see, i have links on the sides, done by the following code example; Quote: <div style="width: 78px; height: 22px; position: absolute; bottom:5px;right:15px; background-color: transparent; border-width:0px;border-style:solid;border-color: transparent; font-family: verdana;"> <a href="LINK" style="color: dd4444; font-size: 9px; position: absolute; right: 0px; top: 0px">EXAMPLE LINK TEXT</a> </div> When you scroll down, the links on the sides scroll off the top. I dont like this... What i want to happen, is for them to be fixed, like the background, so when you scroll down, the links around the sides dont move. Thanks for the help in advance my page (http://www.zerofivezero.net/the_project102.html) is scrolling as if there's content down the page, but there isn't...I can't figure it out. I'm using the code below to hide the content and have it swapped when selecting an item from the nav. Code: .hidden {
position:absolute;
z-index:2;
visibility:hidden;
Code: <div id="section3_region" class="hidden"><div class="news"><fieldset>
<legend><img src="images/forum_leg.jpg" width="120" height="28" border="0" alt=""/></legend>
<br /><br />
<div class="img"><img src="images/news_thumb1.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
<div class="img"><img src="images/news_thumb2.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
<div class="img"><img src="images/news_thumb3.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
</fieldset></div>
Hello, I have a div tag that is scrolled vertically. I found some java code he https://developer.mozilla.org/en/DOM...scrollIntoView that allows me to use a "Scroll to Top" button at the bottom of the DIV to help navigate it back to the top. Problem is, that I want the page to remain in the same position, whereas this seems to be making my page scroll to the bottom at the same time as scrolling the div to the top. Has anyone got any ideas on howto scroll a div to the top, without the page reloading, or scrolling? Thanks Jay How would I get a scrolling news bar in my webpage? I am extremely new, so please post code. Thanks Hi, I'm working on a movie database for a device that supports html. It only supports basic html though. For my index page I the characters A-Z (as well as genres) to select movies starting with that certain letter. The movie covers display in a row underneath. I want to find a way keep the characters A-Z centered in the top of the screen so when I browse further right (or left) of the screen it stays there similar to the way the background stays in place. At the moment when I browse left and right the A-Z moves with it (so it ends up moving off the screen). Does anyone know a way to keep it in place like the background. The files I'm editing are in .xsl format. They are used inconjunction with movie collectorz to make html pages. Anyhelp would be greatly appreciated. Remeber it only supports basic html, no javascript. Thanks. Hi, i'm trying to design a webpage and I was wondering if there was a way to create a row of pictures that ONLY scroll like a slideshow when the cursor is hovering over the buttons. Is it possible? How? Thanks Okay...so here's a tricky situation that I cannot find ANY examples of how it can work...IF it can even work. I'm trying to create this without the use of flash...Thanks for any help! Seriously! So...I'll try to explain this in the best way that I can as I don't have an example to show... There's a fixed background image. On top of that image is another image (exactly the same as the one below but a different color). There is a horizontal scrollbar below that controls the visibility of the image on top. Naturally, I thought a mask would be the best idea...but can a mask be scrolled. The image itself would not scroll at all....just the visibility of the image on top, think of it as a scroller that highlights a specific "strip" of an image and can be moved from side to side without the actual image scrolling... Man...I really hope this makes sense! Thanks for helping a girl out! ima noob. To this forum and html as well so please be gentle. i brought lube...lol I'm trying to change the color of the 'bar' between two frames. The frame on the left I have set to 'no scroll' and i want to change the color of it. I know how to change the color of scroll bars, arrows... but how do i change just the bar? I've been using JS to change the colors of the scroll bar. Is there another way? like css. people are telling me that have to horizon scroll (left to right) to see this page: http://www.girlsincsoaz.org I tried it on different machines, including a laptop and I don't have to, what can be the problem? TIA Hi, I'm really, really new to HTML so any advice given to me would be amazing. I've put a website together using Indexhibit but I'm not happy about the layout of my "Projects" pages. Please visit my website: www.andrewjenkinsphoto.com Ideally I'd like to be able to manually scroll across the page from Left to Right, having a gap of a centimeter between each image. Is this possible using Indexhibit? Hope I've made myself clear. Thanks for any help. Problem Fixed Hi, I'm trying to add scrolling affect to my website using marguee tag but nothing work can somebody help me with this? this is the script <VAR_MAIN_TITLE>%%TEXT_LATEST_JOBS%%</VAR_MAIN_TITLE> <VAR_MAIN_HEADER_HEIGHT>0</VAR_MAIN_HEADER_HEIGHT> %%MAIN_HEADER%% <table bgcolor="%%LIST_BORDER_COLOR%%" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td> <table bgcolor="%%LIST_BORDER_COLOR%%" width="100%" border="0" cellspacing="1" cellpadding="2" class="tablelist"> <tr bgcolor="%%LIST_HEADER_COLOR%%"> <th width="15%"> %%TEXT_POST_DATE%% </th> <th width="28%" align="center"> %%TEXT_TITLE%% </th> <th width="28%" align="center"> %%TEXT_JOBCATEGORY%% </th> <th width="28%" align="center"> %%TEXT_LOCATION%% </th> </tr> <marquee WIDTH=100% BEHAVIOR=scroll SCROLLAMOUNT=3 DIRECTION=up BGColor=""> <BEGIN REPEAT> <tr bgcolor="%%TABLE_LINE_BGCOLOR%%"> <td width="15%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_JOBDATE%%</a></td> <td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_JOBTITLE%%</a></td> <td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_CATEGORY%%</a></td> <td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_LOCATION%%</a></td> </tr> <END REPEAT> </MARQUEE> <BEGIN NORESULT> <TR> <TD colspan="4" align="center" valign="middle" bgcolor="%%TABLE_LINE_BGCOLOR%%"><font class="default_text"><b>%%TEXT_NO_RESULT%%</b></font></TD> </TR> <END NORESULT> </table> </td></tr> </table> %%MAIN_FOOTER%% |
|||||||