question about CSS

[OogyWaWa]

so, i'm a total newb with web programming and CSS in general, but, I'm wondering how in depth CSS can get.

For example, let say i have a header (navigation) that i want at the top of every page, but i want to be able to edit it once and have the changes reflect across all pages. well, in the past you would use a simple include and link in your nav.html page or whatever. are things still done like this or is there a way for me to put all that nav.html info in my css files and change it like that?

i suppose another question is that if you still have to use includes, will the navigation page's code be written before the CSS stuff is parsed through? that is to say, if i had a class like, i dunno <p class='header> bla bla </p> and had corresponding code for said class in my CSS file. even though the nav.html file is not the file linking to CSS sheet, would it still pull all the CSS values from my main sheet?

 

[JACKDRUID]

please use a masterpage if you are in asp.net 2.0 ...

 

[fuzzybabybunny]

I don't believe that CSS can get that in-depth. It's just there to define the styles - color, padding, margins, etc. No actual content like <header>Hello world!</header>. Your web pages include <> brackets for the html. I've never seen a CSS with <> brackets.

Includes will work. Simply think of includes as a straightforward copy and paste. It copies code from the include file and pastes it directly into the page that has the include.

****page.html****

- styles defined here with a specific style for <header> -

- your header include here with <header> code -

- rest of the page -

***********************

The code from the header include file will simply be copied and pasted into the spot in page.html where you chose to reference the include. And this code will pick up the styles defined for page.html.

 

[lyssword]

You mean you want to overwrite your "generic" style with special css style? CSS code will execute the last stylesheet linked, it will overwrite the previous one.

so if in <link href="labStyles.css" rel="stylesheet" type="text/css" /> === blue background color (original color), font-color ==== red

<link href="new.css" rel="stylesheet" type="text/css" /> === green background color (you want to use special styles for this page)

