a webmaster learning community
     Home    Register     Search      Help      Login    
FrontPage Alternative
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
 

Advanced search
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)
Page:   [1]
OutFront Discoveries

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> display: inline; never works for me for some reason!
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts