Как указать ширину сайта?

Как указать ширину сайта?

Опции

alex159

Topic Starter сообщение

13.3.2013, 21:55; Ответить: alex159

Сообщение #1

Бывалый

Группа: User
Сообщений: 495
Регистрация: 2.2.2013
Поблагодарили: 0 раз
Репутация:

35

Тока начал изучать верстку и тут появилась проблема. Сайт уже доделал и заметил что есть очень большой отступ.
Вот на скрине. Таблица стоит 100%, а вот сайт имеет большую ширину. Через css попытался так сделать:

html {
margin-left:0px;
margin-right:0px;
width:50%;
}

Не получается, не судите строго только учусь.
[img]http://img33.imageshack.us/img33/558/754dc868222142bf8ac1bb8.png[/img]

html

<body bgcolor="#FFFFFF">
<table id="01" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>
  <div class="image">
   <img src="images/hr-black.gif" alt="">
   <div class="knopki">
   <span  class='st_sharethis_hcount' displayText='ShareThis'></span><span  class='st_myspace_hcount' displayText='MySpace'></span><span  class='st_livejournal_hcount' displayText='LiveJournal'></span><span  class='st_delicious_hcount' displayText='Delicious'></span><span  class='st_friendfeed_hcount' displayText='FriendFeed'></span><span  class='st_twitter_hcount' displayText='Tweet'></span><span  class='st_facebook_hcount' displayText='Facebook'></span><span  class='st_fblike_hcount' ></span><span  class='st_plusone_hcount' ></span>
   </div>
   </div>
   </td>
</tr>
<tr>
  <td>
   <img src="images/hr.gif" alt=""> </td>
</tr>
<tr>
  <td>
  <div class="image">
   <img src="images/logo.gif" alt=""> 
   <div class="google">
   <script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
   </div>
   </div></td>
</tr>
<tr>
  <td>
  <center><iframe id="pixlr" type="text/html" width="100%" height="600" src="http://pixlr.com/editor/" frameborder="0"></iframe></center>
</td>
</tr>
<tr>
  <td>
  <div class="image">
   <img src="images/text.gif" alt="">
   <center><h2>Photoshop online editor free</h2></center>
   <div class="photo">
   The photoshop online is an on-line version very popular among many users of the editor of images. You very quickly can alter the photos: to add the text, to turn a photo, to change the size, to make a collage, a label for a compact - a disk and many other functions. Huge value has that in case it is necessary to process quickly any photos or images, and the user is not behind the house computer a free photoshop online is an excellent exit from this situation. By means of a photoshop it is possible to load photos from your computer as to load a picture from the URL-address, or from a blank leaf to draw own new drawing. So, if you need to use very quickly the program a photoshop, without establishing and without downloading, simply use online free of charge photoshop. Having used a photoshop online without registration is means that you shouldn't send a paid sms, or to be registered, as it is accepted on many sites. In a photoshop online in Russian to you will master easily and well the lessons, so to say one of the most popular editor of photos Adobe Photoshop: how to work with layers, masks, contours, filters, navigation and many other tools. Unlike many other things a photo - editors in an online photoshop it is possible to cancel immediately one, and some actions and are possibility of use of hotkeys.
              On a site various templates for a photo online a photoshop are free of charge presented, using which you can, without leaving a site having loaded any photos or images, and there and then to execute various actions of processing: a photomontage, a scrap, addition of special effects, elimination of defects and many other things. Daily archives of templates, the various brushes, all kinds of frameworks, replenish with fresh works and are updated. Therefore, the user always has a good choice of tools. Besides, for those who don't know how to impose a framework on a photo, to do to a scrap of photos, to clean "red eyes" and to bleach teeth in photos or to carry out any other manipulations from a photo our site will give special lessons of training.
            On our site the most unique and advanced lessons of a photoshop online which have been translated from English, German of languages are collected. Authors of original Russian-speaking lessons are masters and experts of computer graphics. Our site suggests to find free of charge skills on creation of diverse special effects, drawing, photo processings and so on, to make a photoshop online. </h5>
   </div>
   </div>
   </td>
