Revamping whole site; Need advice on use of tags (centering layout).

@___XP__Aug 06.2004

[FONT=Palatino Linotype]~~[SIZE=3][COLOR=DarkSlateBlue]~~Greetings,

I need some advice and tips on a number of aspects. I am planning to recode a website I am currently working on. At the moment, it uses the table tags, and is very messy, causing a high load time.

The main ‘perk’ of the site, is the ability to chose a background theme to view a standard piece of text. Not much, I know, but valuable to my targetted audience. The difficulty arises in my attempt to present the same layout, centered, for all people, while at the same time, giving the option to chose different background themes with minimum effort, and coding, but also loading a quick page.

If you can help me, please take a look at the current format @ ~~[url]~~www.QuranViewer.com[/url] it should pop up a new window after you click on the splash screen, though it doesn’t always do that for me, the first time, not without refreshing the page. May be that has something to do with my firewall control. Anyway, please make an observation of the layout. The images and themes are really crappy at the moment, so please excuse that. However, the important aspect, is how the page is divided up. At the top, there is the logo, then the body, and at the bottom another section. So we have 3 parts here, then these are all centered, with the background which runs down the outside if your resolution is set high enough.

As I am using a script to change the background quite easily, without having to add extra pages by duplicating the text, I have to divide the page, into 3 sections, 2 changing, and 1 constant. So there is the header which is a variable, then lower down is the body which remains the same with the exception of the background image, then underneath that is the footer which is another changing aspect.

My first obstacle, is the content of the body. I need to figure out a way, to paste the verses with reference numbers to the left, while they both remain seperate. Currently it is set with tables, but I was hoping there is an easier alternative. Any suggestions?

The text content of the body will remain the same, only the background will be changing, so I figured I could enclose it in a div element, defining the background image in the css style in the header.

I would like to set a static width for the body content, while at the same time, centering the “box” (body). For example, something similar to the following @ ~~[url]~~http://www.bluerobot.com/web/css/center1.html[/url] though I do not understand it too well. I would also need to add the header and footer respectively.

Once the layout is all set. I was hoping to incorporate, into the footer section, the ability for the visitor to manipulate the text font, size, color etc.. of the body content/text. Does that make sense? I have seen the ability to change text size on some news sites, and even the font on another, but can someone point me in the direction on how to accomplish this in the easiest and most effective way?

That is all I can think of for now, if you can help me in any of the above aspects, please post, I appreciate all responses, ideas, tips etc.. Thanks.

[/COLOR][/SIZE][/FONT]

to post a comment

CSS

12 Comments(s) _↴

@DaveSWAug 07.2004 — #You add your header and footer by placing them inside your centered div. You might want to break them up into three divs and have three different divs inside your centered container.

Try using google to search for a styleswitcher. You may need php to use some of the scripts, but I believe ALA has a javascript one.

@___XP__authorAug 07.2004 — #[i]Originally posted by DaveSW [/i]

[B]You add your header and footer by placing them inside your centered div. You might want to break them up into three divs and have three different divs inside your centered container.

Try using google to search for a styleswitcher. You may need php to use some of the scripts, but I believe ALA has a javascript one. [/B][/QUOTE]

[FONT=Palatino Linotype][SIZE=3][COLOR=DarkSlateBlue]Hi Dave,

Thanks for the post. I've been researching the topic, and have now realized that much of the slow loading was due to the large image files, aswell as excess (useless) code. I have removed the unnecessary tags in a sample layout, and the center feature is working like a treat.

I have for the "body" section, enclosed it into a table. The header & footer files now contain the beginning and ending div tags, so I can pretty much manipulate them quite flexibly, changing the position, formatting etc.. for each style/skin set.

What I need help with for now, if you have any advice for me, is how to present the visitor an option to change the font face, color and size. So a person could be on any given page, then select from maybe a drop down list a different font face, color or size, then press a button/link to reformat the page with his desired selection automatically. So basically, how to change the body text, which is enclosed in tables. In my style sheet, the text would come under the "td" id. May be I could have like a default setting, but also incorporate a "get" function of some sort. I don't know, is it possible, any ideas? I have seen on some news sites, the option to click a button, which automatically changes the text size. I was hoping to find the script for that, and possibly [hopefully] include the option to change color and font face.

