15 replies [Last post]
qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

Hi!
How to make written resizable?
I can with image using 100%! But not with text!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

First you the it. When final

First you the it. When final for to the find and make for seven. Ensure to the write.

Big smile Tongue

What is your native language?

qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

I'm using css/html!

I'm using css/html!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

I am asking what language you

I am asking what language you speak in your everyday life.

qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

Ops! Sorry..I'm thinking

Ops!
Sorry..I'm thinking about progamming languages!
....Italian

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

Yikes, I only know a few

Yikes, I only know a few italian words and phrases (mostly the dirty ones Tongue) but I can't understand your english. Try your question in italian.

qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

e' possibile rendere del

e' possibile rendere del testo resizable?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

Yes, text is resizeable but

qwertyuio wrote:

[É] possibile rendere del testo resizable?

Yes, text is resizeable but the question is by what action and in what way? It is probably best that you show what you currently have and what you are trying to do. Pictures can break the language barrier.

qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

it depends on monitor

it depends on monitor resolution or resizing browser, so I can resize image using width= 100% , but I can't with text, with text I'm using percent too.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

Ah, I see what you're asking

Ah, I see what you're asking now. Using percent on text isn't calculated by the container width. It is calculated from the containers current text size. The only technique that I've seen that fills the area with text is something like sIFR. I've abandoned the technique as overkill.

qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

thanks for the reply! there

thanks for the reply!
there is no way?
any tips for doing something that looks like what I asked you?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

I don't know. Maybe.

I don't know. Maybe. Perhaps you could show what you have and then show the desired result.

qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

this is what I have (for

this is what I have (for istance my base)
html

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>XXXXX</title>
 
   <link rel="shortcut icon" href="favicon.ico" >
   <link rel="icon" type="image/gif" href="favicon.ico" >
   <link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="header">
  <h1><a><span>XXXXXXX</span>_xxxxxx</a></h1>
</div>
<div id="top_menu">
<div id="menu">
  <ul>
    <li class="active"><a accesskey="1" href="index.html">home</a></li>
    <li><a href="artworks.html" accesskey="2">work</a></li>
    <li><a href="vita.html" accesskey="3">vita</a></li>
    <li><a href="contact.html" accesskey="4">contact</a></li>
    <li><a href="publication.html" accesskey="5">publication</a></li>
  </ul>
</div>
</div>
<div id="intermediate">
    <img id="intr" src="images/img_intermedio.jpg" alt="" />
</div>
<div id="container">
<div id="central">
    <img id="home" src="images/ninfee.jpg" alt="" />
</div>
<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer">
 
</div>
</body>
</html>

css

body {
	margin: 20px 0;
	padding: 0;
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
}
 
h2 {
	font-size: 160%;
}
 
h1 a{
	font-style: italic;
}
 
a:hover {
	text-decoration: none;
}
 
 
 
/* Header */
 
#header {
	width: 70%;
    margin: 0 auto;
    border-top: 1px solid #E1E1E1;
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
	text-decoration: none;
	text-transform: lowercase;
	padding: 2% 0 0 0;
}
 
 
#header h1 {
	width: 93%;
	margin: 0 auto;
	font-size: 160%;
    color: #000000;
	font-weight: normal;
	padding: 0 0 1.5% 1%;
}
 
#header h1 span{
	font-size: 230%;
	font-style: normal;
}
 
 
 
/* Menu */
 
#top_menu {
	width: 70%;
	margin: 0 auto;
	margin: 0 auto;
	background: #fff;
	border-left: 1px solid #E1E1E1;
	border-right: 1px solid #E1E1E1;
	padding: 0;
}
 
#menu {
	width: 93%;
    margin: 0 auto;
    border-bottom: 1px solid #000000;
	padding: 0.7% 0 0.7% 0;
}
 
 
 
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#menu li {
	display: inline;
}
 
#menu a {
    margin: 0 4% 0 1%;
	text-decoration: none;
	color: #000000;
	font-size: 150%;
}
 
#menu a:hover {
	color: #666666;
}
 
#menu .active a {
	color: #CCCCCC;
}
 
 
 
/* Intermediate */
 
#intermediate	 {
	width: 70%;
	margin: 0 auto;
    background: #fff;
	border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
}
 
#intr { 	width: 100%;
}
 
/* Container */
 
#container {
	width: 70%;
	margin: 0 auto;
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
    padding: 0;    
 
}
 
#central {
	width: 93%;
	margin: 0 auto;
}
 
