skygazer

alexriz, buddah - спасибо. Была бы возможность ставить плюсики - поставил бы

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

ширина всего вместе 1078 пикселей, ничего не превышает. У меня сверху есть еще код относящийся к списку, дело в нем. Макет фиксированного размера, я сейчас не думаю о пользователях с маленьким экраном, что поделать. Поправил код сверху, все в порядке.

Есть ненумерованный список, каждый пункт списка помечен картинкой. Этот список вылез за пределы слоя куда-то в межзвездное пространство на краю страницы по горизонтали, хотя по вертикали стоит как надо. Как я уже не пытался это исправить, или хотя бы понять в чем проблема-не получается. При overflow:hidden - список исчезает. Увеличивал размер слоя - не помогло. Помогите пожалуйста, буду очень благодарен. Код: <div id="bottom"> <div id="col4"> <h4>About Us</h4> <p class="three">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et.</p> <p style="margin-top:26px" class="three">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et.</p> <a href="#"><img style="margin-top:11px" src="images/more_50.gif"></a> </div> <div id="col5"> <h4>Quick Links</h4> <ul class="list"> <li><a href="#">Some Menu Link 1</a></li> <li><a href="#">Some Menu Link 2</a></li> <li><a href="#">Some Menu Link 3</a></li> <li><a href="#">Some Menu Link 4</a></li> <li><a href="#">Some Menu Link 5</a></li> <li><a href="#">Some Menu Link 6</a></li> </ul> </div> <div id="col6"> <h4>Contact Us</h4> </div> </div> </div> </body> body{ margin:0; padding:0; background:#616161;} #wrapper{ width:1200px; min-height:1600px; background:#000; margin:auto;} #bottom{ width:100%; height:388px; background:url(images/bottombg_51.gif) no-repeat; font-family:Trebuchet MS; color:#fff;} #col4,#col5,#col6{ height:347px; float:left;} #col4{ width:259px; margin-left:118px;} #col5{ width:163px; margin-left:89px; background:#858585;} ul.list{ width:163px; /* list-style-image:url(images/arrow_57.png); */} ul.list a{ font-weight:normal; font-size:98%; /* margin-left:-19px; */} #col6{ width:269px; margin-left:180px; background:#858585;} h4{ margin-top:28px; font-weight:normal; font-size:20px;} p.three{ font-size:86%; margin-top:43px;}

Верстать по jpeg - не самый лучший вариант

Спасибо за ответ

Очень интересует такой вопрос - от какой точки у текста идет отсчет для свойств margin и padding? Ведь кегель шрифта начинается выше линии прописных букв, и в точности определить где он заканчивается нельзя. Хотелось бы уметь размещать текст внутри блоков максимально точно, у меня сейчас с этим небольшие проблемы.

через border-radius можно сделать без всяких картинок.

,

Для каждого пункта меню отдельная фоновая картинка, и ховер картинка. Сейчас у меня готово ховер меню, но пункты меню ссылками сделать не получается. Выглядит это так: #home,#portfolio,#webhosting,#about{ float:left; height:84px;} #portfolio{ background:url(images/menu_02.png); width:109px;} #portfolio:hover{ background:url(images/darkmenu_01.png);} #webhosting{ background:url(images/menu_03.png); width:105px;} #webhosting:hover{ background:url(images/darkmenu_02.png);} Я бы сделал меню текстом и не мучался, но в задании макета- меню картинками.

Надо сделать меню картинками, чтобы при наведении менялся цвет текста, ну и чтобы пункты меню были ссылками, естественно. С псевдоклассом hover я знаком, но есть одна проблема. В html коде пункты меню пустые. <div id="home"><a href="#"></a></div> Ко мне пришла в голову мысль заполнить пункты меню по высоте прозрачной картинкой шириной в один пиксель, и div a{display:block;} в css. С лого у меня та же проблема, хотя она конечно решаема вынесением картинки в html. Подскажите как по-хорошему это все сделать, не хотелось бы изобретать велосипед.

Так? background:url(images/column_19.gif) no-repeat top left; Ничего не изменилось к сожалению. Размер фонового изображения такой же как размер слоя, потому и не выравнивал. Паддинг как бы добавляется к уже заданной высоте и ширине слоя, а не создается внутри него. То есть я увеличиваю паддинг-слой растет.

Я просто боялся что стена кода всех распугает, и я не дождусь ответа <!DOCTYPE html> <html> <head> <title>we be environmental</title> <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"></div> <div id="headtxt">Help line 24/7 Support 1800 3246 345</div> <ul> <li><a class="about" href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Solutions</a></li> <li><a href="#">Price List</a></li> <li><a href="#">Contact</a></li> <li style="padding-right:25px;"><a href="#">FAQ</a></li> </div> <div id="content"> <div id="head1">“Suspendisse felis. Aenean pulvinar vulputate nunc. Pellentesque ultrices elit vitae justo.”</div> <div id="plant"></div> <div id="img1"></div> <div id="indent1"> <h1>Pellentesque vestibulum erat.</h1> <div id="txt1">Duis nisl. Cras a quam non leo placerat laticia. Proin in nulla. Sed a ligula at quam vulputate auctor. Vivamus mi lacus, feugiat eget, porta ut, fermentum nec, nisi. Maecenas vel orci eu nunc accumsan scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis luctus sapien eu leo. Etiam hendrerit leo eu metus. Morbi sagittis. Nulla lacinia justo quis lorem.</div></div> <div id="col1"> Maecenas suscipit Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiai sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis nunc. Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi. </div> <div id="txt2"> <p><h2>Nullam vitae leo vel pede sollicitudin suscipit</h2> <p>Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis nunc. Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut vitae purus ac odio fringilla pulvinar. Quisque consectetur, urna sit amet fringilla tempus, neque nunc consequat eros, ac dignissim quam elit vel turpis. Donec sollicitudin mauris at purus suscipit sodales. Nunc rutrum ornare lacus. Maecenas accumsan turpis sit amet arcu. Nulla neque. <p><h2 style="color:#a5bc79">Nullam vitae leo vel pede sollicitudin suscipit</h2></p> <p style="color:#a8ad98">Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis nunc. Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut vitae purus ac odio fringilla pulvinar. Quisque consectetur, urna sit amet fringilla tempus, neque nunc consequat eros, ac dignissim quam elit vel turpis. Donec sollicitudin mauris at purus suscipit sodales. Nunc rutrum ornare lacus. Maecenas accumsan turpis sit amet arcu. Nulla neque.</p></div> <div id="txt3">Posted: 11-2-2009 11:45am by: Matthew Doyle</div> </div> <div id="footer">Copyright © Environmental.com. All Rights Reserved</div> </div> </body> </html> body{ font-family:arial; background:#000; margin:0; padding:0;} #wrapper {width:1024px; min-height:1167px; height:100%; margin:auto; position:relative;} #header {width:100%; height:167px; background:#353a33; position:relative; overflow:hidden;} #logo{ background:url(images/logo_03.png); width:392px; height:66px; position:absolute; top:24px; left:36px;} #headtxt{ position:absolute; left:755px; top:50px; font-size:80%; color:#fff;} ul{ list-style:none; background:url(images/menubg_06.gif) repeat-x; width:1024px; height:64px; margin:103px 0 0 0;} li a{ color:#fff; text-decoration:none; font-size:121%; float:left; padding:5px; padding-top:20px; padding-left:70px;} li a:hover{ color:#505150;} a.about{ padding-left:0px;} #content{ width:100%; height:950px; background:url(images/contbg_09.gif) top left no-repeat #d6dbbf; overflow:hidden;} #head1{ width:513px; height:174px; color:#fff; font-size:242%; margin:40px 0 0 27px;} #plant{ position:absolute; background:url(images/plant_10.png); top:245px; right:28px; height:339px; width:248px;} #img1{ margin:100px 0 30px 15px; float:left; background:url(images/img1_13.gif); width:195px; height:148px;} #indent1{ float:left; width:482px; margin:115px 0 0 0; padding-left:10px;} h1{ color:#868a7b; font-size:126%;} h2{ font-size:116%;} #txt1{ font-size:81%; color:#769a39; margin:22px 0 20px 0;} #txt2{ clear:both; font-size:81%; color:#000; margin:0 0 0 15px; width:665px;} p{ margin-top:20px;} #txt3{ margin:30px 0 0px 0; padding-left:163px; color:#000; font-size:75%;} #col1{ width:271px; height:296px; color:#9ea19d; font-size:90%; background:url(images/column_19.gif) no-repeat; text-decoration:underline; position:absolute; top:637px; right:24px; padding:14px 17px 0 20px; line-height:20px;} #footer{ height:50px; width:100%; background:#353a33; color:#fff; font-size:81%; text-align:center; padding-top:21px;}

#col1{ width:271px; height:296px; color:#9ea19d; font-size:90%; background:url(images/column_19.gif) no-repeat; text-decoration:underline; position:absolute; top:637px; right:24px; padding:14px 17px 0 20px; line-height:20px;}

Слой размещен через position:absolute, по идее двигаться не должен. Но когда я выставляю паддинг, смещается не текст, а фоновая картинка, за счет чего получается отступ с одной стороны. Отступ с другой стороны игнорируется, там вообще текст вылазит за рамки фона, и слоя, соответственно

Делаю меню списком, меню вложено в хедер. При выставлении margin-top для меню,движется весь хедер, вместе со списком. Немного кода: #header {width:100%; height:167px; background:#353a33; position:relative;} ul{ list-style:none; background:url(images/menubg_06) repeat-x; width:1024px; height:64px; margin-top:103px;} Помогите пожалуйста

Сделал желтую пунктирную полоску через background repeat-x, подскажите как задать ширину этому слою? сейчас просто чтобы выглядело нормально, задал ширину слоя в процентах, уж очень хочется сразу видеть результат Правда при меньшем разрешении это все разлазится.

В процессе верстки этого макета возникло несколько вопросов, мне кажется я сэкономлю кучу времени и нервов, задав все свои дурацкие вопросы сейчас Как правильно разместить верхние картинки- женщину с телефоном, название банка и контактный телефон? Вот как я это сделал, выглядит пока нормально, но мне кажется я что-то делаю не так. Мне не нравится что в firefox, например, изображение можно утянуть курсором, не знаю как это исправить. html <div id="img1"></div> <div id="img2"></div> css #img1{ width:279px; height:132px; position:absolute; left:25px; background:url(images/orange1_02.png); cursor:pointer;} #img2{ position:absolute; background:url(images/orange_04.jpg); width:376px; height:105px; left:329px; cursor:pointer; } Желтая пунктирная полоска посредине должна тянуться, ее можно сделать через border-bottom? Оранжевые полоски снизу и слева страницы нужно делать отдельными слоями, или их можно как-то вписать в бэкграунд body, например? Прошу прощения за тупые вопросы

Я в верстке совсем новичек, пробую сверстать этот макет. Подскажите как сделать тетку с мобильником сверху и полоску? Я внимательно читал мануалы по html и css, так что не посылайте меня пожалуйста в гугл :3 Трудность в том, что часть полоски в изображении, а часть вне его, и я без понятия, можно ли сделать эту полоску как border, или лучше поместить картинкой.