Thanks again. [/COLOR][/SIZE][/FONT]

@DaveSWAug 07.2004 — #This is the sort of thing you're looking for - it has the power to do everything you want and a lot more besides:

http://www.alistapart.com/articles/alternate/

However, I've never implemented it myself so I've no idea how difficult it is.

Basically you have a number of css style sheets, each with different font sizes and fonts. then when you switch between it changes it, and can also change the background color and layout as well.

I'm still looking to see if there's a simpler one somewhere.

@DaveSWAug 07.2004 — #check this one out: http://www.dyn-web.com/dhtml/sizefont/

@___XP__authorAug 07.2004 — #[FONT=Palatino Linotype][SIZE=3][COLOR=DarkSlateBlue]Thanks for the links. Interesting. ALA is a great resource.

I've been pondering over the topic for awhile now, contemplating how I could implement it. The first link gives the option to select from a number of pre-defined style sheets. However, for the user it is still restricted to the color scheme I define. I was hoping that it would be possible to select a font face from a large list, aswell as the font color from a color picker chart. Thus, the user could select any combination of color and font face without me having to define every possible style sheet.

I'm not versed in php, but I have an idea, only problem is; I don't know how to write the code ?

I thought, maybe I could link to 2 style sheets, one that is prefered (default) which has the color settins I define, and the second being an 'alternate' (which could be named "custom.css"). Then, in creating the 'alternate' style sheet, I could use php to "get" or "echo" the variables after collecting some data from the form, which I would have to set up.

So, I could add a "customize" link on every page, which, when pressed, would pop up a small window. Therein one could click a section on a color chart, setting the font color. Also having a font face and a text size option. To finish it off, a link to reformat the "parent" page, using the selected variables, by 'sending' the data to the "custom.css" file, which would be ready and waiting to "echo" the variables. Make any sense? or am I talking in cuckoo land? lol

It might have something like this in the style sheet ("custom.css");

[/COLOR][/SIZE][/FONT]

[code=php]
 td   { color: <?php echo(color); ?> ;
 font-family: <?php echo(face); ?> ;
 font-size: <?php echo(size); ?> ;
 }
 [/code]

[FONT=Palatino Linotype][SIZE=3][COLOR=DarkSlateBlue]

In this case, the "echo(variable)" would be catching the data from the form and pasting it infront of the color/face/size defining element. I don't know anything about making the form in php, nor how to write the custom.css file. I think it would need a cookie too, and I am buggered when it comes to that also.

I usually try to research a topic and find the answer for myself, as its quite annoying for others, to ask the basic questions, whose answers are readily available on the web. However, I am exhausted from my searching, and cannot find anything to accomplish this task. I've come across many styleswitchers, but nothing of this sort. So if someone could help, in any way, I would greatly appreciate it. Pretty please, with a hallucinogenically glazed cherry on top ! lol

[/COLOR][/SIZE][/FONT]

@DaveSWAug 09.2004 — #one of the php style switchers I have seen (But not implemented) offers the capability of switchiung multiple style sheets. i.e. you would have a basic style sheet containing stuff that doesn't change, and a number of font stylesheets which would only contain a font-color declaratioin. Your color chart would then be liked to the appropriate stylesheet.

I'm sure that somewhere I've seen the sort of thing you describe, but I can't find it at the moment.

@DaveSWAug 09.2004 — #Ah check out this site: http://www.glish.com/

Is that what you mean?

@___XP__authorAug 09.2004 — #[i]Originally posted by DaveSW [/i]

[B]Ah check out this site: http://www.glish.com/

Is that what you mean? [/B][/QUOTE]

[FONT=Palatino Linotype][SIZE=3][COLOR=DarkSlateBlue]Ohhh this looks perfect !!

