Final 2 CSS problems on my site : Margins... - Webmaster Forum

08-27-2005, 12:19 AM

Stan

Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 269

iTrader: 0 / 0%

Stan is on a distinguished road

Final 2 CSS problems on my site : Margins...

http://www.redorigin.net/portfolio/dbolt/

The margins are all jerked up, if i do by %'s.. they are still jerked up when you switch from 1024 to 1280

same thing with pixels...

can someone please help fix my margins!

XHTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Team Deadbolt Design. Copyright Red Origin 2005.</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />	
	<meta name="author" content="Stan Warren" />
	<meta name="copyright" content=" Stanley Warren and Red Origin Media Group 2005." />
	<meta name="description" content="Red Origin Design Group" />
	<meta name="keywords" content="digital art, counterstrike website design, website design, design firm, gaming movies, esports media" />
	<link rel="stylesheet" type="text/css" href="images/dbolt.css" />
	
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) history.go(0);
}
MM_reloadPage(true);
//-->
</script>

</head>

<body>

<!-- Header -->

<div id="header">
</div>

<div id="navbar">

	<ul>
		<li><img src="images/nav_left.gif" width="18" height="54" alt="nav_left" /></li>
		<li><a href="about.html" id="about"></a></li>
		<li><a href="forums.html" id="forums"></a></li>
		<li><a href="media.html" id="media"></a></li>
		<li><a href="sponsors.html" id="sponsors"></a></li>
		<li><img src="images/nav_right.gif" width="18" height="54" alt="nav_right" /></li>
		<li><img src="images/nav_bar.gif" width="7" height="54" alt="1" /></li>
		<li><img src="images/logo.gif" width="225" height="54" alt="logo" /></li>
		
	</ul>

</div>
        
<!-- /Header -->

<!-- Main Content -->

<div id="wrap">


<div id="leftcontent">
	<br />
	<img src="images/ros_top.gif" alt="" />
	<p class="left">test </p>
	<p class="left">test </p>
	<p class="left">test </p>
	<p class="left">test </p>
	<p class="left">test </p>
	<p class="left">test </p>
	<p class="left">test </p>
	<p class="left">test </p>
	<p class="ros"></p>
	<br />
	<br />
	<img src="images/irc.gif" alt="" />
	<br />
	<br />
	<img src="images/match_top.gif" alt="" />
	<img src="images/recent_match.gif" alt="" />
	<img src="images/match_div.gif" alt="" />
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<img src="images/match_bottom.gif" alt="" />
	<br />
	<br />
</div>


<div id="centercontent">

<p>

<!--url's used in the movie-->
<!--text used in the movie-->
<object type="application/x-shockwave-flash"
data="headline.swf" 
width="517" height="186">
<param name="movie" 
value="headline.swf" />
<param name="wmode" value="transparent" />
</object>

</p>	


</div>

<div id="rightcontent">
	<br />
	<img src="images/sbox_01.gif" alt="" />
	<p class="small">test</p>
	<p class="repeat">test</p>
	<p class="smallbot">test</p>
	<img src="images/sbox_05.gif" alt="" />
	<br />
	<br />
	<img src="images/match_top.gif" alt="" />
	<img src="images/recent_match.gif" alt="" />
	<img src="images/match_div.gif" alt="" />
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<img src="images/match_bottom.gif" alt="" />
	<br />
	<br />
	<img src="images/match_top.gif" alt="" />
	<img src="images/recent_match.gif" alt="" />
	<img src="images/match_div.gif" alt="" />
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<p class="match">test </p>
	<img src="images/match_bottom.gif" alt="" />
	<br />
	<br />

</div>

<br />	

<div id="clearfooter"></div></div>
<div id="footer"><p><img src="images/contact.gif" alt="contact" /></p></div>



</body>
</html>

CSS:

Code:

/* General Stuff */

html, body {
margin: 0;
padding: 0;
height: 100%; /* Required for footer to stick */
}

body {
background: #2d2d2c url('bg.gif') repeat-y center center;
}

/* Structure */

#wrap {
min-height: 100%;
width: 1005px;
}

* html #wrap {
height:100%;
}

#clearfooter {
height: 33px;
overflow:hidden;
}

#footer {
height: 33px;
position: relative;
bottom:0;
margin:auto;
background: url('foot_bg.gif') repeat-x;
}

#navbar {
background-color: #ECE9D8;
background-image: url('head_bg.gif');
background-repeat: repeat-x;
height: 54px;
margin: 0;
padding: 0;
}

#navbar ul {
  margin:0;
  padding:0;
  list-style:none;
}
#navbar li {
  float:left;
  margin:0;
  padding:0;
}

a#about {
display:block;
width: 80px; height: 54px;
border-width: 0;
margin:0px;
background: url('about.gif');
}

a#about:hover {
width: 80px; height: 54px;
border-width: 0;
margin:0px;
background: url('about_over.gif');
}

a#forums {
display:block;
width: 71px; height: 54px;
border-width: 0;
margin:0px;
background: url('forums.gif');
}

a#forums:hover {
width: 71px; height: 54px;
border-width: 0;
margin:0px;
background: url('forums_over.gif');
}

