Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 25th, 2005, 02:34 PM
Registered User
 
Join Date: Apr 2005
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default Centering of Image Within Nav Bar

Hello.

I am an amateur webmaster doing some volunteer work for a group.
I am also just starting to get my feet wet in CSS, and purchased Richard York's book, "Beginning CSS. Cascading Style Sheets for Web Design."

So far, it is coming along fine. One question I had, but have not seen answered yet (perhaps I missed it), is how to center images in a nav bar. For example, here is a page I would like to re-write with CSS:

http://www.isu2005.ubc.ca/

I would like the text in the left navbar to remain left-aligned, but the two small graphics to be centered within the navbar. If I put a "text-align: center" statement in the divs for the navbar, the text becomes centered too.

So, how do I center the two small images, but leave the text unchanged?




DuncanM
http://www.rocketscientists.ca/
Reply With Quote
  #2 (permalink)  
Old April 26th, 2005, 10:29 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

You have to keep in mind that the text-align property is inherited.

There are several ways to approach the problem. I'll talk about two of the most common.

Let's say you have the images and the links formatted in the following way:
Code:
<div id='nav'>
    <img src='' alt='Image 1' />
    <img src='' alt='Image 2' />
    [list]
        <li><a href='#'>Link 1</a></li>
        <li><a href='#'>Link 2</a></li>
        <li><a href='#'>Link 3</a></li>
        <li><a href='#'>Link 4</a></li>
        <li><a href='#'>Link 5</a></li>
    </ul>
</div>
This is a pretty common setup for navigation using HTML && CSS or XHTML && CSS. The navigation is sandboxed in a <div> element. The links are structured in lists and styled with CSS.

If you want to center the images, but not the text of the links you could go with this approach.
Code:
div#nav {
    text-align: center;
}
div#nav ul {
    text-align: left;
}
Remember that the text-align property is inherited. To circumvent the inheritance, you use the cascade to override it. The cascade applies styles based on the specificity of the selector (discussed in Chapter 7 in my book).

The second approach is not to use the cascade at all, but to make the images into block elements (instead of inline replaced elements). Not going to go into explaining all that, but the concept goes like this.
Code:
div#nav img {
    display: block;
    margin: auto;
}
The images are made into block elements, and then centered with margin: auto;.

In Chapter 10 I talk about centering block elements with the margin: auto; declaration. inline vs. block is also discussed in that chapter.

Hope that gives you an idea of how to proceed.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to add image in url address bar? saurabh ASP.NET 3.5 Professionals 1 July 11th, 2008 05:53 AM
Nav Bar Styling VictorVictor BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 May 16th, 2006 06:02 PM
How do disable Menu bar & address bar for browser bekim HTML Code Clinic 2 January 7th, 2005 12:33 AM
How to trap Mouse events on Title bar/Caption bar chiefouko Pro VB.NET 2002/2003 0 September 21st, 2004 02:42 AM
nav bar problems Morrislgn Javascript How-To 1 June 3rd, 2004 07:45 PM



All times are GMT -4. The time now is 05:17 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.