#home {
	width: 100%;
	margin: 0 0 8% 0;
}
 
 
/* Footer */
 
#footer {
    clear: both;
	width: 70%;
	margin: 0 auto;
	border-top: 1px solid #E1E1E1;
	}

AttachmentSize
Ninfee.jpg 81.83 KB
img_intermedio.jpg 1.08 KB
qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

in this way images are

in this way images are resizeble, but what about text?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

qwertyuio wrote: in this way

qwertyuio wrote:

in this way images are resizeble, but what about text?

You want the text size to resize along with the width of the browser? That's behavior which is controlled using javascript.

The only thing I could think of using CSS would be to change all your instances of width: 70% to width: 40em;. Then a text resize also changes the content width.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>XXXXX</title>
	<style type="text/css">
		body {
			margin: 20px 0;
			padding: 0;
			font: normal small "Trebuchet MS" , Arial, Helvetica, sans-serif;
			font-size: 100%;
		}
		h2 {
			font-size: 160%;
		}
		h1 a {
			font-style: italic;
		}
		a:hover {
			text-decoration: none;
		}
		/* Header */
		#header {
			width: 40em;
			margin: 0 auto;
			border-top: 1px solid #E1E1E1;
			border-left: 1px solid #E1E1E1;
			border-right: 1px solid #E1E1E1;
			text-decoration: none;
			text-transform: lowercase;
			padding: 2% 0 0 0;
		}
		#header h1 {
			width: 93%;
			margin: 0 auto;
			font-size: 160%;
			color: #000000;
			font-weight: normal;
			padding: 0 0 1.5% 1%;
		}
		#header h1 span {
			font-size: 230%;
			font-style: normal;
		}
		/* Menu */
		#top_menu {
			width: 40em;
			margin: 0 auto;
			margin: 0 auto;
			background: #fff;
			border-left: 1px solid #E1E1E1;
			border-right: 1px solid #E1E1E1;
			padding: 0;
		}
		#menu {
			width: 93%;
			margin: 0 auto;
			border-bottom: 1px solid #000000;
			padding: 0.7% 0 0.7% 0;
		}
		#menu ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#menu li {
			display: inline;
		}
		#menu a {
			margin: 0 4% 0 1%;
			text-decoration: none;
			color: #000000;
			font-size: 150%;
		}
		#menu a:hover {
			color: #666666;
		}
		#menu .active a {
			color: #CCCCCC;
		}
		/* Intermediate */
		#intermediate {
			width: 40em;
			margin: 0 auto;
			background: #fff;
			border-left: 1px solid #E1E1E1;
			border-right: 1px solid #E1E1E1;
		}
		#intr {
			width: 100%;
		}
		/* Container */
		#container {
			width: 40em;
			margin: 0 auto;
			border-left: 1px solid #E1E1E1;
			border-right: 1px solid #E1E1E1;
			padding: 0;
		}
		#central {
			width: 93%;
			margin: 0 auto;
		}
		#home {
			width: 100%;
			margin: 0 0 8% 0;
		}
		/* Footer */
		#footer {
			clear: both;
			width: 40em;
			margin: 0 auto;
			border-top: 1px solid #E1E1E1;
		}
	</style>
</head>
<body>
	<div id="header">
		<h1><a><span>XXXXXXX</span>_xxxxxx</a></h1>
	</div>
	<div id="top_menu">
		<div id="menu">
			<ul>
				<li class="active"><a accesskey="1" href="index.html">home</a></li>
				<li><a href="artworks.html" accesskey="2">work</a></li>
				<li><a href="vita.html" accesskey="3">vita</a></li>
				<li><a href="contact.html" accesskey="4">contact</a></li>
				<li><a href="publication.html" accesskey="5">publication</a></li>
			</ul>
		</div>
	</div>
	<div id="intermediate">
		<img id="intr" src="img_intermedio.jpg" alt="" />
	</div>
	<div id="container">
		<div id="central">
			<img id="home" src="ninfee.jpg" alt="" />
		</div>
		<div style="clear: both;">
			&nbsp;</div>
	</div>
	<div id="footer">
	</div>
</body>
</html>

qwertyuio
qwertyuio's picture
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-02-14
Posts: 19
Points: 24

good, but then what is the

good, but then what is the best way?
the em unit is then resizeble.
I must start with a breadth of content that is easily viewable from a 800x600 resolution and use your advice to avoid unexpected increases in the size of the text could change adversely the layout.
Which in this case the best practices to keep in mind?
Is correct my approach?