display: inline; never works for me for some reason!

	Home Register Search Help Login

Sponsors

Hosting from $3.99 per month!

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions. dd

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

display: inline; never works for me for some reason!

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> display: inline; never works for me for some reason!

Page: [1]


CelticDragon Posts: 227 Joined: 11/14/2003 From: Dublin, Ireland Status: offline	display: inline; never works for me for some reason! - 9/15/2005 15:33:09 Hi guys.... Hoping you can help me out! Just started our latest redesign and have hit a snag! I've tried to add the display: inline; tag on this one for the navigation at the top but it's not displaying the height or width, let alone centerin the text.... Any fixes for this one? It works perfectly if I only have one link and use display: block; but then when I add more it stays in a block.... Anyone have any ideas? Oh, the site is here and the css is here too! Thanks guys! EDIT: Also, any idea why the two little frames at the bottom (college news & course in focus) are on top of each other in FF and side by side as I want in IE? Cheers! _____________________________ I Lost My Stuff - If you lost it, someone found it!


Tailslide Posts: 6370 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: display: inline; never works for me for some reason! - 9/15/2005 15:44:28 Hi Have you tried using a list instead? Might be easier to control because there's more "handles" to pin it down with!! Maybe have a look here: http://css.maxdesign.com.au/listamatic/ and pick one of the horizontal versions. As it is - if you do away with display:inline and do float:left and increase the padding:right it will be better. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to CelticDragon)


CelticDragon Posts: 227 Joined: 11/14/2003 From: Dublin, Ireland Status: offline	RE: display: inline; never works for me for some reason! - 9/15/2005 17:00:30 hey, that worked! cheers! Now, how do I go about getting the text to be displayed in the middle of the button and to the right of the door? Also, any notes on how to get the two sub window tables at the bottom to play nice with each other? _____________________________ I Lost My Stuff - If you lost it, someone found it! (in reply to Tailslide)


Tailslide Posts: 6370 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: display: inline; never works for me for some reason! - 9/15/2005 17:16:50 Ok so what I'd do in this position is add these rules to the .header a display:block; line-height:43px; text-align:center; The display block will mean that the whole tab is clickable which makes life easier. The line-height will ensure that the text is centered in the middle of the tab and the text-align center will move the text to the middle of the tab. It's not perfect because you get some overlap between the text and the door image. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to CelticDragon)


CelticDragon Posts: 227 Joined: 11/14/2003 From: Dublin, Ireland Status: offline	RE: display: inline; never works for me for some reason! - 9/15/2005 17:36:10 Think I've got it working (bit of a hack I presume) but it's working... All except for trying to get the text to appear in the middle of the button so if I have a one line button it's in the middle, a two line one will go above and below! Also, any idea on the floating tables at the bottom? _____________________________ I Lost My Stuff - If you lost it, someone found it! (in reply to Tailslide)

Tailslide

Posts: 6370
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

RE: display: inline; never works for me for some reason! - 9/16/2005 7:55:59

No it's a perfectly valid way of doing it!

I had a bit of a play with the nav this morning and sort of got it working.

HTML:

<td class="header">
		<div id="navcontainer">
		<ul id="navlist">
		<li><a id="current" href="#" >My shiny New Homepage</a></li>
		<li><a href="#">Test Link 1</a></li>
		<li><a href="#">Test Link 2</a></li>
		<li><a href="#">Test Link 3</a></li>
		<li><a href="#">Contact Us</a></li>
		</ul></div>

CSS:

#navcontainer {height:41px;}
#navcontainer ul li {list-style-type: none;padding: 0;margin:0;display: block;float: left;text-align:center; background: url(headerbutton1.jpg) no-repeat;font: 100% "Lucida Grande", verdana, sans-serif;text-align: center; }
#navcontainer ul li a{padding-top:10px;}
#navcontainer a{color: white;font-weight:bold;text-decoration: none;display: block;width: 119px; height:30px;}
#navcontainer li a#current{ background: url(headerbutton.jpg) no-repeat 0 0 ; }
#navcontainer a:hover { background: url(headerbutton.jpg) no-repeat 0 0 ; }

Here's a test page: Test Page

Couple of problems - the background images for the on/off look slightly different - the door's in a different place so you might need to move it over a bit.

More importantly - using a fixed background as a tab will mean that the nav will break as soon as the text-size is increased at all. Unless you go in for the "sliding doors" CSS approach (waaay too much trouble) - I'd recommend avoiding this approach. You could use CSS to give you a background coloured tab and then use the little door image as a background image for the link itself - position it off to the left. That way the nav will be more flexible - just a thought!

Can't help with the tables - it's been a while since I've used them like this and I'm not sure how to deal with positioning them within another table if that makes any sense.

_____________________________

Little Blue Plane Web Design | Land Rover project

(in reply to CelticDragon)