</tr>
<tr>
  <td>
  <div class="image">
   <img src="images/footer.gif" width="100%" alt="">
    <div class="footer-text">
   © 2011-2050 Photoshop-online.com
   </div>
   </div>

   </td>

</tr>
</table>
</body>

css

.image {
      position: relative;
      width: 100%; /* for IE 6 */
      }
h2 {
      position: absolute;
      top: 10px;
      left: 0;
      width: 100%;
   color: #4bbbfc;
      }

   .photo {
      position: absolute;
      top: 80px;
      left: 70px;
      width: 1200px;
   color: #dcdcdc;
      }
.footer-text {
      position: absolute;
      top: 15px;
      left: 59px;
      width: 100%;
   color: #dcdcdc;
      }
.knopki{
      position: absolute;
      top: 5px;
      left: 180px;
      width: 100%;
      }
.google{
      position: absolute;
      top: 9px;
      left: 569px;
      width: 100%;
      }

0

Ответить с цитированием данного сообщения

alex159 Topic Starter alex159Topic Starter 13.3.2013, 22:51; Сообщений: 495 Поблагодарили: 0 раз Репутация: 35 Просмотр профиля	Topic Starter 13.3.2013, 22:51; Ответить: alex159 Сообщение #2
Бывалый Группа: User Сообщений: 495 Регистрация: 2.2.2013 Поблагодарили: 0 раз Репутация: 35	Когда подключаю стили появляеться такое. Даже есле css пустой

isvetlichniy isvetlichniy 13.3.2013, 23:01; Сообщений: 622 Поблагодарили: 0 раз Репутация: 93 Просмотр профиля	13.3.2013, 23:01; Ответить: isvetlichniy Сообщение #3
Завсегдатай Группа: User Сообщений: 622 Регистрация: 28.11.2012 Поблагодарили: 0 раз Репутация: 93	попробуй использовать сброс стилей, чтобы убрать все отступы как сделать указано вот тут

alex159 Topic Starter alex159Topic Starter 13.3.2013, 23:31; Сообщений: 495 Поблагодарили: 0 раз Репутация: 35 Просмотр профиля	Topic Starter 13.3.2013, 23:31; Ответить: alex159 Сообщение #4
Бывалый Группа: User Сообщений: 495 Регистрация: 2.2.2013 Поблагодарили: 0 раз Репутация: 35	photoshop-online.com, не помогает Просто не понимаю почему? Стили подключил и все вылазит даже если там все пусто.

Span415 Span415 13.3.2013, 23:41; Сообщений: 87 Поблагодарили: 0 раз Репутация: 6 Просмотр профиля	13.3.2013, 23:41; Ответить: Span415 Сообщение #5
Частый гость Группа: User Сообщений: 87 Регистрация: 28.6.2012 Поблагодарили: 0 раз Репутация: 6	Совет, блочной версткой верстай меньше гемороя будет.

isvetlichniy isvetlichniy 14.3.2013, 1:11; Сообщений: 622 Поблагодарили: 0 раз Репутация: 93 Просмотр профиля	14.3.2013, 1:11; Ответить: isvetlichniy Сообщение #6
Завсегдатай Группа: User Сообщений: 622 Регистрация: 28.11.2012 Поблагодарили: 0 раз Репутация: 93	да можно и таблицами, только грамотно структуру составить нужно и не делать смесь всего подряд хотя конечно блочная предпочтительней

