CSS Positioning of script

Hi,

I'm trying to position a facebook script and twitter script on my page:

http://www.simplyflowersofely.co.uk/testie121/index4.html

Half way down the page, I'm trying to get them in the two boxes side by side but no luck so far. I keep trying to edit the HTML. I'm not sure if its a CSS issue?

Any help would be great thanks!!

 

When I looked at it they are are side-by-side... Facebook and Twitter that is.

Your six <li> are arranged in three rows of two columns each in my browser.

Do you want them to be in a single row across the page?

 

Hi thanks for the quick reply.

Yes, in a single row side by side one another (just as long as they look pleasing to the eye basically). It is a CSS issue or HTML?

 

Mark,

It's a CSS thing.

Each link is inside an <li> and the enclosing <ul> is inside a <div> which has a class of "connect".

This "connect" class is affecting things and putting your links in a three-rows- by-two-columns block.

If you remove the class "connect" from the enclosing <div> the <li> are shown going down the page which is the default layout for <li> / <ul>.

To alter this default layout so that the <li> go across the page you have to apply "display:inline;" to each <li>.

One way to do this is to add the following to your style sheet:

#nav li
{
display:inline;
}

Then in the HTML give the <ul> an id of "nav" as follows:

<ul id="nav">

You have now lost the styling that class "connect" was providing (so the links look different) but the links are now going across the page and setting their cosmetic appearance should be straightforward.

If what I've written isn't clear enough or you need any other help just get back to me.

Geoff

 

Thanks for your help. Will have another go at editing it