Jump to content

Как обнести рекламный баннер в красивую рамку ?

juran12

By juran12,
in Разное

 Share Followers 0

Recommended Posts

juran12

juran12 2

Posted
Posted

Помогите пожалуйста!

 

Вот к примеру страница сайта, http://remontkd.ru/poleznye-sovety/kak-vybrat-vannu.html, на ней есть два рекламных баннера. Один с права, а другой в самом низу под статьей. Баннеры без рамок, так я хочу поместить данные баннеры в  рамку, как к примеру с лева где навигация. Каким кодом это можно сделать ?

Спасибо всем за помощь.

Link to post
Share on other sites
XolmanOFF™

XolmanOFF™ 5

Posted
Posted

Помогите пожалуйста!

 

Вот к примеру страница сайта, http://remontkd.ru/poleznye-sovety/kak-vybrat-vannu.html, на ней есть два рекламных баннера. Один с права, а другой в самом низу под статьей. Баннеры без рамок, так я хочу поместить данные баннеры в  рамку, как к примеру с лева где навигация. Каким кодом это можно сделать ?

Спасибо всем за помощь.

С помощью CSS можно сделать это, достаточно лишь к оформлению блока в CSS добавить это

border:1px solid red;  // 1px толщина рамки(можете указать свою) red - цвет рамки(можете указать свой какой хотите
        
    border-radius: 5px; //скругление углов рамки, поиграйте со значением и выберите оптимальный для вас вариант

Посмотрел Ваш сайт, Вам необходимо в Style.css найти .reklama .reklama5 .reklama3

и добавить данный код к каждому классу

Link to post
Share on other sites
juran12

juran12 2

Posted
  • Author
Posted

С помощью CSS можно сделать это, достаточно лишь к оформлению блока в CSS добавить это



border:1px solid red;  // 1px толщина рамки(можете указать свою) red - цвет рамки(можете указать свой какой хотите
        
    border-radius: 5px; //скругление углов рамки, поиграйте со значением и выберите оптимальный для вас вариант

Посмотрел Ваш сайт, Вам необходимо в Style.css найти .reklama .reklama5 .reklama3

и добавить данный код к каждому классу

 

Спасибо огромное! Я в курсе. У же начал эксспереминтировать, и уже получилось.))))

Link to post
Share on other sites
juran12

juran12 2

Posted
  • Author
Posted

http://remontkd.ru/poleznye-sovety/kak-vybrat-vannu.html 

Вот на этой странице я вывел еще один баннер, но он не полностью влазит, обрезает его под конец. Получается страница не расширяется от баннера в низ, а расширяется от текста только. Будет больше текста, баннер выводиться полностью.

Так же и на страницах второго уровня (категориях), к примеру  http://remontkd.ru/poleznye-sovety/, первый баннер показывается, а второй нет, так как баннер не растягивает страницу, а страницу растягивает текст. 

Link to post
Share on other sites
XolmanOFF™

XolmanOFF™ 5

Posted
Posted

http://remontkd.ru/poleznye-sovety/kak-vybrat-vannu.html 

Вот на этой странице я вывел еще один баннер, но он не полностью влазит, обрезает его под конец. Получается страница не расширяется от баннера в низ, а расширяется от текста только. Будет больше текста, баннер выводиться полностью.

Так же и на страницах второго уровня (категориях), к примеру  http://remontkd.ru/poleznye-sovety/, первый баннер показывается, а второй нет, так как баннер не растягивает страницу, а страницу растягивает текст. 

Найти класс .content и добавь

overflow:hidden;
Link to post
Share on other sites
juran12

juran12 2

Posted
  • Author
Posted

Не вышло. Нашол, но там стоят overflow:hidden;.

А где не стояло подобвлял, ни чего не поменялось.

 

 

#content{
overflow: hidden;
position: relative;
clear: both;
width: 960px;
margin: 20px 10px;
min-height: 650px;
}

#content > nav {
overflow: hidden;
position: relative;
width: 225px;
float: left;
}

#content > nav > ul{
list-style:none;
overflow: hidden;
position: relative;
width: 223px;
margin-right:15px;
border: 1px solid #c1c1c1;
border-radius:0 10px 10px 0;
background-color: #ece9e2;
}

#content > nav > ul > li > span {
background-color: #FEA700;
color: #2B2828;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 40px;
padding-left: 25px;
text-transform: uppercase;
}

