How to center UL with a background image in the middle of the page

Forum Moderators: not2easy

Message Too Old, No Replies

How to center UL with a background image in the middle of the page

asker

3:09 pm on Jun 1, 2014 (gmt 0)

I have built an unordered list with the an inline style background-image as follows:

<div style = "background-image: url(http://example.com/sites/default/files/images/our_partners3.png); background-repeat: no-repeat; list-style-type: none; padding-top: 7px;"> 
<ul>
<li>NASCO LIFE /FORM</li>
<li>SIMULAID</li>
<li>LIMBS AND THINGS</li>
<li>ADAM, ROUILLY LTD.</li>
<li>GAUMARD</li>
<li>KOYTO KAGAKU</li>
<li>3B SCIENTIFIC</li>
<li>SURGICAL SCIENCE</li>
<li>SWEMAC </li>
</ul>
</div>

the resulting page is as follows : http://example.com/node/17
How to center the whole square (list plus the background) in the middle of the page. I wrapped the whole code with a div and a centering style but it did not work. I would be thankful for any help.

[edited by: engine at 5:55 pm (utc) on Jun 4, 2014]
[edit reason] examplified, please post code [/edit]

birdbrain

4:29 pm on Jun 1, 2014 (gmt 0)

Hi there asker,

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>Our Partners</title>

<style>
body {
  background-color:#f0f0f0;
 }
#list {
  display:table;
  width:480px;
  height:339px;
  margin:auto;
  background-image:url(http://example.com/sites/default/files/images/our_partners3.png);
  box-shadow:inset 0 0 20px #2a535f,4px 4px 8px #2a535f;
 }
#list ul {
  display:table-cell;
  vertical-align:middle;
 }
#list li {
  width:200px;
  margin:auto;
  color:#2a535f;
  text-transform:uppercase;
 }
</style>

</head>
<body>

<div id="list">
<ul>
 <li>nasco life / form</li>
 <li>simulaid</li>
 <li>limbs and things</li>
 <li>adam, rouilly ltd.</li>
 <li>gaumard</li>
 <li>koyto kagaku</li>
 <li>3b scientific</li>
 <li>surgical science</li>
 <li>swemac</li>
</ul>
</div>

</body>
</html>

birdbrain

asker

5:44 pm on Jun 1, 2014 (gmt 0)

I really and honestly thank you for this generous and creative solution. I go to my custom.css file and include the code with modification on the selector names so that they do not clash with original list selectors. Usually for simple node I use inline css, but this time I will use the the external sheet. In my case, the background-color property inside the body selector seems difficult to be included in my custom.css file because I am using Drupal CMS which has a global body tag. And when I removed it did not seem to have an effect on the page view. Do u think something about this? much thanks again.

birdbrain

6:07 pm on Jun 1, 2014 (gmt 0)

Hi there asker,

unfortunately, I cannot help you with anything to do with
CMS, as it is a complete mystery to me. :(

Personally, I am just a "Notepad/Notepad++" bespoke coder. :)

Other members here, may be able you with "Drupal" issues. ;)

birdbrain

asker

6:53 pm on Jun 1, 2014 (gmt 0)

I have known how to handle this matter now. You really did something great for me this evening. Tons of thanks.

birdbrain

7:09 pm on Jun 1, 2014 (gmt 0)

No problem, you're very welcome. ;)