...

View Full Version : problem adding margins



cyborg360
12-28-2009, 05:57 AM
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?

Arbitrator
12-28-2009, 06:45 AM
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.

Excavator
12-28-2009, 07:31 AM
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 (http://www.w3schools.com/CSS/css_howto.asp) 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 -
<!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>

cyborg360
12-28-2009, 08:35 PM
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:


<body onLoad="start()."; style="background-image: url('images/background.png'); background-color: #000000; marginwidth: 700px; margin-left: auto; margin-right: auto">


Any ideas?

Excavator
12-28-2009, 09:15 PM
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 -
<body style="background-image: url('images/background.png'); background-color: #000000; width: 700px; margin-left: auto; margin-right: auto">

cyborg360
12-28-2009, 09:29 PM
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 -
<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 (http://users.rcn.com/**************/) 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
onLoad="start()."; I believe, yet when I try and throw it in a la
<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.

Excavator
12-28-2009, 09:40 PM
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 (http://www.w3.org/TR/CSS2/box.html) here. Total width of an element includes width/margin/padding/border and cannot exceed the with of the container your putting it in.

cyborg360
12-28-2009, 09:41 PM
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 (http://www.w3schools.com/CSS/css_howto.asp) 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.

cyborg360
12-28-2009, 09:44 PM
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.

Excavator
12-28-2009, 09:47 PM
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.

cyborg360
12-28-2009, 10:14 PM
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 (http://users.rcn.com/**************/bluehorizon.htm) site. I measured the longest table @ 476px, added
width: 480px, and include
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?

Excavator
12-28-2009, 11:58 PM
That's odd. Every wide element I looked at is set at width:77%;.

Try it like this instead -
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum