amitamberker Posted May 15, 2012 Share Posted May 15, 2012 (edited) 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 May 15, 2012 by creative1977 Link to comment Share on other sites More sharing options...
amitamberker Posted May 15, 2012 Author Share Posted May 15, 2012 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 comment Share on other sites More sharing options...
dsonesuk Posted May 15, 2012 Share Posted May 15, 2012 ???? why would you think it would? there's nothing here or anything to force a scroll bar to appear anywhere for scrolling. Link to comment Share on other sites More sharing options...
amitamberker Posted May 16, 2012 Author Share Posted May 16, 2012 ???? 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 comment Share on other sites More sharing options...
dsonesuk Posted May 16, 2012 Share Posted May 16, 2012 ??? 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 comment Share on other sites More sharing options...
amitamberker Posted May 16, 2012 Author Share Posted May 16, 2012 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 comment Share on other sites More sharing options...
dsonesuk Posted May 16, 2012 Share Posted May 16, 2012 (edited) <!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 May 16, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
amitamberker Posted May 17, 2012 Author Share Posted May 17, 2012 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 comment Share on other sites More sharing options...
dsonesuk Posted May 17, 2012 Share Posted May 17, 2012 (edited) 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 May 17, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
eTianbun Posted May 17, 2012 Share Posted May 17, 2012 ...don't point out obvious elements with styling, I AM NOT eduardlid Nobody is perfect bro, so stop that. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 17, 2012 Share Posted May 17, 2012 (edited) and don't point out obvious elements with styling, I AM NOT eduardlid But! most a have a clue on taking the first steps of reaching perfection. Edited May 17, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
amitamberker Posted May 17, 2012 Author Share Posted May 17, 2012 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 comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 (edited) 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 May 18, 2012 by creative1977 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 18, 2012 Share Posted May 18, 2012 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 comment Share on other sites More sharing options...
amitamberker Posted May 20, 2012 Author Share Posted May 20, 2012 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 comment Share on other sites More sharing options...
amitamberker Posted May 20, 2012 Author Share Posted May 20, 2012 (edited) 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 May 20, 2012 by creative1977 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 20, 2012 Share Posted May 20, 2012 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. Link to comment Share on other sites More sharing options...
amitamberker Posted May 20, 2012 Author Share Posted May 20, 2012 (edited) 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 May 20, 2012 by creative1977 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now