The only addition I am hoping for, is the ability to change font color.

I would have a download pack, containing some special fonts, which the user could d/l and install, then have them special fonts listed in the drop down box, as shown on that site. That would work? I think it would.

Anyway, can you tell how that site has done it? and if I could add a color select option? If you can, I would really appreciate it.

Also, just another question, if that were to work, would it save the color/font preference as a cookie? I ask, because my current site is already using a cookie to remember which style the user has selected, would it come into conflict, having two cookies? or would I combine them into one cookie, if it has that capability?

thanks again. [/COLOR][/SIZE][/FONT]

@DaveSWAug 09.2004 — #It probably uses cookies, but so long as it's a different name it shouldn't clash.

His code is here;

http://glish.com/textResizer.js

and this is the code on the page:

[code=php]
 <div id="preferences"><h3 id="preferencesHeader">text preferences</h3><form id="preferencesForm"><fieldset id="fs"><input id="sizeDown" class="preferencesEl" onclick="changeFontSize(-1)" value=" A - " type="button">&nbsp;<input id="sizeUp" class="preferencesEl" onclick="changeFontSize(1)" value=" A+ " type="button"><br><select id="family" class="preferencesEl" onchange="if(this.selectedIndex>0) {changeFontFamily(this.options[this.selectedIndex].value)}"><option value="">change font:</option><option value="Arial, Helvetica">Arial</option><option value="Verdana, Arial, Helvetica, sans-serif">Verdana</option><option value="'Trebuchet MS', sans-serif">Trebuchet</option><option value="Georgia, Times Roman, serif">Georgia</option><option value="Lucida console, Monaco, monospace">Lucida</option></select></fieldset></form></div>[/code]

He has said he intends to release it properly to the public but I can't ind it anywhere so I don't know if he's done it yet.

@___XP__authorAug 09.2004 — #[FONT=Palatino Linotype][SIZE=3][COLOR=DarkSlateBlue]hey Dave!

I guess the color option would be too much work, so thats probably best left for a future project. I've spent some time, trying to figure out the textresizer script, but am having a little trouble.

To be honest, I have no idea, how to implement it. However, I have been playing around with the files, and trying different things, and I am getting somewhere, but I am facing a problem.

I hope you can take a look at the page, and whats made of it so far... its the 6th scheme, the link is; http://www.quranviewer.com/home/index2.php?newskin=6

If you click that, it will set your skin to the test page for the text resizer script. The font changing feature is working, but the font size, is only partial. At the bottom, where the links are (in the footer area), the size changes when you click the respective button, however, the main body text, does not change in size, but only the font.

After working on it a few hours, I realize that its most likely due to the fact, that its wrapped in tables (where it doesnt work for size). Whereas the footer area, is not in tables, but just a div element. When I wrap the footer in tables, that too, stopped working. So it must be the table, that is stopping the format change.

I hope you can take a look at the source file, for the above link. Also, there were other obstacles in the way, such as the cookie, but I seem to have figured that out, partially.

Please help me with this, if you can, I really have no one else to get it sorted. [/COLOR][/SIZE][/FONT]

@___XP__authorAug 18.2004 — #[FONT=Palatino Linotype][SIZE=3][COLOR=DarkSlateBlue]Hi again,

Just a small update. I finally got something working for me. I even redesigned the skins, so its looking better than before.

Check it out. Just thought I'd let you know. Thanks for everything. ?

http://www.quranviewer.com/[/COLOR][/SIZE][/FONT]

@DaveSWAug 18.2004 — #It's looking good. The borders and backgrounds really suit your site style.

Also in #CSS _↴

[RESOLVED] "Responsive" stylesheet having no affect whatsoëver on my phone Rollover effects and dropdown?Positioning Issue w Float

Success!

Help @___XP__ spread the word by sharing this article on Twitter...

Tweet This

Revamping whole site; Need advice on use of tags (centering layout).

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Revamping whole site; Need advice on use of tags (centering layout).

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