Linux за българи: Форуми

Linux секция за начинаещи => Настройка на програми => Темата е започната от: completer в Feb 03, 2009, 16:07


Титла: HTML код
Публикувано от: completer в Feb 03, 2009, 16:07
Здравейте! Отдавна не съм се занимавал с html и някои неща съм ги позабравил.
Та това което ме мъче е не мога да се сетя как да центрирам някакво изображение без да го уголемявам на 100% по резулюцията на браузера. Четох тук там но нещо не успях. Ето го кода който толкова много ме мъчи  ;D.


Код:
<a href="******"><img src="enter1.jpg" table width="100%" height="100%" valign="middle" border="0" /></a>


Когато дам височината и ширината да са на по малък процент изображението се измества автоматично в ляво,  :( Пробвах с различни вариации на aligh="center" също не ми се получава.

Титла: Re: HTML код
Публикувано от: VladSun в Feb 03, 2009, 16:30
Цитат на: completer в Feb 03, 2009, 16:07
Код:
<a href="******"><img src="enter1.jpg" table width="100%" height="100%" valign="middle" border="0" /></a>

Отдавна ще да е било - наистина :)

Айде сега с прости думи кажи какво точно искаш да направиш - какво разположение имаш, как искаш да центрираш изображението (хоризонтално и/или вериткално), какво е "100% по резулюцията на браузера" и т.н.

По принцип в CSS-a има:
Код
GeSHi (CSS):
  1. margin: auto;

Титла: Re: HTML код
Публикувано от: completer в Feb 03, 2009, 17:57
Извинявам се че съм малко неразбран! ;D Значи имам едно изображение което искам да го центрирам(центрирано вертикално и хоризонтално), да служи нещо като ентер скрийн, само че като го центрирам с кода който съм дал изображението се оразмерява по резолюцията на потребителя.Пробвах само с align="center" но не се получава.Когато разменя процента на големината и височината на различно от 100% центрирането се прецаква.

Ако искаш да го видиш кода ето:

Титла: Re: HTML код
Публикувано от: VladSun в Feb 03, 2009, 18:25
Код
GeSHi (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. 	BODY, HTML
  7. 	{
  8. 		height: 100%;
  9. 		padding: 0;
  10. 		margin: 0;
  11. 	}
  13. <title>KMM</title>
  14. </head>
  15.  
  16. <body bgcolor="#000000">
  17. <table style="width: 100%; height: 100%">
  18. 	<tr>
  19. 		<td style="width: 100%; height: 100%; text-align: center; vertical-align: middle">
  20. 			<a href="http://kmm.free.bg/main.html"><img src="enter1.jpg" style="border: 0;"/></a>
  21. 		</td>
  22. 	</tr>
  24. </body>
  25. </html>

Титла: Re: HTML код
Публикувано от: tarator в Feb 03, 2009, 18:37
Няма нужда от таблица.

Титла: Re: HTML код
Публикувано от: vstoykov в Feb 03, 2009, 18:51
Как точно става номера без таблица? И аз съм се чудил над този въпрос и нямам отговор (освен с JavaScript, който изчислява местоположението, знаейки височината/ширината на прозореца и размера на изображението).

Титла: Re: HTML код
Публикувано от: tarator в Feb 03, 2009, 19:10
Може например с div.

Код:
<div style="test-align: center; vertical-align: middle">Каквото си поискаш центрирано</div>


Титла: Re: HTML код
Публикувано от: VladSun в Feb 03, 2009, 19:25
Цитат на: tarator в Feb 03, 2009, 19:10
Може например с div.

Код:
<div style="test-align: center; vertical-align: middle">Каквото си поискаш центрирано</div>

vertical-align е параметър само на събирателни елементи с display: table-cell

Ред.: Всъщност, дори и да беше вярно за DIV (разбирай display: block), твоят HTML код е напълно грешен - височината на DIV-a е според съдържанието му.

Титла: Re: HTML код
Публикувано от: gat3way в Feb 03, 2009, 20:12
div-а може ли и вертикално да ги прави тези работи?

Аз понеже не съм уеб девелопер и живея в едни времена отпреди 10 години, ползвам таблици за щяло и не щяло....такива неща са ми много нови :)

Титла: Re: HTML код
Публикувано от: tyuio в Feb 03, 2009, 20:17
таблиците имат спред модерните представи доста ограничения и трупат код. div i css му е мамата :)

