Jump to content

Cre8asiteforums

Web Site Design, Usability, SEO & Marketing Discussion and Support

  • Announcements

    • cre8pc

      20 Years! Cre8asiteforums 1998 - 2018   01/18/2018

      Cre8asiteforums In Its 20th Year In case you didn't know, Internet Marketing Ninjas released many of the online forums they had acquired, such as WebmasterWorld, SEOChat, several DevShed properties and these forums back to their founders. You will notice a new user interface for Cre8asiteforums, the software was upgraded, and it was moved to a new server.  Founder, Kim Krause Berg, who was retained as forums Admin when the forums were sold, is the hotel manager here, with the help of long-time member, "iamlost" as backup. Kim is shouldering the expenses of keeping the place going, so if you have any inclination towards making a donation or putting up a banner, she is most appreciative of your financial support. 
Sign in to follow this  
kevin

Unchanged font

Recommended Posts

Hi, does anyone know how to keep the webpage unchanged (font, tables and so on)? What i mean is that the webpage can be changed if you change the text size on the browser. It changes everything on my webpage, text and images pulled out of their places. Is there a way to keep everything unchangeable? Thanks.

Share this post


Link to post
Share on other sites

Thanks Mick, but my webpage font is already small and I can't go any smaller. I didn't realize it when I designed the webpage. But now, it's too much trouble for me to go back and change everything. So if anyone could help with a code to put somewhere to keep the page unchanged, I would appreciate very much. I will remember this problem when i try to design a webpage next time. :oops:

Share this post


Link to post
Share on other sites

Here is my website. It's for school so please don't pay attention to the content. And it's still under construction.

www.anhkiet10.com. Thanks Mick.

Share this post


Link to post
Share on other sites

Kevin, if you use CSS to set the font size, the user shouldn't be able to change it.

Share this post


Link to post
Share on other sites

Jazzee's spot on. :(

 

And if you design your tables specifiying the widths in pixels rather than percentages they won't change either.

Share this post


Link to post
Share on other sites

I do fix the table with pixel but it's still changed. And I don't know how to set font by CSS. I thought I didn't have to use it so I didn't learn. But maybe it's time for me to learn how to use CSS. :mad:

Share this post


Link to post
Share on other sites

Let us know how you get on kevin. :D Are you studying website design?

 

Welcome to Cre8 BTW :wave:

Share this post


Link to post
Share on other sites

Thank you guys. I found it. If I change my font size from whatever to px, everything stays the same no matter what. Now the only thing left for me to do is to convert everything to px. Thanks a lot. This is really helpful. I appreciate it. :D

Share this post


Link to post
Share on other sites

I didn't read Mick's post until now, and i realize that that is exactly what you are trying to tell me. Thanks. I got it one way or another. I am not really trying to learn how to design website. It's just that I am in Med school and I have a lot of vocabulary to learn. I just want to create a dictionary for my self and my class to study. My friends have all versions of old computers and some of them couldn't open my website right. So I want to make sure that the website looks like what it looks like on my computer. Thank you all. If you guys have any question for me keep posting it. I will read this forum regularly. Kevin

Share this post


Link to post
Share on other sites

I would usually say that locking the font size is a bad thing. However, as you've just described your target group as being a very limited number of individuals, that maybe isn't a major requirement. I'm sure if one your classmates was trying to make the font larger to see it properly, they would tell you.....

 

Having said that, there are a couple things I would change, more to help the readability of the pages, but also to make the code a little friendlier, more efficiet, download quicker etc... You've already done one, by making the line-height bigger than normal, that can help quite a lot in making long sections of text easier to read.

 

There have been studies that tend to show Times New Roman is a good font for reading printed pages, but that people tend to find fonts like Arial and Verdana easier to read on screen. And then, that they find Verdana easier than Arial at smaller font sizes. So first off, I would suggest moving from Times New Roman, to probably, Verdana for you main content text. No need to go through changing this EVERYWHERE however, as has been mentioned CSS is built for this kind of thing, so you can probably delete all of your existing font tags, and just specify some external styles instead.

 

Consider the following. Taking your current site, you have an area with the following code:

 

<!--INSERT CONTENT HERE--> </center>     <p style="line-height: 200%" align="left"><font color="#66FF33"><font face="Comic Sans MS" size="5">&&&&&&&&&&&&&&&&&&&&&&&&&&&&     Welcome!</font><font size="2" face="Arial" color="red">&</font><font size="3" face="Arial">&</font></font></p>        <p style="line-height: 200%" align="left"><font color="#FF9900"><font face="Arial" size="3">&&&&&&&     </font>     <b><font size="3" face="Times New Roman">Hi everyone! Jerone did a very good job creating a class website for     us to exchange school information. There is no need to have another     website for us whatsoever with the same purpose. However, I always wanted     to create a dictionary specially for us to study and review. This     dictionary will contain all the terms that we learn in med school;     therefore, will help us to review for finals, board exams and even for     rotations later on.</font></b></font></p>     <p style="line-height: 200%" align="left"><b><font size="3" face="Times New Roman" color="#FF9900">&&&&&&&&&&&     Since we are already in the second year and it's too late now to go back to do     the first year, we will start from this year on. This dictionary will grow as we go and I need everyone's help to make it     richer and more accurate. If you come across a term that you think important     for us, feel free to look it up, copy and paste it to a notepad document and email everything to     me.& I will     add it to the dictionary.& Click on the ABC headline on top of each     course page to see if the term is already in it or not before you look it     up.</font></b></p>     <p style="line-height: 200%" align="left"><b><font size="3" face="Times New Roman" color="#FF9900">&&&&&&&&&&&&     The dictionary is categorized by courses, so go to Pick a course and     choose a search engine. Type in a word& and read. You can also click     on the ABC headline to see the whole list and click on the terms to view     the definition. Remember that everything is still under construction, so     if you find something that is not working, please email to let me know,     and don't get upset.</font></b></p>     <p style="line-height: 200%" align="left"><b><font size="3" face="Times New Roman" color="#FF9900">Happy     study</font></b></p>     <p style="line-height: 200%" align="left"><b><font size="3" face="Times New Roman" color="#FF9900">Kevin     Tran&</font></b>- <b><font size="3" face="Times New Roman" color="#FF9900">Class     of 2006&</font></b></p>    <center>   <!--END CONTENT-->

 

 

