Complete Newbie here - site content in css [Archive]

blackvista

04-10-2008, 07:50 PM

Ok, so I'm sure this is a very simple question for you guys, but I'm trying to make a very basic website in which the header (image and or text), links, and contact information remain constant throughout the site via css. In other words, if I add or edit a link, or want to change the image in the header, I want to do it only via css so it makes the changes on every page of the site... Apologies in advance if this question has been answered a hundred times, but there's so much information out there I can't sort it out! :confused:

thanks for any help!
Dan

Medyman

04-10-2008, 09:04 PM

CSS is for styling only. You can maintain the same styling on links, images, and text with CSS, but you can't control the actual text of the links and/or contact information.

For example, if you wanted all of your links to be red and bolded, you could write CSS like this:

a { color:red; font-weight:bold }

Now, if you wanted to change the color, just change the red to blue or whatever. Same thing applies to regular text.

The header is a little different. You could control the image via CSS by applying it as your background do the header div.

Something like this:

CSS

#header
{
background-image:url(background.jpg);
height:200px;
width:100%;
}

HTML:

<div id="header">
<h1>My Website's Title</h1>
</div>

blackvista

04-11-2008, 12:15 AM

boogyman

04-11-2008, 12:41 AM

you create the pages to share similar tags, and you use your CSS stylesheet to "markup" or change the similar elements (tags) to look more cosmetically appealing

if you are talking about content, well then thats usually done through some sort of template or database driven code

Medyman

04-11-2008, 03:54 AM

Thanks for the response Medyman. So, for the most part, I'm barking up the wrong tree with CSS? How do the designers or administrators of large, extensive websites make changes and updates so that each individual page doesn't have to be edited? Thanks again for your help!

That's done with some sort of server side language, such as PHP. tech_support has a great tutorial in the tutorials section (link (http://dynamicdrive.com/forums/showthread.php?t=28260)) on creating a basic PHP template which might be of use to you.

blackvista

04-11-2008, 05:14 PM

Medyman

04-11-2008, 06:15 PM

Wow, it's amazing how little I know about all this stuff! I have no php or databasing knowledge...

Okay, I realize this thread has moved away from the topic of css, but I have one more question and I'll stop bugging you guys. It seems to me that I've heard about an option in Dreamweaver which will automatically go through all your html files and make the same changes to all of them; was I dreaming? :)

No, it's possible. Not just with Dreamweaver either, a lot of your well developed text editors have a find & replace feature for multiple files. But it is a find & replace feature.

It won't change an entire code block. The other problem with it is that it's not an intelligent process. You have to be very meticulous in what you enter as the find/replace string. You also have to be very meticulous in coding and make sure that all of the code you use is identical.

Too much room for error for my liking.

Now, I don't use Dreamweaver so there might be a more advanced feature that I'm unaware of. If you're serious about learning HTML/CSS, I'd recommend that you stay away from Dreamweaver. Then, when you do know it, you won't want to go near it anyway.

More info: http://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm#3A

terrik

04-12-2008, 05:19 AM

Getting back to your original query...

For small pieces of information, I use the following.



Don't know what it is...
Don't know where it came from...
I've been using it for near on 10 years, now.

I do the "style" in the intended page's CSS...not the orignal ( external ) file.
In fact, the orignal htm is minimal.
I have even used it to call txt files to an intended page without a problem.

I don't use the above for large pieces/chunks of content.
But, it's great for say "copyright" information, or contact information. . . snippets of boring input that you want to appear the same throughout the site.

And, I do use this for menu lists as external files.
Never experienced a problem with it.
Only have to update ONE ( thank goodness ) menu for an entire site.

There are qwirky behaviors if you attempt multiple instances with this code on the same intended page. The files seem to crash...and sometimes display the first called over and over. So, I do not recommend it for large files, or multiple instances on the same intended page.

