Cubka
-
Posts
24 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Cubka
-
Попробуй с этими стилями. Оно? html, body { width:100%;height:100%; overflow:hidden; padding:0; margin:0;} #container { width: 100%;height:100%;} #content { padding: 0 170px 0 40px;} #spisok { display: inline-block; background: #ebebeb; min-width:735px; margin-bottom: 30px; color: white; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 5px 10px rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=45, Strength=6) progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=135, Strength=6) progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=225, Strength=6) progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=315, Strength=6); zoom: 1; } #spisok ul {padding-left:40px;} #spisok li {font: 12px Tahoma, sans-serif;color:black;line-height: 20px;} #spisoktitle { font: 20px Tahoma, sans-serif; background: url(image/top1.png) repeat-x; height: 60px; padding-left: 30px; padding-top: 5px; border-radius: 6px 6px 0 0; -moz-border-radius:6px 6px 0 0; } #left {float:left; margin:5px;} #top {float:left; margin:5px;} #right {float:left; margin:5px;}
-
Нашёл вот это
-
Посмотри тут.
-
Попробуй "vertical-align: super; font-size: smaller;".
-
Тег <sup> тебе в помощь
-
Попробуй вот таким способом (позицию относ. скрола поменяй под свои требования): * html #fixed-block { position: absolute; top: expression(eval(document.documentElement.scrollTop) + 100 + 'px'); } А вот нашёл способ на чистом CSS. В этом методе position:fixed не будет как такого. Идея состоит в следующем. Сначала мы задаем высоту и ширину 100% для html и body, ставим им overflow:hidden. Затем, делаем блок, который будет «заменой» элемента body. Ставим ему также 100% высоту и ширину, overflow:auto (чтобы появлялись скроллы при необходимости) и position:relative (чтобы внутри этого блока можно было позиционировать другие блоки). А сам блок, которому нужен position:fixed помещаем вне блока-«замены» body, ставим ему абсолютное позиционирование с нужными координатами, и этот блок будет всегда находиться в одном месте экрана, а сам сайт будет прокручиваться внутри блока-«замены». Вот примерный код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position fixed ie6</title> <style type="text/css"> html, body { width:100%; height:100%; overflow:hidden; padding:0; margin:0; } #main { border:1px solid #666; width:100px; } #container { width:100%; height:100%; overflow:auto; position:relative; } .box { width:100px; height:100px; background:#CCC; position:absolute; right:0; top:200px; } </style> </head> <body> <div class="box"> block position:fixed </div> <div id="container"> <div id="main"> text text text text text text text text text ....(добавить сколько нужно для появления скролла) text text text text text text</div> </div> </body> </html>
-
Добрый день. Есть два блока: <div style="float: right; margin-bottom: 20px; text-align: center; width: 50%;"> <div style="margin-right: 10px; min-width: 400px; float: left;"> В ИЕ 7-ом второй блок опускается вниз. Как исправить? Спасибо.
-
Надеюсь, я тебя понял: <style> body,html{ margin:0px; padding :0 px; } a{ text-decoration:none; color:#ffffff; } .center {display:block; margin:0 auto;} ul#mainNav { margin-left:70px; margin-top:70px; padding: 0; list-style: none; float: left; background: #abc url(69.png); width:865px; height:55px; background-repeat: no-repeat; text-align:center; } #mainNav li { float: left; width: 140px; } #mainNav li div{ border-left: 3px solid #c9c1be; height:18px; position: relative; width: 100%; top: 18px; } #mainNav a { text-decoration: none; font-size: 18px; font-weight:900; color:#392411; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; display: inline-block; padding: 17px 0px; left: -3px; position: absolute; top: -18px; width:100%; } #mainNav li a:hover{ background-color:#392411; color:#ffffff; width:143px; z-index: 100; } #light a:hover{ background-image:#000000;; } </style>
-
Посмотри этот вариант: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Art</title> <style> body,html{ margin:0px; padding :0 px; } a{ text-decoration:none; color:#ffffff; } .center {display:block; margin:0 auto;} ul#mainNav { margin-left:70px; margin-top:70px; padding: 0; list-style: none; float: left; background-image: url(69.png); width:865px; background-repeat: no-repeat; text-align:center; } #mainNav li { float: left; width: 140px; } #mainNav li div{ border-left: 3px solid #c9c1be; height:18px; position: relative; width: 100%; } #mainNav a { text-decoration: none; font-size: 18px; font-weight:900; color:#392411; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; display: inline-block; padding: 15px 0px; left: -3px; position: absolute; top: -18px; width:100%; } #mainNav li a:hover{ background-color:#392411; color:#ffffff; width:143px; z-index: 100; } #light a:hover{ background-image:#000000;; } </style> </head> <body style="background-color:#3a2313"> <div style="margin: 0px auto;padding-left:10px;width: 1000px; border:0px solid;padding:0px;height:1200px;background-color:#ffffff;" id="contents"> <ul id="mainNav" > <li><div><a href="#" >Главная</a></div></li> <li><div><a href="#"> О НАС</a></div></li> <li><div><a href="#">ПЕЧЕНЬЕ</a></div></li> <li><div><a href="#">Услуги</a></div></li> <li><div><a href="#">Акции</a></div></li> <li><div><a href="#">Контакты</a></div></li> </ul> </div> </div> </body> </html>
-
Добавь свойства классу webmacter: .webmacter{ float: left; margin: 10px;} и у класса .tabsContent поставь ширину больше, например 620рх.
-
На сколько я понял, чтобы первое свойство было равноценно второму: background: url('../image/image.png') left top repeat; нужно первое записать в виде: background: url('../image/image.png') 0 16px repeat;
-
Чтобы в двухсловных пунктах меню второе слово переносилось на вторую строку
Cubka replied to Squidward's question in HTML Coding
Может подойдёт такое: <style type="text/css"> * { margin: 0; padding: 0;} ul{list-style: none; padding:15px; } ul li { border: 1px solid #ccc; display: inline-block; height: 55px; padding: 5px; } ul li span {white-space: pre;text-align:left;} ul li p {padding-top: 20px;} </style> </head> <body> <ul> <li><p>Одно</p></li> <li><p>Одно</p></li> <li><span>Два слова</span></li> <li><span>Два слова</span></li> </ul> </body> -
Нумерованный список с рисунками в качестве маркера
Cubka replied to Vedrys's question in HTML Coding
Ну, просто можно свой стиль. Например: <ol style="list-style:none;"> <li style="list-style-image: url(images/1.png); padding-left: 2px;">1</li> <li style="list-style-image: url(images/2.png); padding-left: 2px;">2</li> <li style="list-style-image: url(images/3.png); padding-left: 2px;">3</li> .... </ol> -
Для двух фоновых изобр. в ИЕ (можно заключить в "<!-->"): #two-bg { background: transparent url(images/bg-1.gif) top left repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-2.gif', sizingMethod='crop'); /* IE6-8 */ -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-2.gif', sizingMethod='crop')"; /* IE8 только */ } Для остальных браузеров как обычно: #two-bg { background: url(images/bg-1.gif) center center no-repeat, url(images/bg-2.gif) top left repeat; }
-
Разное отображаение кнопки [type=submit] в Опере/IE и FF/Chrome
Cubka replied to SEObomj's question in HTML Coding
Попробуй добавить: input.send:focus{ padding-top: 1px; padding-bottom: -1px; margin-top: 10px; } и в input.send свойсвтво "margin-top: 10px;" -
Разное отображаение кнопки [type=submit] в Опере/IE и FF/Chrome
Cubka replied to SEObomj's question in HTML Coding
Так тебе надо чтобы она смещалась? или ты стремишься к статической надписи "Отправить"? -
Что-то я тебя не понял. Почему не сделать отдельное текстовое поле с заданными размерами и справа от него кнопку?
-
мне нужно исправить кусок кода, к сожалению, часть проблемы завязана на верстке. я просто убрала все что относится к php, оставила только разметку и стили. я не верстаю, поэтому может мой вопрос и выглядит странно, но я уже два дня безуспешно мучаюсь, чтобы состыковать эти картинки без зазоров и уже отчаялась, поэтому и написала на форум, может кто понимающий посмотрит, и скажет,что типа - ну конечно, так и не будет работать, ведь у тебя тут то-то и то-то, а должно быть так-то и так.. в общем, надежда, как говорится.... напиши мне в лс. сделал.
-
я думаю свойство table-layout тебе в помощь.
-
Так тебе нужен полностью код такой формы? я не понял твою проблему.
-
Можешь ещё глянуть <a href="http://www.getincss.ru/2009/07/11/4-sposoba-kak-sozdat-bloki-kolonki-odinakovoj-vysoty/">тут</a>. Разные варианты решения твоей проблемы.
-
Так ты хотел чтобы это делал не JS. Вот тебе и решение.
-
Мне одно не понятно, зачем таблицу используешь для этого? Не легче слоями? или есть "табличные данные"?
-
Можно флоатами, можно для каждого отдельного дива прописать свои стили. Что-то похожее на: <head> <style type="text/css"> body div { width:50px; position:absolute;} #a {background: #fff; left:0; top:0; height:100px;} #b {background: #000; left:0; top:100px; height:50px;} #c {background: #ccc; left:0; top:150px; height:75px;} #d {background: #abcabc; left:0; top:225px; height:35px;} #e {background: #ccc000; left:50px; top:0px; height:60px;} #f {background: #cc00ff; left:50px; top:60px; height:120px;} #g {background: #fff000; left:50px; top:180px; height:80px;} </style> </head> <body style="position:relative; background: #aaaccc; padding:0; margin:0;"> <div id="a"> </div> <div id="b"> </div> <div id="c"> </div> <div id="d"> </div> <div id="e"> </div> <div id="f"> </div> <div id="g"> </div> </body>