Hello. (^^) I hope I can ask my questions here; I don't know anyone who can build websites, so this forum is pretty much my last hope.
I'm still very new to building websites, and I wanted to ask some advice.
I build my sites entirely by hand (ie: I only use NotePad and nothing else), and this gets VERY tiring. It seems to take forever to build new pages and update things. I think that I need a WYSIWYG HTML editor, but the free ones that I found (PageBreeze, Nvu) suck.
So what I wanted to ask is:
1) Is there an editor that can do the following --
Open/read CSS files, display each class of code, and allow you to simply click-and-apply the code[s] you want.
"Read" all the JavaScript functions on a page, and give you the option to turn them on/off. (I currently have a code on all of my pages [except for the main frame]. It basically stops pages from loading outside of the frame; this is really annoying when I use [certain/100% cost-free] HTML editors.)
I made a picture/example of what I'm looking for. (http://hometown.aol.com/PTKouchan/stuff/html-editor-im-looking-for.gif) I really hope something like this exists (and if it does, I really need to know what these "features" are actually called).
If this type of program doesn't exist, then please: can you recommend a user-friendly, WYSIWYG program? (ie: Please don't recommend Dreamweaver or anything like that because it's not user-friendly at all. It has too many commands and windows...and I'm not ready for that yet. x_x)
2) Since I build sites in a very basic way, and since I'm not really an expert at HTML...I'm worried that my pages might be [for lack of a better term], "crappy (ie: the HTML code is incorrect; the codes I'm using are "old-fashioned" and are making my pages load slower, etc).
For instance, I use a lot of tables and frames (including iFrames), but I heard they're "bad" to use. Most people say that, instead of using tables and frames, you should use CSS (ie: DIV tags, positioning attributes, etc).
(By the way, why are frames and tables considered bad? With sites like this one (http://kodakumi.co.uk/index.php), if you click on each page, the same background/images/etc. will load each time. But with frames, none of that will reload. Only a section will change. This section is a new/basic webpage [which doesn't use a lot of HTML], and as a result, the page is smaller. And things load a lot faster.)
Basically...what other types of code should I be using? Should I use XML, XHTML, SQL, TPH? I want to have a site that's easy to load and update (also: my website will pretty much have the same content as the site I linked to earlier...and the owner of that site said he's going to be using PHP, SQL and TPH files...so maybe I should be using them as well? I dunno.)
Thanks in advance for any help you can give!!
ryanbutler
07-19-2008, 04:36 PM
So you want us to recommend an editor that isn't free but also not Dreamweaver, even though all the nice features that Dreamweaver has you want? You're going down a very strange and never ending path. Take some time, buy DW, take some more time and learn how to use it, you will not be sorry. No free editor will do all that anyway, at least not any I know about.
Why are frames and tables considered bad?
Frames don't get indexed properly by search engines, they are a pain in the butt to maintain, and they are relics of the 90's coding schema. Tables are inflexible unless you build them with CSS involved, which if you're going to take that much time to write a table with enough CSS to make it worthwhile, you'd be better off making a totally flexible layout with CSS and DIV's.
Basically...what other types of code should I be using?
If you don't have a firm grasp of HTML, then any server-side language such as PHP or database language like SQL will make your head explode. Take some time, research more into HTML, CSS, and JavaScript and once you have those mastered, or at least to an intermediate level, then hit the server-side stuff.
donatello
07-20-2008, 02:26 PM
Dreamweaver.
If you don't want to spend any money, you can try Amaya (http://www.w3.org/Amaya/), it's free (Open Source) and put out by W3C.
just_bri
07-21-2008, 01:43 PM
Hi again, and thank you both for your responses. I forgot to mention that I will be learning about Dreamweaver (and other HTML/Internet language aspects) very soon, because I'll be majoring in Web Design. =)
But...I wanted to start making my site before I take those classes (for one, I've been dying to get started on this site. Plus, for various personal reasons, I probably won't be able to start school for another 3-9 months). So that's why I asked for advice. I wanted to know why frames and tables are terrible to use, and (since I have limited HTML skills) what "user-friendly" programs exist for building websites. (@Donatello: Thanks for the Amaya link! I've actually heard of it before, but I didn't know exactly what it was. Anyway, I'll download it and try it out today. =)
But more specifically, I wanted to know what Taisetsu na Kumi e (http://kodakumi.co.uk/index.php) did to their site. My own website will basically have the same features (lyrics, news, discography, etc)...but unlike his site, mine will be dedicated to more than one artist. And if you click on a certain artist's name, the layout/background will "change". (In order for the layout/background to change, I assume I'd need to use a "CSS style switcher" code, like the one used on this site (http://www.sailormusic.net), right?)
Sorry to keep asking questions, but I really don't know who else to turn to...and I'd like to at least get started on something this month. =\
donatello
07-21-2008, 02:03 PM
The first page is in PHP.
The second page has a JavaScript that lets you change stylesheets.
The best way to learn is by playing with things, after all you cannot get burned with HTML too badly. :)
Get familiar with the OSWD (http://www.oswd.org) website, as there are lots of nice designs there that you can fiddle with and learn from.
In fact, the nonzero (http://www.oswd.org/design/preview/id/3560) design does exactly the stylesheet switch that you are seeking.
Read down the page to where it says:
Specifics about Nonzero1.0
* Posted by enks on 11.14.2006
* 44 comments
This design comes in the following low-sodium flavors: red, green, blue, magenta, and brown. Click on a color to see it in action (requires JavaScript).
Click on the colors. The stylesheet changes all the colors.
Your page only used little color bands instead of text... not a big deal to change.
Put that page into dreamweaver and start making changes to it to make it your own.
Have fun.
PS-
PHP is a server side scripting language that only works once - when the page is opened, they will not run on click (I've got them to do that by opening a popup with a PHP script though..).
JavaScript is a client side (runs on your PC) scripting language that can be called on click, mouseover or other event as well as on page load. JavaScript and Java are not the same thing.
just_bri
07-22-2008, 12:01 AM
About that CSS style changer: is JavaScript accepted by most/all browsers? 'Cuz I heard there's a PHP version of the style changer as well, but I'm not sure which one would be best to use.
And yeah, I definitely intend to play around with anything that I learn (it helps me remember things, plus I tend to add my own flair once I understand what's going on). Thanks for that OSWD site (and explaining what PHP and everything means); I really appreciate it!
I have some more things I wanted to ask. I'll start off with this: I want my site to have regularly updated content. Right now, I update my site once every 1-2 months. It's been this way for two years, and I think people expect that now.
Usually when I update the site, it's just to include new lyrics or a new CD. But now I also want to add information on their TV appearances, award nominations, etc. -- anything new and interesting about the artist. I can go to forums and gather all the info I need, so I wouldn't need to work super hard to get info. And I think I know how I can post the information to my site: the owner of "Taisetsu na Kumi e" (along with other people) post news updates with a program called CuteNews (http://cutephp.com/), which I think I'll use too.
But I was wondering: since people are used to visiting my site only once a month, how can I let people know, "Hey! Check out my site at least once a week now!"? I don't want to send a newsletter out each time; that could annoy people after a while. But I was thinking that maybe I can use RSS or something? (Or is that really a waste? Should RSS only be used by BIG, important websites? Maybe I just need to state on the main page that the site has changed and that new info will be released every week?)
And on the subject of RSS:
1. Do you really need an RSS reader to view RSS documents? Don't browsers like Firefox already have them installed?
2. Between RSS, XML, and RDF, which do you think is better/more supported? Or does it really not matter?
Lastly, I have a CSS-related question:
I now understand that CSS is better and less quirky than actual frames. But do CSS "frames" load faster (and are they easier to maintain) than actual frames?
For instance, let's say my old site looks like this:
Example Picture (http://hometown.aol.com/PTKouchan/stuff/frames-ex.gif)
There are 5 pages (including the actual frame). All of the pages together are 97 KB. If that was one page, it would take a looong time for it to load...but since it's in frames/"sections", it shouldn't take as long to load, right?
Well, if I did the same design with CSS, would there still be 5 pages? Or would it be one, large 97 KB page? Won't that take a long time to load? (I'm just trying to understand if CSS loads things faster than frames, or if it's the same speed? And I really hope it's not harder to manage.)
I have a few more questions I want to ask (in regards to font size, and Flash), but I'll ask them later on. I'm sure this current post is large enough, LOL.
Thanks again!! =)
adolfo.live
07-22-2008, 03:38 AM
Thanks for the post .......very useful.........
sad1sm0
07-22-2008, 11:24 AM
One of the great things about a server side script like php is the ability to bring multiple files into one frame.
looks something like this
<?php
require_once('topofmypage.php');//could use topofmypage to set
//variables that instruct the rest of the page to load a certain way
require_once('mymenu.php');
?>
<div class="content">
Page Content goes here
</div>
The cool thing about this is that you can set up one template and include it in each page with one line instead of copying and pasting and all that nonsense. Also the topofpage.php can have all sorts of different ways it displays based on what page it's on, what the user has done since last server request, etc etc.
A CSS switcher with php would be very easy. something like this
<?php
$pg = $_SERVER['PHP_SELF'];//a server side variable with the name of the page currently loaded... includes a forward slash
switch($pg) {
case '/index.php':
include_once('index.css');
break;
case 'page2.php':
include_once('page2.css');
break;
}
?>
Just put something like that somewhere in the head of topofmypage.php. I wouldn't include the css right into the file myself, but it works. You can create functions and stuff to make it a lot neater but that's the basic jist of it. One key point about php that separates it from js is that it needs a server with php installed and available to you for it to run. Otherwise, you will just output a bunch of nonsense to your viewers. there are free sites that offer hosting like trap17 ('http://www.trap17.com'). Anyway, have fun
sad1sm0
07-22-2008, 11:46 AM
oh... and in response to why are frames and tables bad.
tables aren't bad if used properly... to display tabular data
However, all to often people use tables to style there sites. This creates messy inaccessible markup. for example, which do you think is easier:
<table border="0" cellspacing="0">
<tr>
<td>Some information here</td>
<td>Some more over here</td>
<td>Some more information</td>
</tr>
<tr>
<td>And now we're on a new row</td>
<td></td>
<td>I just skipped a cell</td>
</tr>
<tr>
<td>I think you get the point</td>
<td>It's cumbersome</td>
<td>
<table border="1" cellspacing="0">
<tr>
<td>And then you have </td>
<td>nested tables</td>
</tr><tr>
<td>which would give you the abiltiy</td>
<td>to break up on td into multiples</td>
</tr><tr>
<td>but at the expense</td>
<td>of even more markup</td>
</tr>
</table>
</td>
</tr>
</table>
or this:
<div class="left">
I can put any style I want to this division of the page
and justify it left or right and keep it nice and neat with
almost no mark up
</div>
<div class="middle">
It's much neater and easier to read. Plus when people use tables for
styling I think it is harder to find related information. This way
accessiblity is kept for things like screen readers and search engines
</div>
<div class="right">
tables are great for displaying data that should be in a table but not for
design. They are so messy and difficult to update
<div class="nested">Also, You have the same ability with divs that
you have with tables in that you can nest them. Difference is that
nested divs are more flexible.
</div>
</div>
you can also make your divs stack top to bottom or just place them anywhere on the page with position:absolute or relative in your css
note:In order to have two or more divs side by side you need to assign the float property in css and a width. The default width is 100% of page
just_bri
07-22-2008, 11:36 PM
Hello sad1sm0, and thank you for your responses. =)
(@adolfo.live: I'm glad you found this thread useful! If other people can learn from my previous mistakes, it's a good thing.)
Also, I think PHP (for the most part) is a bit...advanced for me right now. (Thanks for trying to explain it to me, though!) But I would like to try that PHP CSS switcher.
By the way...how would I link to the switcher? Suppose that I want to switch CSS files everytime you click on these links:
Change Layout to: Blue Version | Green Version...What would the <.a href> tag have in it? Would there be some sort of onClick command?
I wouldn't include the css right into the file myself, but it works.? - You mean that the CSS should be in an external file, right? (And not included in the PHP file with <.style> tags?) If that's what you mean, then no worries: I was planning on using external files anyway. (But is there a way I can have TWO [or more] internal sets of <.style> tags [in the same PHP file] and make them switch back and forth?
Mind you, I won't be using internal CSS...but I was wondering if it's possible to do this. =)
One key point about php that separates it from js is that it needs a server with php installed and available to you for it to run. Otherwise, you will just output a bunch of nonsense to your viewers.
That said...is there a specific directory I need to upload the files to? Or should they go in the same directory that the rest of my site will be in?
In case this helps...here are all the default folders that came with my site. Please tell me if my PHP files should go in one of these folders:
anon_ftp
bin
cgi-bin
conf
error_docs
httpdocs <-this is where my website is stored.
httpsdocs
logs
pd
web_users
@tables: when you say "tabular data", you mean numbers and statistics and stuff like? Like the sort of stuff you'd do in MS Excel? These are the only things that should be inside of tables?
Also, I can see how DIVs look a LOT better. Plus they reduce page size, 'cuz all those <.td> , <.tr> , etc. tags take up space.
But you never did tell me: if I wanted to make CSS "frames", would I have to make multiple pages...or would all the information be on one page?
I have yet another question -- META tags (like the ones you use to enter keywords for your website). Are they still in use? 'Cuz I heard that they're becoming obsolete now.
Lastly: I really want to use an internal "pop-up", like the one on this site (http://www.ornj.net/araneae) (click on the screenshots to see it). Apparently, it's called Lightbox.
How would I make this? Is there a script I can install/edit? And...how can I use it to display text instead of images?
Centauri
07-23-2008, 12:33 AM
Have a look at A List Apart (http://alistapart.com/topics/code/css/) - there is heaps of articles there, including javascript and php stylesheet switching.
sad1sm0
07-23-2008, 01:22 AM
Have a look at A List Apart (http://alistapart.com/topics/code/css/) - there is heaps of articles there, including javascript and php stylesheet switching.
I love that site. So many awesome ideas.
sad1sm0
07-23-2008, 11:08 AM
ok so last night i made a post but it never showed up. Weird... so I'll try to answer your questions again now.
Also, I think PHP (for the most part) is a bit...advanced for me right now. (Thanks for trying to explain it to me, though!) But I would like to try that PHP CSS switcher.
php is a very powerful tool for web development. Having said that, there are some elements of simplicity that even the n00b should have no problem using.
As far as the switcher goes, I will give you a couple of possibilities, although to be honest, there's always more than one way to crack an egg... and in this case... there are probably dozens
<?php
//PHP_SELF is a server side variable for the current script you are
//executing. This means that you can include this script inside of
//different pages and it will handle different ways
switch($_SERVER['PHP_SELF']) {
case '/greenpage.php':
$style = 'green.css';
break;
case '/bluepage.php':
$style = blue.css';
break;
default://a default value is always a good idea just in case none of the others match
$style = 'default.css';
break;
}
printf('<link rel="stylesheet" type="text/css" href="%s" />',$style);
?>
name this file something like styleSwitch.php or something
you would include (or require) this script inside of the head element of each page like so
<?php
require_once('styleSwitch.php');//Of course you would have to define the path if your script is being used in a different directory
?>
Another method would use the link idea to switch the style on the samepage.
What would the <.a href> tag have in it? Would there be some sort of onClick command?
No. The server does not respond to client side events. In order to get the server to do something, we will send the server a query string requesting that the style be switched like this:
when you click the link it is going to refresh the page with the query string attached to the url in the location bar.
in the head of the page you would something like this
//this code will only be executed if the user has activated the
//style variable in the query string by clicking the link
//you should also define a default stylesheet
As I said... these are just a few of the many different ways you could achieve the same result
? - You mean that the CSS should be in an external file, right? (And not included in the PHP file with <.style> tags?) If that's what you mean, then no worries: I was planning on using external files anyway. (But is there a way I can have TWO [or more] internal sets of <.style> tags [in the same PHP file] and make them switch back and forth?
Mind you, I won't be using internal CSS...but I was wondering if it's possible to do this. =)
Yes... you could use the same above code with a few modifications that would replace the <link> tag with actual css.
Quote:
Originally Posted by sad1sm0
One key point about php that separates it from js is that it needs a server with php installed and available to you for it to run. Otherwise, you will just output a bunch of nonsense to your viewers.
That said...is there a specific directory I need to upload the files to? Or should they go in the same directory that the rest of my site will be in?
In case this helps...here are all the default folders that came with my site. Please tell me if my PHP files should go in one of these folders:
anon_ftp
bin
cgi-bin
conf
error_docs
httpdocs <-this is where my website is stored.
httpsdocs
logs
pd
web_users
PHP works throughout your file structure and can actually access your files much faster than an html file could because it's running on the server and doesn't need to go thru the http protocol.
Tables
Yes table are used for information just like that. They organise there data in rows and columns, just like excel. This is another reason i think they are not good for design. Pages that use tables as a design structure usually end up looking blocky. And yes, you are absolutely correct in file size. Pages that are coded correctly are much more likely to load quicker.
But you never did tell me: if I wanted to make CSS "frames", would I have to make multiple pages...or would all the information be on one page?
I'm not sure what you mean by css frames... But any time you use frames you require at least 3 files. 1 is the frames page (index.html would actually not contain any information inside of it... just refrences to the "menu" and the "data" .html files)
One downside with this method is the appearance. I personally think that frames really take away from the design and flow of a web page. Not to mention I'm not sure how well a framset page is indexed by search engines. I would be concerned that google might find more relevance in data.html than in index.html and you don't want to send users to a page with no menu.
css can give the appearance of frames without the mark up
</style>
</head>
<body>
<div class="banner">Banner for Site Goes Here</div>
<div class="menu">Menu Goes here (use a ul or something.)</div>
<p>You could actually wrap this in a div if you wanted but for simplicity
sake I didn't do that here. If you did, you would need to specify a
width and float property</p>
</body>
</html>
Lastly I will try to clarify <meta> tags
Most of them are obsolete. However, some are still used by indexing search engines
The main one i'd worry myself with is
<META name="description" content="brief description of what kind of information will be found on the page" />
some others that are used by some engines but not most are:
name="keywords" keywords that you want to be indexed for searches not used by many search engines any more
name="robots" instructs the search engines robots to not index when you set content to "noindex"
That's probably about it. I think i got all of your questions
just_bri
07-25-2008, 12:06 AM
@Centauri: Thanks for that "A List Apart" site. It seems very interesting (although so far, all I've seen is a bunch of blog-like entries...but I'm still searching around).
@sad1sm0: Thank you so much for the PHP switcher! =)
I have a question about this part, though:
default://a default value is always a good idea just in case none of the others match
? - I don't understand what you mean. By "the others", you mean, "the other links"...as in "EVERY link on the site that doesn't have a query string will follow this default CSS"? Or do you mean that "the default CSS will be used only if someone's browser rejects 'green.css', etc.?"
Or...did you mean something completely different?
This part kinda confused me too:
//PHP_SELF is a server side variable for the current script you are
//executing. This means that you can include this script inside of
//different pages and it will handle different waysIn what ways can it be handled differently? Will it act however it wants to (ex: I specifically mention in my CSS file that all links are supposed to be green, but your browser decides to make them orange instead)?
Lastly, I need some clarity on my PHP directory. Let's say this is my website:
http://www.happy.com/yourlife
My website is "happy.com" (and it deals with T-shirts). But I wanted to make a "sub-site" called "Your Life", hence why I made that sub-directory.
My PHP switcher will only be used on the "Your Life" site...so should I upload it to the "yourlife" directory, or would I save it directly in the main directory (ie -- save it inside of http://www.happy.com/)?
CSS Question (Continued):
When I said "CSS 'frames'", I meant something like this:
Example of Frames (http://hometown.aol.com/PTKouchan/stuff/frames-ex.gif)
If I were to make this page with regular/traditional frames, there would be four pages:
1) The actual frame (my-frame.htm)
2) The menu (page1.htm)
3) The header (page2.htm)
4) The rest of the site (page3.htm)
If I made that same layout with CSS, wouldn't all 4 sections be on ONE page? (I hope not. 'Cuz all of those sections would make one massive page).
As a real-life example: this site right here uses CSS 'frames' (http://www.cssplay.co.uk/layouts/fixit.html). And isn't ALL of that information on ONE page? (Again, I hope not...because I really don't want my pages to be super big 'cuz that means they would take a while to load).
I also have some questions about font (as well as Flash and Dreamweaver [which I'll ask later on], and then I'm through):
Font Question:
I heard that mentioning specific font sizes (ie: <.font style="font-size: 12px".>) is bad. Why is this?
I like giving specific font sizes because if a DIV/table is a certain width, then the font should be a certain size as well. Otherwise, it'll cause an overflow problem and it might mess up the page (ex: if my DIV is 300px wide, size 36 font wouldn't fit properly...but size 12 should). Plus, if you want to make the font bigger, you can do it at your own risk by going to "View" and making the page larger.
But still...I've heard that giving a specific/mandatory font size is "wrong", and I don't understand why. Could you tell me, if you don't mind? =\
Windows XP Question (also related to Font):
This is a bit off-subject, but...I have two computers at home. One is old (it has Windows 98 on it), and the new one has Windows XP. The Win XP computer acts strange with fonts.
Basically, it leaves "residue" around any font I type, no matter the size. And I usually have this problem with MS Paint & MS Word (Maybe it's some form of anti-aliasing [assuming I used that term correctly]?)
Whatever the default background color is (ie: the color of the background BEFORE I type anything), the font will look fine on it. But if I change the background color, the font will look weird:
My Font Issue (http://hometown.aol.com/PTKouchan/stuff/white-residue.gif)
In this picture, I originally typed the font on a white background. But when I changed the background to purple, it left white "residue". If I type the font on a red background, then change the background, there will be red "residue" on the font, and so on. This is really annoying, and I don't have this problem on my old Win 98 computer. But that computer doesn't have a Flash drive (or a CD-R drive, or the Internet anymore), and the new computer doesn't have a floppy disk drive. So there's no way for the two computers to interact...which means I have to use the Win XP one now.
Is there some way I can fix this "residue" problem? Do I need to go to the Control Panel and change something? Or maybe it's a font problem, and I need to find the "Win 98 version" of ALL the fonts on my computer?
Centauri
07-25-2008, 01:41 AM
Re: the frames issue. Having the header and menu as part of each page is the normal way to do it (even if you have these in separate files and include them via SSI or PHP, they are still a part of the html page). If all visual styling of these is done in an external linked css file, then the browser will cache any images and css resulting in no loading delay between pages. This site (http://www.tchc48-78.com/) is based on one of Stu Nicholls' "frames" type layouts (layout 2), and you will notice the header and menu do not reload between pages.
Many consider setting pixel font sizes to be bad because IE doesn't allow resize on them. Decent browsers give the user control of font size, so I don't see any problem with it - if a user wants to be able to easily change font sizes, then they shouldn't be using IE...
just_bri
07-27-2008, 12:31 AM
Hi again,
For the past few days I've been trying to make CSS "frames" (by using DIV tags), and I'm having some major problems (http://www.geocities.com/bri_lady7/site-help2/my-frames-layout.html).
Basically, DIV commands are very tricky and totally different from tables. I thought they'd basically have the same concept, but I see that I'm wrong. I don't quite understand how the position:/float:/etc. attributes work, and I'm not sure what "order" the DIVs are supposed to be in.
That page I just linked to will show you the format I'm trying to create (I did this one with tables and an iFrame), plus it'll show the DIV page I tried to make (http://www.geocities.com/bri_lady7/site-help2/my-modification.html) (which only looks somewhat correct in IE). I need help making these DIVs...and from the looks of it, I might need step-by-step help. I'm not even sure how an HTML editor would make DIVs for me...I can't "draw" them onto the page in WYSIWYG format, can I? And even if I did draw them, I'd still have to tweak the code. For instance, when I used tables, I had to include the "colspan" attribute. All the WYSIWYG editors I've used don't have a "colspan" option; I have to manually type this in...which annoys me, and makes me stop using that particular editor. I figure if I have to type some of the code myself, why bother using an editor in the first place? I might as well use NotePad and call it a day.
So there you go: I need assistance with this DIV tags. In fact, since I literally see all web layouts as "tables"...is there a program out there that will "wean" me off using tables? Maybe it compares DIVs and tables (so I can see the similarities -- and differences), then it'll use examples of both and slowly force me to abandon tables altogether. (I hope what I'm asking for makes sense.)
Please help. ><;;
Centauri
07-27-2008, 12:58 AM
The first thing you will need to do is NOT USE GEOCITIES AS A HOST.. it adds frames and javascript before the doctype, which drops browsers into quirks mode - you need a host that does not add invalid crap to your code.
just_bri
07-27-2008, 04:34 AM
Oh my actual site won't be hosted on GeoCities; I just used them for my "help wanted" page because their site is easy to access.
I can find another location to host it at. Just give me a sec. =)
EDIT: My friend let me host it on her Google Pages account (hopefully it won't cause any problems) --
The problem I'm having (http://twinkle.starr.13.googlepages.com/my-frames-layout.html)
eloquentBohemia
07-27-2008, 05:45 AM
The site you linked to which you woul like your own site to look like is built in what's called a liquid design, in other words, it will fit the width size of whatever resolution a veiwer is using on their computer (i.e.: 1280px, 1024px, etc.). Think of the entire site like a ballon which will fit inside the sidewalls of any box.
A div is fundementally a 'division' of the HTML page which you can define anyway you want in the CSS (Cascading Sheet Style).
HTML is the structure of the page, like the walls/floors/ceilings of a building and the CSS is the width, height, colors, etc of these walls/floors/ceilings.
You keep the HTML and the CSS seperate from each other for a couple of main reasons: one is to not have so much code on the page which makes it load much faster and two, so you can change elements across the entire site by changing a few lines in the CSS.
Like if you wanted to change the background color of every page from green to red, all you would need to change in the CSS is the background-color attribute to the Body element and every page color would change.
To construct your site to look like the one you like, you would first need three main divs: one for the top, one for the middle and one for the bottom; each of them 100% wide and whatever height you wanted.
Then the middle div would need three divs inside, each 30% wide.
Two of these inside divs would float left, which means just what it says: the smaller divs will float to the left side of the larger div they are inside of; one beside the other.
The third inside div will float to the right.
So now you have taken up 90% of the width of the middle div.
Next you add a 2% padding to the left sides of each of the smaller inside divs floating left. This makes each of them 32% wide. Then add 2% to the right side of the div which floats right which makes it 32% wide.
Now all three divs now take up 96% of the entire middle div.
There will be a 4% gap between the second left-floating div and the right-floating div, which is okay for now.
So, no matter what width the screen size is of whoever is veiwing this layout, the entire site will always be 100% of the width with three columns in the middle div.
Granted, this is a very simplified explanation of CSS and HTML, as there is much more to it, but I hope it illustrates the basic idea.
Centauri
07-27-2008, 09:45 AM
When getting away from table layouts, you also have to modify the thinking somewhat. With table layouts, the overall visual structure is laid out first, and the content (including visual enhancement graphics) is fitted into that. Modern website layout concentrates on the content as the priority. The html should semantically describe the content only (there are more things that access a site than visual browsers), with the visual look (including graphical elements) handled by css styling. Divs are no different to any other block element (headings, paragraphs, lists, forms etc) except they are semantically neutral (don't have any html meaning) which makes them useful for logically grouping content. Any element may be styled and positioned in css, and need not be enclosed in a div (or span) just to do so. It is possible to build a whole site without using a div, but this can reduce the number of "hooks" to apply styling to.
That layout of Stu Nicholls' you linked to is not the best to use for a new site - besides the non standard scrollbar size (most users normally expect the scrollbar to be full height of the window), it relies on quirks mode for IE. Whilst IE7 can comfortably handle the method of stretching an absolutely positioned div by specifying all four sides coordinates, IE6 cannot do so. The only way to get IE6 to work with this is to put it in quirks mode which uses the outdated box model. Unfortunately, this also puts IE7 (and later) into quirks mode and forces it to use the IE6 hacks when it doesn't really need it. There is also no guarantee this will continue to work in future versions of IE. A better layout to use would be Stu's Layout2 (http://www.cssplay.co.uk/layouts/body2.html) - normal looking scrollbar, "frames" type emulation, and runs in standards mode.
To implement this technique with your layout, first mark up the content starting with a valid doctype (I usually recommend html 4.01 strict as being the most appropriate for new sites) :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>"Frame" Layout test</title>
</head>
<body>
<h1>Site Heading</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>-Menu-</h2>
<ul>
<li><a href="#">Artist 1</a></li>
<li><a href="#">Artist 2</a></li>
<li><a href="#">Artist 3</a></li>
<li><a href="#">Artist 4</a></li>
</ul>
<h2>Main Content</h2>
<p>This is the main content area of the page</p>
<p>My Newest Website. Copyright 2008.</p>
</body>
</html>
This basically sets the content using semantic markup (headings, lists of links for menus, paragraphs for blocks of text, etc) which describes the content no matter what it looks like. From there we can logically group some of those elements with divs - the <h1> and first menu list can be enclosed with a "header" div, the first <h2> heading and second menu list enclosed with a "sidebar" div (as all this will be to the side), the second <h2> and content paragraph(s) enclosed with a "content" div, and the footer content enclosed with a "footer" div. The html will then look like :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>"Frame" Layout test</title>
</head>
<body>
<div id="header">
<h1>Site Heading</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="sidebar">
<h2>-Menu-</h2>
<ul id="sidenav">
<li><a href="#">Artist 1</a></li>
<li><a href="#">Artist 2</a></li>
<li><a href="#">Artist 3</a></li>
<li><a href="#">Artist 4</a></li>
</ul>
</div>
<div id="content">
<h2>Main Content</h2>
<p>This is the main content area of the page</p>
</div>
<div id="footer">
<p>My Newest Website. Copyright 2008.</p>
</div>
</body>
</html>
I also gave the side menu list an id here in case there may be other lists within the sidebar div that may need to be styled differently. Visually, the addition of these divs makes no difference, nor do they have any effect on the content meaning, but will be very useful for styling this.
Discussion continues next post.
Centauri
07-27-2008, 10:19 AM
When applying styling to a site vis css, it is best to use an external css file linked to each page - this provides consistency throughout the site and only one file needs to be edited to effect site-wide visual changes. The <head> section of the html with a stylesheet linked would look like :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>"Frame" Layout test</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
To start the styles.css file off, set a few base styles :* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
margin-bottom: 1em;
}This starts with the universal selector to zero all browser-applied default margins and paddings for an even start point. The html and body elements are given 100% height to ensure they are locked to full screen height, and the hidden overflow ensures the default scrollbars are hidden. The body just gets whatever base font type and size you want, including any background and text colours if needed. The <p> tag gets a bottom margin as the defaults were stripped previously (I avoid a top margin so I don't get problems with margin-collapse pulling containers down).
Going down the page, the header area can be styled :#header {
height: 50px;
background-color: #FC0284;
position: absolute;
width: 100%;
right: 18px;
background-image: url(images/upper-left.gif);
background-repeat: no-repeat;
background-position: 18px top;
}
#header h1 {
font-size: 20px;
text-align: center;
padding-left: 18px;
background-image: url(images/upper-right.gif);
background-repeat: no-repeat;
background-position: right top;
line-height: 30px;
}
#header ul {
padding-left: 18px;
text-align: center;
}
#header li {
list-style: none;
display: inline;
border-right: 1px solid #FFF;
}
#header .last {
border: 0;
}
#header a {
text-decoration: none;
color: #FFFFFF;
padding: 0 5px;
font-weight: bold;
}
#header a:hover {
color: #FFCCFF;
}Here we absolutely position the header (as the content area will need to scroll up under it), and set its height, width and background colour to suit. It is moved 18px to the left by setting the "right" attribute (so that it will not cover the scrollbar which will be added later). The top left corner graphic can be a background to this div, and is positioned 18px from the left edge as the whole div has been pushed 18px to the left.
The <h1> heading, being a block element, will naturally expand to the full width of the container, so the top right corner graphic can be applied as a background to it. A left padding of 18px makes up for the fact that the whole header is 18px to the left, and the center text-align will position the text in the centre correctly. The line height gives the space to the menu below.
The menu <ul> also gets 18px left padding so that the menu items will be centred correctly. The <li>s have the bullets removed via the list-style, and display set to inline so they sit side by side. A right border provides the vertical lines between menu items, and this border is removed from the last <li> via the .last style. The <a> links get some side padding for spacing, and colour styling (including the hover colour).
Discussion continues next post.
Centauri
07-27-2008, 10:46 AM
The sidebar can also be positioned absolutely, and the "top" attribute can be used to set the correct vertical position :#sidebar {
position: absolute;
left: 0px;
top: 50px;
width: 100px;
padding: 10px;
}
#sidebar h2 {
text-align: center;
font-size: 130%;
font-weight: normal;
}
#sidenav {
}
#sidenav li {
list-style: none;
}
#sidenav a {
text-decoration: none;
color: #000000;
}
#sidenav a:hover {
text-decoration: underline;
}A width and padding gives the total width of 120px. The <h2> heading and #sidenav <ul> elements are styled as appropriate.
Turning to the footer, this is also absolutely positioned as the content will need to scroll under it :#footer {
position: absolute;
width: 100%;
height: 50px;
right: 18px;
bottom: 0px;
background-color: #FC0284;
background-image: url(images/lower-left.gif);
background-repeat: no-repeat;
background-position: 18px top;
}
#footer p {
height: 50px;
margin: 0;
line-height: 50px;
text-align: right;
padding-right: 30px;
color: #FFFFFF;
background-image: url(images/lower-right.gif);
background-repeat: no-repeat;
background-position: right top;
}Setting the "bottom" attribute to zero positions the footer at the bottom of the page. As with the #header, the #footer is shifted left so that it does not cover the to-be-added content scrollbar. Also as per the header, the left corner graphic is a background 18px from the left edge.
The footer paragraph, as with the header h1, will naturally expand full width and gets the bottom right corner graphic as its background. The right padding combined with the right text-align positions the text horizontally, while the line-height equal to the paragraph height centres the text vertically.
Now we turn to the content div. This does not need to be absolutely positioned, and the height can be set to 100% (which will be full screen height). A left margin spaces it to avoid the side column, and a left border provides the dotted divider line. Setting the overflow to "scroll" will force the scrollbars to always appear (like IE does normally), thus filling the gaps beside the header and footer. Setting overflow-x to "hidden" removes the bottom horizontal scrollbar on those browsers that support it (Opera does not support overflow-x or overflow-y, so the bottom scrollbar remains, but it is mostly hidden by the absolutely positioned footer anyway, so it is not a problem).#content {
height: 100%;
margin-left: 120px;
border-left: 1px dotted red;
padding: 0 10px;
overflow: scroll;
overflow-x: hidden;
}At this stage, you will notice that the content text is not visible - as the #content div is 100% screen height, the content text is actually up behind the #header div. Padding cannot be used on #content as this will increase the height, so a couple of padding divs need to be added to the html (not really all that semantic, but not really avoidable) - one before the content to space it down below the header, and one after the content to ensure content does not remain hidden behind the footer when scrolled. The modified html around the content div, including the padding divs and extra dummy lorem ipsum text paragraphs to show the scrollbars is :<div id="content">
<div class="pad"></div>
<h2>Main Content</h2>
<p>This is the main content area of the page</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="pad"></div>
</div>
Discussion continues next post.
Centauri
07-27-2008, 10:49 AM
As the header and footer are the same height, the padder divs can be the same size :#content .pad {
height: 60px;
}
The entire css file will then be :* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
margin-bottom: 1em;
}
#header {
height: 50px;
background-color: #FC0284;
position: absolute;
width: 100%;
right: 18px;
background-image: url(images/upper-left.gif);
background-repeat: no-repeat;
background-position: 18px top;
}
#header h1 {
font-size: 20px;
text-align: center;
padding-left: 18px;
background-image: url(images/upper-right.gif);
background-repeat: no-repeat;
background-position: right top;
line-height: 30px;
}
#header ul {
padding-left: 18px;
text-align: center;
}
#header li {
list-style: none;
display: inline;
border-right: 1px solid #FFF;
}
#header .last {
border: 0;
}
#header a {
text-decoration: none;
color: #FFFFFF;
padding: 0 5px;
font-weight: bold;
}
#header a:hover {
color: #FFCCFF;
}
#sidebar {
position: absolute;
left: 0px;
top: 50px;
width: 100px;
padding: 10px;
}
#sidebar h2 {
text-align: center;
font-size: 130%;
font-weight: normal;
}
#sidenav {
}
#sidenav li {
list-style: none;
}
#sidenav a {
text-decoration: none;
color: #000000;
}
#sidenav a:hover {
text-decoration: underline;
}
#content {
height: 100%;
margin-left: 120px;
border-left: 1px dotted red;
padding: 0 10px;
overflow: scroll;
overflow-x: hidden;
}
#content .pad {
height: 60px;
}
#footer {
position: absolute;
width: 100%;
height: 50px;
right: 18px;
bottom: 0px;
background-color: #FC0284;
background-image: url(images/lower-left.gif);
background-repeat: no-repeat;
background-position: 18px top;
}
#footer p {
height: 50px;
margin: 0;
line-height: 50px;
text-align: right;
padding-right: 30px;
color: #FFFFFF;
background-image: url(images/lower-right.gif);
background-repeat: no-repeat;
background-position: right top;
}
Have fun!
just_bri
07-28-2008, 09:20 PM
@eloquentBohemia: Thanks for the new term! I didn't know it was called "liquid design".
@Centauri: THANK YOU THANK YOU THANK YOU!! =D
Questions:
1) Is there some way I can put the sidebar text in an external CSS (or JS) file? In the future, I'll probably add more artists to my site. With this current layout, that means I'll have to update EVERY page on my site. (x_x) I'd like to add the artist names in some sort of external file, then have the page (and the "sidebar" DIV) read/display that file. Is this possible?
Also: The top menu section is going to incorporate a "drop-down menu" (DHTML?), kinda like the one on this site (http://www.scriptforest.com/). In the future, I might change some of those links as well. Is there a way I can put the menu text in an external file (or does the DHTML code already store the text in a separate, external file?)
2) When I want to create a DIV, do I need to create the DIVs in order of appearance (top to bottom, left to right)? With the site we just made, you wrote the DIVs *exactly* like that: header, sidebar, content, footer. But let's say, on the HTML document, I typed the header and footer tags first (because those DIVs have less content in them, and I wanted it in order from smallest to largest DIV).
Would that mean that I'd need to use a LOT more code (extra padding, different positioning, etc.) so the footer will stay at the bottom? Or would all those numbers stay the same? (ex: for the footer, you wrote that DIV last, and you wrote right: 18px and padding-right: 30px. If I wrote my footer as the second DIV [as opposed to the last DIV], would its values change to, say, right: 48px and padding-right: 48px or something like that?)
3) Just curious -- there's no way to make the scroll bar the exact same height as the content DIV? (It looks as though the regular, full size scrollbar is there...even though this scrollbar is strictly controlling the DIV section.)
4) If I minimize the page, I can see part of it "scroll" in the footer section. (I've noticed this on Stu Nichol's site as well.) Is there a way to prevent this, or no?
If none of these things can be done, then that's fine. (But I thought I'd ask 'cuz I'm curious to know. =)
And:
5) Why do you need to start HTML documents with <.!DOCTYPE>? I usually just type <.html> and go. (I know this is wrong, but I never really knew why.)
And is there a site that explains each doctype (HTML Strict, XHTML Transitional, etc.) and when I should use each one? All the sites I've found so far...well, they're a bit technical.
6) What's "quirks mode" exactly? Does "IE letting you change scrollbars with scrollbar-color count as a quirk? (I know Firefox and other browsers deem that as "incorrect" coding.) O.O
7) In the CSS file, why did you start it with *{}? What's the asterisk for? Does it mean "the following code should be read by ALL browsers"?
8) I've noticed that in your code, and other sites, that hardly anyone uses the <.br/> tag (instead you used <.p>)? Is <.br/> obsolete? =O
9) How did you come up with all these values (right: 18px, padding: 0 5px, etc.)? Did you have to manually guess-and-check each one, or do you have some sort of program that displays each page (in real-time/WYSIWYG format)...and from there, you'd drag the DIVs to the exact position you want?
One more thing: I also want to use this layout (http://www.freecsstemplates.org/preview/primitif) for one of the artists on my site. (The good news, they offered a pre-made template. =) I've already started manipulating it, but I'm having a few issues:
-The page I came up with (http://twinkle.starr.13.googlepages.com/index.html)
-My CSS file (http://twinkle.starr.13.googlepages.com/default.css) (the original, unchanged CSS file is here (http://twinkle.starr.13.googlepages.com/original-style.css))
1) I made all of the sections cover 90% of the page. But for some reason, I can't change the content section. It's still set at 440px. =\
2) Is this document using some sort of "hidden" file? 'Cuz I noticed that the content area (ie: the menu + main page) has green bars inside of it. In fact, the whole layout has that green bar running across it...but I don't see it mentioned anywhere in the code. (o_O) How'd that happen? (There's also a "spacer.gif" file. I don't see that being used anywhere. So can I delete it, or no?)
3) Is the rest of the code "acceptable"? (It's not using quirks mode, is it? And there aren't any other errors?)
NOTE: I have one more set of (actually short, and un-related) questions to ask.
just_bri
07-28-2008, 09:21 PM
Font Question:
I never did get an answer to this:
My Font Issue (http://hometown.aol.com/PTKouchan/stuff/white-residue.gif)
...I'm having a problem with fonts and Microsoft Paint.
My computer uses WinXP. If I type the font on a certain background (ex: white), then I change that background (to purple, for instance), I'll have "residue" from the original background. So if my background was red, then I changed it to black, the font would have red "residue" around it, etc.
My old computer uses Win98, and I don't have this problem. What can I do...should I find/replace all the XP fonts with the ones on my Win98 computer? Or is there some sort of option I can change in my Control Panel?
Flash Question:
I'd like to have an MP3 player on my site, but I can't find the perfect one. Basically, I want it to slide open (http://www.macloo.com/examples/audio_player/) like this one...but I want it to be small (http://flash-mp3-player.net/players/maxi/) (and have volume controls) like this one. So what I want to do is either find someone who can make it for me, or find a way to make it myself.
1) Are there any Flash communities that take software requests (for free, or for hire)? And what forums can I go to for Flash help?
...I somehow get the feeling I'll have to make this program myself, so I was wondering if there's someway I can read the code for those 2 Flash players I linked to? What programs do I need to use? (I heard that with Flash programs, I need to decompile it or something? What would I use?)
PS: I had started watching this tutorial (http://www.gotoandlearn.com/player.php?id=37) (the rest of the tutorials can be found on this page (http://www.gotoandlearn.com/)), but I don't like that Flash player at all -- it looks kinda ugly, and it doesn't do all the cool stuff I'd like. It does, however, explain what software I might need, and it shows me different command lines and whatnot.
But still...would that tutorial really help? Since it's different than what I had in mind, it might not list ANY of the functions I need. =\
eloquentBohemia
07-28-2008, 11:02 PM
I can address your font question, but I don't use Flash, so not the second.
MS Paint is a pretty basic program and what you're taling about is the "blending"(..can't remeber the proper term right now) pixels from the font color to the background color.
Two suggestions:
1 - use the background color you will be using on the site you're building for and you wont have to take the BG color out.
2 - instead of using MS Paint, download Inkscape, GIMP2, and ArtRage2 (this is more a painting program) which are Scalable Vector Graphics programs (...look this up in Wikipedia) which are Open Source and free (my favourite price):D . These are what I use for all my graphics work, including photo manipulation.
Centauri
07-28-2008, 11:21 PM
Lots of questions !! - which is good, as that is the way to learn :)
Starting with your first lot:
1) You can put things like menus in an external file, but it won't be css (which is just for presentation) or js (which is for actions). It needs to be done on the server as includes, and can use SSI or PHP or whatever languages the server supports (if the server doesn't support any server-side processing, find another host). Basically, just the html code portion of the menu is moved to an external file, and in the main html file this section is replaced by a include command (which varies depending on language). The filename extensions of the main html files may need to be changed so that the server knows it needs to process internal command (like .php if you are using PHP).
As far as a dropdown goes, I recommend the suckerfish method (http://www.htmldog.com/articles/suckerfish/) which just uses ordinary nested lists, and the code for this may be included in the same way as above.
2) The div order depends on positioning used - on this site, as the header, sidebar and footer are absolutely positioned, they could be after the content div in the html if you prefer, with no changes to the css. For normal positioning, the divs will stack in the order they are in the html, and you won't change that positioning with margins. Whichever method of positioning is used, I normally order the html in the way the page would be visually set out, so that it reads the same way to non-visual browsers (like screen readers).
3) No, the only way to do that is to use the other layout of Stu's which relies on quirks mode for IE, and that introduces a whole set of other problems (see below). One of the things I like about this layout is the fact that the scrollbar looks "normal" to a visitor.
4) I don't see that problem myself, but sometimes it may be seen in the gap between the footer / header and the scrollbar. The layout is based on a scrollbar width of 18px (which is what all the 18px shifts and paddings is all about), but this varies considerably between operating system, browser, and the user's display theme - sometimes the scrollbar is narrower which gives a small gap, sometimes it is wider which means the header / footer may partially cover the scrollbar. 18px is a reasonable compromise as there is no way of determining just how wide a user's scrollbar is.
5) A doctype is very important as it tells the browser what version of html the site is coded in, and also controls IE's "quirks" mode. Older versions of IE used a box model that subtracted padding and margin widths from the set size, whereas the standard is for these to be added to the set size. When IE finally started to comply somewhat with this concept, they adopted the presence of the doctype to determine whether IE should be in "standards" mode (proper box model) or "quirks" mode (old box model) for backwards compatability with old sites.
This Sitepoint reference (http://reference.sitepoint.com/html/doctypes) explains some of it, and this FAQ post by Tommy Olssen (http://www.sitepoint.com/forums/showthread.php?t=393445) is also very interesting.
6) Scrollbars are not a part of the html page, but are part of the browser and the user's interaction with it, and the ability to change any part of that has never been included in any standard. Users get very familiar with their particular computer / operating system and the interaction with it, including recognising scrollbars - this should never be messed with as it can confuse the user as to what it is.
7) The asterisk is the "universal selector" and in this context means "apply this rule to everything". Browsers apply their own default margins and/or padding to various html elements, and the amount and type applied varies between browser. Using this "reset" we can zero all those defaults in all browsers so that we have a more cross-browser starting point.
8) The <br> tag is primarily presentational, and as such should not be in the html (html should describe the content, and have very little to do with how it looks). A group of text separated from other elements / groups of text is essentailly a paragraph of text, so should be marked up with the paragraph <p> tags as that describes the structure.
9) That can vary. The 18px values are due to the 18px allowance for the scrollbar as mentioned above. Sometimes the values are derived by maths, sometimes trial and error to get the look you want.
While a WYSIWYG editor can be useful for keeping an eye on the progress while coding (I use Dreamweaver for this), none of them will allow you to "drag" elements and automatically adjust margins as it happens.
Centauri
07-28-2008, 11:55 PM
Regarding the template based site:
That is not too bad a template - I have seen much worse - but it is not really a fluid width type. However, it can be made so.
Rather then set the width and margins of each section (header, content, footer) it is much easier to contain the whole site within a #wrapper div and set the width and margins of that - then the various sections do not need any width or margins specified as they will naturally fill the width of the wrapper.
You cannot absolutely position and float something at the same time - once you absolutely position something, it is removed from the flow of the document and you lose any ability to float it, and you need to specifically specify the x and y coordinates of where you want it positioned (using top/bottom and left/right).
To get the content area to adjust to the width, the #columnB section will need to be moved to before the #columnA section in the html, and the float and width removed from #columnA in the css. #columnA would then also need a left margin of 220px (#columnB's width plus its side padding) to keep it away from #columnB.
The green bars and background is provided by the repeated graphic img04.gif on the background of #content, and this will need to be changed to cater for the fluid layout. The background graphic could be just the left side (colour and central border only) and side borders and background-color applied to #content will fill the rest.
Doesn't look like spacer.gif is used at all.
thewebguy
03-13-2009, 02:02 PM
There is supposed to be a very good learn how to build websites course coming out soon that will supposedly teach anyone how to build websites. I signed for early notification of the release date and received 1,000's of free website scripts.
Charles
03-13-2009, 03:24 PM
There is supposed to be a very good learn how to build websites course coming out soon that will supposedly teach anyone how to build websites. I signed for early notification of the release date and received 1,000's of free website scripts.Even at free it will not be worth the price. And those 1000s of scripts will be dung and do more harm than good. Mark my words.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.