the page will render the last css included, and your page will display green background, and not blue, BUT ALSO the font color will still be red (because you didn't overwrite that class)

Is this what you are asking?

 

[OogyWaWa]

thanks for the replies.

i guess what i'm asking, is, now-a-days, how to web programmers manage dynamic/semi dynamic content?

for example, most websites will have the nav on every single page, right? well, obviously you dont want to be typing the code for said nav on every damned page, so, at least in the past, you would use an include. such that, index.html has all your welcome bullshit, and includes the file header.html or something. contact.html has your contact shit and includes the same header file. therefore, if you wanted to add a new page (map.html) all you have to edit is the header page and the changes are seen on all pages.

so, i suppose this can't be done with css, but, the sheet can still manage any of the included pages.

on to another question then. lets say you were using some fnacy ajax, and instead of having a shitload of info pages that include a ton of things like header, footer, and ad pages. you had one 'master page' (i think that is what it is called in asp.net) that can include all the child pages. for example, index has all your layout, nav, etc. and a central area for including child pages such as contact, map, etc. However, instead of the page reloading, it is "re-included" by some ajax scripts. i suppose i'm getting more into ajax now, but, would this increase the size of the index page to the size of all the pages combined since they could potentially be loaded? or, can you re-load stuff on the fly with ajax?

basically what i'm saying is, have the basic welcome page info be loaded, then when a button is click, it is trashed and a new page (content, whatever) is loaded without a refresh or page move. possible? examples?

thanks everyone

 

[lyssword]

In ruby on rails there is a "layout" and "partials" for stuff like that. (actual html +ajax/ and dynamic whatever can be applied to every page)

 

[JACKDRUID]

Originally posted by: OogyWaWa

on to another question then. lets say you were using some fnacy ajax, and instead of having a shitload of info pages that include a ton of things like header, footer, and ad pages. you had one 'master page' (i think that is what it is called in asp.net) that can include all the child pages. for example, index has all your layout, nav, etc. and a central area for including child pages such as contact, map, etc. However, instead of the page reloading, it is "re-included" by some ajax scripts. i suppose i'm getting more into ajax now, but, would this increase the size of the index page to the size of all the pages combined since they could potentially be loaded? or, can you re-load stuff on the fly with ajax?

basically what i'm saying is, have the basic welcome page info be loaded, then when a button is click, it is trashed and a new page (content, whatever) is loaded without a refresh or page move. possible? examples?

thanks everyone

so you have an updatepanel, and dynamically add/delete controls within the updatepanel..

 

[Markbnj]

i guess what i'm asking, is, now-a-days, how to web programmers manage dynamic/semi dynamic content?

There are so many ways this gets done that it's hard to catalog them all. Master-content pages, themes, controls, includes, dynamic HTML generation. It's kind of like asking how people handle displaying information in a dialog box... the set of possible approaches is unbounded.

But to your specific question... what CSS can do is affect the content of the Style attribute of any HTML element in the document. It can't add or remove HTML content, or rearrange it in the document object model.

 

[OogyWaWa]

jackdruid: thanks, seem simple if i'm going with .net, but i think i'de rather take a php approach.

markbnj: is there one that is particularly more standard than the other? or maybe one that is simpler than the others. for my site's purpose, i'm thinking one master page that loads up all the content through ajax would be best. it seems like that would offer the least amount of work if something major with the design needed to be changed.

others: thanks

another css question:
can you force content reloaded by ajax to conform to a separate style sheet? for example, index.html has its stylings and default stylings for child pages that have no css, but lets say you have a page that displays from info from a DB and some information needs to be formatted specially. from what was said earlier, the last sheet called is the one used, but assuming none of the classes, etc. are the same as the main sheet, can you 'daisy chain' then?

 

[Woosta]

Originally posted by: Markbnj

But to your specific question... what CSS can do is affect the content of the Style attribute of any HTML element in the document. It can't add or remove HTML content, or rearrange it in the document object model.

While it isn't the same as a full fledged dom operation one could use :before and :after to insert text ( unicode is supported ) into a document with CSS. One modern method of clearing inserts an invisible period after an element, sets the display mode to block and clears floats above it.

 

[Woosta]

Originally posted by: OogyWaWa
i'm thinking one master page that loads up all the content through ajax would be best.

No no, don't think like this. First you get it working without any special scripting, progressive enhancement comes later after everything is fully functional. Don't think about XHR when you're beginning the initial buildout.

 

[Markbnj]

Originally posted by: Woosta

Originally posted by: Markbnj

But to your specific question... what CSS can do is affect the content of the Style attribute of any HTML element in the document. It can't add or remove HTML content, or rearrange it in the document object model.

While it isn't the same as a full fledged dom operation one could use :before and :after to insert text ( unicode is supported ) into a document with CSS. One modern method of clearing inserts an invisible period after an element, sets the display mode to block and clears floats above it.

Good point. There's always an exception.

 

[OogyWaWa]

Originally posted by: Woosta

Originally posted by: OogyWaWa
i'm thinking one master page that loads up all the content through ajax would be best.

No no, don't think like this. First you get it working without any special scripting, progressive enhancement comes later after everything is fully functional. Don't think about XHR when you're beginning the initial buildout.

well, yah, obviously i would get the main template working, then working with an include, then move on to dynamic includes through ajax.

 

[Aluvus]

Originally posted by: OogyWaWa
jackdruid: thanks, seem simple if i'm going with .net, but i think i'de rather take a php approach.

markbnj: is there one that is particularly more standard than the other? or maybe one that is simpler than the others.

The most common solution in PHP-land is to use PHP's include() or, when appropriate, require(). There are different variants that are appropriate for sites of different sizes, but for large-ish projects the most common solution is to have one "master" template that includes everything else, using one or more GET variables to tell the server what content to insert. Various forms of trickery are often used to hide the use of GET variables from the user when possible. MediaWiki and Wordpress both use variants of this approach.

for my site's purpose, i'm thinking one master page that loads up all the content through ajax would be best. it seems like that would offer the least amount of work if something major with the design needed to be changed.

In most cases this will offer no practical advantage over using straight PHP includes, requires more HTTP requests, and breaks if the client does not support Javascript or has it disabled. It also makes development more complicated for you.

Originally posted by: OogyWaWa
another css question:
can you force content reloaded by ajax to conform to a separate style sheet? for example, index.html has its stylings and default stylings for child pages that have no css, but lets say you have a page that displays from info from a DB and some information needs to be formatted specially. from what was said earlier, the last sheet called is the one used, but assuming none of the classes, etc. are the same as the main sheet, can you 'daisy chain' then?

Every style sheet that is called will be used. However, style sheets that are referenced later will be able to over-rule the earlier style sheets, if they conflict (this is part of what makes them "cascading").

The most common solution to this situation is to have classes that are only used by whatever needs special formatting.

 

[GodlessAstronomer]

Be careful about serving content through AJAX calls. Search engines won't index content loaded through an AJAX operation, so if all of your content is served on index.html through async calls then it won't be indexed. AJAX shouldn't be used for content retrieval, ever.