10 Replies - 755 Views - Last Post: 16 July 2009 - 03:58 PM

#1 revolution_media  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-June 09

centering issues URGENT URGENT

Post icon  Posted 29 June 2009 - 05:46 PM

My Webpage

my elements are not centering
I have changed the header and it has put everything out of wack. Please if anyone could look over the code and point me in the right direction

BELOW IS THE CSS FOR THE SITE
AND THE HEADER HTML IS BELOW THAT



body
{
	background: black url(../img/bg_body.gif) center 160px repeat-y;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.8em;
	color: white;
	margin:0px;
	padding:0px;
}

a
{
	text-decoration: none;
	color: #a90a0a;
}
a:hover
{
	color:red;
}
a img
{
	border:none;
}

.sifrborn
{
	line-height: 1em !important;
}

h1
{
	font-size: 1.5em;
}

div#container
{
	width:970px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

div#head
{
	
}

ul#nav_main,
ul#nav_main li
{
	margin:0px;
	padding:0px;
	list-style-type: none;
}

ul#nav_main
{
	text-align: center;
	height:30px;
	background: black url(../img/nav_bg.gif) top left no-repeat;
}
ul#nav_main li,
ul#nav_main li a
{
	display: block;
	float: left;
	height:30px;
	background: top left no-repeat;
	overflow: hidden;
}
ul#nav_main li
{
	padding-left:0px;
	background: url(../img/nav_bullet.gif) top left no-repeat;
}
ul#nav_main li.first
{
	background: none;
	padding: 0px;
	margin-left:100px;
}
ul#nav_main li a
{
	text-indent: -2000px;
}
ul#nav_main li a:hover
{
	background-position: left -31px;
}
ul#nav_main li.tours a
{
	background-image: url(../img/nav_button_tours.gif);
	width:94px;
}
ul#nav_main li.riders a
{
	background-image: url(../img/nav_button_riders.gif);
	width:98px;
}
ul#nav_main li.club a
{
	background-image: url(../img/nav_button_club.gif);
	width:86px;
}
ul#nav_main li.news a
{
	background-image: url(../img/nav_button_news.gif);
	width:46px;
}
ul#nav_main li.fleshwound a
{
	background-image: url(../img/nav_button_fleshwound.gif);
	width:88px;
}
ul#nav_main li.babes a
{
	background-image: url(../img/nav_button_babes.gif);
	width:49px;
}
ul#nav_main li.links a
{
	background-image: url(../img/nav_button_links.gif);
	width:45px;
}
ul#nav_main li.gallery a
{
	background-image: url(../img/nav_button_gallery.gif);
	width:59px;
}
ul#nav_main li.merch_vtwo a 
{
	background-image: url(../img/nav_button_tour_merch.gif);
	width:130px;
}
ul#nav_main li.contact a
{
	background-image: url(../img/nav_button_contact.gif);
	width:60px;
}
div#body,
div#footer
{
	padding:1px 30px;
}
div#footer
{
	clear:both;
	margin-top:80px;
}

div#body div.rightcol
{
	width:360px;
	float:right;
}

div.titlerow
{	
	height:30px;
	overflow:hidden;
	background: black url(../img/bg_titlerow_1.gif) top right no-repeat;
}
div.titlerow h1
{
	margin:0px;
	padding:5px;
	font-size:1.2em;
}
div.mainheader
{
	height:49px;
	background: black url(../img/bg_titlerow_2.gif) top right no-repeat;
	padding:1px 35px;
	margin-top:20px;
}
div.mainheader h1
{
	margin-top:3px;
}

div.oriel
{
	overflow:hidden;
	width:360px;
	height:405px;
	margin-top:20px;
}


div.oriel ul,
div.oriel ul li
{
	margin:0px;
	padding:0px;
	list-style-type:none;
}
div.oriel ul
{
	overflow:auto;
	height:375px;
}
div.oriel ul li
{
	height:100px;
	overflow:hidden;
	cursor: pointer;
}
div.oriel ul li:hover,
div.oriel ul li.selected
{
	background:black url(../img/bg_oriel_li.jpg) top left repeat-x;
}
div.oriel ul li.selected
{
	cursor: default;
}
div.oriel ul li img
{
	float:left;
	margin-top:2px;
	margin-left:1px;
}
div.oriel ul li h2
{
	margin-top:13px
}
div.oriel ul li h2,
div.oriel ul li p
{
	text-transform:uppercase;
	font-size:9px;
	margin:0px 0px 0px 140px;
}
div.oriel ul li h2
{
	margin-top:23px
}
div.oriel ul li p
{
	color:grey;
}
div.oriel ul li.selected p
{
	color:white;
}

div#videoplayer,
div#videodetail
{
	width:482px;
	height:395px;
	background: url(../img/bg_video.jpg) top left no-repeat;
	overflow: hidden;
	padding:5px 25px;
	margin-top:20px;
}
div#videodetail div
{
	overflow: auto;
	background: black;
	width:460px;
	height:375px;
	padding:10px;
}

div#featurebar
{
	width:850px;
	background: url(../img/bg_featurebar.jpg);
	padding:5px 25px;
}

div#footerlinks
{
	clear:both;
	margin-top:40px;
	font-size:0.7em;
	background: url(../img/bg_footer.gif) center 20px no-repeat;
	text-align: center;
	padding:40px 20px;
	line-height: 2em;
	color: #a90a0a;
}
div#footerlinks a
{
	text-decoration:none;
	color: #a90a0a;
}
div#footerlinks a:hover
{
	color:red;
}

table.oldcontenttable
{
	margin:0px auto;
}

/* hopegage content areas */
div#homepagefeatures,
div#homepagevideo
{
	width:854px;
	padding:3px 23px;
	margin:10px 0px;
}
div#homepagefeatures
{
	padding:5px 25px;
	height:118px;
	background: black url(../img/bg_hp_features.jpg) top left no-repeat;
}
div#homepagevideo
{
	height:375px;
	background: black url(../img/bg_hp_video.jpg) top left no-repeat;
	margin-bottom:-70px;
}

div#hpvideo,
div#hpimage
{
	overflow:hidden;
	height:350px;
	width:423px;
	margin:2px 0px 0px 2px;
	float:left;
}
div#hpvideo h1,
div#hpimage h1
{
	background: url(../img/bg_transparent.png);
	text-align: right;
	font-size: 9px;
	position: relative;
	top:-23px;
	width:418px;
	font-weight: normal !important;
	padding: 4px 5px 0px 0px;
	height: 13px;
	overflow: hidden;
}
div#hpvideo h1
{
	top:-6px;
	background: black;
}
div#hpvideo div.button,
div#hpimage div.button
{
	margin-top:2px;
	text-align:center;
}
div#hpvideo div.button
{
	position:relative;
	top:-10px;
}
div#hpimage div.button
{
	position:relative;
	top:-27px;
}




div.feedbackform{width:300px; margin:0px auto;}
div.feedbackform label{display:block;margin-top:20px;}
div.feedbackform input, div.feedbackform textarea {width:100%}
div.feedbackform input.submit{width:auto !important;}

ul#nav_main li.fleshwound a {
	background-image: url(../img/nav_button_fleshwound.gif);
	width:88px;
}
ul#nav_main li.hospitality_vtwo a {
	background-image: url(../img/nav_button_tour_merch.gif);
	width:130px;
}





