22 replies [Last post]
pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

Hiya,

I have series of tabs on my page but i dont know what to do to center them?

I also want to have the tab that your on highlighted whilst your on a certain page but dont know how to do that either...

Im a noob!! Sorry!!

Pink
My CSS and HTML are attatched.

AttachmentSize
temp.doc0 bytes
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Don't attach the code in a

Don't attach the code in a .doc file Tongue Either post it here between code tags, or show us a link to the page would be better.

As for the highlighted links, read the alistapart.com article titled "Sliding Doors of CSS" and see if you understand how it's done.

Verschwindende wrote:
  • CSS doesn't make pies

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

Ok, sorry body

Ok, sorry

body { font-family: Arial, Helvetica, sans-serif; background-image: url(images/background.jpg); height: 100%; width: 100%; background-position: 100% 100%; background-attachment: fixed; margin-left: 2px; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #999999; } a:active { color: #CCCCCC; } h5 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: uppercase; color: #000000; text-decoration: overline; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; line-height: normal; font-weight: bold; color: #000000; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #000000; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: normal; color: #000000; } h4 { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #000; text-decoration: underline; } .linkbarbottom { background-color: #B6DF9F; font: "Arial"; text-align:center; font-size:10px; background-attachment: fixed; background-repeat: repeat; visibility: visible; height: 12px; width: auto; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; vertical-align: top; top: auto; } .smallbox { font:"Arial"; background-attachment: fixed; background-repeat: repeat; background-position: 100%; text-align: center; width:auto; border: thick solid #B6DF9F; } body { margin:0; padding:0; font: bold 11px/1.5em Arial; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; }

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
list-style:none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("images/tableftC.gif") no-repeat left top;
margin:-1;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("images/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {
float:none;
}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

#tabsC #current a {
background-position:0% -42px;
}
#tabsC #current a span {
background-position:100% -42px;
}

  • Home
  • Our Services
  • Forum
  • Transfer Maps
  • News
  • Partner Directory
  • Agriculture
  • Economy
  • Energy
  • Environment
  • Development
  • Materials
  • Population
  • Transport
  • Waste
  • Water

Pink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As you have only shown part

As you have only shown part of the HTML can we ask whether you have a DTD in place on the page?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

dtd?

dtd?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Thought as much not to

Thought as much Smile not to worry, but you will need one, have a look at the link in my sig line for an explanation as to why it's required, choose your flavour add to page and if possible link us to a live version of your layout online.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

pinkmonkeylove

pinkmonkeylove wrote:
dtd?

DTD = DocType Definition. Just to clear it up, Hugo wants you to click the link in his sig about "doctypes" Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

I have a DTD, here it

I have a DTD, here it is

Here's the link to the site

sustainabilityweb.org

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That is a Quirks mode

That is a Quirks mode invoking DTD you need to have a complete one with system identifier (url) pointing to source document.

You should be using a strict DTD really unless there is some reason you need a loose one.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

Pardon?

Pardon?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The doctype is a bad

The doctype is a bad doctype, not a good doctype, you want a good doctype not a bad doctype.

Did you bother to check the link that was suggested as it explains things and also provides doctypes to use.

Once we get over this minor hurdle we can actually help with the problem you came to us with.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

Hows this?

Hows this?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yep that's the one, although

Yep that's the one, although 'Strict' would be better. Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As for centering try adding

As for centering try adding text-align:center to the ul; lists as display:inline and remove the float from the anchors and use padding to expand the width and height.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Triumph (not verified)
Anonymous's picture
Guru

Hmmm?

pinkmonkeylove wrote:
Hows this?

Hugo wrote:
Yep that's the one, although 'Strict' would be better. Smile
You sure about that? Smile

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

Hugo wrote:As for centering

Hugo wrote:
As for centering try adding text-align:center to the ul; lists as display:inline and remove the float from the anchors and use padding to expand the width and height.

I'm so confused... What should i do to each of the css sections? I might understand if you tell me what to do that way. I'm very new to css.

Thanks

Pink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Triumph wrote:pinkmonkeylove

Triumph wrote:
pinkmonkeylove wrote:
Hows this?

Hugo wrote:
Yep that's the one, although 'Strict' would be better. Smile
You sure about that? Smile

