amitamberker Posted May 18, 2012 Share Posted May 18, 2012 (edited) Hello Everyone, How do I create this using UL and LI instead of using DIV tags? Please help... <!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>Using ul and li</title><style style type="text/css">/*#container { width: 950px; background-color: #7a003c; overflow: auto;}*/#MenuContainer { float: left; width: 168px; text-indent: 15px;}.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;}</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>--></body></html> Edited May 18, 2012 by creative1977 Link to comment Share on other sites More sharing options...
Ingolme Posted May 18, 2012 Share Posted May 18, 2012 Just remove all the margin and padding and bullets from these <ul> and <li> elements and they'll behave exactly the same as the <div> does <ul id="MenuContainer"> <li class="Home"><a href="index.html" class="Home-a">Home</a></li> <li class="AboutUs">About Us</li> <li class="Services">Services</li> <li class="Testimony">Testimony</li> <li class="ContactUs">Contact Us</li></ul> #menuContainer { margin: 0; padding: 0; list-style-type: none;}#menuContainer li { margin: 0; padding: 0;} Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 Hello Ingolme How are you doing? It's been so long... Nice to see you again!I searched as "navigation menu in ul and li" in Google and found - http://www.w3schools.com/css/css_navbar.asp ... I am trying to learn by myself from that link So far I did: <!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>Using ul and li</title><style style type="text/css">/*#container { width: 950px; background-color: #7a003c; overflow: auto;}*/#MenuContainer { float: left; width: 168px; text-indent: 15px;}ul{ list-style-type:none; margin:0; padding:0;}li{ height: 36px; line-height: 36px;}</style></head><body><!--<div id="container">--><div id="MenuContainer"><ul> <li><a href="index.html">Home</a></li> <li><a href="about-us.html">About Us</a></li> <li><a href="services.html">Services</a></li> <li><a href="testimony.html">Testimony</a></li> <li><a href="contact-us.html">Contact Us</a></li></ul></div><!--</div>--></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted May 18, 2012 Share Posted May 18, 2012 The <div> element there is superfluous. Just give the menuContainer ID to the <ul> element instead. Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 (edited) The <div> element there is superfluous. Just give the menuContainer ID to the <ul> element instead.I tried it. But if I do so, my design gets messed-up... Please check publish this 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>Using ul and li</title><style style type="text/css">#menuContainer { margin: 0; padding: 0; list-style-type: none;}#menuContainer li { margin: 0; padding: 0;}.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;}</style></head><body><!--<div id="container">--><ul id="MenuContainer"> <li class="Home"><a href="index.html" class="Home-a">Home</a></li> <li class="AboutUs">About Us</li> <li class="Services">Services</li> <li class="Testimony">Testimony</li> <li class="ContactUs">Contact Us</li></ul><div> </div><div><img alt="MemberShip Seal" src="#" width="139px" height="211px" /></div><!--</div>--></body></html> Edited May 18, 2012 by creative1977 Link to comment Share on other sites More sharing options...
thescientist Posted May 18, 2012 Share Posted May 18, 2012 what part is messed up? We can't really tell unless you also tell us what it should be doing instead? Do you still need to give it the width of the container? 950px? Link to comment Share on other sites More sharing options...
Ingolme Posted May 18, 2012 Share Posted May 18, 2012 You forgot to copy the CSS you had applied to the <div> and add it to the <ul> element. float: left;width: 168px;text-indent: 15px; You also forgot to keep the class names "Home", "AboutUs", "Services" and their CSS definitions. Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 Hi Ingolme,Please publish the following CODE and view it from your Browser. <!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>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;}.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;}li { height: 36px; line-height: 36px; }</style></head><body><div id="container"><div id="MenuContainer"><ul> <li class="Home"><a href="index.html" class="Home-a">Home</a></li> <li class="AboutUs"><a href="about-us.html" class="AboutUs-a">About Us</a></li> <li class="Services"><a href="services.html" class="Services-a">Services</a></li> <li class="Testimony"><a href="testimony.html" class="Testimony-a">Testimony</a></li> <li class="ContactUs"><a href="contact-us.html" class="ContactUs-a">Contact Us</a></li></ul><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> Link to comment Share on other sites More sharing options...
Ingolme Posted May 18, 2012 Share Posted May 18, 2012 I don't know why you have an empty <div> element. Everything works fine for me. Just change this code: <div id="MenuContainer"><ul><li class="Home"><a href="index.html" class="Home-a">Home</a></li><li class="AboutUs"><a href="about-us.html" class="AboutUs-a">About Us</a></li><li class="Services"><a href="services.html" class="Services-a">Services</a></li><li class="Testimony"><a href="testimony.html" class="Testimony-a">Testimony</a></li><li class="ContactUs"><a href="contact-us.html" class="ContactUs-a">Contact Us</a></li></ul><div> </div><div><img alt="MemberShip Seal" src="#" width="139px" height="211px" /></div></div> For this: <ul id="MenuContainer"><li class="Home"><a href="index.html" class="Home-a">Home</a></li><li class="AboutUs"><a href="about-us.html" class="AboutUs-a">About Us</a></li><li class="Services"><a href="services.html" class="Services-a">Services</a></li><li class="Testimony"><a href="testimony.html" class="Testimony-a">Testimony</a></li><li class="ContactUs"><a href="contact-us.html" class="ContactUs-a">Contact Us</a></li><li><img alt="MemberShip Seal" src="#" width="139px" height="211px" /></li></ul> The CSS you have currently works fine and doesn't need to be changed. Link to comment Share on other sites More sharing options...
Ingolme Posted May 18, 2012 Share Posted May 18, 2012 By the way, you should change that <span> and all those <br> elements for a set of <p> elements: one around each paragraph. Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 Hi Ingolme,If I place:<li><img alt="MemberShip Seal" src="#" width="139px" height="211px" /></li>then it (the image) would touch the Contact Us tab. Oh! So, do I need to give Top Padding 10px? Am I making sense? Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 Ophse... And by the way, it's not Center Aligning... Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 (edited) what part is messed up? We can't really tell unless you also tell us what it should be doing instead? Do you still need to give it the width of the container? 950px? Hello thescientist Nothing is messed-up now. I have fixed it. Hope you are doing well. Yes, I need the width of the container in 950px but thanks for your reply. I am working on it. Did you read my post in General? Edited May 18, 2012 by creative1977 Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 Hi Ingolme,Now the Image is Center aligned... No worries. But like I said, the image is touching the Contact Us tab...<ul id="MenuContainer"> <li class="Home"><a href="index.html" class="Home-a">Home</a></li> <li class="AboutUs"><a href="about-us.html" class="AboutUs-a">About Us</a></li> <li class="Services"><a href="services.html" class="Services-a">Services</a></li> <li class="Testimony"><a href="testimony.html" class="Testimony-a">Testimony</a></li> <li class="ContactUs"><a href="contact-us.html" class="ContactUs-a">Contact Us</a></li> <li><img alt="Network Member" src="http://w3schools.invisionzone.com/uploads/profile/photo-18212.jpg" width="139px" height="211px" /></li></ul> Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 (edited) Hi Ingolme, You said: By the way, you should change that <span> and all those <br> elements for a set of <p> elements: one around each paragraph.So, instead of this:<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> Should I make it as this?<p style="float:right;"><a target="_blank" href="#"><img src="images/facebook_icon.png" class="NoBorder" /></a> <img src="images/linkedin_icon_small.png" /></p> Edited May 18, 2012 by creative1977 Link to comment Share on other sites More sharing options...
amitamberker Posted May 18, 2012 Author Share Posted May 18, 2012 (edited) Hi Ingolme, From this:<span class="DropCap">W</span>I made it like this:<p class="DropCap">W</p> and then the "P" moved away towards top. After adding "display: inline;" in .DropCap class, P came back to it's original position. Edited May 18, 2012 by creative1977 Link to comment Share on other sites More sharing options...
thescientist Posted May 18, 2012 Share Posted May 18, 2012 span is already inline. p is block. all you did was make p an inline element which span already was. Link to comment Share on other sites More sharing options...
Ingolme Posted May 18, 2012 Share Posted May 18, 2012 I'm talking about all this. You have the entire thing wrapped in a span tag. Also, "style3" is not a very descriptive class name. <span class="DropCap">W</span><span class="style3">3Schoolsis a website developer's portal, with tutorials and referencesrelating to web development subjects, including HTML, XML, CSS,JavaScript, PHP, ASP, ASP.NET, and SQL. W3Schools is free ofcharge, and is funded through text and display advertising.[1]The tutorials and references on the website and the related codeare proprietary.[2]<br /><br />The site derives its name from the abbreviation for the WorldWide Web; W3 is a numeronym of WWW. W3Schools is not affiliatedwith the W3C.[3] Members of the W3C have asked W3Schools toexplicitly disavow any connection, but they have refused to doso.[4][better source needed]<br /><br />It is created and owned by Refsnes Data, a Norwegianfamily-owned software development and consulting company.[5]<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></span> Remove all the <br> elements and wrap each paragraph in a <p>aragraph tag. There's a selector for the first letter of a paragraph, so use that instead of a <span> <p class="first-paragraph">W3Schools is a website developer's portal, with tutorials and referencesrelating to web development subjects, including HTML, XML, CSS,JavaScript, PHP, ASP, ASP.NET, and SQL. W3Schools is free ofcharge, and is funded through text and display advertising.[1]The tutorials and references on the website and the related codeare proprietary.[2]</p><p>The site derives its name from the abbreviation for the WorldWide Web; W3 is a numeronym of WWW. W3Schools is not affiliatedwith the W3C.[3] Members of the W3C have asked W3Schools toexplicitly disavow any connection, but they have refused to doso.[4][better source needed]</p><p>It is created and owned by Refsnes Data, a Norwegianfamily-owned software development and consulting company.[5]</p> In your CSS stylesheet change .DropCap for .first-paragraph:first-letter Link to comment Share on other sites More sharing options...
amitamberker Posted May 20, 2012 Author Share Posted May 20, 2012 (edited) Hi Ingolme, Please publish the following CODE and view it from your Browser. I think this looks FUNNY and little bit weird too. By the way, in this code (<li><img alt="MemberShip Seal" src="#" width="139px" height="211px" /></li>), the top part of image is touching to the Contact Us tab. Should I give padding-top:10px? In my CSS stylesheet, I changed from .DropCap to .first-paragraph:first-letter as you said. And also I have removed all the <br /> and <span></span> too. <!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;}.first-paragraph:first-letter {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;}.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;}li {height: 36px;line-height: 36px;}</style></head><body><div id="container"><ul id="MenuContainer"> <li class="Home"><a href="index.html" class="Home-a">Home</a></li> <li class="AboutUs"><a href="about-us.html" class="AboutUs-a">About Us</a></li> <li class="Services"><a href="services.html" class="Services-a">Services</a></li> <li class="Testimony"><a href="testimony.html" class="Testimony-a">Testimony</a></li> <li class="ContactUs"><a href="contact-us.html" class="ContactUs-a">Contact Us</a></li> <li><img alt="MemberShip Seal" src="#" width="139px" height="211px" /></li></ul><div id="ContentContainer"><div class="Box01">w3Schools</div><div style="float:right;width:391px;height:36px;"><p style="float:right;"><a target="_blank" href="#"><img src="images/facebook_icon.png" class="NoBorder" /></a> <img src="images/linkedin_icon_small.png" /></p></div><div class="Box03"><p class="first-paragraph">W3Schoolsis a website developer's portal, with tutorials and referencesrelating to web development subjects, including HTML, XML, CSS,JavaScript, PHP, ASP, ASP.NET, and SQL. W3Schools is free ofcharge, and is funded through text and display advertising.[1]The tutorials and references on the website and the related codeare proprietary.[2]</p><p>The site derives its name from the abbreviation for the WorldWide Web; W3 is a numeronym of WWW. W3Schools is not affiliatedwith the W3C.[3] Members of the W3C have asked W3Schools toexplicitly disavow any connection, but they have refused to doso.[4][better source needed]<p>It is created and owned by Refsnes Data, a Norwegianfamily-owned software development and consulting company.[5]<br /></p></div></div></div></body></html> 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 You have got into a real mucking fuddle with this posted code Link to comment Share on other sites More sharing options...
amitamberker Posted May 20, 2012 Author Share Posted May 20, 2012 (edited) You have got into a real mucking fuddle with this posted code Hi dsonesuk, Yup I know... I know... Some bug. whew... I am trying to Edit and Fix it. Please hang on for few more seconds... Edited May 20, 2012 by creative1977 Link to comment Share on other sites More sharing options...
amitamberker Posted May 20, 2012 Author Share Posted May 20, 2012 (edited) Hi Again dsonesuk Am I still into a real mucking fuddle with my earlier posted code? I hope I am fine now? Edited May 20, 2012 by creative1977 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 23, 2012 Share Posted May 23, 2012 <!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>Testing</title><style type="text/css">body {font-family: Tahoma;}#container {width: 950px;overflow: auto;margin:0 auto;position:relative;}#MenuContainer, #menu_bg {width: 168px;}#menu_bg { position:absolute; top:0; left:0; right:0; bottom:0;background-color: #7a003c; z-index:0;}#MenuContainer {float: left;position:relative;text-indent: 15px;}#ContentContainer {float: right;width: 782px;background-color: white;}#ContentContainer h1 {height: 36px;margin:0;font-size: 14pt;color: #000000;text-indent: 15px;line-height: 36px;font-weight:normal;}#ContentContainer h1 span {width: 50%; display:block;background-color: #9DFFFF; float: left;}#ContentContainer h1 span ~ span, #ContentContainer h1 span ~ span span {background: none;float:right; display:block;}#ContentContainer h1 span ~ span {width:49%;height:36px;}.content {text-align: justify;float: right;padding: 15px 15px 0 15px;width: 752px;}.content p:first-child:first-letter {font-size: 18pt;font-weight: bold;color: #7A003C;}#MenuContainer, #MenuContainer ul, #MenuContainer li{list-style-type:none;padding:0;margin: 0;text-indent:0;}#MenuContainer li {height: 35px;font-family: tahoma;font-size: 13pt;text-indent: 15px;border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color: #FFFFFF;}#MenuContainer a {display:block;color: #FFFFFF;height:100%;line-height: 36px;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;}#MenuContainer .ContactUs {background-color: #FF2490;}#MenuContainer .ContactUs + li { height: auto; line-height:normal; text-indent: 0px; text-align:center; padding-top: 15px; border:none;}.NoBorder {border-width: 0px;}</style></head><body><div id="container"><div id="menu_bg"></div><ul id="MenuContainer"><li class="Home"><a href="index.html" class="Home-a">Home</a></li><li class="AboutUs"><a href="about-us.html" class="AboutUs-a">About Us</a></li><li class="Services"><a href="services.html" class="Services-a">Services</a></li><li class="Testimony"><a href="testimony.html" class="Testimony-a">Testimony</a></li><li class="ContactUs"><a href="contact-us.html" class="ContactUs-a">Contact Us</a></li><li><img alt="MemberShip Seal" src="#" width="139px" height="211px" /></li></ul><div id="ContentContainer"><h1><span>w3Schools</span><span><span><a target="_blank" href="#"><img src="images/facebook_icon.png" class="NoBorder" alt="" /></a> <img src="images/linkedin_icon_small.png" alt="" /></span></span></h1><div class="content"><p>W3Schoolsis a website developer's portal, with tutorials and referencesrelating to web development subjects, including HTML, XML, CSS,JavaScript, PHP, ASP, ASP.NET, and SQL. W3Schools is free ofcharge, and is funded through text and display advertising.[1]The tutorials and references on the website and the related codeare proprietary.[2]</p><p>The site derives its name from the abbreviation for the WorldWide Web; W3 is a numeronym of WWW. W3Schools is not affiliatedwith the W3C.[3] Members of the W3C have asked W3Schools toexplicitly disavow any connection, but they have refused to doso.[4][better source needed]</p><p>It is created and owned by Refsnes Data, a Norwegianfamily-owned software development and consulting company.[5]</p></div></div></div></body></html> Link to comment Share on other sites More sharing options...
amitamberker Posted May 24, 2012 Author Share Posted May 24, 2012 Hi dsonesuk,Thank you mate... Link to comment Share on other sites More sharing options...
amitamberker Posted June 1, 2012 Author Share Posted June 1, 2012 (edited) Hi dsonesuk and All, Few messy thing has happened in my Code. Somehow I am unable to fix it. 1. The 2nd Image is Overlaping on the 1st Image underneath Last (5th) Navigation Menu.if I delete / remove "height: 36px;" from the following class,li {/*height: 36px;*/line-height: 36px;}then how do I control the height of the Navigation Menu?2. I am unable to see DropCap effect for all the starting number in <p>...</p> tags.3. The <div id="ContentContainer">...</div> has moved down after placing additional <li>..</li> to place 2nd image. <!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;}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;}</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="139px" height="211px" /></li></ul><div id="ContentContainer"><div class="Box01"></div><div style="float:right;width:391px;height:36px;"><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>By the way, when I select a <p> tag: <p>W3Schools 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]</p>... why do I see a "padding" kind of thing (effect)? Edited June 1, 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