помогите оформить.

Обсуждение вопросов, проблем связанных с обучением CSS

помогите оформить.

Сообщение Dronzzz » 06 ноя 2012, 22:54

делаю сайт по шаблону http://hostingkartinok.com/show-image.php?id=96b8e0046cbb8f832ef8eff46211f186
помогите до оформить
вот мой код
Код: Выделить всё
<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8" />
         <title>sait</title>
         <link href="style.css" rel="stylesheet" type="text/css" />
     </head>

     <body>
           <div id="zagolovok">
             <MAP NAME=Map1>
                  <AREA SHAPE=RECT COORDS="1,1,200,40" HREF="some2.html" ALT="Shape  1">
             </MAP>
             <p style="margin-left: 450px;"><IMG SRC="images/fan.gif" width="200" height="60" USEMAP=#Map1 /></p>
            
             <ul id="menu">
                     <li><a href="#">Resume</a></li>
                   <li><a href="#">About</a></li>
                  <li><a href="#">Connect</a></li>
                    <li><a href="#">Contact</a></li> 
               </ul>
            
             <div id="info">
             <img src="images/photo.gif" />
            <h1><i>JONH Doe - Designer</i></h1>
                  <h3>Graphic Designer</h3>
               <div id="sub_info">
                   <a href="mailto:e-mail@mypage.ru">e-mail@mypage.ru</a>
                   +7 (495) 777-77-77
               </div>
            </div>
            </div> 
               
            
              <div class="sub_div">
             <div class="podzagolovok">Objtive</div>
                 <div id="Objective">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                 Vivamus eu justo erat, quis porttitor ante. Nunc vel interdum leo.
                 In hac habitasse platea dictumst. Phasellus scelerisque posuere scelerisque.
                 </div>
                 <div id="pic"><img src="images/1.png"/>
                 <img src="images/1.png"/>
                 <img src="images/2.png"/>
                 <img src="images/3.png"/>
                 <img src="images/4.png"/>
                 <img src="images/5.png"/>
                 <img src="images/6.png"/>
                 <img src="images/7.png"/>
                 <img src="images/8.png"/>
                 <img src="images/1.png"/>
                 <img src="images/1.png"/>
                 <img src="images/1.png"/>
                 <img src="images/1.png"/>
                 <img src="images/1.png"/>
                 <img src="images/1.png"/>
                 </div>
                
               
             </div>   
             
                  <div class="podzagolovok">Education</div>
                 <div class="soderzhimoe"><b><font color="#ff0000">Praesent lareet colleg</font></b>
                 ,<font color="#C0C0C0">Curabitur New York</font>
                 <b>Major</b>: <font color="#C0C0C0">yestibu;um et oldio a quam imperet</font><b>Degree</b>:
                 <font color="#C0C0C0">Curabitur sed nunc</font></div>   
              <div class="sub_div">
                  <div class="podzagolovok">Experience</div>
                 <div class="soderzhimoe"><b><font color="#ff0000">Firm Name</font>,</b><font color="#C0C0C0"> city, sfate. confry 10/50/2009-10/08/2010</font>
                 <p><b>Graphic Desinger</b></p>
                 <ul style="list-style-image:url(images/a.gif)">
                        <li>In varius lacus sed felis placerat sed ornare lectus porttitor.

                        <li>Nulla a sapien ligula, id vulputate sapien.

                      <li>Nam sit amet metus risus, ut sagittis leo.

                      <li>Maecenas suscipitodio dapibus urna blandit sollicitudin.

                      <li>Proin eu tortorvitae lorem ornare molestie et a lorem.

                      <li>Donee elementum interdum tellus, ettristique odio convallis eu.</ul>
                      <b><font color="#ff0000">Firm Name</font>,</b><font color="#C0C0C0"> city, sfate. confry 10/50/2009-10/08/2010</font>
                 <p><b>Graphic Desinger</b></p>
                 <ul style="list-style-image:url(images/a.gif)">
                          <li>In varius lacus sed felis placerat sed ornare lectus porttitor.

                        <li>Nulla a sapien ligula, id vulputate sapien.

                      <li>Nam sit amet metus risus, ut sagittis leo.

                      <li>Maecenas suscipitodio dapibus urna blandit sollicitudin.

                      <li>Proin eu tortorvitae lorem ornare molestie et a lorem.

                      <li>Donee elementum interdum tellus, ettristique odio convallis eu.</ul>
                      <b><font color="#ff0000">Firm Name</font>,</b><font color="#C0C0C0"> city, sfate. confry 10/50/2009-10/08/2010</font>
                 <p><b>Graphic Desinger</b></p>
                    <ul style="list-style-image:url(images/a.gif)">
                       <li>In varius lacus sed felis placerat sed ornare lectus porttitor.</li>

                        <li>Nulla a sapien ligula, id vulputate sapien.</li>

                      <li>Nam sit amet metus risus, ut sagittis leo.</li>

                      <li>Maecenas suscipitodio dapibus urna blandit sollicitudin.</li>

                      <li>Proin eu tortorvitae lorem ornare molestie et a lorem.</li>

                      <li>Donee elementum interdum tellus, ettristique odio convallis eu.</li></ul>
                 </div>
             </div>   
              <div class="sub_div">
                  <div class="podzagolovok">Skills</div>
                 <div class="soderzhimoe">
                 <ul style="list-style-image:url(images/b.gif)">
                 <li><b>Nam id leo sed egestas:</b></li>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Curabitur scelerisque sem sed nisi fermentum commodo.
                  Sed luctus porta libero, eu consectetur puruscondimentum id.
               
                  <li><p><b>Leo sed egestas:</b></p></li>
                  Curabitur scelerisque sem sed nisi fermentum commodo.
                  Sed luctus porta libero, eu consectetur puruscondimentum id.
                    <li><p><b>Curabitur sed egestas:</b></p></li>
                   Sed luctus porta liberoc urabitur scelerisque sem sed nisi fermentum commodo.
                   Sed luctus porta libero, eu consectetur puruscondimentum id.
                    <li><p><b>Egestas nam id leo sed:</b></p></li>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Curabitur scelerisque sem sed nisi fermentum commodo.
                    Sed luctus porta libero, eu consectetur puruscondimentum id.</ul
                    </div>
              <div class="sub_div">
                  <div class="podzagolovok">Other Skills</div>
                 <div class="soderzhimoe">
                 <ul style="list-style-image:url(images/b.gif)">
                 <li><p><b>Leo sed egestas:</b></p>
                 <p>Curabitur scelerisque sem sed nisi fermentum commodo.
                 Sed luctus porta libero, eu consectetur puruscondimentum id.</p>
                 <li><p><b>Leo sed egestas:</b></p>
                 <p>Curabitur scelerisque sem sed nisi fermentum commodo.
                 Sed luctus porta libero, eu consectetur puruscondimentum id.</p></div>
             </div>   
              <div class="sub_div">
                  <div class="podzagolovok">Awards</div>
                 <div class="soderzhimoe">
                 <ul style="list-style-image:url(images/b.gif)">
                 <a href="#"><p><b><font color="#000000"><li>Curabitur quis nibh ac orci sodales suscipit vel non arcu.</font></b></p></li></a>
                 <a href="#"><p><b><font color="#000000"><li>Etiarn blandit enirn a magna molestie ultricies</font></p></li></a>
                 <a href="#"><p><b><font color="#000000"><li>Morbi a ligula vehicula risus dapibus pretium.</font></b></p></li></a>
                  <a href="#"><p><b><font color="#000000"><li>In guis nisi accumsan nisi hendrerit sagittis.</font></b></p></li></a>
                 </div>
             </div>   
         </div>   

