Другие языки программирования и технологии

Я разделил фон на блоки, и получилась вот такая фигня, что делать? (веб дизайн)

Вот так выглядет сайт:



Вот код:

<html>

<head>

<title>Startseite</title>

<style>

#header {

margin:0px auto;

width:760px;

height:260px;

}

#block1 {

display:inline-block;

width:88px;

height:106px;

background-image:url('./images/design002_1.jpg');

}

#block2 {

display:inline-block;

width:345px;

height:106px;

background-image:url('./images/design002_2.jpg');

}



#block3 {

display:inline-block;

width:317px;

height:106px;

background-image:url('./images/design002_3.jpg');

}



#block4 {

display:inline-block;

width:88px;

height:66px;

background-image:url('./images/design002_4.gif');

}

#block5 {

display:inline-block;

width:345px;

height:66px;

background-image:url('./images/design002_5.jpg');

}

#block6 {

display:inline-block;

width:317px;

height:66px;

background-image:url('./images/design002_6.jpg');

}

#block7 {

display:inline-block;

width:88px;

height:43px;

background-image:url('./images/design002_7.jpg');

}



#block8 {

display:inline-block;

width:345px;

height:43px;

background-image:url('./images/design002_8.jpg');

}

#block9 {

display:inline-block;

width:317px;

height:43px;

background-image:url('./images/design002_9.jpg');

}

#block10 {

display:inline-block;

width:88px;

height:46px;

background-image:url('./images/design002_10.jpg');

}

#block11 {

display:inline-block;

width:88px;

height:46px;

}

#block12 {

display:inline-block;

width:345px;

height:46px;

background-image:url('./images/design002_11.jpg');

}



#block13 {

display:inline-block;

width:317px;

height:46px;

background-image:url('./images/design002_12.jpg');

}

</style>

</head>

<body>

<div id="header">

<div id="block1"></div>

<div id="block2"></div>

<div id="block3"></div>

<br />

<div id="block4"></div>

<div id="block5"></div>

<div id="block6"></div>

<br />

<div id="block7"></div>

<div id="block8"></div>

<div id="block9"></div>

<br />

<div id="block11"></div>

<div id="block12"></div>

<div id="block13"></div>

</div>

</body>

</html>

Как сделать фон без отступов? В чём проблема?
Во-первых, нафига тебе <br>, если можно использовать nth-child и задавать clear: left?
Во-вторых, inline-block прекрасно заменяется на float:left, чтобы первый пункт обрёл смысл
В-третьих, смотри через firebug какие у блоков имеются отступы.
ТМ
Тальгат Мусифуллин
89 229
Лучший ответ
Афтандил Рахманов Как сделать вот такой дизайн?

Если везде padding, border-width и margin стоят по нулям, то, скорее всего, где-то закралась синтаксическая ошибка.
что-то ты, парень, творишь не понятное! Зачем столько блоков? У тебя 3-х колонный макет + шапка + футер + менюшка = 6 дивов. Ну может еще могут быть блоки-контейнеры, содержащие другие блоки, например 3 колонки еще и в общем контейнере. (здесь я склоняюсь к мысли, что нужно бордеры обнулить)
Афтандил Рахманов Там пробелы были между дивами, бордеры, паддин, мэрджин тут не причём!
Идиотизм резать картинку на блоки.
Когда то в древние времена интернет был очень медленным, верстку делали таблицами, и вот так извращались над картинками. Но сейчас этот способ только замедлит загрузку, так как браузер пошлет 11 запросов на сервер, которые станут в очередь вместе с другими запросами. Поверьте, одна картинка скачается горазно быстрее, чем 11 мелких.

А у тебя причина в том, что ты блокам задал inline-block и теперь блоки выводятся как текст. И пробелы между ними тоже выводятся.

Я бы на вашем месте вывел бы две картинки, бумажки, которые свисают сверху, и орнамент. И красный фон стилями.
Афтандил Рахманов А как сделать вот такой дизайн?

поставь border:0px; - хотя это может быть из-за display:inline-block; оставь просто block, без inline