Подскажите ...

mOnYa · December 13, 2007

http://privetgleb.narod.ru/вот ссылка там неотображаеться корректно текст , но суть будет ясна , нужно зделать что-бы сверху и снизу тоже был бордер ... , но чтобы он незалазил на картинки угловые ...

P.S - заранее спасибо всем откликнушимся

yopopt · December 13, 2007

Вы не могли бы где-нибудь выложить код с картинками. Или архив с ним.

mOnYa · December 13, 2007

вот выложил на народе ...

mOnYa · December 13, 2007

Ну человеки помогите пожалайста начинающему дизе ... ;-)

gaz.spb · December 13, 2007

charset=utf-8 поменяйте на charset=win-1251

mOnYa · December 13, 2007

Спасибо конечно , но ето я и сам в состоянии был понять ... :-) где-же каконибудь про ...

кто знает в чем дело ....

Fu-tai · December 14, 2007

Сделай новый файл, напиши все что нужно написать и поставь кодировку utf, сохрани файл в формате UTF.

Вариантов решить проблемму с бордерами масса.

Как вариант укажи бордюр для верхнего дива и для нижнего, соответственно для верхней границы и для нижней!

почитай тут http://designformasters.info/posts/round-corners-no-image/

yopopt · December 14, 2007

to mOnYa Можно между левым и правым верхним углом добавить ещ? один блок и поставить ему border-top или картинку фоном. Так же внизу.

mOnYa · December 16, 2007

Люди я прочитал все статьи что мне давали ,

сделал кучи вариантов но ничего непомогает ...

Я закруглял углы етого сайта с помощю CSS , вставлял картинки ...(максимум что у меня получилась копия етого сайта но без верхнего и нижнего бордера ...)вот ссылка http://privetgleb.narod.ru/ каким он должен быть ...перепробовал кучи вариантов , единственное , я не умею пользоваться Z - indexom ...

Взгляните ктото , и скажите пожалуйста можно-ли етот сайт зделать без употребления z-indexa ...

Есле нет , то соответственно прошу какойто материал по употреблению тега z-index ...

Есле ктото знает как подругому опишите пожалуста подробненько как ето зделать

П.С. Заранее благодарен всем откликнувшимся ...

maddogrts · December 17, 2007

http://maddog-rts5.narod.ru/

Если ты уберешь лишнее сделаешь то что тебе надо. Не знаю почему тебе не помогли советы )

mOnYa · December 17, 2007

Пример . хороший , но там- же CSS непосмотриш , там отдельный файл CSS ... и я смотрю там несостыкованы border-ы ... может ето специально прописано , а может ошибка , вобщем есле у когото есть примерчик любой с закругленными углами и бордером повсему периметру , выкиньте пожалуйста ....

maddogrts · December 17, 2007

mOnYa )))), поставь себе фаер фокс с фаербургером будет тебе счасте

Css вот :

@media screen {
.con {
width: 50%;
background: #fff;
margin: 100px;
}
.top-left {
margin-right: 10px; 
background-image: url('images/corners.bmp');
height: 10px; 
font-size: 2px; /* correct height for IE */
}

.top-right {
margin-top: -10px; 
margin-left: 10px; 
background-image: url('images/corners.bmp'); 
background-position: 100% 0; 
height: 10px; 
font-size: 2px;
}

.bottom-left {
margin-right: 10px; 
background-image: url('images/corners.bmp');
background-position: 0 -10px; 
height: 10px;
font-size: 2px;
}

.bottom-right {
margin-top: -10px; 
margin-left: 10px; 
background-image: url('images/corners.bmp'); 
background-position: 100% -10px; 
height: 10px; 
font-size: 2px; 
}

.inside {
border-left: 1px solid #Cfd3d7;
border-right: 1px solid #cfd3d7;
background: #ffffff;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}

.notopgap {
margin: 0 0 5% 5%;
padding: 0;
float: left;
}
.clear {
clear: both;
}
.images {
width: 300px;
height: 247px;
background: #ffffff url('images/test.jpg');
float: right;
}

.bord {
float: left;
position: relative;
bottom: 50px;
left: 20px;
margin-right: 5%;

}
.box {
background:#99CC00 url(images/bottom-left.gif) no-repeat left bottom;

}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom:5px;

}

.box-inner {
background: url(images/top-left.gif) no-repeat left top;

}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding: 25px 15px 0 15px;
font-size: 120%;
color: #fff;
font-weight: bold;
}

.name {
font-size: 120%;
color: #000080;
font-weight: bold;
}
a{
color: #000;
}

.oldPrice {
color:#000;
text-decoration: line-through;
font-size: 150%;
}
.newPrice {
color: #b22222;
font-size: 200%;
font-weight: bold;
}



}

maddogrts · December 17, 2007

там надо чуть поправить но для твоих целей хватит

Vlad · December 17, 2007

maddogrts, что за corners.bmp, сейчас ведь начнут в BMP картинки лепить.

mOnYa · December 17, 2007

maddogrts

Я естевственно очень признателен за такое внимание , но есле-бы ты дал хоть какието обьяснения к етму CSS было-бы вообще супер ...

Модеры , я уже давненько сижу у вас на форуме (зарегестрировался недавно) и всегда находил ответы на нужные мне вопросы тут ... в чьихто топиках , а вот возикла у меня проблема , и тут вс? встало на тормоза ...

Я перепробовал все что мог ... все что находил ...

Ч?ткого примера на сайт с округлыми уголками и бордером по периметру нету ...

