Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Размер div'ов

Обсуждение темы Размер div'ов в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Проблема в следующем: Размеры блока как-то странно растягиваются: причем контент отображается нормально, а вот размеры блока немного смущают... Получается вот что: 1.jpg Можно ...


Закрытая тема
 
Опции темы
Старый 07.07.2011, 19:36   #1
Проблема в следующем:
Размеры блока как-то странно растягиваются: причем контент отображается нормально, а вот размеры блока немного смущают... Получается вот что:
1.jpg
Можно сделать так, чтобы размер самого блока был таким же, как и размер контента?

Код такой:
style.css:
Код:
html, body 
{
	background-color: #FFFFFF;
	height:100%;
}

.main
{
    width:70%;
    margin:0 auto;
    background-color: #FFFFFF;
    border:2px solid red;
}

.logo
{
    width: 100%;
    height:25%;
    margin:0 auto;
    border:2px solid black;
}

#micLogo 
{
    position:relative;
    width:50%;
    margin:-150px -130px 0 0;
    float:right;
    border:2px solid black;
}

#bikeDude 
{
    position:relative;
    width:300px;
    height:50%;
    margin:-330px -300px 0 100px;
    float:right;
    border:2px solid black;
}

.comments, .blogs
{
    position:relative;
    height:100%;
    width:100%;
    float:right;
    border:2px solid black;    
}
index.htm
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>бла бла</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="main">
            <div class="logo">
                <img alt="Лого" style="width:100%" src="imgs/topNew.jpg" />
                <div id="micLogo"><img alt="Лого" style="width:30%" src="imgs/micLogo.gif" /></div>
                <div id="bikeDude"><img alt="Чувак на велосипеде" style="width:30%" src="imgs/bikeDude.gif" /></div>
            </div>
            <div class="comments"><img alt="Комментарии" style="width:20%; float:right" src="imgs/comments.jpg" /></div>
            <div class="blogs"><img alt="Блоги" style="width:20%; float:right" src="imgs/blogs.jpg" /></div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>
 
Старый 07.07.2011, 19:36
Ссылки
Старый 08.07.2011, 00:06   #2
Добрый вечер! Судя по коду, вы только начинаете разрабатывать сайты. Я так же только делаю попытки. Возможно ваши трудности связаны с тем, что блоки вложены один в другой. Попробуйте выразить ширину в пикселях.

Могу предложить свой небольшой сайт kovalchuk-ik.narod.ru. Думаю как увидеть исходный код вы знаете. Я использовал абсолютный размер. В русско-язычной версии были проблемы с расположением рисунка. Пришлось немного поэкспериментировать, чтобы получилось так как есть. Не всегда срабатывает так, как ожидаешь.
 
Старый 08.07.2011, 00:22   #3
вы хоть бы сказали какой именно див в вашем коде так себя ведет. никто не будет заниматься угадыванием этого.
 
Старый 11.07.2011, 23:52   #4
У вас каждый <div> размером 100%. Соответственно он расстягивается на всю допустимую длину. Либо ставьте те же проценты, что и для контента, либо задавайте в пикселях.

И для показа блоков лучше использовать css-свойство outline, нежели border.
 
Старый 12.07.2011, 17:16   #5
Уважаемый Novosad! А где можно почитать о свойстве outline? Такое не попадалось.
 
Старый 12.07.2011, 18:49   #6
Цитата:
Сообщение от Igor' Посмотреть сообщение
Уважаемый Novosad! А где можно почитать о свойстве outline? Такое не попадалось.
В любом справочние по css.
http://www.w3schools.com/cssref/pr_outline.asp

Оно действует точно так же, как и border, но это чисто дизайнерское свойство для упрощения работы: не влияет на страницу, а вам обводит нужный блок, чтобы вы видели его размеры.
 
Старый 13.07.2011, 06:32   #7
Попробуй поискать это, они на русском.
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ_CSS2.chm - это перевод спецификации
CSS. Каскадные таблицы стилей. Подробное руководство Эрик А. Мейер.pdf
 
Старый 13.07.2011, 18:21   #8
Я не совсем понял что нужно.
Для начала, как сказал redreem объясните какой из дивов балуется.

А вообще, попробуйте воспользоватся тегами в стилях:
min-width: ;
max-width: ;
 
Старый 13.07.2011, 20:06   #9
Цитата:
Сообщение от √BlackCat Посмотреть сообщение
Я не совсем понял что нужно.
Для начала, как сказал redreem объясните какой из дивов балуется.

А вообще, попробуйте воспользоватся тегами в стилях:
min-width: ;
max-width: ;
там все дивы балуются, потому что в 100% заданы.
 
Старый 13.07.2011, 20:18   #10
Но мучает то один хДД может быть его устраивает как они балуются)
 
Старый 13.07.2011, 20:18
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
100% размер мувика radius Технологии Flash 8 16.02.2009 22:51
Как уменьшить размер swf? lyolik Технологии Flash 2 28.11.2008 21:58
размер шрифта в css Xook HTML, CSS, JavaScript 2 03.09.2008 22:21
Размер страницы и размер монитора Отшельник HTML, CSS, JavaScript 7 21.07.2008 07:48
Размер файла Mermaid Технологии Flash 12 14.04.2005 02:10


Текущее время: 16:41. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум