Jump to content

rassul

Members
  • Posts

    15
  • Joined

  • Last visited

Posts posted by rassul

  1. Its called collapsing margins, the inner containers margin will seep beyond the edge of outer container, and if the outer container margin is less than inner, the inner container margin is used.

    FIX: apply overflow: hidden; to outer container, other options include adding 1px padding.

    Thank you. Applied the overflow and it worked.

  2. <html lang="en">    <head>        <meta charset="utf-8">        <title> Title </title>        <style>            * {                margin: 0;                padding: 0;            }            #outerbox {                background-color: gray;                width: 300px;                height: 300px;            }                #innerbox {                width: 100px;                height: 100px;                background-color: green;                border: 1px solid black;                /*margin: 10px;*/            }        </style>    </head>    <body>        <div id="outerbox">            <div id="innerbox"></div>        </div>    </body></html>

    The above code's result is:

    post-132566-0-03914800-1393999289_thumb.jpg

    but if I uncomment margin for innerbox the result is:

    post-132566-0-03914800-1393999289_thumb.jpg

    Shouldn't the margin applied to innerbox and not the outerbox?

    Thanks in advance.

    post-132566-0-50274600-1393999340_thumb.jpg

  3. I am using wamp. Here is my footer.php:
    <?phpecho "<p>This is footer</p>";?>

    and place

    <?php include('footer.php'); ?>

    where the footer should be, but does not work.

    I am inserting
    <?php include('footer.php'); ?>

    in my index.html file.

  4. The problem with attempting a workaround with Javascript is that your site isn't going to work for people who navigate with Javascript disabled. It's also invisible to search engines and it slows down the loading of your page. If your server supports PHP, just put this in every page:
    <?php include('footer.php'); ?>

    If you want to test first on your computer, you can download WAMP to test your PHP pages.

    I am using wamp. Here is my footer.php:
    <?php echo "<p>This is footer</p>";?>

    and place

    <?php include('footer.php'); ?>

    where the footer should be, but does not work.

  5. I have the following table. I need to change the font for the 'Population' column only so the numbers are lined up. How is it done in CSS so I don't have to do it row by row? Thanks in advance.

    <!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title>	    <style type="text/css" media="screen">			    tr:nth-of-type(2n+3)  { background-color: #C0C0C0 ;  }	    </style></head><body>    <div id="container">	    <table border="1" align="center" bgcolor="white">			    <th>Country</th>			    <th>Capital</th>			    <th>Population</th>		    </tr>		    <tr>			    <td>Algeria</td>			    <td>Algiers</td>			    <td>35,980,193</td>		    </tr>		    <tr>			    <td>Belgium</td>			    <td>Brussels</td>			    <td>11,008,0000</td>		    </tr>		    <tr>			    <td>Chad</td>			    <td>N'Djamena</td>			    <td>11,525,496</td>		    </tr>		    <tr>			    <td>Chad</td>			    <td>N'Djamena</td>			    <td>11,525,496</td>		    </tr>	    </table>    </div></body></html>

  6. Hi, I have a fluid layout that expands/shrinks as changing the browser's width. The issue is when I make the browser's width narrower then boxes fall apart. Your help is appreciated with perhaps some explanation. Pictures are attached for further help. Thanks in advance.

    <!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title>		<style type="text/css" media="screen">			 * {				margin: 0;				padding: 0;				}				#container {				width: 80%;				height: 300px;				margin-left: auto;				margin-right: auto;				background: gray;				}			#header {				height: 65px;				background: #FF6600;				text-align: center;				}			#content {				height: 190px;				width: 70%;				float: left;				background: ##FFFF66;				min-width: 300px;				}			#side {				width: 29%;				height: 190px;				float: right;				background: #A3C266;				min-width: 100px;				}			#footer {				clear: both;				height: 35px;				background: #FFA366;				}			ul { list-style-type: none;				padding: 10px;}			p {text-align: center;}			#content p {text-align: left; padding: 5px;}			  		</style></head><body>	<div id="container" >		<div id="header">			<h1>This is a test</h1>			<h3>April 3, 2013</h3>		</div>		<div id="content">			<p>Lorem ipsum Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue.</p>		</div>		<div id="side">			<ul>				<li> <a href="#">Item 1</a> </li>				<li> <a href="#">Item 2</a> </li>				<li> <a href="#">Item 3</a> </li>				<li> <a href="#">Item 4</a> </li>			</ul>		</div>		<div id="footer">			<p>University</p>		</div></div>  </body></html>

    post-132566-0-00274800-1363879296_thumb.jpg

    post-132566-0-49866300-1363879296_thumb.jpg

  7. I have a div called footer that falls outside of its container parent. Please refer to the picture. Please help me to fix it. Thanks in advance.post-132566-0-64675400-1363824511_thumb.jpgpost-132566-0-64675400-1363824511_thumb.jpg
    <!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title>		<style type="text/css" media="screen">			* {margin: 0;			   padding: 0;			}			#container {width: 70%;						height: 400px;						background: gray;						border: 2px solid black;			}			#side {width: 30%;				   height: 400px;			  				   background: #FF6600;				   overflow: auto;				   text-align: center;				   float: right;			}			#footer {width: 100%;					 height: 45px;					 background: yellow;					 clear: both;			}		</style></head><body><div id="container" >Container		<div id="side">Side</div>		<div id="footer">Footer</div></div></body></html>

    I uploaded the same image twice, ignore one.
  8. I have a div called footer that falls outside of its container parent. Please refer to the picture. Please help me to fix it. Thanks in advance.post-132566-0-64675400-1363824511_thumb.jpgpost-132566-0-64675400-1363824511_thumb.jpg

    <!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title>		<style type="text/css" media="screen">			* {margin: 0;			   padding: 0;			}			#container {width: 70%;						height: 400px;						background: gray;						border: 2px solid black;			}			#side {width: 30%;				   height: 400px;			  				   background: #FF6600;				   overflow: auto;				   text-align: center;				   float: right;			}			#footer {width: 100%;					 height: 45px;					 background: yellow;					 clear: both;			}		</style></head><body><div id="container" >Container		<div id="side">Side</div>		<div id="footer">Footer</div></div></body></html>

×
×
  • Create New...