Jump to content

The 1st Scrolling is NOT happening by itself when the 2nd Scroll gets Increased


Recommended Posts

Hello Everyone, Could you please tell me how do I fix Scrolling Action in “A Segment”? Please help. Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Scrolling Issue</title><style type="text/css">#container { width: 600px; height:100%;}</style></head><body bgcolor="gray"><div id="container"><div style="background-color:orange;width:300px;float:left;height:100%;overflow:hidden;">A Segment</div><div style="background-color:red;width:300px;float:left;">Why "A Segment" is not scrolling Down?...<br /> Why "A Segment" is not scrolling Down?...<br /> Why "A Segment" is not scrolling Down?...<br /> Why "A Segment" is not scrolling Down?...<br /> Why "A Segment" is not scrolling Down?... <br /></div></div></body></html>
Edited by creative1977
Link to post
Share on other sites

I wanted to attached "Scrolling-Issue.html" file for your reference but it says "Error: This file was too big to upload"... Anyways...

Link to post
Share on other sites
???? why would you think it would? there's nothing here or anything to force a scroll bar to appear anywhere for scrolling.
Hi dsonesuk,Thanks a lot for your response. Pleasure to hearing from you again. Hope you are doing well. No... No... I am not referring about "Scroll Bar". I am referring about the height wise of “A Segment”. I mean, when the Red Color Segment (Why "A Segment" is not scrolling Down?...) goes down, I wanted the “A Segment” to flow along with Red Color Segment.
Link to post
Share on other sites

??? no still don't get want you want, this maybe <div id="container">

<div style="background-color:red;width:300px;float:left; margin-left:310px; position:relative;"><div style="background-color:orange;width:300px;;height:100%; position:absolute; top:50%; bottom: 50%; left: -300px;">A Segment</div>Why "A Segment" is notscrolling Down?...<br />Why "A Segment" is not scrolling Down?...<br />Why "A Segment" is not scrolling Down?...<br />Why "A Segment" is not scrolling Down?...<br />Why "A Segment" is not scrolling Down?...<br /></div></div>

Link to post
Share on other sites

Hi dsonesuk :)Pleasure to have to back :) Alrighty, please publish the following 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>Scrolling Issue</title><style type="text/css">#container { width: 600px; height:100%;}</style></head><body bgcolor="gray"><div id="container" style="background-color:orange;"><div style="background-color:red;width:300px;float:left; margin-left:310px; position:relative;"><!-- <div style="background-color:orange;width:300px;;height:100%; position:absolute; top:50%; bottom: 50%; left: -300px;">A Segment</div> -->Hi dsonesuk… Can you see how “Orange” is coming down alongwith this DIV?... By the way how do I get-rid of that Orange underneath thisDIV?<br /><br />Hi dsonesuk… Can you see how “Orange” is coming down along with this DIV?...By the way how do I get-rid of that Orange underneath this DIV?<br /><br />Hi dsonesuk… Can you see how “Orange” is coming down along with this DIV?...By the way how do I get-rid of that Orange underneath this DIV?<br /><br />Hi dsonesuk… Can you see how “Orange” is coming down along with this DIV?...By the way how do I get-rid of that Orange underneath this DIV?<br /><br />Hi dsonesuk… Can you see how “Orange” is coming down along with this DIV?...By the way how do I get-rid of that Orange underneath this DIV?<br /><br /></div></div></body></html>
Link to post
Share on other sites
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Scrolling Issue</title><style type="text/css">#container {width: 600px;height:100%;}</style></head><body bgcolor="gray"> <div id="container" style="background-color:orange; "><div style="background-color:red;width:300px;float:left; margin-left:310px; position:relative;"><!-- <div style="background-color:orange;width:300px;;height:100%; position:absolute; top:50%; bottom: 50%; left: -300px;">A Segment</div> -->Hi creative1977… No! I Can't see the “Orange” coming down alongwith this DIV?... By the way, Since I see no orange, I can't get-rid of that Orange underneath thisDIV?<br /><br />Hi creative1977… No! I Can't see the “Orange” coming down alongwith this DIV?... By the way, Since I see no orange, I can't get-rid of that Orange underneath thisDIV?<br /><br />Hi creative1977… No! I Can't see the “Orange” coming down alongwith this DIV?... By the way, Since I see no orange, I can't get-rid of that Orange underneath thisDIV?<br /><br />Hi creative1977… No! I Can't see the “Orange” coming down alongwith this DIV?... By the way, Since I see no orange, I can't get-rid of that Orange underneath thisDIV?<br /><br />Hi creative1977… No! I Can't see the “Orange” coming down alongwith this DIV?... By the way, Since I see no orange, I can't get-rid of that Orange underneath thisDIV?<br /><br /></div></div></body></html>