Which is a lot of code for a relatively small and basic chunk of text. Something along these lines would do a much better job.....

 

 

<!--INSERT CONTENT HERE--><center>     <h1 class="content">Welcome</h1>  <div class="content">  <p>Hi everyone! Jerone did a very good job creating a class website for     us to exchange school information. There is no need to have another     website for us whatsoever with the same purpose. However, I always wanted     to create a dictionary specially for us to study and review. This     dictionary will contain all the terms that we learn in med school;     therefore, will help us to review for finals, board exams and even for     rotations later on.</p>         <p>Since we are already in the second year and it's too late now to go back to do     the first year, we will start from this year on. This dictionary will grow as we go and I need everyone's help to make it     richer and more accurate. If you come across a term that you think important     for us, feel free to look it up, copy and paste it to a notepad document and email everything to     me. I will add it to the dictionary.Click on the ABC headline on top of each     course page to see if the term is already in it or not before you look it     up.</p>            <p>The dictionary is categorized by courses, so go to Pick a course and     choose a search engine. Type in a word and read. You can also click     on the ABC headline to see the whole list and click on the terms to view     the definition. Remember that everything is still under construction, so     if you find something that is not working, please email to let me know,     and don't get upset.</p>       <p>Happy study</p>     <p>Kevin Tran - Class of 2006</p>  </div></center><!--END CONTENT-->

 

 

Sadly the <center> is still in there, but to be honest, I think it would be a lot less hassle for you to use that then to try and use CSS to center the main div, especially as you've said people are using old computers etc...

 

Once you've got that, you'll need to following styles, in a seperate document, saved as a .css file

 

 

h1.content{font-size:200%;text-align: center;color:#66FF33;}div.content{font-size:0.8em;width:450px;line-height:200%;color:#FF9900;font-family: verdana, arial;text-align:left;font-weight:bold;}

 

 

So put that in a new text document, and save it as something like styles.css, make sure its not set to save as txt else you'll end up with styles.css.txt or somethinbg, which won't work.

 

Then, in the head of your HTML page, put <link href="styles.css" rel="stylesheet" type="text/css" media="screen">, make sure that .css file is in the same directory as your HTML page and you'll be fine.

 

There laods more that could be done to the rest of the site, but thats an example of how the code can be cleaned up, and make it a lot easier for you to update and change in the future, if need be.

 

If your looking to learn some CSS have a look at Starting with Style, an article I wrote a little while ago for people like yourself, who have done a bit of web design, but need a hand getting into CSS.

Share this post


Link to post
Share on other sites

Actually, I have an opposite problem.

 

How to keep the text resizable and within the navigation, when visitors change font size?

 

Is it possible to use images for top navigation background and resizable text (em/%)? Has anyone done similar things or can share links to posts/articles about this?

 

Thanks.

Share this post


Link to post
Share on other sites

Yuri

 

It is a bit complicated so I put a test page here for you to see.

 

View source all the styling is in-line.

 

Some suggestions as to what you need to watch out for:

 

(01) Once you have one element on a page in order for the layout not to break. Everything must be defined in ems, except divs within containers defined in ems. These can be defined as percentages.

 

(02) Use larger than normal images. If you view the image on the page you can see actually it is quite large.

 

(03) It is better to have the text on the button, rather as separate. You cannot have the image as background, otherwise it will not re-size.

 

(04) If you use Dreamweaver or something like that, that automatically adds width and height on the image you will need to remove the width and height from the image tag.

 

(05) Forget lists (it is possible), but rather use divs.

 

Yannis

 

Hey Bill, can I get a patent for this method? :)

Share this post


Link to post
Share on other sites

Yannis, thanks a lot. I'll hand it over to our designers.

 

I get the picture, but you linked to a file on your local machine (localhost) :)

Share this post


Link to post
Share on other sites

It's my pleasure Yura. I am sure I linked on my localhost for the link! :) I sort of tested it quickly at lunch yesterday. I have used some rather large pictures, but I am sure your designer can manipulate the menu to his liking. Let us have a look at the design when it is finished.

 

Yannis

Share this post


Link to post
Share on other sites
Sign in to follow this  

×