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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts

    problem adding margins

    http://users.rcn.com/**************/index.html

    I'd like to get this site into the middle of the page and add a margin of about 15 to the top.

    The problem is when I add margins to any side all the divs get spaces added to them and it doesn't look like the original.

    Is there another way to get all the content a bit lower without adding a margin, or a way to add a margin without the divs rearranging themselves in relation to each other?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by cyborg360 View Post
    I'd like to get this site into the middle of the page and add a margin of about 15 to the top.
    To center the content, you need to specify a width on the body element or another wrapper element (such as the div element that's currently a child of that Web page's body element). After that, you can center the element with a specified width via margin-left: auto and margin-right: auto (used together).

    To add the space, use margin-top: 15px or padding-top: 15px on the body or wrapper element. Make sure that you're only selecting the desired element via CSS (e.g., with body { ... }, body > div { ... }, or *#wrapper { ... } (assuming <elementNameHere id="wrapper">). It would also help if your footer is included within the chosen wrapper element.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cyborg360,
    Arbitrator is right, of course, but all that would be easier without the inline styles. Here's a good explanation inline/internal/external CSS Using an external CSS file can make your life much easier.
    It would also be easier if you moved all that into a containing div.
    Here is a start for you to mess around with -
    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">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #fff url(http://users.rcn.com/**************/images/background.png) repeat-x;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 927px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    ul#menu {
        list-style-type: none;
    	overflow: auto;
    }
    #menu li {
        display: block;
        overflow: hidden;
        float: left;
        margin-right: 2px;
        height: 13px;
    }
    #menu a{
    	display: block;
    	height: 13px;
    	width: 66px;
    	text-indent:-9999px; /*this will move the link text off the screen*/
    }
    		#menu a#home {background: url(http://users.rcn.com/**************/images/home.png);}
    		#menu a#services {background: url(http://users.rcn.com/**************/images/services.png); margin: 0 15px 0;}
    		#menu a#careers {background: url(http://users.rcn.com/**************/images/careers.png); margin: 0 15px 0;}
    		#menu a#contact {background: url(http://users.rcn.com/**************/images/contact.png);}
    #rotator {
    	height: 169px;
    	width: 698px;
    	float: left;
    	margin: 3px auto 0px;
    	border-top: 1px solid #fc0;
    	border-right: 1px solid #fc0;
    	cursor: pointer;
    	overflow: hidden;
    	position: relative;
    }
    #rotator img {width: 698px;}
    #r_box {
    	width: 223px; 
    	float: left; 
    	padding: 0 0 0 5px;
    	margin: 4px 0 0 0;
    }
    #scroller {
    	height: 144px; 
    	width: 221px; 
    	float: left;
    	margin: 5px 0 0 0;
    background: #000;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<img src="http://users.rcn.com/**************/images/logo_transparent3.png" alt="logo" width="426" height="81" />
            	<ul id="menu">
                <li><a href="#" id="home">Home</a></li>
                <li><a href="#" id="services">Services</a></li>
                <li><a href="#" id="careers">Careers</a></li>
                <li><a href="#" id="contact">Contact</a></li>
                </ul>
    <div id="rotator">
    	<img src="http://users.rcn.com/**************images/1.jpg" alt="description" width="116" height="166" />
    <!--end rotator--></div>
    <div id="r_box">
    	<img src="http://users.rcn.com/**************/images/news.png" alt="description" width="223" height="16" />
        	<div id="scroller">
            	some script would go here
    		<!--end scroller--></div>
    	<!--end r_box--></div>
    <!--end container--></div>
    </body>
    </html>
    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

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    To center the content, you need to specify a width on the body element or another wrapper element (such as the div element that's currently a child of that Web page's body element). After that, you can center the element with a specified width via margin-left: auto and margin-right: auto (used together).
    I've added three attributes to the body style but all the content is still anchored in the same place it was before I made the changes:

    Code:
    <body onLoad="start()."; style="background-image: url('images/background.png'); background-color: #000000; marginwidth: 700px; margin-left: auto; margin-right: auto">
    Any ideas?
    Last edited by cyborg360; 12-28-2009 at 07:47 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You're not really doing any onLoad here, your just using inline styles on the body. Also, I think maybe marginwidth should be width.
    Try it this way -
    Code:
    <body style="background-image: url('images/background.png'); background-color: #000000; width: 700px; margin-left: auto; margin-right: 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

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    You're not really doing any onLoad here, your just using inline styles on the body. Also, I think maybe marginwidth should be width.
    Try it this way -
    Code:
    <body style="background-image: url('images/background.png'); background-color: #000000; width: 700px; margin-left: auto; margin-right: auto">

    I tried what you recommended and this is the result.

    It is autoadjusting now which is good.

    Main problems now are:
    1. it doesnt seem centered, but over to the right, do you notice this?
    2. now the the javascroll isn't working, plus it's not sticking. It needs that
    Code:
    onLoad="start().";
    I believe, yet when I try and throw it in a la
    Code:
    <body onLoad="start()."; style="background-image: url('images/background.png'); background-color: #000000; width: 700px; margin-left: auto; margin-right: auto">
    it *still* doesn't work.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yes, that's because your site is wider than the 700px you're trying to put on body.
    I think your site is around 925px wide, give or take couple px.

    See how the box model works here. Total width of an element includes width/margin/padding/border and cannot exceed the with of the container your putting it in.
    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
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello cyborg360,
    Arbitrator is right, of course, but all that would be easier without the inline styles. Here's a good explanation inline/internal/external CSS Using an external CSS file can make your life much easier.
    It would also be easier if you moved all that into a containing div.
    Here is a start for you to mess around with -
    Was your code meant to be used in place of my existing style sheet? It failed to produce the auto centering effect for some reason... but I appreciate the effort.

  • #9
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Yes, that's because your site is wider than the 700px you're trying to put on body.
    I think your site is around 925px wide, give or take couple px.
    Ah, yes. Thanks.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by cyborg360 View Post
    Was your code meant to be used in place of my existing style sheet? It failed to produce the auto centering effect for some reason... but I appreciate the effort.
    No, copy/paste the entire code I quoted into a new .html document.
    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

  • #11
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts

    different strategy for tables?

    Quote Originally Posted by Excavator View Post
    No, copy/paste the entire code I quoted into a new .html document.
    OIC.

    Now, I'm not sure why I can't apply the same technique we've been discussing of:
    1. measuring page
    2. adding margin width
    3. adding auto left/right adjust.

    to this site. I measured the longest table @ 476px, added
    Code:
    width: 480px
    , and include
    Code:
    margin-right: auto; margin-left: auto;
    but it's all shifted over to the right too much. Now this site uses tables, could it be the case that an alternate strategy is called for here?
    Last edited by cyborg360; 12-28-2009 at 09:16 PM.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That's odd. Every wide element I looked at is set at width:77%;.

    Try it like this instead -
    Code:
      var image = link.getElementsByTagName("IMG")[0];
        image.src = image.src.replace("H2.png","H.png");
    }
    </script>
    </head>
    
    <body style="background-color: #000000">
    
    <table cellpadding="0" cellspacing="0" style="width: 77%; margin-left:auto;margin-right:auto; ">	<tr>
    
    		<td style="width: 261px" rowspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		</td>
    		<td colspan="6" style="height: 78px"><br />
    		<br />
    		<br />
    We're still working with inline styles and tables, neither of which are a good habit to get into!
    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


  •  

    Posting Permissions

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