Cer ajutor celor mai buni in domeniu pentru un script sau pur si simplu un cod ce poate redimensiona pagina HTML in functie de rezolutia monitorului utilizatorului. Pe rezolutia de 1280x1024 pagina se incadreaza perfect, chiar si pe 1024x768 se incadreaza destul de bine, dar de exemplu pe 800x600 imi apare scrollbarul si pe verticala si pe orizontala. Pagina este facuta la 1024x768 px , dar as vrea ca si utilizatorii ce au rezolutia de 800x600 de exemplu sa imi vada bine pagina. Exista un asemenea script sau ceva pentru a se incadra pagina mea HTML pe orice rezolutie, si sa fie centrata pagina pe orice rezolutie?
Astept un raspuns si le multumesc anticipat celor care imi vor da o mana de ajutor!
CITAT (aninim111 @ 1st October 2009, 12:46) 
Cer ajutor celor mai buni in domeniu pentru un script sau pur si simplu un cod ce poate redimensiona pagina HTML in functie de rezolutia monitorului utilizatorului. Pe rezolutia de 1280x1024 pagina se incadreaza perfect, chiar si pe 1024x768 se incadreaza destul de bine, dar de exemplu pe 800x600 imi apare scrollbarul si pe verticala si pe orizontala. Pagina este facuta la 1024x768 px , dar as vrea ca si utilizatorii ce au rezolutia de 800x600 de exemplu sa imi vada bine pagina. Exista un asemenea script sau ceva pentru a se incadra pagina mea HTML pe orice rezolutie, si sa fie centrata pagina pe orice rezolutie?
Astept un raspuns si le multumesc anticipat celor care imi vor da o mana de ajutor!
Astept un raspuns si le multumesc anticipat celor care imi vor da o mana de ajutor!
Adica un script care sa calculeze in functie demonitor dimensiunile unei pagini existente?? Mai bine refaci pagina de la zero, e mai usor. Altfel ar trebui sa rescrie TOATE definitiile din css si html de fiecare data cind se incarca pagina - cred ca teoretic se poate, insa e bataie mare de cap.
Asa ca mai bine refaci layoutul. Dureaza (la mine atat a durat exemplul de mai jos) vreo 10 minute.
Cum:
se baga totul intr-un div#wrapper, care are dimensiuni variabile si este centrat. In plus, i se dau latime minima si maxima -nu e obligatoriu, insa eviti in felul asta sa arate prea labartat sau prea strins. Toate div-urile continute vor avea de asemenea latimile date in procente.
Mai jos ai un exemplu de layout cu 3 coloane care variaza intre 800 si 1280px latime.
Tot ce ai de scris bagi in interiorul div.inner.
Este o solutie cu care nu te doare capul, functioneaza in orice browser normal si are si fix pentru ie6, care nu stie de min-with si max-width.
CODSURSA
<!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" xml:lang="en" >
<head>
<title></title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
/* partea care urmeaza este ceea ce te intereseaza, pina aici sint resetari de css si autoclearing */
#wrapper {margin: 0 auto;min-width:780px;max-width:1260px}
#leftcol {float:left;width:25%;}
#center {float:left;width:50%}
#rightcol {float:right;width:24.99%}
.inner {padding: 0 10px;margin:5px;border: 1px solid red;background:#ccc}
</style>
<!--[if lte IE 6]>
<script type="text/javascript" src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header" class="clearfix">
<div class="inner">
<h1>Header</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div id="container" class="clearfix">
<div id="leftcol">
<div class="inner">
<h2>Coloana din stinga</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div id="center">
<div class="inner">
<h2>Coloana din centru</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div id="rightcol">
<div class="inner">
<h2>Coloana din dreapta</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div id="footer" class="clearfix">
<div class="inner">
<h2>Footer</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
/* partea care urmeaza este ceea ce te intereseaza, pina aici sint resetari de css si autoclearing */
#wrapper {margin: 0 auto;min-width:780px;max-width:1260px}
#leftcol {float:left;width:25%;}
#center {float:left;width:50%}
#rightcol {float:right;width:24.99%}
.inner {padding: 0 10px;margin:5px;border: 1px solid red;background:#ccc}
</style>
<!--[if lte IE 6]>
<script type="text/javascript" src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header" class="clearfix">
<div class="inner">
<h1>Header</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div id="container" class="clearfix">
<div id="leftcol">
<div class="inner">
<h2>Coloana din stinga</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div id="center">
<div class="inner">
<h2>Coloana din centru</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div id="rightcol">
<div class="inner">
<h2>Coloana din dreapta</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div id="footer" class="clearfix">
<div class="inner">
<h2>Footer</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</body>
</html>
Aceasta este o versiune simplificatã a paginii originale. Pentru a vizita versiunea originala click aici.