madmax99 Posted January 19, 2009 Report Share Posted January 19, 2009 I am certain for the Guru's this is one of the easiest questions, but I am kinda new to the CSS and I am running out of ideas. In a template I purchased for Joomla, I need to change the CSS for one particular place in order to show 2 items which are pulled from an ul List next to each other (horizontal) instead of below each other. I got the buttons removed already, but for the love of g... I can not get them to show next to each other ... That is How it looks at the moment: ENGLISH DEUTSCH And that is how it shall look: ENGLISH DEUTSCH That is what I have so far: #banner-top ul {list-style: none;padding: 0;margin: 0;display: block;white-space: nowrap;text-transform: uppercase;position: relative;left: 800px;} Pleeeease somebody help me and tell me what is missing... Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 19, 2009 Report Share Posted January 19, 2009 If you are using display:block, you'll need to add "float:left" to move them into position, and then add padding till it looks the way you want it to. Quote Link to comment Share on other sites More sharing options...
madmax99 Posted January 19, 2009 Author Report Share Posted January 19, 2009 (edited) Thanks Benjamin for the quick reply... Tried what you said with the float left, but the two items are still written below each other... I do not have to use the display: block ... Just read this somewhere and tried it... actually basically when I take that out completely it still looks the same than with it ... So if I use it with or without the display and float it still looks the same... Here now the revised code: #banner-top ul {list-style: none;padding: 0;margin: 0;white-space: nowrap;text-transform: uppercase;position: relative;left: 800px;} Really a newbie here... Thanks PS: here is the URL for my problem .... The two languages on the top... http://www.hotelroyalamsterdam.com/content/ Edited January 19, 2009 by madmax99 Quote Link to comment Share on other sites More sharing options...
JBall Posted January 19, 2009 Report Share Posted January 19, 2009 OK, well try finding these two items in your style sheets: Thats the div that your language selection lives in. Its a child div of #banner-top. Add Ben's suggestion to #jflanguageselection in your CSS and I think you'll get some results. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 19, 2009 Report Share Posted January 19, 2009 Oops, sorry, I read your code too fast. The code I gave above won't work -- Float:left needs to be added to the li, not the ul. Add this line below your "#banner-top ul" in your css: .jflanguageselection li { float:left; } Quote Link to comment Share on other sites More sharing options...
madmax99 Posted January 19, 2009 Author Report Share Posted January 19, 2009 Hey Ben: Nearly there , I hope... I added the information you said and it looks great in IE7, but in Firefox 3.0 it screws up the whole top section .... That is what I have there now in the CSS: #banner-top ul {list-style: none;padding: 0;margin: 0;display: block;white-space: nowrap;text-transform: uppercase;position: relative;left: 800px;} .jflanguageselection li { float:left; } Thanks for all your help... Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 19, 2009 Report Share Posted January 19, 2009 I played with it a little. Looks like using this may be a better way to go than floating the elements: .jflanguageselection li { display:inline; } Quote Link to comment Share on other sites More sharing options...
madmax99 Posted January 19, 2009 Author Report Share Posted January 19, 2009 Ben : You are the MASTER, thanks a million... now it looks 99% like it should be... I just now have the tiny problem when I used the position: relative;left: 800px; it is in the right location, but I have Scrollbars galore in IE7 and FF3 .... So, how do I position this now to the right instead of to the left, without the stupid scrollbars?? Thanks again, you got me already far further than I ever was ... Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 19, 2009 Report Share Posted January 19, 2009 adjust your code to this: (Instead of using position:relative and left:800, I am moving it into position with padding instead.) #banner-top ul { left:800px; list-style-type:none; margin:0; padding:0 0 0 800px; text-transform:uppercase; } Quote Link to comment Share on other sites More sharing options...
madmax99 Posted January 19, 2009 Author Report Share Posted January 19, 2009 Yipeee!!! That did the trick, thanks again, you saved my live... I owe you one... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.