Jump to content

How do I create this Using ul and li


amitamberker
 Share

Recommended Posts

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 by creative1977
Link to comment
Share on other sites

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

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

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 by creative1977
Link to comment
Share on other sites

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

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

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

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

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

Ophse... And by the way, it's not Center Aligning...

Link to comment
Share on other sites

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 by creative1977
Link to comment
Share on other sites

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

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 by creative1977
Link to comment
Share on other sites

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 by creative1977
Link to comment
Share on other sites

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

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 by creative1977
Link to comment
Share on other sites

You have got into a real mucking fuddle with this posted code :happy0046:
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 by creative1977
Link to comment
Share on other sites

Hi Again dsonesuk :) Am I still into a real mucking fuddle with my earlier posted code? I hope I am fine now?

Edited by creative1977
Link to comment
Share on other sites

<!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

  • 2 weeks later...

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 by creative1977
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...