Титла: Re: HTML код
Публикувано от: tarator в Feb 03, 2009, 20:23
VladSun, прав си, кода ми не работи, ще помисля като имам малко време.

Титла: Re: HTML код
Публикувано от: ivo3d в Feb 03, 2009, 20:31
Код
GeSHi (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     </head>
  5.     <body>
  6. 		<a href="#"><img src="karinka.jpg" style="position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px;" /></a>
  7.     </body>
  8. </html>
  9.  
  10.  

Ей това е начина с CSS и xHTML да направиш splash screen. Забележи, че има един margin-top и margin-left от по 150px. Тук са примерни, а по принцип трябва margin-top да бъде половината от височината на картинката, a margin-left - половината от широчината.


Титла: Re: HTML код
Публикувано от: VladSun в Feb 03, 2009, 20:53
Цитат на: tyuio в Feb 03, 2009, 20:17
таблиците имат спред модерните представи доста ограничения и трупат код. div i css му е мамата :)
Всъщност таблиците дори според модерните представи имат много по-пълни възможности по-добра браузерна съвместимост - и двете са следствие от твърде продължителния оперио на използването им като стандарт в HTML layout-a. Поради това CSS има още доста да гони в някои отношения, но определено в него е бъдещето.

Титла: Re: HTML код
Публикувано от: ivo3d в Feb 03, 2009, 21:06
Таблиците ще се използват винаги, тъй като често (особено в уеб приложенията) се използва таблично представяне на информация. Всеки таг си има предназначение, иначе всичко може и само с <p> да се направи, но не е логично, както не е логично и да се използват div тагове за таблична информация, както и не е логично да се пише layout с таблици.

Титла: Re: HTML код
Публикувано от: VladSun в Feb 03, 2009, 21:06
Цитат на: ivo3d в Feb 03, 2009, 20:31
Код
GeSHi (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     </head>
  5.     <body>
  6. 		<a href="#"><img src="karinka.jpg" style="position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px;" /></a>
  7.     </body>
  8. </html>
  9.  
  10.  

Ей това е начина с CSS и xHTML да направиш splash screen. Забележи, че има един margin-top и margin-left от по 150px. Тук са примерни, а по принцип трябва margin-top да бъде половината от височината на картинката, a margin-left - половината от широчината.

Хитро :)

Титла: Re: HTML код
Публикувано от: VladSun в Feb 03, 2009, 21:30
Цитат на: gat3way в Feb 03, 2009, 20:12
div-а може ли и вертикално да ги прави тези работи?

Аз понеже не съм уеб девелопер и живея в едни времена отпреди 10 години, ползвам таблици за щяло и не щяло....такива неща са ми много нови :)

Аз пък напоследък се радвам на възможността да работя по web приложения без да ползвам почти никакъв HTML - само ExtJS и тук-там малко CSS :)
BODY-то на страниците ми е празно :)

Титла: Re: HTML код
Публикувано от: phantomlord в Feb 04, 2009, 11:36
Здравейте,
Искам да питам а таблица как е най-добре да се центрира вертикално?

Титла: Re: HTML код
Публикувано от: ivo3d в Feb 04, 2009, 12:25
Искаш самата таблица да се центрира вертикално или съдържанието в нея?

Титла: Re: HTML код
Публикувано от: completer в Feb 04, 2009, 13:32
Уоу доста сте се поизписали! Благодаря много за помощта Ви златни сте!

Титла: Re: HTML код
Публикувано от: phantomlord в Feb 04, 2009, 14:07
Цитат на: ivo3d в Feb 04, 2009, 12:25
Искаш самата таблица да се центрира вертикално или съдържанието в нея?
Самата таблица да стои вертикално центрирана.

Титла: Re: HTML код
Публикувано от: vstoykov в Feb 04, 2009, 19:47
Ето как се прави таблица с <div> (в някои случаи се наблюдава несъвместимост с IE):

Код
GeSHi (HTML):
  3.  
  4. <title>Таблици с div</title>
  5.  
  6. <meta content="text/html; charset=Windows-1251" http-equiv="Content-Type">
  7. <meta content="Ръчно написан HTML код" name="generator">
  8.  
  9. <style type="text/css">
  10.   body {
  11.          background: #4D7307 ;
  12.          text-align: center;
  13.          margin: 0px;
  14.        }
  15.  
  16. .table    { display: table }
  17. .row      { display: table-row }
  18. .cell   { display: table-cell }
  19.  
  21.  
  22. </head>
  24.  
  25. <div class="table" style="width: 100%">
  26. <div class="row">
  27. <div class="cell" style="background: red">
  28. <p>ляво</p>
  29. </div>
  30. <div class="cell" style="background: yellow">
  31. <p>Дясно</p>
  32. </div>
  33.  
  34. </div>
  35. </div>
  36.  
  37. </body>
  38. </html>
  39.  

