Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

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

#1 alex159

alex159
  • Пользователь
  • 492 сообщений
  • Репутация: 32
0

Отправлено 13 Март 2013 - 20:55

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

html {
margin-left:0px;
margin-right:0px;
width:50%;
}
Не получается, не судите строго только учусь.
Изображение

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=""> <!--width="1328" height="1"--></td>
</tr>
<tr>
  <td>
  <div class="image">
   <img src="images/logo.gif" alt=""> <!--width="1328" height="108" -->
   <div class="google">
   <script type="text/javascript"><!--
google_ad_client = "ca-pub-1674056099468468";
/* 728x90 */
google_ad_slot = "0160872177";
google_ad_width = 750;
google_ad_height = 90;
//-->
</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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Оптимальная ширина сайта
  2. Какая ширина сайта оптимальна?
  3. Ширина сайта в мобильной версии
  4. Какой регион указывать при проверки позиций сайта?
  5. Миниатюры на сайте разных размеров. Как исправить?

#2 alex159

alex159
    Topic Starter
  • Пользователь
  • 492 сообщений
  • Репутация: 32

Отправлено 13 Март 2013 - 21:51

Когда подключаю стили появляеться такое. Даже есле css пустой
  • 0

#3 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 13 Март 2013 - 22:01

попробуй использовать сброс стилей, чтобы убрать все отступы
как сделать указано вот тут
  • 1

#4 alex159

alex159
    Topic Starter
  • Пользователь
  • 492 сообщений
  • Репутация: 32

Отправлено 13 Март 2013 - 22:31

photoshop-online.com, не помогает Просто не понимаю почему? Стили подключил и все вылазит даже если там все пусто.


  • 0

#5 Span415

Span415
  • Пользователь
  • 87 сообщений
  • Репутация: 6

Отправлено 13 Март 2013 - 22:41

Совет, блочной версткой верстай меньше гемороя будет.
  • 1

#6 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 14 Март 2013 - 00:11

да можно и таблицами, только грамотно структуру составить нужно и не делать смесь всего подряд

хотя конечно блочная предпочтительней


  • 0

#7 Kirinka

Kirinka
  • Пользователь
  • 57 сообщений
  • Репутация: 12

Отправлено 14 Март 2013 - 01:13

alex159, Если вы хотите, чтобы таблица растягивалась на весь экран - задайте ей ширину 100%, но тогда картинки нужно вставлять через css с помощью background, чтобы они заливали все пространство, а не по ширине 1328px. Либо расположите таблицу по центру, для этого можно обвернуть ее в div и задать свойство margin:0 auto; А обрубить пол экрана средствами css не удастся :)


  • 1

#8 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 14 Март 2013 - 08:37

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% везде в стилях уберите: в нормальном потоке блоки по умолчанию занимают всю доступную ширину.
  • 1

#9 alex159

alex159
    Topic Starter
  • Пользователь
  • 492 сообщений
  • Репутация: 32

Отправлено 14 Март 2013 - 08:52

gin:0 auto

Это я уже начал экспериментировать. Тут я понял что то не так с таблицей. Если не подключать стили все нормально.
  • 0

#10 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 14 Март 2013 - 10:08

alex159,
с таблицей все нормально, за исключением неустановленной ширины.
А вот с абсолютным позиционированием у вас, как раз, все косяки и начинаются.
Замените его на обычные поля и отступы, как показано у меня, и все наладится.

PS

gin:0 auto

alex159, я такого не говорил B)
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru