dsonesuk Posted June 1, 2012 Share Posted June 1, 2012 Give the li element with classes 'imgAlign', height: auto; line-height: normal, and consider given the images within in them a margin top and bottom. Link to comment Share on other sites More sharing options...
amitamberker Posted June 1, 2012 Author Share Posted June 1, 2012 Give the li element with classes 'imgAlign', height: auto; line-height: normal, and consider given the images within in them a margin top and bottom. Hi dsonesuk PERFECT! It worked! Thanks a lot... By the way I noticed that the Classes in li element already has height: 35px;. The updated 'imgAlign' looks like this:.ImgAlign { text-align: center; height: auto; line-height: normal; padding-top: 15px; padding-bottom: 2px;} Link to comment Share on other sites More sharing options...
dsonesuk Posted June 1, 2012 Share Posted June 1, 2012 Hi dsonesuk By the way I noticed that the Classes in li element already has height: 35px;. ????? I don't know what you are trying to say??? and by the way they are actually 36px not 35px. Link to comment Share on other sites More sharing options...
amitamberker Posted June 1, 2012 Author Share Posted June 1, 2012 ????? I don't know what you are trying to say??? and by the way they are actually 36px not 35px. Hi dsonesuk,Ophse... Sorry... LOL! I mean, 4 Menus are 36px (Home, About Us, Services and Testimony) since it has a bottom horizontal White color and then Last 5th Menu is 35px (Contact Us) since it does not have any White color border. By the way I am unable to see DropCap effect for all the starting number in <p>...</p> tags. Could you please tell me what should I do? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 1, 2012 Share Posted June 1, 2012 By the way I am unable to see DropCap effect for all the starting number in <p>...</p> tags. Could you please tell me what should I do? Yea! easy, use exact code i gave you, not just part of it. Link to comment Share on other sites More sharing options...
amitamberker Posted June 1, 2012 Author Share Posted June 1, 2012 Yea! easy, use exact code i gave you, not just part of it. Hi dsonesuk,What? Part of it? I think I used exact code. It's too late (3:56AM Friday Mid-Night) now. Very sleepy. Will check it in the morning when I wake-up. Thanks a lot. Link to comment Share on other sites More sharing options...
amitamberker Posted June 2, 2012 Author Share Posted June 2, 2012 (edited) Yea! easy, use exact code i gave you, not just part of it. Hi dsonesuk, Oh! Okie. Gotch you what you mean. I used the exact code which you gave: .content p:first-child:first-letter {font-size: 18pt;font-weight: bold;color: #7A003C;} but still I am unable to see DropCap effect for all the starting number in <p>...</p> tags. Please check this: <!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;margin: 0 auto;}#MenuContainer {float: left;width: 168px;}#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;}.content {text-align: justify;float: right;padding: 15px 15px 0 15px;width: 752px;}p {font-family: tahoma;font-size: 12pt;color: #313131;}.content p:first-child:first-letter {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;}.AboutUs-a {font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;text-indent: 15px;text-decoration:none;}.AboutUs-a:hover {font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;text-indent: 15px;text-decoration: underline;}.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;}.Services-a {font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;text-indent: 15px;text-decoration:none;}.Services-a:hover {font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;text-indent: 15px;text-decoration: underline;}.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;}.Testimony-a {font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;text-indent: 15px;text-decoration:none;}.Testimony-a:hover {font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;text-indent: 15px;text-decoration: underline;}.ContactUs {height: 35px;font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;background-color: #FF2490;}.ContactUs-a {font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;text-indent: 15px;text-decoration:none;}.ContactUs-a:hover {font-family: tahoma;font-size: 13pt;color: #FFFFFF;line-height: 36px;text-indent: 15px;text-decoration: underline;}.NoBorder {border-width: 0px;}ul {list-style-type: none;margin: 0;padding: 0;position: relative;}li {height: 36px;line-height: 36px;}.ImgAlign { text-align: center; height: auto; line-height: normal; padding-top: 15px; padding-bottom: 2px;}</style></head><body><div id="container"><ul id="MenuContainer"><li class="Home"><a href="index.html" class="Home-a"></a></li><li class="AboutUs"><a href="about-us.html" class="AboutUs-a"></a></li><li class="Services"><a href="services.html" class="Services-a"></a></li><li class="Testimony"><a href="testimony.html" class="Testimony-a"></a></li><li class="ContactUs"><a href="contact-us.html" class="ContactUs-a"></a></li><li class="ImgAlign"><img alt="MemberShip Seal" src="http://www.theatreon...oto/153_2G.jpeg" width="139px" height="211px" /></li><li class="ImgAlign"><img alt="MemberShip Seal" src="http://img.over-blog...ux/aldrin-7.jpg" width="168px" height="356px" /></li></ul><div id="ContentContainer"><div class="Box01"></div><div style="float:right;width:391px;height:36px;background-color:#009191"><span style="float:right;"></span></div><div class="content"><p>01...01...01...</p><p>02...02...02...</p><p>03...03...03...</p><p>04...04...04...</p><p>05...05...05...</p><p>06...06...06...</p><p>07...07...07...</p><p>08...08...08...</p><p>09...09...09...</p></div></div></div></body></html> Edited June 2, 2012 by creative1977 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 2, 2012 Share Posted June 2, 2012 (edited) Don't publish all the code, only the code that is relevant, or i will just ignore it, and not check it! but still I am unable to see DropCap effect for all the starting number in <p>...</p> tags. Please check this: I honestly do not have a clue what you going on about here, what is dropcap effect? .content p:first-child:first-letter will apply styling to first paragraph and the first character of that paragraph, and yes it does work! .content p:first-letter will apply styling to all paragraph and the first character of that paragraph, and yes it does work also! if you wish to target more than one character, you are going to have to use a span with class name to wrap around these characters. Edited June 3, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
amitamberker Posted June 4, 2012 Author Share Posted June 4, 2012 (edited) Hi dsonesuk, Don't publish all the code, only the code that is relevant, or i will just ignore it, and not check it!Okie. I won't publish all the code. Will post only that code which is applicable. I honestly do not have a clue what you going on about here, what is dropcap effect?I mean, like this: ~~~~~CSS:~~~~~ <style type="text/css"> div { width: 100px;}.DropCap { font-family: tahoma; font-size: 18pt; font-weight: bold; color: #7A003C; } </style> ~~~~~HTML~~~~~ <div><p><span class="DropCap">D</span>sonesuk</p><p><span class="DropCap">C</span>reative1977</p><p><span class="DropCap">J</span>ustsomeguy</p><p><span class="DropCap">I</span>ngolme</p><p><span class="DropCap">W</span>3schools</p></div> .content p:first-child:first-letter will apply styling to first paragraph and the first character of that paragraph, and yes it does work!Yes. I agree with you. It does work. .content p:first-letter will apply styling to all paragraph and the first character of that paragraph, and yes it does work also!Oh! Then I need to delete “first-child:” from the following CSS: .content p:first-child:first-letter { font-size: 18pt; font-weight: bold; color: #7A003C; } Let me try it… Hold on…….. WOW YUP! It does work now dsonesuk! Perfect. EXCELLENT! Thank you if you wish to target more than one character, you are going to have to use a span with class name to wrap around these characters.Nope. I don’t want that way. By the way still I am unable to send you Private Message to show you the Actual (Real) work. Edited June 4, 2012 by creative1977 Link to comment Share on other sites More sharing options...
amitamberker Posted June 4, 2012 Author Share Posted June 4, 2012 By the way, you should change that <span> and all those <br> elements for a set of <p> elements: one around each paragraph. Hi Ingolme,I have removed all the <span>...</span> from my HTML code. But still I have few <br /> elements here and there. I am trying to fix them. Link to comment Share on other sites More sharing options...
amitamberker Posted June 4, 2012 Author Share Posted June 4, 2012 In your CSS stylesheet change .DropCap for .first-paragraph:first-letter Hi Ingolme,dsonesuk recommended me to use like this:.content p:first-letter instead of .DropCapI have changed the .Box03 to .content 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