Есле-бы ктото сделал хотя-бы 2 моих уголка с левой и правой стороны , и между ними бордер ,был-бы хороший пример другим ...

Или есле ето отнимет много времени у вас , скажите или укажите где почитать про то что-бы картинка была поверх всего ...

как мне известно ето можно сделать с помощю z indexa , а информации с наглядными примерами нету :-( кстате есле -бы поподробнее в вашем СSS справочнике сделали то тоже был бы большой плюс ...

D.S.Denton · December 17, 2007

http://denton.msk.ru/tmp/scan_css_ramka.rar

mOnYa · December 17, 2007

Спасибо D.S.Denton

За литературку , прочитал познавательно , но тут несовсем то , по етой литературке можно без проблем зделать то , что бы мой пример состоял не из 4 уголков и центра , а из верха середины и низа , тобиш установить 2 картинки 1 сверху другую снизу ...

так у меня уже получалось :-) ...

Еще раз сенкс за литературу ...

maddogrts · December 18, 2007

ммм по поводу бмп ), каюсь . Не делайте картинки для веба в бмп )))).

http://maddog-rts5.narod.ru/images/corners.bmp тебе нужна эта картинка (в gif мое мнение .)

Sony SyberShot

DSC-F828

вот код , добавь к нему картинку ссылку которую я тебе дал. И фаил css который выше.

Если обяснения нужны выложи код что у тебя в итоге получилось будем посторчно обяснять.

http://maddog-rts5.narod.ru/ тут лежит как раз то что тебе надо

mOnYa · December 19, 2007

Вобщем сделал я заново свой проектик. Но проблема все еще на месте , обьясните подробненько пожалуйста как сделать верхний + нижний бордер ...

смотрите вот идеал который должен выйти http://privetgleb.narod.ru/

А вот то что пака на етот момент у меня есть ...http://privetgleb.narod.ru/index2.html

Кто что может подсказать подскажите :-) "pliz" (начиная от шривтов , и заканчивая моей основной проблемой ето как вставить суда верхний и нижний бордер чтобы они совпали с картинками..)

maddogrts · December 19, 2007

http://maddog-rts5.narod.ru/

шрифты сам ищи

потраченное время 15 минут , а ты уже тут 3 день сидишь.

P.S. делал наспех

забыл ))), ты же посмотреть не знаешь как )))).

Значит HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>
  <title>test</title>
  <style type="text/css">
  <!--
  @import url(style.css);
  -->
  </style>
</head>
<body>
<div class="con">
	<div class="grey">
		<div class="top-left"></div>
		<div class="top-right"></div>
		<div class="inside"> 
			<h1>О демонах</h1><div class="ie"><!-- --></div>
			<p class="note">Вобщем сделал я заново свой проектик. Но проблема все еще на месте , обьясните подробненько пожалуйста как сделать верхний + нижний бордер ...
смотрите вот идеал который должен выйти http://privetgleb.narod.ru/
А вот то что пака на етот момент у меня есть ...http://privetgleb.narod.ru/index2.html

Кто что может подсказать подскажите :-) "pliz" (начиная от шривтов , и заканчивая моей основной проблемой ето как вставить суда верхний и нижний бордер чтобы они совпали с картинками..)</p><div class="ie"><!-- --></div>
			<h3>Википедия</h3>
			<div class="ie"><!-- --></div>
			<br class="clear" />
		</div>
		<div class="bottom-left"></div>
		<div class="bottom-right"></div>
	</div>
</div>
</body>
</html>

CSS http://maddog-rts5.narod.ru/style.css

.con {
width: 65%
}

.top-left {
margin-right: 10px; 
background-image: url('images/corners.gif');
height: 10px;
font-size: 2px; 
}

.top-right {
margin-top: -10px; 
margin-left: 10px; 
background-image: url('images/corners.gif'); 
background-position: 100% 0; 
height: 10px; 
font-size: 2px;
}

.bottom-left {
margin-right: 10px; 
background-image: url('images/corners.gif');
background-position: 0 -10px; 
height: 10px;
font-size: 2px;
}

.bottom-right {
margin-top: -10px; 
margin-left: 10px; 
background-image: url('images/corners.gif'); 
background-position: 100% -10px; 
height: 10px; 
font-size: 2px; 
}

.inside {
border-left: 1px solid #3C4D61;
border-right: 1px solid #3C4D61;
background: #E8F3F9;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}

.clear {
clear: both;
}

h1 {float: left;
  color: #084460;
  font-size: 250%;
  font-style: italic;
  margin: 0px 0 0 10px;
  width: 200px;
  }
h3 {float: right;
  color: #0C1117;
  font-size: 110%;
  font-style: italic;
  margin: 10px 10px 0px 0px;
  width: 200px;
  text-align: right;
  }
  .note {
  float: left;
  margin: 5px 0px 0px 10px;
  padding-right: 20px;
  width: 97%;
  font-size: 120%;
  color: #0C1117;
	}
.ie {height: 1px;display: block; width: 100%}

Картинка:

http://maddog-rts5.narod.ru/images/corners.gif

mOnYa · December 19, 2007

ОгОрОмНейШоЕ человеческое спасибо !!!

Счас разберусь как ты ето сделал ...

И буду практиковать чтото другое ... СЕНКС !!!:cool:

maddogrts · December 20, 2007

. Я тебе говорил с самого начала . Ты просто не разобрался. В том примере было все необходимое .

That's all right ))

Sign In

Подскажите ...

Question

Link to comment

Share on other sites

21 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

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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information