I create the information in a separate - bare bones - htm file.
Insert the code above into my html, with the appropriate filename of course.
Then, when the external file [ filename.htm ] needs an update, I make it to the orignal htm file, and it is changed across the entire site.

=======================================================

For larger instances...and multiple intances...
There are javascripts ( on dynamic drive ) what will call large files, and seem to work wonders with multiple instance on the same intended page. A simple search on DD for "iframes" or "display external pages" is probably going to get you a bunch you can review for your purpose.

Hope this helps.
terrik

rangana

04-12-2008, 05:26 AM

@terrik,



Don't know what it is...
Don't know where it came from...

...Well, you'll know it now ;)

...This is HTML Comment Tag (http://www.w3schools.com/tags/tag_comment.asp) :)

Contents inside the comment tag will be ignored by the browser.

Hope that helps you ;)

terrik

04-12-2008, 05:36 AM

@ rangana

Yes.
I do realize that the



Are html comment tags; opening and closing, respectively.
And I know the characters enclosed between the two will not be displayed - as written - in the html file, and in most cases are completely ignored by the browser.

. . . thank you.

I was actually referring to the bit between the two tags when I said
"Don't know what or where".

Still...the little piece of coding works wonders!

rangana

04-12-2008, 05:48 AM

Still...the little piece of coding works wonders!

...I beg to disagree...when it's inside the comment tag...browser ignores it...which means...it has no function :)

...The only things that makes it sense is for the future web developer to easily understand the code's purpose just by looking at the comments...

I might be wrong..but I believe that with or without your comment tag, the same things will render in your browser ;)

terrik

04-12-2008, 05:57 AM

@ rangana

Please try it.
It does work.

Create a simple html file. Call it one.html.
Just make an html file that displays your name...whatever.

Now create a second html, and call it second.html.
Insert the snippet, into the body of the second html file (where you want the external file to appear) , like so . . .



...and, the one.html file (in full) will be called to the the second html file

. . .You can thank me for this at a later date.

rangana

04-12-2008, 06:03 AM

I just have given it a try..maybe my testing was wrong...but I tested it with all possible ways..can't even see what you're trying to explain :confused:

...I accept inputs...no worries, if I find your post worthy to be thanked, I'll give it a shot to tick the [Thank user who made this post] for you ;)

...Anyway, whichever way, whatever combination...seems no use...and in fact..i'm confused now :)

...Could you show me a live page wherein this code works...so far...and i'm certain that it has no effect...my apologies if not believing on you ;)

terrik

04-12-2008, 06:30 AM

@ rangana

Yes.
You may view a live working page at:

http://terrik.myhosting247.com/two.htm
is the page where the first file ( one.htm ) is being called.

you can view the first file - the one being called - at
http://terrik.myhosting247.com/one.htm

rangana

04-12-2008, 07:11 AM

Hmmm....interesting, but wait...aren'nt it the same content on one.htm ;)

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>page two</title>
</head>

<body>

This is a page called two.htm
that is calling and external page ( one.htm )
with the snippet of code 

that looks like this

 



Below, is the called file: one.htm

 



This is page one
...filename one.htm
...being called into page two. 
 



</body>

</html><center>Free Web Hosting Provided by <a href="http://www.myhosting247.com">
Myhosting247.com</a></center>

See highlighted...your one.htm also has the content...or maybe I'm at mistake again :confused:

...Try it like this...tell me..if it has really an effect:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>page two</title>
</head>

<body>

This is a page called two.htm
that is calling and external page ( one.htm )
with the snippet of code 

that looks like this

 



Below, is the called file: one.htm

 





</body>

</html><center>Free Web Hosting Provided by <a href="http://www.myhosting247.com">
Myhosting247.com</a></center>

No worries, I just removed the highlighted...now see if it does function ;)

terrik

04-12-2008, 07:30 AM

When you view the intended source online it actually includes the called page - in full - to the intended page.

In the source code,
two.htm ( the external document )
appears between the two sets of html comment tags becasue it's being called.

