Jump to content
Stef's Coding Community
madmax99

ul list of 2 items to show next to each other

Recommended Posts

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...

Share this post


Link to post
Share on other sites

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 by madmax99

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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; }

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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 ...

Share this post


Link to post
Share on other sites

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;

}

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...