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 15 of 15

Thread: about margin

  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts

    about margin

    im having a problem giving a margin on my logo, I only want it to have a 50px margin inside the header div but it also give a margin at my top outside the header div. please check my code.


    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>Untitled Document</title>
    
    
    </head>
    
    
    
    
    <body>
    
    <div id="wrapper">
    
    <div id="header">
    
    <div style=" margin:50px; position: inherit">
     <font size="+6">My LOGO</font> 
    </div>
    
    
    </div><!--header end-->
    
    <div id="inwrap">
    
    
    <div id="content">content</div><!--content end-->
    
    <div id="right">right</div><!--right end-->
    
    </div><!--inwrap end-->
    
    
    
    <div id="footer">footer</div><!--footer end-->
    </div>
    <!--wrapper end-->
    
    </body>
    </html>

    Code:
    @charset "utf-8";
    body {
    	background: #000;
    	color: #F00;
    		
    }
    #wrapper {
    	position: relative;
    	margin: auto;
    	width: 95%;
    
    }
    #header {
    	background:  #674;
    	height: 150px;
    	
    }
    #inwrap {
    	padding-bottom: 200px;
    }
    #inwrap:after {
    content:" ";
    display:block;
    clear:both;
    	
    }
    
    #content {
    	position: relative;
    	width: 60%;
    	background: #666;
    	float: left;
    }
    #right {
    	margin-left: 60%;
    	background: #CCC;
    	
    }
    
    #footer {
    	position: absolute;
    	bottom: 0;
    	height: 200px;
    	width: 100%;
    	margin: auto;
    	background: #999;
    
    	
    
    
    
    /* CSS Document */

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello finoy_ako,
    That My LOGO may be an image later? It's a heading right now though so I put it in heading tags like 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>Untitled Document</title>
    <style type="text/css">
    body {
    	margin: 0;
    	background: #000;
    	color: #f00;
    }
    #wrapper {
    	width: 95%;
    	margin: 0 auto;
    	position: relative;
    }
    #header {
    	height: 150px;
    	background: #674;
    }
    	#header h1 {margin: 50px 0 0 50px;}
    </style>
    </head>
    
    <body>
    	<div id="wrapper">
    		<div id="header">
    			<h1>My LOGO</h1>
    		<!--end header--></div>
    	<!--end wrapper--></div>
    </body>
    </html>
    That still has the margin issue you're seeing. It's called Uncollapsing Margins.

    This bit highlighted in red fixes it -
    Code:
    #header {
    	height: 150px;
    overflow: auto;
    	background: #674;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    finoy_ako (04-08-2013)

  • #3
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts
    thanks sir Excavator, thats a big help.

  • #4
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts
    how about this sir.. why does my class div still affecting when i put a font size in the body of css


    Code:
    .menu {
    	position: absolute;
    	top: 60px;
    	right: 300px;
    }
    .menu ul, li, a{
    	letter-spacing: 2px;
    	color: #fff;
    	text-decoration: none;
    	font-size: 21px;
    	display: inline;
    	list-style: none;
    i only want my menu class tags to 21px, but it also became 12px even it is inside the class div.




    Code:
    body {
    	margin: 0px;
    	background: #000;
    	color: #F00;
    }
    body a{
    	text-decoration: none;
    	font-size: 12px;

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by finoy_ako View Post
    how about this sir.. why does my class div still affecting when i put a font size in the body of css


    Code:
    .menu {
    	position: absolute;
    	top: 60px;
    	right: 300px;
    }
    .menu ul, li, a{
    	letter-spacing: 2px;
    	color: #fff;
    	text-decoration: none;
    	font-size: 21px;
    	display: inline;
    	list-style: none;
    i only want my menu class tags to 21px, but it also became 12px even it is inside the class div.




    Code:
    body {
    	margin: 0px;
    	background: #000;
    	color: #F00;
    }
    body a{
    	text-decoration: none;
    	font-size: 12px;
    CSS deals in, among other things, specificity. The more specific a path is for a style setting, the "stronger" that style setting is in the cascading style computation. Since body a is more specific than simply a the body a style is "winning."

    I think what you meant to put here:
    Code:
    .menu ul, li, a{
    	letter-spacing: 2px;
    	color: #fff;
    	text-decoration: none;
    	font-size: 21px;
    	display: inline;
    	list-style: none;
    }
    Was actually something more like this:
    Code:
    .menu ul li,.menu ul li a{
    	letter-spacing: 2px;
    	color: #fff;
    	text-decoration: none;
    	font-size: 21px;
    	display: inline;
    	list-style: none;
    }
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    finoy_ako (04-09-2013)

  • #6
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts
    sir how abou my footer, please tell me how can I allign my .fwrapper div to center..

    I set margin to auto or margin-left and ringht auto but still not make it to center.


    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>Untitled Document</title>
    
    <style type="text/css">
    
    #footer {
    	position: absolute;
    	bottom: 0;
    	height: 300px;
    	width: 100%;
    	margin: auto;
    	background: #223;
    	border-top: #999 solid 4px;
    }
    .fwrapper {margin: auto; color: #111;}
    .fleft, .fmid, .fright { width:250px; margin:0 30px; padding:10px;box-shadow: 5px 5px 3px #888; }
    .fleft { float:left; } .fmid { float:left; } .fright { float:left; } .clear { clear: left; }
    
    </style>
    </head>
    
    <body>
    
    <div id="footer">
    <div class="fwrapper">
    <div class="fleft">
    <p><b>Lorem ipsum</b><br /> dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
    </div>
        <div class="fmid">
        <p><b>Lorem ipsum</b><br /> dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
        </div>
        <div class="fright">
        <p><b>Lorem ipsum</b><br /> dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
        </div>
        <div class="clear"></div>
    </div>
    
    
    
    </body>
    </html>
    Last edited by finoy_ako; 04-13-2013 at 03:54 PM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Try it like this once -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #footer {
    	height: 300px;
    	width: 100%;
    	position: absolute;
    	bottom: 0;
    	background: #223;
    	border-top: #999 solid 4px;
    }
    .fwrapper {
    	width: 1000px;
    	margin: auto; 
    	color: #111;
    }
    .fleft, .fmid, .fright { 
    	width: 250px; 
    	margin: 0 30px; 
    	padding: 10px;
    	box-shadow: 5px 5px 3px #888; 
    }
    .fleft, .fmid, .fright { float:left; } 
    </style>
    </head>
    <body>
    	<div id="footer">
    		<div class="fwrapper">
    			<div class="fleft">
    				<p>
    					<strong>Lorem ipsum</strong><br /> dolor sit amet, consectetur adipiscing elit. Mauris pulvinar 
    					rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit 
    					eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
    				</p>
    			<!--end fleft--></div>
    			<div class="fmid">
    				<p>
    					<strong>Lorem ipsum</strong><br /> dolor sit amet, consectetur adipiscing elit. Mauris pulvinar 
    					rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit 
    					eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
    				</p>
    			<!--end fmid--></div>
    			<div class="fright">
    				<p>
    					<strong>Lorem ipsum</strong><br /> dolor sit amet, consectetur adipiscing elit. Mauris pulvinar 
    					rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit 
    					eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
    				</p>
    			<!--end fright--></div>
    		<!--end fwrapper--></div>
    	<!--end footer--></div>
    </body>
    </html>
    Notice I changed your DocType. I think any new HTML Document should have a Strict DocType declaration.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts
    thanks again sir excavator.. actually I set the width of my fwrapper to 100% before, I didnt thought it needed to be a pixel...

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by finoy_ako View Post
    thanks again sir excavator.. actually I set the width of my fwrapper to 100% before, I didnt thought it needed to be a pixel...
    100% is full width and cannot be centered. You can use other measurements, it doesn't necessarily have to be set at a px width but it does need to be smaller than it's parent or there will be nothing to center.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    finoy_ako (04-14-2013)

  • #11
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    100% is full width and cannot be centered. You can use other measurements, it doesn't necessarily have to be set at a px width but it does need to be smaller than it's parent or there will be nothing to center.

    gotcha.. sir how about if I want to center my element from top to bottom. I did try the process I did like having margin auto from top to bottom and a smaller heigth than its parent.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by finoy_ako View Post
    gotcha.. sir how about if I want to center my element from top to bottom. I did try the process I did like having margin auto from top to bottom and a smaller heigth than its parent.
    Top and bottom margin auto would be too simple. I'm afraid it's much more complicated than that.

    It's pretty easy if you know the height of the element you want centered. My favorite method is Vertical Centering with a Float and a Clear, see link on this page.

    If your element is not a fixed height, it would probably take some .js to center it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts
    sir still I cant center my menu please give me a hand show me how you going to center my link verticaly..


    i try like the code below but still not working even I give them a width

    #menu ul{
    display: table-cell;
    vertical-align:middle



    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>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    body {
    	font-family: Calibri,Arial,Helvetica,sans-serif;
    	font-weight: normal;
    	line-height: 21px;
    	margin: 0;
    	padding: 0;
    
    
    }
    #wrap {
    	width: 100%;
    	height: 600px;
    	background: #999;
    }
    
    
    
    
    
    #header {
    	width: 100%;
    	height: 121px;
    	background: url(images/headerbg.png) repeat-x;
    	border-bottom: #eee solid 1px;
    	position: relative;
    }
    .logo {
    	position: absolute;
    	left: 80px;
    	top: 15px;
    }
    #menu {
    	position: relative;
    	height:inherit;
    	background:  #093;
    	float: right;
    	margin-right: 80px;
    
    }
    
    #menu ul, li{
    	padding: 0;
    	display: inline;
    	vertical-align: middle;
    	display: table-cell;
    	list-style: none;
    }
    #menu a{
    	height: 100%;
    	font-size: 21px;
    	text-decoration: none;
    	margin: 20px;
    	color:  #CCC;
    }
    #menu a:hover{
    	height:inherit;
    		background: #F00;
    	
    		
    
    }
    
    
    	
    #container {
    }
    	
    
    
    
    </style>
    </head>
    
    <body>
    <div id="wrap">
    <div id="header">
    
    <div class="logo">
      <img src="images/logo.png" width="299" height="92" /> </div>
    
    
    <div id="menu">
    
    <ul>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    </ul>
    
    </div>
    
    </div>
    
    <div id="container">
    
    <div id="leftside"><a href="#">HOME</a><a href="#">HOME</a></div>
    
    <div id="rightside"></div>
    
    </div>
    </div>
    </body>
    </html>
    
    
    
    
    
    
    </body>
    </html>
    Last edited by finoy_ako; 04-26-2013 at 06:10 PM.

  • #14
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You're close, but you need to change a few things. First, get rid of the closing body and html tags at the bottom. You repeated it.

    In Excavator's example, this is what he did:

    Container has display:table.
    Unordered list has display table cell.

    So, here's what you need to do. Your container is #menu. Add display table to it.

    Code:
    #menu {
    	position: relative;
    	height:inherit;
    	background:  #093;
    	float: right;
    	margin-right: 80px;
    	display:table; /* Add this */
    }
    Then, your unordered list has to look like:

    Code:
    #menu ul {
    	vertical-align: middle;
    	display: table-cell;
    }
    This is almost correct, but you have an area in the code that you need to change. So, change this:

    Code:
    #menu ul, li{
    	padding: 0;
    	display: inline;
    	vertical-align: middle;
    	display: table-cell;
    	list-style: none;
    }
    To this:

    Code:
    #menu li{
    	padding: 0;
    	display: inline;
    	list-style: none;
    }
    My signature :)

  • #15
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts
    @ttkim thats great.. wew I finally able to center my element vertically. thanks a lot. i really appreaciate the help.. thanks to all of you guys for sharing.


  •  

    Posting Permissions

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