| |
 82.5 Кб |
|
| | Всем привет ! Помогите разобраться с дизайном ! Проблема в следующим...
есть класс CSS
.cat
{
background: #f8fbfd url(img/logo.gif) repeat-x;
padding: 10px;
padding-bottom: 3px;
text-align: center;
color: #3990d8;
}
.arrow
{
background: url(img/arrow.png) right no-repeat;
width: 16px;
height: 16px;
padding-right: 96%;
}
|
исходный код
<div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=16&page=0"
><div class="arrow" > Как выбрать сторонний метод ввода (установленную вами клавиатуру)?</div></div>
|
Отображается криво (смотрите прикрепленное изображение) | |
| |
|
|
| |
|
|
| |
для: сотка
(20.09.2012 в 17:42)
| | | замените на обычный пробел. | |
| |
|
|
| |
49.2 Кб |
|
| |
для: Lelik
(20.09.2012 в 17:52)
| | | тогда получается такое | |
| |
|
|
| |
|
|
| |
для: сотка
(20.09.2012 в 17:42)
| | | как-то вы сильно изощрённо насилуете браузер - в ширину 16 пикселей пытаетесь втюхать длиннющий неразрывный тест - Как выбрать сторонний метод ввода (установленную вами клавиатуру)?
что за ужимки-то такие бредовые? | |
| |
|
|
| |
|
|
| |
для: ЯСА
(20.09.2012 в 18:08)
| | | Тогда как поступить?
1 - убрать ?
получаем вообще наложение текста друг на друга
2- увеличить значения
width: 16px;
height: 16px;
|
? | |
| |
|
|
| |
|
|
| |
для: сотка
(20.09.2012 в 18:12)
| | | нарисуйте - что именно вы хотите получить
обязательно с размерами
которые делятся на фиксированные (точно в пикселях), относительные (в процентах от родителя) и т.н. "свободные" (как получится, в зависимости от внутреннего содержимого)
тогда будем думать | |
| |
|
|
| |
|
|
| |
для: ЯСА
(20.09.2012 в 20:29)
| | | стиль
body
{
font-size: 10pt;
font-family: tahoma, arial;
max-width: 400px;
background: #a8d2e5 url(img/bg.png) top repeat-x;
margin: 0px auto;
padding: 5px;
cursor: default;
}
a
{
text-decoration: none;
}
.radiustop
{
border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-khtml-border-radius: 10px 10px 0px 0px;
-o-border-radius: 10px 10px 0px 0px;
-ms-border-radius: 10px 10px 0px 0px;
-icab-border-radius: 10px 10px 0px 0px;
}
.radiusbottom
{
border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
-khtml-border-radius: 0px 0px 10px 10px;
-o-border-radius: 0px 0px 10px 10px;
-ms-border-radius: 0px 0px 10px 10px;
-icab-border-radius: 0px 0px 10px 10px;
}
.radiusleft
{
border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
-khtml-border-radius: 10px 0px 0px 10px;
-o-border-radius: 10px 0px 0px 10px;
-ms-border-radius: 10px 0px 0px 10px;
-icab-border-radius: 10px 0px 0px 10px;
}
.radiusright
{
border-radius: 0px 10px 10px 0px;
-webkit-border-radius: 0px 10px 10px 0px;
-khtml-border-radius: 0px 10px 10px 0px;
-o-border-radius: 0px 10px 10px 0px;
-ms-border-radius: 0px 10px 10px 0px;
-icab-border-radius: 0px 10px 10px 0px;
}
.radiusfull
{
border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-icab-border-radius: 10px;
}
.search
{
border: 1px solid #cbdfe8;
padding: 3px;
padding-left: 8px;
padding-right: 8px;
color: #B6BFC7;
width: 50%;
}
.search:Focus
{
outline: none;
}
.preview
{
border: 2px solid #eaeaea;
margin-left: 5px;
margin-right: 5px;
}
.preview:hover
{
border: 2px solid #cbdfe8;
}
.logo
{
padding: 5px;
text-align: left;
display: inline-block;
}
.slider
{
background: #f8fbfd url(img/logo.gif) repeat-x;
padding: 10px;
padding-bottom: 3px;
text-align: center;
color: #555555;
}
.slider p
{
margin-top: 10px;
margin-bottom: 10px;
}
.rating
{
margin: 3px;
margin-left: 0px;
}
.cat
{
background: #f8fbfd url(img/logo.gif) repeat-x;
padding: 10px;
padding-bottom: 3px;
text-align: center;
color: #3990d8;
}
.cat a
{
color: #3990d8;
}
.cat:hover
{
background: #f5fafc url(img/topnav.gif) repeat-x;
color: #8fcf12;
}
.toprazd
{
background: url(img/toprazd.png) no-repeat;
height: 24px;
width: 2px;
display: inline-block;
}
.topnav
{
background: #f5fafc url(img/topnav.gif) repeat-x;
padding: 10px;
padding-top: 0px;
text-align: center;
}
.topnav a
{
color: #a8a8a8;
text-decoration: none;
padding: 8px;
}
.topnav a:hover
{
color: #8fcf12;
}
.link
{
background: #f5fafc url(img/topnav.gif) repeat-x;
border-top: 1px solid #f5fafc;
padding: 10px;
color: #3990d8;
font-size: 12px;
font-weight: bold;
display: block;
}
.link a
{
color: #3990d8;
}
.open
{
background: url(img/open.png) right no-repeat;
width: 16px;
height: 16px;
padding-right: 96%;
cursor: pointer;
color: #3990d8;
}
.open:hover
{
background: url(img/open_h.png) right no-repeat;
width: 16px;
height: 16px;
padding-right: 96%;
}
.menuarrow
{
background: url(img/menu_h.png) left no-repeat;
width: 16px;
height: 16px;
padding-left: 20px;
}
.close
{
background: url(img/close.png) right no-repeat;
width: 16px;
height: 16px;
padding-right: 96%;
cursor: pointer;
}
.close:hover
{
background: url(img/close_h.png) right no-repeat;
width: 16px;
height: 16px;
padding-right: 96%;
}
.starrek
{
background: url(img/starrek.png) left no-repeat;
width: 16px;
height: 16px;
padding: 5px;
padding-left: 23px;
display: block;
}
.starrek:hover
{
background: url(img/starrek_h.png) left no-repeat;
width: 16px;
height: 16px;
}
.arrow
{
background: url(img/arrow.png) right no-repeat;
width: 16px;
height: 16px;
padding-right: 96%;
}
.arrow:hover
{
background: url(img/arrow_h.png) right no-repeat;
width: 16px;
height: 16px;
padding-right: 96%;
}
.size
{
background: #97d237 url(img/green.gif) repeat-x;
padding: 8px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
text-decoration: none;
border: 0px;
outline: none;
font-weight: normal;
border-left: 1px solid #d1f2a3;
display: inline-block;
}
.download
{
background: #3990d8 url(img/blue.gif) repeat-x;
padding: 8px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
text-decoration: none;
border: 0px;
outline: none;
cursor: pointer;
font-weight: normal;
display: inline-block;
}
.download:hover
{
background: #97d237 url(img/green.gif) repeat-x;
}
.button
{
background: #3990d8 url(img/blue.gif) repeat-x;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
text-decoration: none;
border: 0px;
outline: none;
cursor: pointer;
font-weight: normal;
display: inline-block;
outline:none;
outline-offset:-2px;
}
.button:hover
{
background: #97d237 url(img/green.gif) repeat-x;
}
.bluebg
{
background: #3990d8 url(img/blue.gif) repeat-x;
padding: 1px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
text-decoration: none;
font-size: 20px;
border-left: 1px solid #61a7e0;
}
.bluebg:hover
{
opacity: 0.8;
}
.bluebg a
{
color: #ffffff;
text-decoration: none;
}
.greenbg
{
background: #97d237 url(img/green.gif) repeat-x;
padding: 1px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
text-decoration: none;
font-size: 20px;
}
.greenbg:hover
{
opacity: 0.8;
}
.greenbg a
{
color: #ffffff;
text-decoration: none;
}
.reklama
{
background: #3990d8 url(img/blue.gif) repeat-x;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
text-decoration: none;
display: inline;
position: relative;
bottom: 3px;
margin-left: 10px;
}
.reklama:hover
{
opacity: 0.8;
}
ul.v-menu{padding:0; margin:0; list-style:none;}
.v-menu li{background: #f8fbfd url(img/logo.gif) repeat-x; padding:10px; margin:0; list-style:none;}
ul.v-menu{clear:both;}
.v-menu li a{display: block;color: #a8a8a8;}
.v-menu li a:hover{color: #8fcf12;}
.foot
{
text-align: center;
padding: 10px;
color: #1d4b69;
}
@media (max-width: 330px) {
body
{
font-size: 9pt;
font-family: tahoma, arial;
max-width: 400px;
background: #a8d2e5 url(img/bg.png) top repeat-x;
margin: 0px auto;
padding: 5px;
cursor: default;
}
.arrow
{
padding-right: 92%;
}
.arrow:hover
{
padding-right: 92%;
}
.link
{
padding: 5px;
font-size: 9pt;
}
.slider
{
padding: 5px;
padding-bottom: 3px;
}
}
|
| |
| |
|
|
| |
|
|
| |
для: сотка
(20.09.2012 в 20:36)
| | | исходный код
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="MobileOptimized" content="176" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="js/mootools.svn.js"></script>
<script>
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('v-menu3');
mySlide.hide();
$('toggle3').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('v-menu2');
mySlide.hide();
$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('v-menu');
mySlide.hide();
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
<script type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
<script>
jQuery.noConflict();
jQuery(function() {
jQuery(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto: 5000,
speed: 500
});
});
</script>
<script type="text/javascript" src="js/jcarousellite_1.0.2.js"></script>
<script>
jQuery.noConflict();
jQuery(function() {
jQuery(".anyClass2").jCarouselLite2({
btnNext: ".next",
btnPrev: ".prev",
auto: 5000,
speed: 500
});
});
</script>
</head>
<body>
<a href="#"><div class="logo"><img src="img/android.png" /></div></a>
<div class="topnav radiustop">
<a href="../index.php">Главная</a>
<div class="toprazd"></div>
<a href="index.php">Андройды</a>
</div>
<div class="link radiustop">
<table border="0" align="center">
<tr width="100%">
<td width="30%"> </td> <a href='/android/article.php?page=2&id_catalog=8'><span class="button radiusfull"> Вперед</span></a> <a href='/android/article.php?page=2&id_catalog=8'><span class="button radiusfull"> В конец</span></a> </td></tr></table></div><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=13&page=0"
><div class="arrow" >Как сделать шрифты или/и размеры иконок больше?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=14&page=0"
><div class="arrow" >Как перенести контакты из аккаунта телефона в аккаунт Google?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=15&page=0"
><div class="arrow" >Как изменить метод ввода?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=16&page=0"
><div class="arrow" > Как выбрать сторонний метод ввода (установленную вами клавиатуру)?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=17&page=0"
><div class="arrow" >Невозможно установить защищенное соединение с сервером ?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=18&page=0"
><div class="arrow" > Как после полного сброса синхронизировать нужную мне часть данных с Google аккаунтом?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=19&page=0"
><div class="arrow" >Как устанавливать приложения (apk)?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=20&page=0"
><div class="arrow" >Как добавить виджет на рабочий стол?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=21&page=0"
><div class="arrow" > Как устанавливать приложения на карту памяти?</div></div></a><div class="cat" style="padding-bottom: 10px;"><a href="/android/article.php?id_catalog=8&id_position=22&page=0"
><div class="arrow" > Как импортировать контакты с SIM карты?</div></div></a>
<div align="center" style="padding: 5px;" class="link radiusbottom">
<div style="padding-bottom: 7px;" class="slider radiusfull">
<input placeholder="Что ищем?" name="" class="search radiusfull" />
<input type="button" class="button radiusfull" name="" value="Поиск" />
</div>
</div><br />
<a href="#"><div class="reklama radiustop">На правах рекламы</div></a>
<div class="link radiusfull">
<a href='http://wappc.biz/?uid=25502'><div class="starrek">Заработок wap мастерам</div></a>
<a href="#"><div class="starrek">Андройд маркет</div></a>
<a href="#"><div class="starrek">МОРЕ БЕСПЛАТНЫХ ЗАГРУЗОК**</div></a>
<a href="http://pixeli.su/
go/1270"><img src="http://
pixeli.su/im/1270"
alt="pixeli.su"/></a>
<script type="text/javascript" src="http://mobtop.ru/c/23591.js"></script><noscript><a href="http://mobtop.ru/in/23591"><img src="http://mobtop.ru/23591.gif" alt="MobTop.Ru - Рейтинг и статистика мобильных сайтов"/></a></noscript>
</div>
<div class="foot">© 2012 Ritlen.ru</div>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter16853947 = new Ya.Metrika({id:16853947, enableAll: true});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/16853947" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: ЯСА
(20.09.2012 в 20:29)
| | | нужно чтобы текст не выходил за рамки как я понимаю 400 px | |
| |
|
|
| |
|
|
| |
для: сотка
(20.09.2012 в 20:39)
| | | как-то непохоже выложенное вами на мою просьбу "нарисовать", не находите?
вы всегда, когда вас просят спеть, танцуете?
и, наоборот, когда просят станцевать, вы поёте?
когда просят НАРИСОВАТЬ - это значит надо именно НАРИСОВАТЬ (в каком-то графическом редакторе, типа Paint), а не выкладывать сюда огромные бестолковые коды... | |
| |
|
|
| |
20.6 Кб |
|
| |
для: ЯСА
(20.09.2012 в 21:03)
| | | Таким образом (только шрифт и цвет оставить прежним) так как в одну строку уместить длинный текст не реально ! | |
| |
|
|
| |
|
|
| |
для: сотка
(21.09.2012 в 18:36)
| | | решил проблему табличной версткой и дополнительным классом ! | |
| |
|
|
