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


Пользователь месяца
OlgaGetman OlgaGetman 1-й за Декабрь
Очков активности: 2100 10 тем, 170 сообщений, 7 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Ixman
    #1

    Ixman (o5cat.ru)
    Очков активности: 306 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 165 0 тем, 22 сообщения, 5 баллов репутации

  • Фотография Андрей WPMasterKZ
    #3

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 153 Вне конкурса за определение пользователя месяца

  • Фотография OlgaGetman
    #4

    OlgaGetman
    Очков активности: 105 Вне конкурса за определение пользователя месяца

  • Фотография Cheaplinks
    #5

    Cheaplinks (cheaplinks.pro)
    Очков активности: 63 0 тем, 21 сообщение, 2 балла репутации

  • Фотография Mandarin
    #6

    Mandarin
    Очков активности: 61.5 0 тем, 41 сообщение, 1 балл репутации

  • Фотография magnet
    #7

    magnet (rbfxdirect.com)
    Очков активности: 58.5 0 тем, 13 сообщений, 3 балла репутации

  • Фотография TimurR
    #8

    TimurR
    Очков активности: 54 Вне конкурса за определение пользователя месяца

  • Фотография Ilya74
    #9

    Ilya74
    Очков активности: 51 0 тем, 17 сообщений, 2 балла репутации

  • Фотография r0mZet
    #10

    r0mZet (rz-style.ru)
    Очков активности: 49.5 0 тем, 11 сообщений, 3 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.12.2018
  • Яндекс выдача: 22.01.2019
Топ 5 участников по репутации


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

#1 alex159

alex159
  • Неактивные
  • 492 сообщений
  • Репутация: 32
0

Отправлено 13 March 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

#2 alex159

alex159
    Topic Starter
  • Неактивные
  • 492 сообщений
  • Репутация: 32

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

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

#3 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

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

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

#4 alex159

alex159
    Topic Starter
  • Неактивные
  • 492 сообщений
  • Репутация: 32

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

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


  • 0

#5 Span415

Span415
  • Неактивные
  • 87 сообщений
  • Репутация: 6

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

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

#6 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

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

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

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


  • 0

#7 Kirinka

Kirinka
  • Неактивные
  • 57 сообщений
  • Репутация: 12

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

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


  • 1

#8 yury

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

Отправлено 14 March 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 March 2013 - 08:52

gin:0 auto

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

#10 yury

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

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

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

PS

gin:0 auto

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

#11 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 14 March 2013 - 10:29

gin:0 auto


новые свойства уже появились B)
  • 0

#12 Kirinka

Kirinka
  • Неактивные
  • 57 сообщений
  • Репутация: 12

Отправлено 14 March 2013 - 12:43

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


1) как уже ранее было сказано - вверху индексной страницы нужно указать <!DOCTYPE html> или тот, который вы используете (про DOCTYPE можно почитать, например здесь: webmascon.com/topics/coding/25a.asp)
2) правильные стили сами по себе еще никому не вредили
3) попытайтесь четко сформулировать ваш вопрос, что вы хотели получить. Например, расположить по центру либо растянуть на весь экран либо что-то другое
И, большая просьба, правильно указывайте цитаты и того кто говорил, чтобы было понятно что вы имеете ввиду
  • 0

#13 alex159

alex159
    Topic Starter
  • Неактивные
  • 492 сообщений
  • Репутация: 32

Отправлено 14 March 2013 - 16:11

yury, Случайно наверно вышло.
  • 0

#14 alex159

alex159
    Topic Starter
  • Неактивные
  • 492 сообщений
  • Репутация: 32

Отправлено 14 March 2013 - 19:24

Спасибо всем! Особенно isvetlichniy. Но я решил другим способом.
  • 0

robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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