Титла: Re: HTML код
Публикувано от: phantomlord в Feb 04, 2009, 23:48
Нещо не мога да го напасна с кода ми:

Код
GeSHi (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <title>menu</title>
  5.  
  6. 	<meta content="text/html; charset=windows-1251" http-equiv="content-type">
  7.   	<meta content="phantomlord" name="author">
  8.   	<meta content="menu" name="description">
  9.  
  10. <style type="text/css"> 
  11. a.roll { display : block;
  12. font-family : arial;
  13. font-size : 14px;
  14. text-decoration : none;
  15. background : url("images/but1.gif");
  16. width : 125px;
  17. height : 25px;
  18. color : silver;
  19. font-weight : bold;
  20. text-align: center;
  21. padding-left : 2px;
  22. padding-top : 5px;
  23. }
  24.  
  25. a.roll:hover {
  26. background : url("images/but2.gif");
  27. color : white;
  28. font-weight : bold;
  29. }
  30.  
  31. a {
  32. font-family : arial;
  33. font-size : 14px;
  34. color : #999999;
  35. font-weight : bold;
  36. }
  37.  
  38. .table { background-image: url(images/menu.gif); }
  40.  
  41.  
  42. <base target="main">
  43. </head>
  44.  
  45. <body style="color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);" alink="#000099" link="#000099" vlink="#990099">
  46.  
  47. <table style="text-align: left; width: 146px; height: 500px;" class="table" border="0" cellpadding="0" cellspacing="0"><tbody>
  48.  
  49.     <tr>
  50.       <td style="height: 24px;">
  51. 	</td>
  52.     </tr>
  53.  
  54.     <tr>
  55.       <td><a href="pages/archi.html" class="roll">Архиватори</a></td>
  56.     </tr>
  57.  
  58.     <tr>
  59.       <td><a href="pages/benchmark.html" class="roll">Бенчмарк</a></td>
  60.     </tr>
  61.  
  62.     <tr>
  63.       <td><a href="pages/internet.htm" class="roll">Интернет</a></td>
  64.     </tr>
  65.  
  66.     <tr>
  67.       <td><a href="pages/utilities.htm" class="roll">Инструменти</a></td>
  68.     </tr>
  69.  
  70.     <tr>
  71.       <td><a href="pages/dict.htm" class="roll">Речници</a></td>
  72.     </tr>
  73.  
  74.     <tr>
  75.       <td><a href="pages/multimedia.htm" class="roll">Мултимедия</a></td>
  76.     </tr>
  77.  
  78.     <tr>
  79.       <td><a href="pages/fun.htm" class="roll">Благинки</a></td>
  80.     </tr>
  81.  
  82.     <tr>
  83.       <td><a href="pages/graphic.htm" class="roll">Графика</a></td>
  84.     </tr>
  85.  
  86.     <tr>
  87.       <td><a href="http://wallpapers.myfreesoft.net/" class="roll">Картинки</a></td>
  88.     </tr>
  89.  
  90.     <tr>
  91.       <td><a href="fonts/" class="roll">Шрифтове</a></td>
  92.     </tr>
  93.  
  94.     <tr>
  95.       <td><a href="skins/" class="roll">Skins</a></td>
  96.     </tr>
  97.  
  98.     <tr>
  99.       <td><a href="pages/linux.html" class="roll">Linux</a></td>
  100.     </tr>
  101.  
  102.     <tr>
  103.       <td><a href="pages/links.htm" class="roll">Връзки</a></td>
  104.     </tr>
  105.  
  106.     <tr>
  107.       <td><a href="http://myfreesoft.net/phpBB2" class="roll">Форум</a></td>
  108.     </tr>
  109.  
  110.     <tr>
  111.       <td><a href="http://myfreesoft.net/wordpress/" class="roll">Блог</a></td>
  112.     </tr>
  113.  
  114.     <tr>
  115.       <td style="height: 25px;">
  116.       </td>
  117.     </tr>
  118.  
  119.   </tbody>
  121. <br> 
  122. </body>
  123. </html>
  124.  


Powered by SMF 2.0 Beta 4 | SMF © 2006, Simple Machines LLC