Форум » Свободное общение » Будни веб-дизайнера: объединенная тема » Ответить
Будни веб-дизайнера: объединенная тема
l'laXaH: Коды цветов. где взять?? желательно чтоб была функция пипеточки, т.е. чтобы брать цвет из готовой картинки.
Tartuga: В помощь трудящимся Туда же..
Nemo: Подскажита плз как добиться кросс-браузерности при использовании цвета границ таблицы, что бы каждый последний браузеришко её правильно отображал!
Nemo: Или вот ещё проблемма возникла: не могу сделать вертикальное позиционирование блоков средствами css. Вертикальное на раз, а вот на это ума не хватает.
Nemo: АУ!.. Я совсем не много прошу. Очень надо!
Bahamut: Nemo пишет: Или вот ещё проблемма возникла: не могу сделать вертикальное позиционирование блоков средствами css. Вертикальное на раз, а вот на это ума не хватает. Прочитав это я сразу понял, что совсем ничего не понимаю ни в HTML, ни в CSS... К тому же у него вертикальное получается, а вот вертикальное - нет!
Nemo: Я хотел сказать горизонтальное не получается. Я не могу сделать страницу из 3-х колонок!
Bahamut: Nemo Строк? Так, давай по порядку - как ты выполняешь "вертикальное позиыионирование блоков средствами CSS"?
X-CODER: Nemo пишет: Я не могу сделать страницу из 3-х колонок! A что <Table><tr> <td><td><td> </table> уже не помогает?
Nemo: Табель слишком много весит при реализации более-менее крупного сайта. И к тому же я его уже знаю. Теперь я учу CSS и мне надо сделать так: где первый и второй блоки должны процентно растягиваться (хоть как растягиваться), а третий фиксирован. Причём все три блока УЖЕ в одном блоке (!) да ещё и посреди страницы.
Dante: <span style="border: #013F00 3px solid;"> <span style="border: #038000 6px solid;"> <table style="border: #000000 1px solid; height: 50px; color: #00FF01; font-weight:800;"> <tr> <td style="width:1%;"> 1<br>% </td> <td style="width:2%;"> 2<br>% </td> <td style="width:3px;"> 3 </td> </tr> </table> </span> </span>
Nemo: Этож таблицы! ФУ!!! Я очень хотел бы сделать страницу ТОЛЬКА на css. И ещё, как заставить IE работать с выделением меню типа: #menu1 {background-color:red} #menu1:hover {background-color:green} ?
Bahamut: Nemo Ты говоришь, что у тебя что-то получается - скажи что у тебя получается, и мы подумаем, как тем же макаром сделать что ты хочешь.
Nemo: Мне надо сделать примерно следущее:
Nemo: Страница представляет гибрид html и css. Первый блок - 1й, 2й-2я, 3й 4й 5й 6й - 3я, 7й-4я, 8й-5я, 9й-6я, 10й - 7я и 11й - 8я ячейки этой таблицы. После проверки валидатором и вставки DOCTYPE стали противиться 3,4,5, и 6 блоки (несовпадает ширина при сужении страницы). УЖОС! Зато узнал как меню делать!
Bahamut: Nemo Ты код можешь выложить? Хватит на пальцах обьяснять.
Nemo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <title>Web site hosting services. Get your own web host and web mail from Usonyx!</title> <link rel=stylesheet type="text/css" href=style.txt /> <Meta Http-equiv="Content-Type" Content="text/html; charset=Windows-1251"></head> <body> <table style="margin:0; padding:0; border:0" cellpadding=0 cellspacing=0><tr><td rowspan=2 valign=top style="background-image:url('pic/fonl.jpg');"> <!--menu--> <div id=block1> <div id=menu_cap></div> <div id=menu1><p class=p1>HOME</p></div> <div id=menu2><p class=p1>HOSTING</p></div> <div id=menu3><p class=p1>SUPPORT</p></div> <div id=menu4><p class=p1>BECOME A RESELLER</p></div> <div id=menu_up></div> <div id=menu_cen> <b class=p1> CUSTOMER'S LOGIN</b> <b class=b1>E-mail: <input type=text></b> <br /> <b class=b1>Password:</b> <input type=password align=left><img src=pic/but.jpg alt="It's button" /> <br /> <a href="" title="">Forgot password?</a> <br /> <a href="" title="">Subscribe to a service</a> </div></div> </td> <td height=50px colspan=3> <div id=cap>CONTACT US</div> </td></tr> <tr><td colspan=3 height=315px valign=top> <div id=base1> <div id=base_11> <p class=p2>Spining the Web<br>Around your Business</p> <ol class=ol> <li><u>Read terms and Conditions</u> <li><u>Subscribe to a hosting plan</u> <li><u>Join in! Become a Reseller Today!</u> </ol> </div> <div id=base_12> <div id=kon1> <div id=par11>Small Business Hosting</div> <div id=par21>Small Business Hosting is designed to meet реу hosting needs of small business - basic Web site packages available.</div> <div id=par31><img src=pic/butu.jpg align=right alt="More Info" />$10 - $20</div></div> <div id=kon2> <div id=par12>Professional Hosting</div> <div id=par22>Professional Hosting helps get your business online in a matter of minutes through a low-cost virtual private Linux server.</div> <div id=par32><img src=pic/butc.jpg align=right alt="More Info" />$40 - $75</div></div> <div id=kon3> <div id=par13>Enterprise Hosting</div> <div id=par23>Enterprise Hosting offers unique, affordable and, powerful solutions that let you keep pace with the changing needs of your demanding business.</div> <div id=par33><img src=pic/butd.jpg align=right alt="More Info" />$100 - $150</div></div> </div> <div class=clear><!--укротитель дивный--></div> </div> </td></tr> <tr><td style="background-image:url('pic/dol.jpg'); background-color:#E8E8E8; background-repeat:no-repeat"> </td> <td width=50% valign=top style="background-image:url('pic/angd.gif'); background-repeat:no-repeat; border-right:white 1px solid; background-color:#BFCFDF"> <div id=base_1> <p class=p4 align=right style="margin:20px 20px 20px 0">ABOUT <b>USONYX</b></p> <p class=p5>Usonyx is a prvider of top quality hosting services for the small to medium-sized business. We provide a range of control panels and e-commerce options to mace your Web, mail, or file server easy to use. Unlike traditional Web-hosting companies, we specialize in meeting the needs of small business by offering a wide range of service plans - including virtual private servers - at a low price. Usonyx also offers customsizable hosting options that meets your exact business needs. We strive for maximum flexibility, user friendliness, and realibility...<br>Spining the Web around your business. </p></div> </td> <td width=50% valign=top style="border-right:white 1px solid; background-color:#CBD8EB"> <div id=base_2> <p class=p4 style="margin:20px 0 20px 20px">LATEST NEWS</p> <p class=p5><b>Welcome to Usonyx Hosting Services!</p></b><br> <ol style="list-style-type:disc; font-size:8pt"> <li>Technology Partnership with SWsoft Enables USONYX Business Customers with Advanced Hosting Features. <li>USONYX Upgrades Infrastructure to HSPcomplete and Virtuozzo 2.0 <li>USONYX Announces Reseller Training Program Promotion (Free Training in February and March). <li>USONYX Now Offers New Small Business Plans with Advanced VPS Features Based on Virtuozzo. </ol> </div></td> <td width=186px valign=top style="background-color:#CBD8EB"> <div id=base_3> <div id=img1><img src=pic/ban4.gif align=center width=175px height=55px alt="Advertisement" /></div> <div id=img2><img src=pic/ban3.gif align=center width=175px height=55px alt="Advertisement" /></div> <div id=img3><img src=pic/ban2.gif align=center width=175px height=55px alt="Advertisement" /></div> <div id=img4><img src=pic/ban1.gif align=center width=175px height=55px alt="Advertisement" /></div> </div></td></tr> <tr><td colspan=4> <div id=down> <div id=imgd><img src=pic/dol_2.jpg alt="AngPictyre"></div> <div id=cond><p class=p3>Copyright 2001 <a href=''>Usonyx Inc.</a>, All rights reserved. <a href=mailto:info@usonyx.com title="">info@usonyx.com</a></p></div> <div id=band><img src=pic/ban2.jpg align=right alt="Advertisement" /><img src=pic/ban.jpg align=right alt="Advertisement" /></div> <div class=clear><!--укротитель дивный--></div> </div></td></tr></table></body></html> body {background-color:white; padding:0; margin:0; font-family:Arial; behavior:url(css/csshover.htc)} #block1 {width:170px;} #cap {margin:0; background-color:#E1EAF6; height:50px; text-align:right; padding:18px 10px 0 10px; color:#000066; font-size:8pt; font-family:Arial; font-weight:bold; } #base1 {margin:0; background-color:black; height:315px;} #base2 {margin:0; height:260px;} #down {margin-left:0; background-color:white; height:50px} #menu1 {font-size:8pt; color:#000066; border-bottom:1px solid white; height:25px; background-color:#E8E8E8; margin:0; padding:5px 0 0 0; text-indent:10px; font-weight:bold} #menu1:hover {height:25px; background-color:#CBD8EC; margin:0;} #menu2 {font-size:8pt; color:#000066; border-bottom:1px solid white; height:25px; background-color:#E8E8E8; margin:0; padding:5px 0 0 0; text-indent:10px; font-weight:bold} #menu2:hover {height:25px; background-color:#CBD8EC; margin:0px;} #menu3 {font-size:8pt; color:#000066; border-bottom:1px solid white; height:25px; background-color:#E8E8E8; margin:0; padding:5px 0 0 0; text-indent:10px; font-weight:bold} #menu3:hover {height:25px; background-color:#CBD8EC; margin:0;} #menu4 {font-size:8pt; color:#000066; border-bottom:1px solid white; height:25px; background-color:#E8E8E8; margin:0; padding:5px 0 0 0; text-indent:10px; font-weight:bold} #menu4:hover {height:25px; background-color:#CBD8EC; margin:0;} #menu_cap {height:90px; background-image:url('pic/cap.jpg'); border-bottom:1px solid white} #menu_up {height:28px; background-image:url('pic/upl.jpg')} #menu_cen {font-size:8pt} #base_2 {background-color:#CBD8EB;} #base_3 {width:186px; background-color:#CBD8EB;} div.clear {clear:both;} #base_11 {height:315; width:35%; background-color:black; float:left; background-image:url('pic/sunrise.jpg'); background-repeat:no-repeat; color:white; font-weight:bold} #base_12 {height:100%; width:65%; background-color:white; float:left; margin:0 0 0 0} #kon1 {height:33%; margin:1px 0 0 1px; background-color:#6070B0; font-weight:100; color:white} #kon2 {height:33%; margin:1px 0 0 1px; background-color:#3850A0; color:white} #kon3 {height:33%; margin:1px 0 0 1px; background-color:#304080; color:white} .p1 {color:#000066; font-size:8pt; font-family:Arial; font-weight:bold; margin:1px 20px 0 20px} .p2 {font-size:15pt; margin:180px 20px 10px; 0} .p3 {margin:6px 20px 0 20px; font-size:8pt} .p4 {color:#000066; font-size:10pt;} .p5 {font-size:9pt; margin:0 10px 0 10px} #par11 {font-size:15pt; font-weight:bold; margin-left:10px} #par21 {font-size:8pt; font-weight:100px; margin-left:10px; height:38px} #par31 {font-size:15pt; font-weight:bold; margin-left:10px} #par12 {font-size:15pt; font-weight:bold; margin-left:10px} #par22 {font-size:8pt; font-weight:100px; margin-left:10px; height:38px} #par32 {font-size:15pt; font-weight:bold; margin-left:10px} #par13 {font-size:15pt; font-weight:bold; margin-left:10px} #par23 {font-size:8pt; font-weight:100px; margin-left:10px; height:38px} #par33 {font-size:15pt; font-weight:bold; margin-left:10px} INPUT {width:75px; margin:0px 20px} .ol {list-style-image:url('pic/li.jpg'); font-size:10pt} .b1 {color:black; font-family:Arial; margin:0 20px;} A {margin:0 0 0 20px} #img1 {margin:8px 6px 8px 6px} #img2 {margin:8px 6px 8px 6px} #img3 {margin:8px 6px 8px 6px} #img4 {margin:8px 6px 8px 6px} #imgd {width:170px; float:left} #cond {float:left; width:450px} #band {width:300px; float:left;}
полная версия страницы