#content > nav > ul > li > ul {
margin: 10px 0;
}

#content > nav > ul li a {
font-size: 13px;
color: #2b2828;
text-decoration: none;
font-weight: normal;
font-family: 'Tahoma',sans-serif;
margin-left: 20px;
padding-left: 20px;
margin-bottom: 1px;
}

#content > nav > ul li a:hover {
border-bottom:1px dotted #2b2828;
margin-bottom: 0;
}

#content > nav > ul > li:first-child > ul > li > a{
background: url(../img/left1.png) 0 50% no-repeat;
}
#content > nav > ul > li:nth-child(2) > ul > li > a{
background: url(../img/left2.png) 0 50% no-repeat;
}

#content > nav > ul > li:first-child > span {
background-color: #fea700;
}

#content > nav > ul > li:nth-child(2) > span {
background-color: #5cbae2;
border-radius: 0 10px 0 0;
}

#content > article {
margin: 0 145px 0 245px;
min-height:100px;
text-align: justify;
color:#444;
*background-color: #BCCFD6;
padding:10px;
border-radius:10px;
}

#content > article > h1 {
text-align: center;
text-transform: uppercase;
margin-bottom:10px;
}

#sidebarright {
position: absolute;
right: 4px;
top: 10px;
width: 225px;
}

#banner {
background-color: #fcfcfc;
text-align: center;
font-size: 14px;
color: #555;
border-radius: 0px;
box-shadow:none;
border:1px solid #aaa;
padding:200px 0;
margin:0;
text-decoration: blink;
border-radius:10px 0 0 10px;
}

Link to post
Share on other sites
juran12

juran12 2

Posted
  • Author
Posted

Не вышло. Нашол, но там стоят overflow:hidden;.

А где не стояло подобвлял, ни чего не поменялось.

 

 

#content{

overflow: hidden;

position: relative;

clear: both;

width: 960px;

margin: 20px 10px;

min-height: 650px;

}

 

#content > nav {

overflow: hidden;

position: relative;

width: 225px;

float: left;

}

 

#content > nav > ul{

list-style:none;

overflow: hidden;

position: relative;

width: 223px;

margin-right:15px;

border: 1px solid #c1c1c1;

border-radius:0 10px 10px 0;

background-color: #ece9e2;

}

 

#content > nav > ul > li > span {

background-color: #FEA700;

color: #2B2828;

display: block;

font-size: 14px;

font-weight: bold;

line-height: 40px;

padding-left: 25px;

text-transform: uppercase;

}

 

#content > nav > ul > li > ul {

margin: 10px 0;

}

 

#content > nav > ul li a {

font-size: 13px;

color: #2b2828;

text-decoration: none;

font-weight: normal;

font-family: 'Tahoma',sans-serif;

margin-left: 20px;

padding-left: 20px;

margin-bottom: 1px;

}

 

#content > nav > ul li a:hover {

border-bottom:1px dotted #2b2828;

margin-bottom: 0;

}

 

#content > nav > ul > li:first-child > ul > li > a{

background: url(../img/left1.png) 0 50% no-repeat;

}

#content > nav > ul > li:nth-child(2) > ul > li > a{

background: url(../img/left2.png) 0 50% no-repeat;

}

 

#content > nav > ul > li:first-child > span {

background-color: #fea700;

}

 

#content > nav > ul > li:nth-child(2) > span {

background-color: #5cbae2;

border-radius: 0 10px 0 0;

}

 

#content > article {

margin: 0 145px 0 245px;

min-height:100px;

text-align: justify;

color:#444;

*background-color: #BCCFD6;

padding:10px;

border-radius:10px;

}

 

#content > article > h1 {

text-align: center;

text-transform: uppercase;

margin-bottom:10px;

}

 

#sidebarright {

position: absolute;

right: 4px;

top: 10px;

width: 225px;

}

 

#banner {

background-color: #fcfcfc;

text-align: center;

font-size: 14px;

color: #555;

border-radius: 0px;

box-shadow:none;

border:1px solid #aaa;

padding:200px 0;

margin:0;

text-decoration: blink;

border-radius:10px 0 0 10px;

}

Может надо что то в последнем коде поменять, где баннер ? Он как бы отвечает за вывод в правой стороне рекламы

Link to post
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Followers 0
Go to topic listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...