HEADER


	</head>
	<body>
		<div id="container">
			<div id="head">
				<a href="/">
					<img src="/assets/img/logo_main.gif" alt="CRUSTY DEMONS" />				</a>
				<ul id="nav_main">
					<li class="tours first">
						<a href="/upcomingtours.shtml">
							Crusty Tours						</a>					</li>
					<li class="riders">
						<a href="/crustyriders.shtml">
							Crusty Riders						</a>					</li>
					<li class="club">
						<a href="/crustyclub.asp">
							Crusty Club						</a>					</li>
					<li class="news">
						<a href="/news.shtml">
							News						</a>					</li>
					<li class="fleshwound">
						<a href="http://www.fleshwoundfilms.com/" target="_blank">
							Fleshwound						</a>					</li>
					<li class="babes">
						<a href="/babes.shtml">
							Crusty Babes						</a>					</li>
					<li class="links">
						<a href="/links.shtml">
							Links						</a>					</li>
					<li class="gallery">
						<a href="/gallery.shtml">
							Gallery						</a>					</li>
					<li class="hospitality_vtwo">
						<a href="http://www.bigwoolly.com/crustydemons"target="_blank">
							hospitality				 </a>					</li>
					<li class="contact">
						<a href="/contact.shtml">
							Contact Us						</a>					</li>
				</ul>
	</div>
<div id="body">
			
			
			<!-- 
				END HEADER
			--></div></div></body>


Mod edit - Please :code:

Is This A Good Question/Topic? 0
  • +

Replies To: centering issues URGENT URGENT

#2 ImportedNoob  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 29-June 09

Re: centering issues URGENT URGENT

Posted 29 June 2009 - 09:22 PM

Try 'margin: 0px auto;' for the html that isn't centering properly and 'text-align: center;' for the body in your CSS file. After you do text-align: center for the body, it will align any text that isn't defined in the rest of your page, so you will have to add text-align: left;

This post has been edited by ImportedNoob: 29 June 2009 - 09:26 PM

Was This Post Helpful? 0
  • +
  • -

#3 revolution_media  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-June 09

Re: centering issues URGENT URGENT

Posted 29 June 2009 - 09:25 PM

View PostImportedNoob, on 29 Jun, 2009 - 08:22 PM, said:

Try 'margin: 0px auto;' for the html that isn't centering properly and 'text-align: center;' for the body in your CSS file.


