Hello,

 

I am developing a website (www.borntovolunteer.org) and I found a div problem that I cannot seem to fix. The website is based on a CMS system ( Drupal), although I believe the problem is CSS-based.

 

To be concrete, the problem is that the logo in the center (60 pixels from the top) of the page does not manage to position itself in this center. The cause is another div that is positioned on the right of the page, a bit higher than the logo. This div (containing a language switcher) seems to push the logo to the left, away from it centered position.

 

I tried to change many CSS properties (such as float, z-index, position,...) for both the logo and the other div. I have a good knowledge on website building and on CSS, although not an expert.

 

I advice to have a look at my webpage www.borntovolunteer.org and see it yourself. This is the current css that involves the logo and the other div:

 

#logo {
text-align:center;
width: 99%;
padding: 0 0 0 0;
}

/*  this is the other div containing the language switcher */

#block-block-6 {
border:  0px;
background: none;
padding: 0 0 0 0px; 
position: static;
 margin-right: 35px;
 float:right;
 margin-top:15px;
  clear: both;
}

 

Here is a screenshot that shows the order of divs, at the end of every div (it is rendered with the web developer toolbar in firefox; the addition of div tags changed the structure of the page a bit).

 

I really wonder what the problem is. I would greatly appreciate your help.

 

Thank you very much.

Hi,

 

Replace below css and html code in your page.

 

CSS Code :

#block-block-6 {
   background: none repeat scroll 0 0 transparent;
   border: 0 none;
   float: right;
   margin-right: 35px;
   margin-top: 7px;
   padding: 0 0 0 0;
}

#logo {
   float: left;
   padding: 0;
   text-align: center;
   width: 99%;
}

#header img {
   margin: 0 auto;
}

 

 

HTML Code :

<div id="header-region">

<div id="block-nice_menus-1" class="block block-nice_menus">

 <div class="content">
   <ul class="nice-menu nice-menu-down sf-js-enabled" id="nice-menu-1"><li class="menu-275 menuparent menu-path-ngos-all first odd "><a href="/en/ngos" title="">Find NGO's</a><ul style="visibility: hidden; display: none;"><li class="menu-277 menu-path-ngos-africa first  odd "><a href="/en/ngos/africa" title="">Africa</a></li>
<li class="menu-280 menu-path-ngos-asia even "><a href="/en/ngos/asia" title="">Asia</a></li>
<li class="menu-281 menu-path-ngos-latin-america odd  last "><a href="/en/ngos/latin-america" title="">Latin America</a></li>
</ul>
</li>
<li class="menu-274 menuparent menu-path-volunteers even "><a href="/en/volunteers" title="">List of Volunteers</a><ul style="visibility: hidden; display: none;"><li class="menu-276 menu-path-volunteers first  odd "><a href="/en/volunteers?africa=1" title="">Africa</a></li>
<li class="menu-278 menu-path-volunteers even "><a href="/en/volunteers?asia=1" title="">Asia</a></li>
<li class="menu-279 menu-path-volunteers odd  last "><a href="/en/volunteers?latin-america=1" title="">Latin America</a></li>
</ul>
</li>
<li class="menu-285 menu-path-experiences odd "><a href="/en/experiences" title="Share and read about volunteering experiences">Experiences</a></li>
<li class="menu-282 menu-path-forum even "><a href="/en/forum" title="">Forum</a></li>
<li class="menu-3319 menu-path-news odd "><a href="/en/news" title="See all the latest news!">News</a></li>
<li class="menu-3014 menu-path-blog even "><a href="/en/blogs" title="">Blogs</a></li>
<li class="menu-880 menu-path-node-1 odd  last "><a href="/en/about" title="About Born to Volunteer">About</a></li>
</ul>
 </div>
<div id="block-block-6" class="block block-block">

 <div class="content">
   						<ul><li class="en first active"><a href="/en/home" class="language-link active"><img width="16" height="12" src="/modules/languageicons/flags/en.png" class="language-icon" alt="English" title="English"> English</a></li>
<li class="es last active"><a href="/es/home" class="language-link"><img width="16" height="12" src="/modules/languageicons/flags/es.png" class="language-icon" alt="Español" title="Español"> Español</a></li>
</ul>					  </div>
</div>
</div>

	</div>

 

 

Thanks

Thank you very much. I applied your suggestions, though I didn't work for me. On the other hand, I found a solution that solved the problem:

 

changing the css to this:

 

#block-block-6 {
padding: 0;
margin: 0;
border: 0;
height: 0;
background: none repeat scroll 0 0 transparent;
}

#block-block-6 .content {

border: 0 none;
background: none repeat scroll 0 0 transparent;
 margin-right: 35px;
 margin-top:14px;
 position:static;
float:right;
line-height: 100%;
}

 

basically, all the "positioning tags" went to the child div ("#block-block-6 .content") instead of the parent one ("#block-block-6"). Then, and the parent div is set "invisible" by setting height to 0. This works for me, but clearly shows that there is a problem with the parent div. I still didn't figure out what it is, but found a work-around....

 

thank you very much!

OK gr8