15 replies to this topic

[kevin]

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.

[kevin]

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:

[kevin]

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.

[kevin]

Thanks for you suggestion.

[Jazzee]

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

[sanity]

Jazzee's spot on.

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

[kevin]

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:

[Jazzee]

Here is a tutorial for learning CSS: http://www.w3schools...s/css_intro.asp

[sanity]

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

Welcome to Cre8 BTW :wave:

[kevin]

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.

[kevin]

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

[Adrian]

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.

[A.N.Onym]

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.

[yannis]

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?

[A.N.Onym]

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)

[yannis]

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