homepage Welcome to WebmasterWorld Guest from 54.227.67.210
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:4676579
 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




msg:4676586
 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




msg:4676605
 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




msg:4676612
 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




msg:4676620
 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




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

No problem, you're very welcome. ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved