Friday, April 2, 2010

Can't seem to get things centered...

Hi,

I can't seem to get my header and body aligned together. Any suggestions? Thanks for any help!!

http://www.yourloghomeguide.com/roadstocrosshuntingclub/base.dwt

CODE

%26lt;!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0 Transitional//EN'' ''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd''%26gt;
%26lt;html xmlns=''http://www.w3.org/1999/xhtml''%26gt;
%26lt;head%26gt;
%26lt;meta http-equiv=''Content-Type'' content=''text/html; charset=utf-8'' /%26gt;
%26lt;!-- TemplateBeginEditable name=''title'' --%26gt;
%26lt;title%26gt;Page title goes here%26lt;/title%26gt;
%26lt;!-- TemplateEndEditable name=''title'' --%26gt;
%26lt;link href=''stylesheet2.css'' rel=''stylesheet'' type=''text/css'' /%26gt;
%26lt;/head%26gt;

%26lt;body link=''#FFFFFF''%26gt;
%26lt;div id=''header_container''%26gt;
?%26lt;div id=''header''%26gt;
?%26lt;div id=''logo''%26gt;%26lt;img src=''images/index_01.png'' alt=''logo'' width=''686'' height=''168'' /%26gt;%26lt;/div%26gt;
?%26lt;br /%26gt;%26lt;!-- TemplateBeginEditable name=''adsense'' --%26gt;
?
?
%26lt;script type=''text/javascript''%26gt;%26lt;!--
google_ad_client = ''pub-'';
/* 728x90, created 1/28/09 */
google_ad_slot = ''5'';
google_ad_width = 728;
google_ad_height = 90;
//--%26gt;
%26lt;/script%26gt;
%26lt;script type=''text/javascript''
src=''http://pagead2.googlesyndication.com/pagead/show_ads.js''%26gt;
%26lt;/script%26gt;

%26lt;br /%26gt;
%26lt;!-- TemplateEndEditable --%26gt;
?
?%26lt;div id=''navbar''%26gt;
?%26lt;ul%26gt;
?%26lt;li%26gt;%26lt;a href=''index2.html''%26gt;Home%26lt;/a%26gt;%26lt;/li%26gt;
?%26lt;li%26gt;%26lt;a href=''locations2.html''%26gt;Photos%26lt;/a%26gt;%26lt;/li%26gt;
?%26lt;li%26gt;%26lt;a href=''friends,family%26amp;amp;guest.htm''%26gt;Friends, Family %26amp;amp; Guest%26lt;/a%26gt;%26lt;/li%26gt;
?%26lt;li%26gt;%26lt;a href=''contacts.html''%26gt;Send Your Photos %26lt;/a%26gt;%26lt;/li%26gt;
?%26lt;/ul%26gt;
?%26lt;/div%26gt;
?%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;div id=''content''%26gt;
?%26lt;div id=''text''%26gt;%26lt;!-- TemplateBeginEditable name=''text'' --%26gt;
?%26lt;p%26gt;Text goes here.%26lt;/p%26gt;
?%26lt;p%26gt;and pictures.%26lt;/p%26gt;
?%26lt;!-- TemplateEndEditable --%26gt;
?%26lt;p%26gt;?lt;/p%26gt;
?%26lt;div id=''footer''%26gt;
?%26lt;p%26gt;Site Designed by Christi Sealey%26lt;/p%26gt;
?%26lt;p%26gt;
?Copyright 2009%26lt;/p%26gt;
?%26lt;p%26gt;
?%26lt;!-- #BeginDate format:Am1 --%26gt;October 15, 2009%26lt;!-- #EndDate --%26gt;
?%26lt;/p%26gt;
?%26lt;p%26gt;?lt;/p%26gt;
?%26lt;/div%26gt;
?%26lt;/div%26gt;
%26lt;/div%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;

CSS

@charset ''utf-8'';
body {
background-color: #000000;
margin: 0px;
padding: 0px;

}

#header_container {
background-color: #000000;
width: 100%;
}

#header {
margin: auto;
width: 685px;
}

#navbar {
background-color: #000000;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 5px;
}
#navbar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: justify;
}

#navbar ul li {
display: inline;
}
#navbar ul li a {
padding: 20px;
margin: 7px;
text-decoration: none;
position: relative;
float: left;
padding-bottom: 5px;
padding-top: 5px;
border: 1px solid #FFFFFF;
}
#navbar ul li a:link, #navigation ul li a:visited {
color: #FFFFFF;
}
#navbar ul li a:hover {
background-color: #FF6600;
}

#navbar ul li a.present {
background-color: #999999;
}
#navbar ul li a:link, #navbar ul li a:visited {
color: #FFFFFF;
}
#text {
float: left;
width: 685px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin: auto;
}

#text h1 {
margin-top: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

#text p {
font-family: Verdana, Arial, Helvetica, sans-serif;
;
font-size: 80%;
color: #FFFFFF;
text-align: justify;
}

#footer {
border-top: 1px solid #FFFFFF;
padding-top: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #FFFFFF;
width: 685px;
text-align: center;
margin: auto;
padding-bottom: 10px;
background-color: #000000;
}

#footer p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
#content {
margin: auto;
padding: 40px;
width: 685px;
background-color: #000000;
}
a:link, a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: underline;
}

Can't seem to get things centered...

Your navigation is wider than your page which I think is causing you some grief.

/**zero out default browser settings on everything**/

* {margin:0; padding:0; border:0; line-height:100%;}

body {

width: 900px; /**use pixels, ems or percents**/

margin:0 auto; /**centers page on screen**/

text-align: center; /**centers in older browsers**/

background: #000;

}

Nancy O.
Alt-Web Design %26amp; Publishing
Web | Graphics | Print | Media?Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Can't seem to get things centered...

Thanks Nancy,

I need a little clarification:

to ''zero out the default'' just add;

margin:0;

padding:0;

border:0;

line-height:100%;

to''all'' the styles. (#header_container, #header, #navbar, etc...)

and if I already have that paticular setting, replace it with the ones you suggested?

Don't I have ''pixels'' set on the width in the body? Or do i just have it wrong?

Thank you very much for your help!!!

/**zero out default browser settings on everything**/

* {margin:0; padding:0; border:0; line-height:100%;}

body {

width: 900px; /**use pixels, ems or percents**/

margin:0 auto; /**centers page on screen**/

text-align: center; /**centers in older browsers**/

background: #000;

}

I'm not seeing your web page in my browser because FF doesn't render DWT files.?If you were to publish the page as an HTML file, I'd be able to see it and use my Web Developer Toolbar to examine your external CSS.

The code I gave you uses the universal selector?(* asterisk) which = every element in the document. Just copy %26amp; paste my code as is into your CSS file - replacing your body definitions.

Nancy O.
Alt-Web Design %26amp; Publishing
Web | Graphics | Print | Media?Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

I don't have something exactly right and I can't seem to figure it out. I made the changes you suggested butit is still not there.

How do I post it as an htmal so you can see it?

  • skin blackheads
  • No comments:

    Post a Comment