Edited by dsonesuk
Link to post
Share on other sites

Hi dsonesuk,What? You can't see the “Orange” color next to that Red color? Hummm... Howcome???... Hummm... Which browser you are using? Could you please check it from IE version 9? Orange is located here:<div id="container" style="background-color:orange; ">

Link to post
Share on other sites

Only time i see orange in IE9 is when yo view in browser mode IE7, or document mode IE7 and document mode Quirks mode. and don't point out obvious elements with styling, I AM NOT eduardlid

Edited by dsonesuk
Link to post
Share on other sites
Only time i see orange in IE9 is when yo view in browser mode IE7, or document mode IE7 and document mode Quirks mode. and don't point out obvious elements with styling, I AM NOT eduardlid
Hi dsonesuk,What? Could you please tell me again? Kinda I did not understand what you mean. By the way what does "eduardlid" mean? If you could enable me to send you Private Message, then I can send you HTML file as attachment for your reference. Because, here it's not allowing me to attach files. If you can, please send me a Test Message.
Link to post
Share on other sites

Hi dsonesuk, I managed to resolve this by myself. Now the 1st DIV's Background Color scrolls along with the 2nd DIV when it (2nd DIV) gets increased vertically. Please publish the following CODE. Please correct me if something is wrong. I know the "Navigation Menu" section is wrong. But I have no idea how to create it using "ul and li"... Could you please help me?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Testing</title><style style type="text/css">#container { width: 950px; background-color: #7a003c; overflow: auto;}#MenuContainer { float: left; width: 168px; text-indent: 15px;}#ContentContainer { float: right; width: 782px; background-color: white; }.Box01 { height: 36px; background-color: #9DFFFF; float: left; width: 391px; font-family: tahoma; font-size: 14pt; color: #000000; text-indent: 15px; line-height: 36px;}.Box02 { width: 782px; text-align: justify; float: right;}.Box03 { text-align: justify; float: right; padding: 15px 15px 0 15px; width: 752px;}.style3 { font-family: tahoma; font-size: 12pt; color: #313131;}.DropCap { font-family: tahoma; font-size: 18pt; font-weight: bold; color: #7A003C;}.Home { height: 35px; font-family: tahoma; font-size: 13pt; color: #FFFFFF; line-height: 36px; background-color: #7A003C; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #FFFFFF;}.Home-a { font-family: tahoma; font-size: 13pt; color: #FFFFFF; line-height: 36px; text-indent: 15px; text-decoration:none;}.Home-a:hover { font-family: tahoma; font-size: 13pt; color: #FFFFFF; line-height: 36px; text-indent: 15px; text-decoration: underline;}.AboutUs { height: 35px; font-family: tahoma; font-size: 13pt; color: #FFFFFF; line-height: 36px; background-color: #A60052; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #FFFFFF;}.Services { height: 35px; font-family: tahoma; font-size: 13pt; color: #FFFFFF; line-height: 36px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #FFFFFF; background-color: #CF0066; }.Testimony { height: 35px; font-family: tahoma; font-size: 13pt; color: #FFFFFF; line-height: 36px; background-color: #EC0074; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #FFFFFF; }.ContactUs { height: 35px; font-family: tahoma; font-size: 13pt; color: #FFFFFF; line-height: 36px; background-color: #FF2490;}.NoBorder { border-width: 0px;}</style></head><body><div id="container"><div id="MenuContainer"><div class="Home"><a href="index.html" class="Home-a">Home</a></div><div class="AboutUs">About Us</div><div class="Services">Services</div><div class="Testimony">Testimony</div><div class="ContactUs">Contact Us</div><div> </div><div><img alt="MemberShip Seal" src="#" width="139px" height="211px" /></div></div><div id="ContentContainer"><div class="Box01">w3Schools</div><div style="float:right;width:391px;height:36px;"><span style="float:right;"><a target="_blank" href="#"><img src="images/facebook_icon.png" class="NoBorder" /></a> <img src="images/linkedin_icon_small.png" /></span></div><div class="Box03"><span class="DropCap">W</span><span class="style3">3Schools is a website developer's portal, with tutorials and references relating to web development subjects, including HTML, XML, CSS, JavaScript, PHP, ASP, ASP.NET, and SQL. W3Schools is free of charge, and is funded through text and display advertising.[1] The tutorials and references on the website and the related code are proprietary.[2]<br /> <br /> The site derives its name from the abbreviation for the World Wide Web; W3 is a numeronym of WWW. W3Schools is not affiliated with the W3C.[3] Members of the W3C have asked W3Schools to explicitly disavow any connection, but they have refused to do so.[4][better source needed]<br /> <br /> It is created and owned by Refsnes Data, a Norwegian family-owned software development and consulting company.[5]<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </span></div></div></div></body></html>
Edited by creative1977
Link to post
Share on other sites