</div>

                
</body>
</html>

и css
Код: Выделить всё
body
     {
     background-image:url('images/fone.gif');
     }
     
#zagolovok {
margin-left:650px;
  }
#menu {
font: 11px ;
  height:10px;
  line-height:10px;
  width:40%;
}

  #menu li {

  list-style-type:none;
  float:left;
  padding-left:10px;
  padding-top:20px;
  }
  img{ margin:0px 1px 0px 1px;}
h1 {margin:30px 7px 0px;}
h3 { width:100%;;color:#FF0000;}

.podzagolovok
{

background-position:center;
font-size:20px;
color:#C0C0C0;
  margin:0px 650px 0px;}


#Objective {
background-position:cfc;
border-style: none none dotted none;
border-width: 1px;
border-color: #C0C0C0;
white-space: normal;
margin-left:800px;
margin-right:250px;
}
.soderzhimoe
{
background-position:cfc;
border-style: none none dotted none;
border-width: 1px;
border-color: #C0C0C0;
margin-left:800px;
margin-right:250px;}
Последний раз редактировалось Dronzzz 07 ноя 2012, 06:21, всего редактировалось 1 раз.
Dronzzz
 
Сообщения: 3
Зарегистрирован: 23 окт 2012, 19:28

Re: помогите оформить.

Сообщение Nikel097 » 07 ноя 2012, 06:02

Картинка не отображается.
Аватара пользователя
Nikel097
 
Сообщения: 276
Зарегистрирован: 04 июн 2012, 12:27
Откуда: Казахстан, Алматы

Re: помогите оформить.

Сообщение Колпаков Александр » 07 ноя 2012, 08:22

Первым делом, хотелось бы дать Вам несколько советов:
1. отказаться от транслита. А именно, давайте нормальные имена классам и id: не zagolovok a title, не podzagolovok, а к примеру sub-title и т.д.
2. не прописывайте стили в элементе, для этого есть таблица стилей.
3. если верстаете на HTML5, то используйте теги соответствующие этой спецификации. То есть, вместо <div id="zagolovok"> напишите <header>, вместо <div id="menu"> напишите <nav> и т.д.
4. макет у Вас фиксированный, значит необходимо задать ему ширину в пикселях и отцентрировать. Делается это следующим образом:
Код: Выделить всё
.wrapper {
    width: 850px;
   margin: 100px auto; /*100px - это отступ сверху, auto - выравнивает элемент по центру.*/


В общем поработайте над своим кодом. Досконально я его не просматривал, поэтому по самой верстке ничего сказать не могу. Все что бросилось в глаза я Вам написал.

Удачи.
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург


Вернуться в CSS

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron
Рейтинг@Mail.ru