Jump to content

linton

Member
  • Posts

    54
  • Joined

  • Last visited

Everything posted by linton

  1. Unfortunately I did not save it after I increased the div to 48px. Also, adding links and text did not recreate the problem but this is not the first time it's happened. Will save it next time. Thanks for your time and everything, will keep you posted as I crawl along. I am planning on picking a domain name and a web host soon. Hopefully, that will make things easier. Thanks a bunch.
  2. Hello, Andrea, sincere thanks for your time and all the hard work and thoughtful suggestions. Increasing the NAV bar div to 48px seems to have resolved the problem. I have pasted the original CSS and HTML that I used below, please create or add horizontal navigation links plus text and see if the break occurs again. For now, my test page/structure is looking fine in FX, IE 8 and 9, Safari and Chrome. I apologize for not pasting everything verbatim earlier since I was still working on it. My goal was to get a working structure/outline/template before proceeding and eventually put it up on a site so I can see the results of my adventure. Will keep your styling suggestions in mind. CSS @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { text-align: center; } #wrapper { background-color: #CCC; text-align: left; width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; } #header { background-color: #660; height: 100px; } #nav { background-color: #960; height: 40px; width: 100%; } #leftcol { background-color: #C90; float: left; width: 300px; } #rightcol { background-color: #CC0; float: right; width: 600px; } #footer { background-color: #CF6; clear: both; height: 50px; } HTML <!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>2collayout-test</title> <link href="2colstyle.css" rel="stylesheet" type="text/css" /> </head> <body><!--start body div--> <div id="wrapper"><!--start wrapper div--> <div id="header">Content for id "header" Goes Here </div><!--end header div--> <div id="nav">Content for id "nav" Goes Here</div><!-- end nav div--> <div id="leftcol">Content for id "leftcol" Goes Here</div><!--end leftcol div--> <div id="rightcol">Content for id "rightcol" Goes Here</div><!--end rightcol div--> <div id="footer">Content for id "footer" Goes Here</div><!--end footer div--> </div><!--end wrapper div--> </body><!--end body div--> </html> Thanks again.
  3. Hello again, Thanks for your interest in helping. Below is the entire HTML page. It's a practice run before the real thing. Have a nice weekend. <link href="my2colteststyle.css" rel="stylesheet" type="text/css" /> </head> <body><!--start body div--> <div id="wrapper"><!--start wrapper div--> <div id="header">Content for id "header" Goes Here </div><!--end header div--> <div id="nav"> <ul> <li><a href="Test.html">Home</a></li> <li><a href="#">Events</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Location</a></li> <li><a href="#">Members</a></li> <li><a href="#">Forms</a></li> </ul> </div><!-- end nav div--> <div id="leftcol"><!--start leftcol div--> <p>The Boy King</p> <p>Ironically, our greatest royal treasure from ancient Egypt comes from a short lived boy king. King Tutankhamun was not even in the same category of achievement as the great Egyptian kings such as Khufu (builder of the Great Pyramid), Amenhotep III (prolific builder of temples and statuary throughout Egypt), or Ramesses II (prolific builder and usurper), in terms of the length of his reign or the depth of his accomplishments.<br /> Indeed, it is his little known status that contributed to the successful hiding of his tomb, which was covered over by a later pharaoh who was clearing away an area in which to cut his own tomb.</p> <p>On November 26, 1922, Howard Carter made archaeological history by unearthing the first Egyptian pharaonic tomb that still contained most of its treasures. Still, even this tomb had been robbed in antiquity, although the the robbery attempt was apparently thwarted before the thieves could make away with most of the treasure. <br /> This tomb also yielded something else that had never been found in modern history - the pristine mummy of an Egyptian king, laying intact in his original burial furniture.<br /> Thus, Tut's tomb gives us a unique opportunity to explore the life of King Tut and allows us to learn more about this essential period in New Kingdom Egyptian history.<br /> </p> </div><!--end leftcol div--> <div id="rightcol"><!--starts rightcol div--> <p>The Boy King</p> <p>Ironically, our greatest royal treasure from ancient Egypt comes from a short lived boy king. King Tutankhamun was not even in the same category of achievement as the great Egyptian kings such as Khufu (builder of the Great Pyramid), Amenhotep III (prolific builder of temples and statuary throughout Egypt), or Ramesses II (prolific builder and usurper), in terms of the length of his reign or the depth of his accomplishments.<br /> Indeed, it is his little known status that contributed to the successful hiding of his tomb, which was covered over by a later pharaoh who was clearing away an area in which to cut his own tomb.</p> <p>On November 26, 1922, Howard Carter made archaeological history by unearthing the first Egyptian pharaonic tomb that still contained most of its treasures. Still, even this tomb had been robbed in antiquity, although the the robbery attempt was apparently thwarted before the thieves could make away with most of the treasure. </p> <p>This tomb also yielded something else that had never been found in modern history - the pristine mummy of an Egyptian king, laying intact in his original burial furniture.</p> <p>Thus, Tut's tomb gives us a unique opportunity to explore the life of King Tut and allows us to learn more about this essential period in New Kingdom Egyptian history.<br /> </p> <p>The Story of King Tut<br /> <br /> When British archaeologist Howard Carter uncovered the remarkably preserved tomb of Tutankhamun in 1922, he created a worldwide sensation. The only tomb of its era found intact and full of indescribable treasures, it was also the first major discovery in the age of easy worldwide communication. That, along with rumors of a mysterious curse, helped make Tutankhamun the most popular of the Egyptian pharaohs in the modern world.</p> <p>But what was Tutankhamun's world really like? Who were the men who helped this boy king run an empire? Crowned at the tender age of nine, how did this child train for his roles as head of the state, church, and military? And what led to his death before his twentieth birthday?</p> <p>Learn the answers to these questions and more as you read "The Story of King Tut" and view the marvelous objects that give us a picture of his life.</p> <p>Explore King Tutankhamun's Story chronologically by continuing to Before Tut's Reign, or select a specific topic from the list of chapters below.</p> </div><!--end rightcol div--> <div id="footer">Content for id "footer" Goes Here</div><!--end footer div--> </div><!--end wrapper div--> </body><!--end body div--> </html>
  4. Thanks, I have pasted the code and style to the original post. Increasing the size of the box to 48px seems to have resolved the problem but I will appreciate any explanations you might have.
  5. I am a newbie. I finally dared and created a two column layout page comprising a header, a horizontal navigation bar, a left and right sidebar/columns under the navigation div and a footer. All the divs are within the wrapper div but there is a thin line under the navigation bar and it displays the background color of the wrapper. The page looks fine in live view, IE, Safari, Chrome etc but the only problem is the color of the wrapper div showing underneath the navigation bar. I can change the background color of the wrapper so it blends with the color of the page but I will like to know the right solution. The navigation bar has a width of 100% and a height of 40px. Thanks in advance for any solutions. CSS Style * { margin: 0px; padding: 0px; } body { text-align: center; } #wrapper { background-color: #CCC; text-align: left; width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; } #header { background-color: #660; height: 100px; } #nav { background-color: #960; height: 40px; width: 100%; } #leftcol { background-color: #C90; float: left; width: 300px; } #rightcol { background-color: #CC0; float: right; width: 600px; } #footer { background-color: #CF6; clear: both; height: 50px; } HTML Code <div id="wrapper"><!--start wrapper div--> <div id="header">Content for id "header" Goes Here </div> <div id="nav">Content for id "nav" Goes Here</div> <div id="leftcol">Content for id "leftcol" Goes Here</div> <div id="rightcol">Content for id "rightcol" Goes Here</div> <div id="footer">Content for id "footer" Goes Here</div> </div><!--end wrapper div--> Possible Solution: Increasing the width of the navigation bar to 48px caused it to flesh out and fill the break. It is looking fine now but I will like to understand the cause. Linton
×
×
  • Create New...