a#media {
display:block;
width: 52px; height: 54px;
border-width: 0;
margin:0px;
background: url('media.gif');
}

a#media:hover {
width: 52px; height: 54px;
border-width: 0;
margin:0px;
background: url('media_over.gif');
}

a#sponsors {
display:block;
width: 94px; height: 54px;
border-width: 0;
margin:0px;
background: url('sponsors.gif');
}

a#sponsors:hover {
width: 94px; height: 54px;
border-width: 0;
margin:0px;
background: url('sponsors_over.gif');
}

#footer {
clear: both;
padding: 0px;
margin-top: 0 px;
background: url('foot_bg.gif);
}


a#foot {
border-width: 0;
margin: 0px;
}

#leftcontent {
margin: 0;
padding: 0;
width:175px;
border: 0px;
float: left;
}

p.left {
background: url('ros_bg.gif') repeat-y;
margin: auto;
padding: 0px;
text-align: center;
height: 30px;
}

p.ros {
background: url('ros_bot.gif');
margin: auto;
padding: 0px;
text-align: center;
vertical-align: baseline;
height: 32px;
}

p.match {
background: url('match_bg.gif') repeat-y;
margin: auto;
padding: 0px;
text-align: center;
height: 25px;
}


#centercontent {
margin: auto;
padding: 0;
border: 0px;
float: inherit;
}

#rightcontent {
margin: auto;
padding: 0;
width:175px;
border: 0px;
float: right;
overflow: visible;
}


p.small {
background: url('sbox_02.gif');
margin: auto;
padding: 0px;
text-align: center;
vertical-align: baseline;
height: 29px;
}


p.repeat {
background: url('sbox_03.gif');
margin: auto;
padding: 0px;
text-align: center;
vertical-align: baseline;
height: 40px;
}


p.smallbot {
background: url('sbox_04.gif');
margin: auto;
padding: 0px;
text-align: center;
vertical-align: baseline;
height: 31px;
}

or if someone is really nice and could like instant message me, so that for the next few days could ask for various help along the way to completion

aim : ohitsthatkidstan

if not thanks a bunch for all the help everyone has provided me!

08-27-2005, 12:40 AM

seen.to

Status: unusual suspect ™
Join date: Feb 2005
Location: Lancaster, PA from London UK
Expertise:
Software:

Posts: 1,814

iTrader: 0 / 0%

seen.to is on a distinguished road

Add a margin-left:auto; margin-right:auto; to your wrapper.

08-27-2005, 12:56 AM

Julian

Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:

Posts: 5,572

iTrader: 0 / 0%

Julian is on a distinguished road

simpler would be

#wrapper {
margin: 0 auto;
width: 750; /* Specify your containers width here */
text-align: left; /* fixes IE's center bug */
}

08-27-2005, 12:57 AM

Justin761985

Status: Junior Member
Join date: Aug 2005
Location: United States
Expertise:
Software:

Posts: 59

iTrader: 0 / 0%

Justin761985 is on a distinguished road

Send a message via Yahoo to Justin761985

^ what Julian said should do the trick.

Justin.

08-27-2005, 02:13 AM

Stan

Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 269

iTrader: 0 / 0%

Stan is on a distinguished road

nope

if you look at www.redorigin.net/portfolio/dbolt/ when you view it @ 1024x768 its
fine, but if you go up to 1280 the columns again go haywire :X? this is so frustrating!

*ps* the link is updated with margin-l/r auto in my wrapper...

08-27-2005, 02:15 AM

Stan

Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 269

iTrader: 0 / 0%

Stan is on a distinguished road

would it have to do with the %'s? should i make this pixels instead?

Code:

#leftcontent {
margin-left: 6.8%;
margin-top: -1.2%;
padding: 0;
width:175px;
border: 0px;
float: left;
}


#centercontent {
margin: auto;
padding: 0;
border: 0px;
float: inherit;
}


#rightcontent {
margin-right: 6.5%;
margin-top: -21.2%;
padding: 0;
width:175px;
border: 0px;
float: right;
overflow: visible;
}

08-27-2005, 02:23 AM

Justin761985

Status: Junior Member
Join date: Aug 2005
Location: United States
Expertise:
Software:

Posts: 59

iTrader: 0 / 0%

Justin761985 is on a distinguished road

I would think so. what happens if you put a margin of 0 or auto in the place of those percents?

Justin.

08-27-2005, 04:24 AM

Stan

Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 269

iTrader: 0 / 0%

Stan is on a distinguished road

the columns look like they do @ 1280

or even more jerked around

08-27-2005, 04:40 AM

Justin761985

Status: Junior Member
Join date: Aug 2005
Location: United States
Expertise:
Software:

Posts: 59

iTrader: 0 / 0%

Justin761985 is on a distinguished road

weird

Justin.

08-27-2005, 04:53 AM

#10

Stan

Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 269

iTrader: 0 / 0%

Stan is on a distinguished road

oh ya you guys did fix the problem, i had a silly syntax error... oh boy, well thats it for the css on my site pretty much, I'll be posting the finished design and fully working version sooon and again I thank everyone for all thier help with my 1st CSS site.

-Stan