Here.
These are the orignal codes for both pages.
Create the two html doc on your local...save both...open two.htm, and see if this doesn't work for you.

Page one.htm :: the external html page

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>page one</title>
</head>

<body>

This is page one
...filename one.htm
...being called into page two.

</body>

</html>

Here is two.htm :: The intended page.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>page two</title>
</head>

<body>

This is a page called two.htm
that is calling and external page ( one.htm )
with the snippet of code 

that looks like this



Below, is the called file: one.htm

 



</body>

</html>

Beyond this, I can do nothing more to prove to you that this is a very handy piece of code.

:cool:

rangana

04-12-2008, 07:36 AM

Beyond this, I can do nothing more to prove to you that this is a very handy piece of code.

...Thank you for considering my point..though I believe that you are confused :rolleyes:

...I tried it...yes...with the exact step that you instructed...and it's not showing. :eek:

With this,,,maybe you'll realize that the tags purpose () is just to comment...and nothing else ;)

Hope that makes sense to you now :p

OverMachoGrande

04-12-2008, 07:42 AM

Terrik...

Holy crap! THANK YOU! I'm just like the guy who posted this thread, and actually completed a CSS page for the first time today and ran into the same problems! I tested it out on my page briefly and it seems to work.

As a complete newbie, I'm not exactly sure what you really mean by "large instances/multiple instances"... our definition of those terms are probably really different! lol... I'm going to attempt to use it in four instances... header, footer, and two sidebars....

http://img167.imageshack.us/img167/6373/layoutji9.jpg

The two sidebars will eventually have a LOT of links on them, though. Unless you think that four instances -two of them eventually having many links- would be just fine, I think I need to do the search in this database for "display external pages" javascripts.

By the way, the site WILL BE here: http://www.lowcountryparanormal.com... but it's nothing but a little shell of a page just to check the design right now (with fake, generated text as fillers and everything), but if someone is reading this thread in the future and the page looks like it's set up and working.... then I obviously figured it out!

I will say this... javascript is absolutely horrifying to me. I learn fairly quickly, but it seems that every tutorial with javascript starts about 10 steps ahead of what I understand. I might be back for questions! lol...

I would like to hear your opinion on whether or not I need to even look for a javascript. It's 3:40am so I'm not looking now, anyway!

Thanks again!

-OverMachoGrande

terrik

04-12-2008, 08:06 AM

@ OverMachoGrande

I'm happy to hear it worked for you, friend.
Enjoy!

When I say "multiple instances", I am referring to using this snippet to call several different external files into one intended html page.

When I say "large instances", I am referring to using this snippet to call a highly coded / formatted / styled) chunk of content into one intended html page.

I don't know if you're going to need to look to another resource for importing external pages. But, I will say that there are several very good pieces of JavaScript ( on Dynamic Drive ) that are very easy to configure if you just take your time, and know you will probably need to start over a couple times before you "get it". Do a search for "displaying external html" on DD ( or google).

Just keep saving the files, and testing the results...little pieces at a time to see what you just did, and what your changes caused. If you mess it up...just copy the files over, and start again. After all, they are only bits and bytes. You can't lose them forever; they're posted on DD!

Medyman

04-12-2008, 03:32 PM

@rangana
Don't be confused. Your points are all valid. Comment tags have no functional purposes, only practical ones. As you correctly stated, they're useful to document your markup. That's it.

@terrik
You're making a huge assumption in suggesting that little "magic" comment tag. The assumption? That everyone is using Frontpage.

@everyone
The "webbot" comment tag that terrik suggests is not functional HTML/XHTML syntax. It's a proprietary syntax used by Frontpage to render the proper HTML code. It's also not a true file include (in the same way you would do it in a server side language).

In a true include, the code is complied on-the-fly. Using terrik's example, if you were to change one.html only and upload it to your server, it should automatically change the contents of two.html. In Frontpage, that won't happen in live environment. In fact, you might not even need one.html on server at all. This is because Frontpage renders two.html with the code from one.html at save time not at view time.

