За последние 24 часа нас посетили 16639 программистов и 1650 роботов. Сейчас ищут 1794 программиста ...

Верстка DIV

Тема в разделе "HTML и CSS", создана пользователем greenzlat, 31 мар 2010.

  1. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    Всегда верстал таблицами, решил изучать DIV.
    Сразу столкнулся с такой проблемкой.
    Есть 2 div:
    HTML:
    1.  
    2. <div id="header">Логотип</div><!--id="header"-->
    3. <div id="rega">
    4. Форма реги
    5. </div><!--id="rega"-->
    6.  
    [css]
    #header {
    background-image:url(img/logo.jpg);
    background-repeat: no-repeat;
    width:1000px;
    height:210px;

    }

    #rega { position:relative;
    right: 20px;
    top:10px;
    }
    [/css]

    Хочу чтоб <div id="rega"> был поверх <div id="header"> в определенном месте, что-то ны выходит, позиционируется ниже <div id="header">
     
  2. redkite

    redkite Активный пользователь

    С нами с:
    31 мар 2010
    Сообщения:
    7
    Симпатии:
    0
    а как вы таблицами верстали бы это? наверное бы одну таблицу внутрь другой засунули? так же и тут - див внутрь дива, тогда он и будет отображаться где надо, а там дальше css - margin, padding, float
     
  3. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    Блин туплю))) Спасибо!
     
  4. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    Пытаюсь у таблицы сделать закругленные углы, не получается, в чем ошибка?

    HTML:
    1. <div id="main">
    2. <div id="header">
    3.     <div id="rega">
    4.     Форма реги
    5.     </div><!--id="rega"-->
    6. </div><!--id="header"-->
    7. <div id="menu">
    8. Меню
    9. </div><!--id="menu"-->
    10. <div id="kontent">
    11.         <div id="fish" >
    12.     <div class="corners"><div><div><div>
    13.         <p>11111 </p>
    14.               </div></div></div></div>    
    15.       </div><!--id="fish"-->
    16.    
    17.     <div id="hunter">
    18.     222
    19.     </div><!--id="hunter"-->
    20.    
    21.     <div id="right">
    22.       <p>Правый
    23.         fg</p>
    24.       <p>апап</p>
    25.       <p>ап</p>
    26.     </div>
    27.     <!--id="right"-->
    28.    
    29. </div><!--id="kontent"-->
    30. <div id="reklama">
    31. Реклама
    32. </div><!--id="reklama"-->
    33.  
    34. <div id="footer">Футер</div>
    35. <!--id="reklama"-->
    36.  
    37. </div><!--id="main"-->
    38. </body>
    39.  
    [css]
    html, body {margin:0;
    padding:0;
    border:#dedede;
    height:100%;}

    .corners { background: #f1f8fe; }
    .corners div { background: url(ugol_right.jpg) top right no-repeat; }
    .corners div div { background: url(ugol_right.jpg) bottom right no-repeat; }
    .corners div div div { background: url(ugol_right.jpg) bottom left no-repeat; }

    #main {border:solid 1px #dedede;
    width:1000px;
    margin:auto;
    height: 100%;
    display:table;}

    #header {background-image:url(img/logo.jpg);
    background-repeat:no-repeat;
    width:1000px;
    height:210px;
    z-index:1; }

    #kontent {margin-top: 10px;}

    #fish {width:320px;
    border: solid 1px #a5ddfa;
    float:left;
    margin-left:10px; }

    #hunter {width:320px;
    border: solid 1px #a5ddfa;
    float:left;
    margin-left:10px; }

    #right {width:320px;
    border: solid 1px #a5ddfa;
    margin-left:670px; }
    [/css]
     
  5. redkite

    redkite Активный пользователь

    С нами с:
    31 мар 2010
    Сообщения:
    7
    Симпатии:
    0
    вы лучше почитайте статьи разные, попгуглите, посмотрите как люди делают. с нуля вот так очень сложно будет понять. есть разные техники просто.
     
  6. Yadfewm

    Yadfewm Активный пользователь

    С нами с:
    20 июл 2009
    Сообщения:
    223
    Симпатии:
    0
    да, и еще если человек переходит с таблиц на дивы, и вот так вот сразу хочет скругденные углы, то сначало пусть еще научится верстать двухколончатый, трехколончатый, резиновый, не резиновый макет страницы с футером, это полегче и заодно основы поймет.