Kirinka Kirinka 14.3.2013, 2:13; Сообщений: 57 Поблагодарили: 0 раз Репутация: 12 Просмотр профиля	14.3.2013, 2:13; Ответить: Kirinka Сообщение #7
Частый гость Группа: User Сообщений: 57 Регистрация: 8.2.2013 Из: Харьков Поблагодарили: 0 раз Репутация: 12	alex159, Если вы хотите, чтобы таблица растягивалась на весь экран - задайте ей ширину 100%, но тогда картинки нужно вставлять через css с помощью background, чтобы они заливали все пространство, а не по ширине 1328px. Либо расположите таблицу по центру, для этого можно обвернуть ее в div и задать свойство margin:0 auto; А обрубить пол экрана средствами css не удастся :)

yury_mw yury_mw 14.3.2013, 9:37; Сообщений: 648 Поблагодарили: 0 раз Репутация: 195 Просмотр профиля	14.3.2013, 9:37; Ответить: yury_mw Сообщение #8
Завсегдатай Группа: User Сообщений: 648 Регистрация: 13.5.2009 Поблагодарили: 0 раз Репутация: 195	alex159, * Где доктайп? И где контейнер html, свойства которого вы устанавливаете стилями html { margin-left:0px; margin-right:0px; width:50%; } * Чего вы хотите достичь, устанавливая ширину html в 50%? Отсюда и образуется пустое место справа в полэкрана * Вы нигде не устанавливаете ширину таблицы в 100%. Сделать это можно, например, так: <table id="01" border="0" cellpadding="0" cellspacing="0" width="100%"> Без такой установки ширина таблицы установится не более, чем займет ее содержимое. * Для чего у вас везде используется абсолютное позиционирование? В комбинации с отступами и установкой ширины в 100% это у вас приводит к выходу соответствующих блоков за пределы экрана. Если есть желание сместить содержимое какого-то блока, то следует использовать поля и отступы в стилях этого блока: свойства padding и margin. Примерно так: h2 { text-align: center; padding: 10px 0 0 0; color: #4bbbfc; } .photo { text-align: left; padding: 70px 0 0 70px; color: #dcdcdc; } И так далее везде. Свойства position: relative и absolute в вашем случае верстки только мешают и путают вас. И установку ширины блоков в 100% везде в стилях уберите: в нормальном потоке блоки по умолчанию занимают всю доступную ширину.

alex159 Topic Starter alex159Topic Starter 14.3.2013, 9:52; Сообщений: 495 Поблагодарили: 0 раз Репутация: 35 Просмотр профиля	Topic Starter 14.3.2013, 9:52; Ответить: alex159 Сообщение #9
Бывалый Группа: User Сообщений: 495 Регистрация: 2.2.2013 Поблагодарили: 0 раз Репутация: 35	gin:0 auto Это я уже начал экспериментировать. Тут я понял что то не так с таблицей. Если не подключать стили все нормально.

yury_mw yury_mw 14.3.2013, 11:08; Сообщений: 648 Поблагодарили: 0 раз Репутация: 195 Просмотр профиля	14.3.2013, 11:08; Ответить: yury_mw Сообщение #10
Завсегдатай Группа: User Сообщений: 648 Регистрация: 13.5.2009 Поблагодарили: 0 раз Репутация: 195	alex159, с таблицей все нормально, за исключением неустановленной ширины. А вот с абсолютным позиционированием у вас, как раз, все косяки и начинаются. Замените его на обычные поля и отступы, как показано у меня, и все наладится. PS gin:0 auto alex159, я такого не говорил

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Быстрая индексация страниц сайта и обратных ссылок - 2Index	38	2Index	6622	Вчера, 12:56 автор: 2Index
Арбитражники, как ведете учет расходов и доходов?	11	Boymaster	1799	17.4.2024, 23:35 автор: Boymaster
Как вывести деньги в Украине с заблокированного Юмани ?	29	freeax	4808	17.4.2024, 1:19 автор: sergio11
Какой % отказов нормален для сайта?	11	Aloof	2811	16.4.2024, 12:48 автор: diviner99
SiteAnalyzer - бесплатная программа для аудита и анализа сайта	77	Chaser	74211	9.4.2024, 11:36 автор: Chaser