This will work as long as main content is higher than menu, if not menu background will show along bottom. Also avoid duplication duplication of menu styling

#MenuContainer {float: left;width: 168px;text-indent: 15px;} #MenuContainer div {height: 35px;font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color: #FFFFFF;} #MenuContainer a {line-height: 36px;text-indent: 15px;text-decoration:none;} #MenuContainer a:hover {text-decoration: underline;} .Home {background-color: #7A003C;}.AboutUs {background-color: #A60052;}.Services {background-color: #CF0066;}.Testimony {background-color: #EC0074;}.ContactUs {background-color: #FF2490;}

Link to post
Share on other sites

Hi dsonesuk :)WOW!... Heyy.. I think that's indeed awesome and pretty interesting :) I never knew about such kind of tricks. Thanks a lot dsonesuk but the "Home" is looking in Blue color instead of White color?By the way lots of changes has happened in the Code. Now the Navigation Menu is in ul and li and also lots of changes has happened in CSS. But that should not be an Issue. I can update it accordingly. Thanks a lot! By the way, please send me a Test Message when you get a chance so that I could attach the actual HTML file for your reference. By the way I am designing yet another website. Still it's it Photoshop level.

Link to post
Share on other sites

Hi dsonesuk, In this:

#MenuContainer div {height: 35px;font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color: #FFFFFF;}
It has "color: #FFFFFF;"... Then why the "Home" is showing-up in Blue Color? If I am not wrong, then maybe the following CSS:
#MenuContainer a {line-height: 36px;text-indent: 15px;text-decoration:none;}
should contain "color: #FFFFFF;" to get-ride of that Blue color. Am I making sense dsonesuk? What do you think? Edited by creative1977
Link to post
Share on other sites
By default browsers apply there own colour scheme to links (a), unless you target them specifically they will remain that colour so applying color: #FFFFFF; to #MenuContainer a will overwrite the default colour.
Hi dsonesuk, OKAY! I gotch you. Thanks for the info. Like I said, lots of changes has happened in my HTML and CSS Code. The Navigation Menu is in "UL and LI". I think that should not be an Issue. I should be able to update it accordingly. I wanted to send you the actual (real) .html file but alas, I cannot send you any private messages. Anyways... By the way I am designing yet another website. Still the Design is in Photoshop level. Did you get a chance to see my post in "General" section? Edited by creative1977
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...