Solved

HTML: DIV not centered

Posted on 2012-03-10
7
378 Views
Last Modified: 2012-03-11
Hello

Why are the DIVs below not centering or show the borders I am telling footer1 to show?


<div id="footer1"></div><!-- end footer1 -->
<div id="footer2"></div><!-- end footer2 -->

#footer1{
      background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center;
      width:1014px;
      height:45px;
      margin:0 auto;padding:0;
    float:left;
      border:thick;
      border-color:0;
      left:50%;
         margin-left: -507px; /* 50% of the div's width*/
}

#footer2{
      background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center;
      width:1014px;
      height:45px;
      margin:0 auto;
      padding:0;
      text-align:left;
      clear:both;
      left:50%;
         margin-left: -507px; /* 50% of the div's width*/
}
0
Comment
Question by:adimit19
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 16

Assisted Solution

by:s8web
s8web earned 166 total points
ID: 37705351
We need to see the rest of your markup and css. Can you provide a link?
0
 

Author Comment

by:adimit19
ID: 37705388
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Solvusine</title>
<link href="css/Imports.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/custom.js"></script>
</head>

<body onload="addLanguages()";>
<form name="frmLang" method="get"><input type="hidden" id="selectedLanguage" name="selectedLangauge"/></form>
<div id="header">
      <div id= "header_logo"></div>
  <div id= "header_menu">
      <form id="form1" name="form1" method="get" action="">
        <select name="language" id="language" onchange="setLanguage()">
      </select>
        <label for="language"></label>
     
  </form>
  </div>
 </div><!-- end header -->

<div id="top_nav">
        <div id= "nav_button1"><a>cc</a></div> <!-- end nav_button1 -->
      <div id= "nav_button2"><a>cc</a></div> <!-- end nav_button2 -->
    <div id= "nav_button3"><a>cc</a></div> <!-- end nav_button3 -->
    <div id= "nav_button4"><a>cc</a></div> <!-- end nav_button4 -->
    <div id= "nav_button5"><a>cc</a></div> <!-- end nav_button5 -->
    <div id= "nav_button6"><a>cc</a></div> <!-- end nav_button6 -->
</div>
<div id="nav_spacer"></div>
<div id="top_banner"></div>
<div id="top_banner_spacer"></div>
<div id="page_display"></div>
<div id="content">
      <div id = "content_left">
          <div id = "content_leftR1"><p>cc:</p></div>
        <div id = "content_leftR2"><a>cc</a></div>
        <div id = "content_leftR3"><a>cc</a></div>
        <div id = "content_leftR4"><a>cc</a></div>    
    </div><!-- end content_left -->
    <div id = "content_middle">
          <div id = "content_middleR1"><p>cc:</p></div>
        <div id = "content_middleR2"><p>cc</p></div>
        <div id = "content_middleR3"><p>cc</p></div>
        <div id = "content_middleR4"><p>cc</p></div>
        <div id = "content_middleR5"><p>cc</p></div>    
    </div><!-- end content_middle -->
    <div id = "content_right"></div> <!-- end content_right -->
    <div id = "content_bottom1"><p>cc</p></div> <!-- end content_bottom -->
    <div id = "content_bottom2"><p>cc</p></div> <!-- end content_bottom -->
</div> <!-- end content -->
<div id="footer1"></div><!-- end footer1 -->
<div id="footer2"></div><!-- end footer2 -->






</body>
</html>


CSS FILES ARE ATTACHED
Navigation.css
Content-Area.css
Template.css
Imports.css
0
 

Author Comment

by:adimit19
ID: 37705390
There is no link to the website yet
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Assisted Solution

by:Bruce Pieterse
Bruce Pieterse earned 334 total points
ID: 37705424
Hi,

Do you want it like this?
/* Template.css */
#footer_wrapper {
	width: 1018px;
	height: 45px;
}
#footer1{
	background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center; 
	width:507px;
	height:45px;
	margin:0 auto;
	padding:0;
    float:left;
	border: 1px solid #000;
}

#footer2{
	background: url(../images/spacers/WhiteSpacer.png) no-repeat;background-position:center; 
	width:507px;
	height:45px;
	margin:0 auto;
	padding:0;
	float: left;
	text-align:left;
	border: 1px solid #000;
}
.fix {
	clear: both;
}

Open in new window


<!-- index.html -->
<div id="footer_wrapper">
      <div id="footer1"></div><!-- end footer1 -->
      <div id="footer2"></div><!-- end footer2 -->
      <div class="fix"></div>
</div>

Open in new window

Template.css
0
 

Author Comment

by:adimit19
ID: 37705716
still didn't work. The DIV is not centered
0
 
LVL 7

Accepted Solution

by:
Bruce Pieterse earned 334 total points
ID: 37706269
OK,

Just change the following then:

/* Template.css */
#footer_wrapper {
	width: 1018px;
	height: 45px;
        margin: 0 auto;
}

Open in new window

0
 

Author Comment

by:adimit19
ID: 37706702
That centered the DIV thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Two decimal 5 43
Why is my $_POST not going to results page 10 68
disable open new tab with right mouse click in <a> tag 3 40
toggle content 12 39
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question