Oops, eyes wide shut, brain dying. Probably assumed on seeing a url out of the corner of my eye that it must be correct, as far as I'm aware the ALA article doesn't list quirks mode DTD's.

Pinkmonkeylove just read the article and cut and paste one of the example ones.

Then I think the best thing is if you have a look through the menu examples at listamatic and follow one of those that way you have a clear guide to follow and to which you can go back to at your leisure, of course if you're having difficulty fitting it to your layout post up a link to your page and we'll take a look.
http://css.maxdesign.com.au/listamatic/horizontal16.htm

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

Hugo wrote: Pinkmonkeylove

Hugo wrote:

Pinkmonkeylove just read the article and cut and paste one of the example ones.

No i didnt, i remade the template in dreamweaver and it added the extra line.

Where is it wrong?

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

I've followed what it says

I've followed what it says in the link and they have moved accross the page a bit and they are still in order but they still arent centered...

Heres my new css:

#tabsC { float:left; width:100%; font-size:93%; line-height:normal; } #tabsC ul { padding: .2em 0; width:100%; list-style:none; font: normal 90% Arial, Helvetica, sans-serif; text-align:center; } #tabsC li { display:inline;

}
#tabsC a {
text-decoration:none;
float:left;
background:url("images/tableftC.gif") no-repeat left top;
margin:-1;
padding: .2em;

}
#tabsC a span {
float:left;
display:block;
background:url("images/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {
float:none;
}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}
#tabsC #current a {
background-position:0% -42px;
}
#tabsC #current a span {
background-position:100% -42px;
}

Pink

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

pinkmonkeylove wrote:Hugo

pinkmonkeylove wrote:
Hugo wrote:

Pinkmonkeylove just read the article and cut and paste one of the example ones.

No i didnt, i remade the template in dreamweaver and it added the extra line.

Dreamweaver is a pile of poo for CSS layouts. Ditch it.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Pink post up all of your

Pink post up all of your html complete, along with the CSS, preferably embedded within the head of the page, and one of us will take a look at it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pinkmonkeylove
pinkmonkeylove's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-10-06
Posts: 18
Points: 0

<!DOCTYPE HTML PUBLIC

SustainibilityWeb.Org


 
 












Site search

Web search powered by FreeFind








 






  • Home


  • Our Services


  • Forum


  • Transfer Maps


  • News


  • Partner Directory










  • Agriculture

  • Economy

  • Energy

  • Environment

  • Development

  • Materials

  • Population

  • Transport

  • Waste

  • Water













 





Home      About Us      Contact Us      Accessibility Policy      Company Policy      Disclaimer






 





wc3wc3

body { font-family: Arial, Helvetica, sans-serif; background-image: url(images/background.jpg); height: 100%; width: 100%; background-position: 100% 100%; background-attachment: fixed; margin-left: 2px; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #999999; } a:active { color: #CCCCCC; } h5 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: uppercase; color: #000000; text-decoration: overline; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; line-height: normal; font-weight: bold; color: #000000; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #000000; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: normal; color: #000000; } h4 { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #000; text-decoration: underline; } .linkbarbottom { background-color: #B6DF9F; font: "Arial"; text-align:center; font-size:10px; background-attachment: fixed; background-repeat: repeat; visibility: visible; height: 12px; width: auto; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; vertical-align: top; top: auto; } .smallbox { font:"Arial"; background-attachment: fixed; background-repeat: repeat; background-position: 100%; text-align: center; width:auto; border: thick solid #B6DF9F; } body { margin:0; padding:0; font: bold 11px/1.5em Arial; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; }

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
font-size:93%;
line-height:normal;

}
#tabsC ul {
margin:0;
list-style:none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("images/tableftC.gif") no-repeat left top;
margin:-1;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("images/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {
float:none;
}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

#tabsC #current a {
background-position:0% -42px;
}
#tabsC #current a span {
background-position:100% -42px;
}

Thanks.

Pink

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Your doctype is STILL

Your doctype is STILL incomplete. Please fix it. Try the big link at the top of each forum entitled "Doctypes Are Important".

Verschwindende wrote:
  • CSS doesn't make pies