NO THAT DIDNT WORK EITHER ANY OTHER IDEAS
Was This Post Helpful? 0
  • +
  • -

#4 ImportedNoob  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 29-June 09

Re: centering issues URGENT URGENT

Posted 29 June 2009 - 09:27 PM

Try slapping some <center> tags around your container div. Might do the trick.

This post has been edited by ImportedNoob: 29 June 2009 - 09:35 PM

Was This Post Helpful? 0
  • +
  • -

#5 revolution_media  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-June 09

Re: centering issues URGENT URGENT

Posted 30 June 2009 - 04:52 AM

View PostImportedNoob, on 29 Jun, 2009 - 08:27 PM, said:

Try slapping some <center> tags around your container div. Might do the trick.


i have fixed part of it but now the bottom of the page is out of whack.
when you say center tags is that to every page or to the css

im new at this so forgive my questions
Was This Post Helpful? 0
  • +
  • -

#6 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: centering issues URGENT URGENT

Posted 30 June 2009 - 12:42 PM

Looking at the code for the site it appears to a little messed up.
You have 2 </body> Tags and the container you put in only appears to contain the
header and not the whole page.

The way it should really flow is:
container
header->close header
menu-> close menu
content->close content
footer->close footer
close container

You should be able to position everything correctly using this format.

Another thing (it may be my monitor calibration but I can see a difference in shade of black between the black colour set in the css background and the black colour of the bg_body.gif. You may want to cut a small 5x5 pixel image from this and set it as the main bg to whole page.

This post has been edited by neit: 30 June 2009 - 12:43 PM

Was This Post Helpful? 0
  • +
  • -

#7 revolution_media  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-June 09

Re: centering issues URGENT URGENT

Posted 12 July 2009 - 04:41 AM

View Postneit, on 30 Jun, 2009 - 11:42 AM, said:

Looking at the code for the site it appears to a little messed up.
You have 2 </body> Tags and the container you put in only appears to contain the
header and not the whole page.

The way it should really flow is:
container
header->close header
menu-> close menu
content->close content
footer->close footer
close container

You should be able to position everything correctly using this format.

Another thing (it may be my monitor calibration but I can see a difference in shade of black between the black colour set in the css background and the black colour of the bg_body.gif. You may want to cut a small 5x5 pixel image from this and set it as the main bg to whole page.


Hello again
could you be so kind as to highlight my errors and any corrections you would make to my code

thank you again
Was This Post Helpful? 0
  • +
  • -

#8 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: centering issues URGENT URGENT

Posted 12 July 2009 - 11:00 AM

The design has change from what it was previously
Was This Post Helpful? 0
  • +
  • -

#9 revolution_media  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-June 09

Re: centering issues URGENT URGENT

Posted 12 July 2009 - 05:03 PM

View Postneit, on 12 Jul, 2009 - 10:00 AM, said:

The design has change from what it was previously

from the code that is there now do you have any suggestions
Was This Post Helpful? 0
  • +
  • -

#10 revolution_media  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-June 09

Re: centering issues URGENT URGENT

Posted 12 July 2009 - 08:47 PM

View Postrevolution_media, on 12 Jul, 2009 - 04:03 PM, said:

View Postneit, on 12 Jul, 2009 - 10:00 AM, said:

The design has change from what it was previously

from the code that is there now do you have any suggestions

here is my new header code i validated it and it says it has no errors but when i upload it it throws everything out of wack again
any suggestions to add


<body>
<div id="container">
<div id="head">
<a href="/">
<img src="/assets/img/logo_main.gif" alt="CRUSTY DEMONS" /> </a>
<ul id="nav_main">
<li class="tours first">
<a href="/upcomingtours.shtml">
Crusty Tours </a> </li>
<li class="riders">
<a href="/crustyriders.shtml">
Crusty Riders </a> </li>
<li class="club">
<a href="/crustyclub.asp">
Crusty Club </a> </li>
<li class="news">
<a href="/news.shtml">
News </a> </li>
<li class="fleshwound">
<a href="http://www.fleshwoundfilms.com/" target="_blank">
Fleshwound </a> </li>
<li class="babes">
<a href="/babes.shtml">
Crusty Babes </a> </li>
<li class="links">
<a href="/links.shtml">
Links </a> </li>
<li class="gallery">
<a href="/gallery.shtml">
Gallery </a> </li>
<li class="merch_vtwo">
<a href="http://www.bigwoolly.com/crustydemons">
tour merch </a> </li>
<li class="contact">
<a href="/contact.shtml">
Contact Us </a> </li>
</ul>
</div>
<div id="body">


<!--
END HEADER
--></div></div></body>
[/code][code]
[/code][code] 

Was This Post Helpful? 0
  • +
  • -

#11 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: centering issues URGENT URGENT

Posted 16 July 2009 - 03:58 PM

I see no issue when I look at it in FF OR IE7
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1