Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,415
    Thanks
    68
    Thanked 102 Times in 101 Posts

    Keep text inside box

    I have a little bit of a problem. The SP: 2/2 is jumping out of the container. I'd like for the left box and middle box to stay within it's limits of the blue background box. I don't know if this is a simple padding or margin issue or what.

    I'd really appreciate any help. I managed to get the footer to stay at the bottom.

    Thank you,

    Code:
    <body>
    <div id="wrap">
      <div id="header">
        <h1 id="logo">Realm of <span class="gray">Dragons</span></h1>
        <h2 id="slogan">Discover the Realms</h2>
        <div id="menu">
          <ul>
            <li id="current"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Help Pages</a></li>
            <li><a href="">Support</a></li>
            <li><a href="">Item Shop</a></li>
          </ul>
        </div>
      </div>
      <div id="content-wrap">
        <div id="sidebar" >
          <h1 class="clear">Custom Menu</h1>
          <ul class="sidemenu">
            <li><a href="index.php">Town Overview</a></li>
            <li><a href="courtyard.php">Courtyard</a></li>
          </ul>
    
    </div>
        <div id="main"> <a name="TemplateInfo"></a>
          <div class="box">
            <h1>Welcome to <span class="gray">Knightslore</span></h1>
            <p><i>Knightslore is a thriving town, all the adventurer's start here, each one believes they have what it takes to master their goal in life. You will find many people here. The history of this land goes back to 1019 A.D. </i></p>
    
          </div>
    
    
        </div>
        <br />
      </div>
    </div>
    <div id="footer-wrap">
      <div class="footer-left">
        <p class="align-left"> &copy; 2014 RoDgame.org. All rights reserved.</p>
      </div>
    
    </div>
    </body>

    Code:
    * { 
    	padding: 0; margin: 0;
    }
    body {
    	margin: 0; 	padding: 0;
    	font: normal .70em/1.6em Verdana, Tahoma, sans-serif;
    	color: #BDBDBD;
    	background: #000;
    	text-align: center;	
    }
    /* links */
    a {
    	color: #FFF;
    	background-color: inherit;
    	text-decoration: none;
    }
    a:hover {
    	color: #FFF;
    	background-color: inherit;	
    	text-decoration: underline;
    }
    
    /* headers */
    h1, h2, h3 {
    	font: normal 1.3em 'Trebuchet MS', Arial, Sans-serif;
    	color: #FFF;	
    }
    h1 { font-size: 1.6em; } 
    h2 { font-size: 1.4em; text-transform:uppercase; font-weight: bold;}
    h3 { font-size: 1.3em; font-weight: bold; }
    
    p, h1, h2, h3 {
    	margin: 0;
    	padding: 10px 15px;
    }
    
    ul, ol {
    	margin: 10px 30px;
    	padding: 0 15px;
    	color: #FFF;
    }
    
    /* images */
    img {
    	border: 3px solid #555;
    }
    img.no-border {
    	border: none;
    }
    img.float-right {
      margin: 5px 0px 5px 15px;  
    }
    img.float-left {
      margin: 5px 15px 5px 0px;
    }
    a img {  
      border: 3px solid #555;
    }
    a:hover img {  
      border: 3px solid #CCC !important; /* IE fix*/
      border: 3px solid #555;
    }
    
    code {
      margin: 5px 0;
      padding: 10px;
      text-align: left;
      display: block;
      overflow: auto;  
      font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
      /* white-space: pre; */
      background: #0A1646;  
    }
    acronym {
      cursor: help;
      border-bottom: 1px solid #777;
    }
    blockquote {
    	margin: 15px;
     	padding: 0 0 0 20px;  	
      	background: #0A1646;	
    	font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;   
    }
    
    /* form elements */
    form {
    	margin: 10px 15px; 
    	padding: 0;
    	background: #0A1646;	
    }
    label {
    	display:block;
    	font-weight:bold;
    	margin:5px 0;
    }
    input {
    	padding: 2px;
    	border:1px solid #eee;
    	font: normal 1em Verdana, sans-serif;
    	color:#777;
    }
    textarea {
    	width: 250px;
    	padding:2px;
    	font: normal 1em Verdana, sans-serif;
    	border:1px solid #eee;
    	height:100px;
    	display:block;
    	color:#777;
    }
    input.button { 
    	margin: 0; 
    	font: bold 1em Arial, Sans-serif; 
    	border: 1px solid #CCC;
    	background: #FFF; 
    	padding: 2px 3px; 
    	color: #333;	
    }
    
    /* search form */
    .searchform form{
    	background-color: transparent;
    	border: none;
    	margin: 0; padding: 0;
    }
    .searchform input.textbox { 
    	margin: 0; 
    	width: 145px;
    	border: 1px solid #777; 
    	background: #FFF;
    	color: #333; 
    	height: 14px;
    	vertical-align: top;
    }
    .searchform input.button { 
    	margin: 0; 
    	padding: 2px 3px; 
    	font: bold 12px Arial, Sans-serif; 
    	background: #FFF;
    	border: 1px solid #f2f2f2;
    	color: #333;	
    	width: 65px;
    	vertical-align: top;
    }
    
    /***********************
    	  LAYOUT
    ************************/
    #wrap {
    	background: #212B5C url(bg.jpg) repeat-x 0 0; 
    	margin: 20px auto 0 auto;	
    	text-align: left;		
      	border-color: #444;
    	border-style: solid;
    	border-width: 1px 1px 5px 1px;	
    	height:100%;
    }	
    #wrap, #footer-wrap {
    	width: 84%;
    }
    
    /* header */
    #header {
    	position: relative;
    	height: 110px;	
    	background: #7F8082 url(header-bg.jpg) repeat-x 0% 100%;
    	border-bottom: 5px solid #444;		
    }
    #header h1#logo {
    	position: absolute;
    	top: 5px; left: 20px;
    	margin: 0; padding: 0;
    	font: bolder 50px 'Trebuchet MS', Arial, Sans-serif;
    	letter-spacing: -2px;	
    }
    #header h2#slogan {
    	position: absolute;
    	top: 50px; left: 65px;
    	color: #FFF;
    	text-indent: 0px;
    	font: bold 12px Tahoma, 'Trebuchet MS', Sans-serif; 
    	text-transform: none;	
    }
    
    /* content-wrap */
    #content-wrap {
    	clear: both;
    	margin: 0; padding: 0;			
    }
    
    /* box */
    .box {
    	margin: 10px 15px;			
    	border: 1px solid #0A1646;	 	
     background-image:url('test.gif');
     background-repeat:no-repeat;
    }
    
    /* main */
    #main {
    	margin: 0 0 0 270px;		
    	padding-top: 20px;
    }
    #main .box {
    	margin-left: 0;
    }
    
    /* sidebar */
    #sidebar {
    	float: left;
    	width: 250px;
    	margin: 0;
    	padding-top: 20px; 	
    }
    #sidebar ul.sidemenu {
    	margin: 0 0 0 15px; padding: 0;	
    	background: #242424;		
    	border-top: 5px solid #444;
    }
    #sidebar ul.sidemenu li {
    	display: inline;
    	list-style: none;		
    }
    #sidebar ul.sidemenu li a {
      display: block;	
      padding: 5px 10px 5px 15px;   
      text-decoration: none;
      color: #CCC;
      font-weight: bold;  
    } 
    #sidebar ul.sidemenu li a:hover {
      color: #333;
      background: #A0A0A0;  
    }
    
    /* Footer */
    #footer-wrap { 
      position:absolute;
      bottom:0;
       width:100%;
       height:60px;
    	clear: both; 
    	color: #FFF; 
    	background: #000; 
    	margin: 0 auto; 
    	padding: 0; 
    	font-size: 88%;  		
    }
    #footer-wrap a { 
    	text-decoration: none; 
    	font-weight: bold;	
    	color: #FFF;
    }
    #footer-wrap .footer-left{
    	float: left;
    	width: 65%;	
    	padding-bottom: 20px;	
    }
    #footer-wrap .footer-right{
    	float: right;
    	width: 30%;			
    	padding-bottom: 20px;
    }
    
    /* menu tabs */
    #header ul {
    	position: absolute;
    	top: 20px; right: 20px;
    	margin:0; padding: 0;
       list-style:none;
    	font: bold 1.3em  'Trebuchet MS', Tahoma, verdana,  sans-serif;	
    	height: 2.3em;
    }
    #header li {
       display:inline;
       margin:0; padding:0;
    }
    #header a {
    	float: left;
       margin:0;
       padding:3px 10px 2px 10px;
       text-decoration:none;	
    	color: #CCC;
    }
    #header a:hover {
    	border-top: 5px solid #CCC;	
    }
    #header #current a {
       color: #FFF;
    	border-top: 5px solid #FFF;
    }
    /* end menu tabs */
    
    /* alignment classes */
    .float-left  { float: left; }
    .float-right {	float: right; }
    .align-left  {	text-align: left; }
    .align-right {	text-align: right; }
    
    /* additional classes */
    .clear {	clear: both; }
    .gray  {	color: #A0A0A0; }
    .comments { 
    	text-align: right; 
    	padding: 7px 15px;
    	margin: 20px 15px 15px 15px;
    	background: #0A1646;	 
    }

    Keep text inside box-ss.jpg
    Last edited by myfayt; 05-08-2014 at 12:11 AM.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    I'm not sure what you mean by "SP: 2/2". I looked through your HTML and CSS and didn't see anything like that. If the content that's jumping out of the container is in the .sidemenu (the custom menu links), then adding overflow:hidden to #content-wrap will help. (Setting overflow:hidden on the parent element of a floated element allows the parent element to surround the float.) Another way to accomplish this is to float the parent, too. You might want to put some bottom padding on #content-wrap if you do either of these so the blue background shows through on all sides.

    If your page ever gets long enough to scroll, you may want to change your #footer-wrap position from absolute to fixed so it stays at the bottom of the viewport even while scrolling. If you do this, you'll want to bump up the bottom padding on #content-wrap to make sure you can scroll enough that the bottom of the content isn't covered up by the footer.

    If I've misunderstood your question, please give some more detail. A live page/example (if possible) would be nice.

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,415
    Thanks
    68
    Thanked 102 Times in 101 Posts
    Sorry I forgot to post the screenshot, I updated it.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    Without being able to see how the HP: 10/10 and SP: 2/2 are marked up, I can't be 100% sure, but my guess is they are children of the #sidebar and therefore floating along with it. In that case, my suggestion of adding overflow:hidden to #content-wrap is probably your best bet.

    Code:
    /* content-wrap */
    #content-wrap {
        clear: both;
        margin: 0; padding: 0;	
        overflow: hidden;		
    }

  • Users who have thanked kansel for this post:

    myfayt (05-08-2014)

  • #5
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,415
    Thanks
    68
    Thanked 102 Times in 101 Posts
    It seems to be working, thanks so much!
    Been a sign maker for 7 years. My business:
    American Made Signs


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •