14 replies [Last post]
jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

:curse: Assistance Required

I have a website project I'm currently workin on that requires me to style some Javascript Output code.

The tab elements are all named and have ID's and Spans for styling.

I have tried to edit/style the tabs and so far I simply cannot budge the tabs inline. I've tried everything I know, spent hours on google and forums trying to find the answer and I've decided to simply ask the experts.

The site is located at the following url: http://lunar.etopians.com/product/1000/elite-keyboard.html

The problem area lies in the pink box. This is a Java generated area that produces code with Style IDs. It should be simpe to do right?

Sorry but for some reason I just can't make it work...? I just need this area to look good and tidy.

Any help would be greatly appreciated!!! :thumbsup:

id="css"
#css {
background:too tired for this!
}

M
Offline
newbie
amsterdam
Last seen: 13 years 21 weeks ago
amsterdam
Joined: 2008-07-13
Posts: 7
Points: 0

product_details_entended_tabs

don't know, but the reason you 'cannot budge the tabs' may just be a typo in the id...
I suppose id="product_details_entended_tabs" should be id="product_details_extended_tabs"

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

Typo

I thought this the first time I looked into the problem.

This isn't it, as you know with CSS the ID / Class simply needs to be the same in the css. Looking at the CSS file here:

http://lunar.etopians.com/css/master.css

You will see that the CSS has the same code as the tag.

entended

Thank you for looking though.

Anymore ideas anyone?

(Note: I will upload any suggestions in real time to test any solutions suggested)

Thanks

id="css"
#css {
background:too tired for this!
}

M
Offline
newbie
amsterdam
Last seen: 13 years 21 weeks ago
amsterdam
Joined: 2008-07-13
Posts: 7
Points: 0

this any better?

#product_details_entended_tabs {
width:645px;
padding-top:0px;
padding-bottom:0px;
border:1px solid yellow;
}

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

Replies.

Thanks for your suggestions M

But have you looked at the CSS?

I've got that code in the CSS. As you can see there's some CSS commented out. I've commented the top three lines out completely and tried variations of different code until I gave up and started searching for a solution.

Have a look in a little more detail.

Cheers.

id="css"
#css {
background:too tired for this!
}

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

Detail...

to be a little more detailed its the three DIV's within the entended contianer (i.e. the links) that I want to run horizontally (align).

Cheers.

id="css"
#css {
background:too tired for this!
}

M
Offline
newbie
amsterdam
Last seen: 13 years 21 weeks ago
amsterdam
Joined: 2008-07-13
Posts: 7
Points: 0

in that case...

ah, right,
in that case you want

#product_details_entended_tabs li {
	display:inline;
}

or
#product_details_entended_tabs li {
	float:left;
}

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

M

M again thanks for your input, i'll try that now...

id="css"
#css {
background:too tired for this!
}

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

Didn't work, I'm sure I've

Didn't work, I'm sure I've tried it... purplexing huh!

id="css"
#css {
background:too tired for this!
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

you still haven't even

you still haven't even explained the problem :shrug:
what it is you're trying to accomplish?

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

What am I trying to accomplish?

Sorry for not making this clear.

To be honest my goal is simply to make the tabs/links look good.

I wanted to make the tabs look like this page:

Each link could be styled with a background image and all three links aligned horizontally.

http://www.novatech.co.uk/novatech/specpage.html?ONE-PANEL

The alternative would be to arrange the navigation vertically down the left hand side and show the details/text/content in a stage on the right.

http://www.ebuyer.com/product/111241/pricebreaks

Means to an end...

Either way I need to box off and adjust the links with somesort of background image and in a particular place. Simply to make the page and site look professional. But I can't.

The links won't move AT ALL! No matter what I do the links don't budge.

Thanks for any assistance you can give me...!

id="css"
#css {
background:too tired for this!
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

This should get you

This should get you started:

remove the display:inline from #product_details_entended_tabs and #product_details_entended_tabs li (who came up with these names :scared: )
enable the float: left; in the li.
add #product_details_entended_tabs ul { margin: 0; padding: 0; overflow: hidden; border-left: 1px solid blue; }
add #product_details_entended_tabs li a { display: block; padding: 5px 10px; border: 1px solid blue; border-left: none; }

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

...excuse my french...

<span style="font-weight:bold">I f**king love you!</span>

id="css"
#css {
background:too tired for this!
}

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

While I'm on a roll!

Wolf, could you help me with the next niggle?

Click the links, you'll notice the width of this section changes according to content.

Whats the correct x-compatible way to fix the width at 100% of the parent DIV?

Thanks

id="css"
#css {
background:too tired for this!
}

jckpalmer
Offline
Regular
UK
Last seen: 13 years 19 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

TOO TIRED FOR THIS!!!

Forgot to add the width:100% attribute in the wrapper.

Sorry.

I've done it now.

Thanks!

id="css"
#css {
background:too tired for this!
}