9 replies [Last post]
le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 39 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Hey all...
With a 2 or 3 column template design -
when you click a link say in the left menu column how can you have the linked page turn from 3 or 2 column display to just 1? Do I need to make a seperate css file for every individual page?

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

By the use of descendent

By the use of descendent selectors and id's on the html or body tags.

You can approach it a number of ways but in essence view or think of each page as having an unique identifier on the main page tags i.e <body id="about"> then you can control how your layout elements are styled.

On the linked page you might exclude the right sidebar but then need the center content expand to the right to fill the space so you would have two sets of rules for #center:

#center {margin:1em 14em;}

body#about #center {margin:1em 0 1em 14em}

One set only applies when the specific descendent selector group is satisfied

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

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 39 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Ah man thats awesome,

Ah man thats awesome, thanks! Good description!

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 39 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

a { text-decoration:

a { text-decoration: none;} img, a img { border: 0;} ul, li { list-style: none;} html, body { height: 101%;} body { background: black url(pagebg.gif) repeat-x; font-family: "Lucida Grande", verdana, "Lucida Sans Unicode", sans-serif; font-size: 62.5%; color:

#9f9f9f;}
.clear { clear: both; margin: 3px 0;}

#design #rightcol {width: 549px; float: right; margin-to7p: 165px;}

then in design.php I put

@import url(images/styles.css);

But it hasn't worked - anyone tell me how to go right plz?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

margin-to7p should be

margin-to7p should be margin-top Wink

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 39 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Thanks for the tip

Thanks for the tip trev:

Say in a 3 column css display with links in the left column to new pages, how can u style the new page to only be 2 col display using the same stylesheet?
I can't figure out the id tag thing? - anyone wanna give me a very simple example please?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi I showed someone this

Hi

I showed someone this the other day, I'll try and dig out the code. It was posted on my web site, but I think I have taken it off. The example I used was a 3 col layout going to a 2 col with the right column disappearing.

Would that do?

Trevor

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

le007 wrote:Thanks for the

le007 wrote:
Thanks for the tip trev:

Say in a 3 column css display with links in the left column to new pages, how can u style the new page to only be 2 col display using the same stylesheet?
I can't figure out the id tag thing? - anyone wanna give me a very simple example please?

Sad thought I did just that earlier?

Somewhat depends on your layout.

first principle is to tag your pages with an unique name on the body this then becomes the reference for what page you're on.

Then you can use descendent styles to target rules that will only occur when that tag is in effect

You might just set an element to display none if it's descended from a particular body tag

#sidebar-right {width:200px}

body#about #sidebar-right{display:none}

thus on all pages you have a right sidebar except when a page has the id of #about placed on the body tag when the right sidebar will be hidden with display:none;

This of course is not the best way of working a layout as you have a redundant bit of markup still in the page better that you remove the markup on the pages that don't require it and adjust the rest of the elements to fill the space using the principle outlined above.

It's really a matter of having an experiment ,to some extent we cant really provide hard code examples it relies on having a good idea of how descendent selectors work but it's not a difficult technique.

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ah, NOW my brain decides to

Ah, NOW my brain decides to wake up. Slams palm of hand against forehead. Doh! That's why I deleted the page, coz I saw the other post you made and deiced to point to that next time someone asked.

le007
le007's picture
Offline
Enthusiast
Last seen: 12 years 39 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Ok I think I got it now!

Ok I think I got it now! Thanks guys