Размер div'ов

VenCarbon · 07.07.2011, 19:36

Проблема в следующем:
Размеры блока как-то странно растягиваются: причем контент отображается нормально, а вот размеры блока немного смущают... Получается вот что:
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>

Igor' · 08.07.2011, 00:06

Добрый вечер! Судя по коду, вы только начинаете разрабатывать сайты. Я так же только делаю попытки. Возможно ваши трудности связаны с тем, что блоки вложены один в другой. Попробуйте выразить ширину в пикселях.

Могу предложить свой небольшой сайт kovalchuk-ik.narod.ru. Думаю как увидеть исходный код вы знаете. Я использовал абсолютный размер. В русско-язычной версии были проблемы с расположением рисунка. Пришлось немного поэкспериментировать, чтобы получилось так как есть. Не всегда срабатывает так, как ожидаешь.

redreem · 08.07.2011, 00:22

вы хоть бы сказали какой именно див в вашем коде так себя ведет. никто не будет заниматься угадыванием этого.

Novosad · 11.07.2011, 23:52

У вас каждый <div> размером 100%. Соответственно он расстягивается на всю допустимую длину. Либо ставьте те же проценты, что и для контента, либо задавайте в пикселях.

И для показа блоков лучше использовать css-свойство outline, нежели border.

Igor' · 12.07.2011, 17:16

Уважаемый Novosad! А где можно почитать о свойстве outline? Такое не попадалось.

Novosad · 12.07.2011, 18:49

Цитата:

Сообщение от Igor'

Уважаемый Novosad! А где можно почитать о свойстве outline? Такое не попадалось.

В любом справочние по css.
http://www.w3schools.com/cssref/pr_outline.asp

Оно действует точно так же, как и border, но это чисто дизайнерское свойство для упрощения работы: не влияет на страницу, а вам обводит нужный блок, чтобы вы видели его размеры.

person · 13.07.2011, 06:32

Попробуй поискать это, они на русском.
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ_CSS2.chm - это перевод спецификации
CSS. Каскадные таблицы стилей. Подробное руководство Эрик А. Мейер.pdf

√BlackCat · 13.07.2011, 18:21

Я не совсем понял что нужно.
Для начала, как сказал redreem объясните какой из дивов балуется.

А вообще, попробуйте воспользоватся тегами в стилях:
min-width: ;
max-width: ;

Novosad · 13.07.2011, 20:06

Цитата:

Сообщение от √BlackCat

Я не совсем понял что нужно.
Для начала, как сказал redreem объясните какой из дивов балуется.

А вообще, попробуйте воспользоватся тегами в стилях:
min-width: ;
max-width: ;

там все дивы балуются, потому что в 100% заданы.

√BlackCat · 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

08.07.2011, 00:06	#2
Igor'	Добрый вечер! Судя по коду, вы только начинаете разрабатывать сайты. Я так же только делаю попытки. Возможно ваши трудности связаны с тем, что блоки вложены один в другой. Попробуйте выразить ширину в пикселях. Могу предложить свой небольшой сайт kovalchuk-ik.narod.ru. Думаю как увидеть исходный код вы знаете. Я использовал абсолютный размер. В русско-язычной версии были проблемы с расположением рисунка. Пришлось немного поэкспериментировать, чтобы получилось так как есть. Не всегда срабатывает так, как ожидаешь.

08.07.2011, 00:22	#3
redreem	вы хоть бы сказали какой именно див в вашем коде так себя ведет. никто не будет заниматься угадыванием этого.

11.07.2011, 23:52	#4
Novosad	У вас каждый <div> размером 100%. Соответственно он расстягивается на всю допустимую длину. Либо ставьте те же проценты, что и для контента, либо задавайте в пикселях. И для показа блоков лучше использовать css-свойство outline, нежели border.

12.07.2011, 17:16	#5
Igor'	Уважаемый Novosad! А где можно почитать о свойстве outline? Такое не попадалось.

13.07.2011, 06:32	#7
person	Попробуй поискать это, они на русском. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ_CSS2.chm - это перевод спецификации CSS. Каскадные таблицы стилей. Подробное руководство Эрик А. Мейер.pdf

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

13.07.2011, 20:18	#10
√BlackCat	Но мучает то один хДД может быть его устраивает как они балуются)

07.07.2011, 19:36
Ссылки