So, in effect, this is a development tool within Frontpage, not proper HTML syntax.

Hope that clears up the confusion.

For anyone looking for this sort of functionality (file includes), look at tech_support's tutorial (http://dynamicdrive.com/forums/showthread.php?t=28260) on templating with PHP. You have to use a server-side language for this type of functionality.

OverMachoGrande

04-12-2008, 04:43 PM

Medyman...

Yes, I am very stupid and new at this! I checked out link, and while I understand how to plug in my information, I still don't get if using PHP like that allows you to bring information right into divs on your page (like in my graphic up above). See, from my ignorant point of view, that tutorial still doesn't really explain the "end result" of what it's telling me to do! lol...

Sorry I didn't get involved in this a long time ago, everyone! :)

terrik...

Thanks for your response! I couldn't really find a code that jumped right out at me -and obviously I'm scratching my head at that php tutorial- so I'm a little at a loss.... but I'll try to do it using that original code and hopefully it'll work fine.

But... I *will* take spoon fed information, just to let you know! I'm not *that* stupid! lol...

-O.M.G.

Medyman

04-12-2008, 05:09 PM

OverMachoGrande...

If you understand what terrik posted...the expected results of it at least, then the end result with PHP is the same.

The thing is, what terrik posted can only be used in Frontpage. If you're using Frontpage and like that workflow...by all means, use it.

I was just giving options for people that would rather not use Frontpage (I'm not a fan at all of things like Frontpage, Dreamweaver, etc...).

Bascially, with php, you can bring in any page into another (html, another php page, even text files). So, yes, you can accomplish what you want with it. You spoke about javascript and some sort of database in your last post. That's not possible. JavaScript is a client side language. You need to use a server side language (PHP, ASP, etc..) to connect to a database.

If you expect to be doing a lot of management of your website and make frequent changes, you might also want to look into a content management system. ExpressionEngine (http://www.expressionengine.com/index.php?affiliate=visualbinary) is the only one I would personally recommended. There are other decent ones, but none as flexible as EE.

terrik

04-13-2008, 12:19 AM

As I stated early on in this thread...

Don't know where it came from...
Don't know what it is...

As for the matter of it being frontpage associated / proprietary...
1. That free site I set up on myhosting247.com for the purpose of displaying a working page does not have FP extentions installed.
So...how can it be that it works there?
If you'd like to go look at the file system, be my guest.

The login address is: http://www.myhosting247.com/
The username is: terrik
The password is: green333
As the owner of this free website, you have my permission to open it up from the inside and look at anything that is there.

For those that don't want to bother logging in...
There are three files; index.html ( posted by the service and unchanged )
The 2 files I uploaded yesterday; one.htm and two.htm.
And...there are no FP proprietary folders or extentions installed.

2. Frontpage is just a tool. There's no good reason to knock it OR the people who might use it.
It may not be the best tool on the workbench for every job that one might have to perform, but it is a decent tool to get a lot of jobs done. Some quite amazing pages have been created with the use of FP. I, for one, am so tired of having to hear how Frontpage and Microsoft are evil ogres that are taking advantage of the world, and people who use their products are dumb and/or lazy...even if it is only implied.

EVERY web application available for use in site development available today is a valuable tool. In the hands of a considerate thinker, notepad is good enough to get the message posted. There is a time and place for every language known to geek-kind. Each and every tool that can be used to create a www gateway to the rest of the world has merits. And, each has drawbacks and limitations. Why can't every individual with a global vision - and the courage to share it - just appreciate the effort and talent needed to pull together data, organize it, and find a way to display it in a pleasant manner. You don't always need a air hammer to tap a tack into the wall, ya know?

There is always more than one way to skin a tiger.
...let me count the ways.

Here.
You can have my soapbox, now. :p

OverMachoGrande

04-13-2008, 08:14 PM

Medyman...

You're right... I see that it renders at save time and not view times. Therefore, it would be good to use if I wanted to bring in data that I never changed, but -since I'm going to be changing the sidebar links quite frequently- I can't use it. That gave me a huge headache! lol... UGH!

As far as the PHP tutorial here (http://dynamicdrive.com/forums/showthread.php?t=28260)... for the life of me I can't figure out how to use it. It doesn't explain in enough detail what needs to be changed (like the names of the pages to include) to make it work, and since I don't have a working knowledge of PHP yet, I can't readily spot it.

I've been searching around this site and others, and I'm still back at square one. A content management system would be nice, but I've played with those before and it never seems like there are quite enough options for me! I can never get the page quite like want it, so I guess I'm a control freak and the trade off with control vs. easily updateable content isn't worth it. I have downloaded expressionengine, and maybe I'll take a crack at it later, but it looks like it would take a few solid hours of complete attention to even figure out how to start it, much less customize it!

If you are anyone can point me to an easy php tutorial to simply include the contents of a header, a footer, and two sidebars into divs, which would in turn allow them to be formatted by the CSS stylesheet, I'd me much appreciative! I'm still searching!

-O.M.G.

Medyman

04-13-2008, 09:13 PM

@terrik
The page works on that host because you created the files using Frontpage and then uploaded them. As I mentioned, the "included" code is created when you save a file with Frontpage.

Look at the source of your two.html. It will include the markup from one.html (even locally). This is, again, an internal technique that you, as a Frontpage user, can utilize but not valid in other applications.

Therefore there is no need for any kind of FP extensions or whatever that you speak of. The HTML file, two.html, simply already includes the code of one.html before you upload.

Secondly, I wasn't "knocking" users of Frontpage. You're certainly welcome to use whatever you wish. I have no problems with Microsoft or Frontpage or IE or Windows or anything like that. The reason I wouldn't recommened things like Frontpage or Dreamweaver or any other tool of that sort is because it ends up doing more harm than good. To best leverage those tools, you really need to have a good understanding of the languages you're using to code with them. For example, here you are recommending a Frontpage-only technique to people to solve problems when it probably wont work for them. These tools just foster misinformed coding, in my opinion. I suppose, as you say, every tool has it's inherent value but that doesn't mean they should all be used.

Anyway, that's enough off topic stuff. Back to the matter at hand.

@OverMachoGrande
Sorry that tech_support's tutorial didn't help you. Yes, you would have to have a little bit of an understanding of PHP syntax to grasp it. You wouldn't expect to pick up a German book and understand it at first glance, would you? Same thing applies to web languages.

Playing around with tech_support's tutorial will probably get you what you want. He's done a very good job there. Most things that need to be change are quite obvious (if he didn't state it in the explanation)...such as things named mypage.php, etc..

ExpressionEngine, again requires prior HTML/CSS knowledge...nothing more, nothing less. Again, it does have a learning curve but it doesn't get in the way of your markup at all. That's what I love about it. The design is totally yours. The part where the CMS kicks in is managing content. If you can't afford the few hours it takes to customize it, might I suggest any of the number of web template websites out there. That would save you a lot of time.

Lastly, regarding the .php tutorial. I'd again recommend going through tech_support's tutorial. Let me supplement it by this though. The basic PHP that you need to bring in external content into PHP is the include() function.

So, this:

<?php
include('sidebar.html');
?>
will add sidebar.html to wherever you add that code.

That code, along with this page (http://www.dynamicdrive.com/style/layouts/), should give you all the tools to make a very very very basic page to your specifications.

OverMachoGrande

04-14-2008, 12:20 AM

Medyman

04-14-2008, 12:58 AM

Medyman...

I got the PHP code you pointed out to me to work perfectly! ...And you may already know what I'm about to say: Now that it's a PHP site, it's going to be hard as crap to update! lol...

Tomorrow after finish my taxes, I'm diving head-first straight into a CMS system! Since Thursday or Friday, I've developed pretty strong CSS skills -and I've had decent HTML ones- so hopefully I can get ExpressionEngine to do exactly what I want it to, and I can just feed the information into the template I've already designed!

-O.M.G.

Well, a PHP side isn't inherently easier to manage than a basic HTML side. It's probably harder. But it does make edits easier. For example, if you want to make an edit to a menu and you have it included via PHP, then you only need to edit one file.

ExpressionEngine is a great tool, though. You'll have to forgive my almost blind admiration for it. ExpressionEngine has literally doubled my margins for my web design business, though. I don't have to mess around with developing custom CMSs for my clients, now. I don't like Joomla or Drupal. Wordpress is ok, but a pain to customize. So, I had developed my own. Long story short, EE is so much easier to customize and with EE 2.0 releasing this summer, it'll even be more amazing. It's going to be built on top of EllisLab's (the company behind EE) amazing CodeIgniter framework allowing for even greater capacity. The upgrade probably means nothing to the non-developer, but believe me, it'll make a HUGE difference in the community.

If you have any problems with EE, check out their forums. The people there are so amazing. I've never encountered as friendly and useful community as I have there.

sandyk3

04-14-2008, 04:38 AM

Here is a site for PHP tutorial. I like some of the others - I have not dabbled in PHP yet... not sure if I will.. scary!!

http://www.tizag.com/phpT/

OverMachoGrande

04-14-2008, 02:53 PM

Medyman...

I tried wordpress last week, and that is why I had reluctance to try any other CMS! Yep, couldn't customize it to my likings enough... I wish I had found ExpressionEngine first because I wouldn't have had any of these problems.

Of course, I use GoDaddy for hosting and I have a slew of other problems with ExpressionEngine since I set it up yesterday (and Wordpress when I tried it last week)... I've modified the .htaccess file, made a php5.ini, changed the $path_info, etc. and I still can't it get it to work right. SO...

...time to do something I should have done a long time ago and dump GoDaddy. I'm sick of having to tweak every little thing I do! Can anyone recommend any other hosting providers? ...Ones that *don't* have these problems (as well as ample storage space)?

Sandyk3...

Yeah, I ran across that! I worked through a good few pages and book marked it. Whether or not I get my site working though expression engine, I'm going to go back to that... I'm sick of not knowing PHP (and Java, for that matter).

-O.M.G.

Medyman

04-14-2008, 05:15 PM

I wish I had found ExpressionEngine first because I wouldn't have had any of these problems.

I know what you mean. I felt the same way when I found it. I wished I had found it so much earlier. It would have saved me so much grief and I probably would have made more $$ too because I've turned down jobs where I didn't have the manpower to do the programming required. Now, I have the manpower but we can focus on extending EE to do bigger and better things and not have to worry one bit about the underlying architecture.

We had a could road blocks once. I emailed EllisLab about it...it was more of a feature request than anything else. The next day I get an email from one of the lead developers with an extension he wrote just for our problem (I'm sure other people probably found it useful too). You can't get that kind of service with Wordpress. The WordPress support is ridiculous.

Anyway, in regards to hosting. My personal site is hosted on 1&1. I've been with them for domains for nearly 7 years and for hosting for about 4. Never had a problem! I have clients on PowWeb (they seem to like it, it has certain limitations though). The deal breaker there, for me, is that you can only host one domain name (even though they say you can do more). I also have several clients on Aplus. Again, they seem to be happy with it. I tell them to switch every chance I get. As I switch to more and more EE-based sites, I've been recommending EngineHosting to my clients. I have 6 clients on EH now. It's as amazing as ExpressionEngine. The support is amazing. Their control panel is a little lacking but they're working on it. It's a little expensive though, for just a casual website.

For a quality bargain host, I'd suggest 1&1 (what I use).