Подскажите, как сделать фон (теги)

turner12 · November 23, 2011

Добрый вечер! Подскажите, пожалуйста, как сделать фон в таком макете. Т.е., как я понимаю, зелёный фон делается так: я делаю вертикальный срез в ФШ и растягиваю его на 100% по ширине, а вот как быть с центральной вставкой (кремовой)? Она должна одинаково смотреться на мониторах разного разрешения, т.е., быть железно по центру и отступать от краёв экрана на ** пикслей. Т.е, быть как бы "резиновой", чтобы выглядело одинаково со всех сторон. Если я просто вырежу её на отдельный слой в ФШ, размер там будет фиксированный, а это чревато лишними отступами по краям. Как это оформить и как лучше верстать такой макет, слоями или таблицей?

Softlink · November 24, 2011

я думаю, тут можно на псевдоэлементах подвесить круголки, которые сделаны картинками. Ну или просто на абсолютах по углам раскидать.

turner12 · November 24, 2011

Эм, подскажите хотя бы примерный код начинающему ламмеру, пожалуйста

Softlink · November 24, 2011

Эм, подскажите хотя бы примерный код начинающему ламмеру, пожалуйста

Примерный код. Вот эти темные блоки заменить картинками. Верхние надо подогнать под градиент.

turner12 · November 24, 2011

Эм, подскажите хотя бы примерный код начинающему ламмеру, пожалуйста
Примерный код. Вот эти темные блоки заменить картинками. Верхние надо подогнать под градиент.

Благодарю попробовала с этим кодом, возник следующий вопрос: если оставить позицианирование relative сenter - получаются белые промежутки, которые я не понимаю как убрать, но всё выстроено действительно ровно по краям; есть оставить relative как было в коде, всё равно, но как избавиться от белой полосы справа? .wrap{ position:relative; width:623px; height:623px;} - ширина и высота подбирались методом тыка, чтобы хоть как-то оно было ровненько, однако, с center это "ровненько" сбивается на края экрана (середина пустая); правые\левые уголки пыталась ровнять, сдвигать к центру, но опять же выползает подложка и размер самого хоста не меняется. html{

height:100%;

}

body{

margin:0;

padding:0;

height:1000px;

width:1000px;

______________

С цифрами экспериментировала, толку не вышло :blink: :facepalmxd:

плюс ко всему, не понимаю, почему не получается писать поверх этого фона.

Edited November 24, 2011 by turner12

Softlink · November 25, 2011

position:center - не существует. Чтобы выровнять по центру макет надо сделать так:

.wrap{
width:623px;
margni:0 auto;
}

для резины вообще не надо указывать ширину

для полурезины:

.wrap{
min-width:623px;
max-width:1270px;
margin:0 auto;
}

turner12 · November 25, 2011

Так, а почему при попытке писать текст в бодике после вставки картинок фона, ничего не видно, будто текст идёт под фоном. Попробовала заменить wrap на Ваш, картинки с фоном почему-то выстроились по левому краю одна под другой, полностью проигнорировав абсолюты

Softlink · November 25, 2011

Так, а почему при попытке писать текст в бодике после вставки картинок фона, ничего не видно, будто текст идёт под фоном. Попробовала заменить wrap на Ваш, картинки с фоном почему-то выстроились по левому краю одна под другой, полностью проигнорировав абсолюты

Выкладывайте вашу верстку куда-нибудь и будем смотреть что не так. Иначе еще долго будем тыкать пальцем в небо.

turner12 · November 25, 2011

HTML (за основу взят шаблон с сайта htmlbook с 2 колонками через div):

<html>
 <head> <link href="new  3.css" rel="stylesheet" type="text/css" />
 </head>
 <body>

 <div class="wrap">
      <span class="left-top"> <img src="1.jpg"></span>
      <span class="right-top"><img src="2.jpg"></span>
      <span class="left-bottom"><img src="3.jpg"></span>
      <span class="right-bottom"><img src="4.jpg"></span>
    </div>



    <p><a href="stat.html">Статистика турнира</a></p>
    <p><a href="interview.html">Интервью с главным судьей</a></p>
    <p><a href="ask.html">Конкурсные вопросы</a></p>

   <div class="content">
    <h2>Опрос общественного мнения показал</h2>
    <p>98754398597549957947548y4iyi4uy58457y84975</p> 
   </div>
   <div id="footer">© Влад Мержевич</div>

 </body>
</html>

CSS:

html{
height:100%;
}

body{
margin:0;
padding:0;
height:1000px;
width:1000px;
}


   .content {
   height: 790px;
    margin-left: 30px; /* Отступ слева */
	text-align: center; 
    padding: 10px; /* Поля вокруг текста */
   }
   #footer {
    background: #8fa09b; /* Цвет фона подвала */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
    clear: left; /* Отменяем действие float */
   }


.wrap{
width:623px;
margni:0 auto;
}


span{
display:block;
position:absolute;
width:100px;
height:100px;
}

.left-top{
top:0;
left:0;
}

.right-top{
top:0;
right:0;
}

.left-bottom{
bottom:0;
left:0;
}

.right-bottom{
bottom:0;
right:0;
}

Softlink · November 26, 2011

Странная у вас логика. Для враппера сделать фон, но все содержимое из него вытащить.

Вот что-то вроде такого у вас должно получиться.

turner12 · November 26, 2011

Так ведь начинающий ламмер мне показалось, фон и границы там не нужны, хедер позицианирует картинку вверх влево, поэтому убрала. Как таковой враппер только изучаю... http://s57.radikal.ru/i155/1111/47/4d1189fd6d5f.jpg попробовала Вашу правку, получилось вот так О_О

Edited November 26, 2011 by turner12

Sign In

Подскажите, как сделать фон (теги)

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information