HTML, CSS, DIV

Тема в разделе "PHP", создана пользователем almary, 27 янв 2009.

Модераторы: latteo
  1. almary

    almary Постоялец

    Регистр.:
    2 апр 2006
    Сообщения:
    93
    Симпатии:
    32
    Привет всем!

    Есть проблема, никак не могу решение найти.
    Нужно сделать див во весь экран с отступами со всех сторон, например по 10 пикселей и чтобы все это было кроссобразно и не появлялся скрол.

    Нашел вот такую статейку, но тут проблемы кроссобразности http://www.sql.ru/forum/actualthread.aspx?tid=610678
     
  2. PHP_Master

    PHP_Master

    Регистр.:
    3 фев 2008
    Сообщения:
    2.647
    Симпатии:
    590
    Не кроссобразности, а кроссбраузерности :Dhttp://stylizedweb.com/2008/02/01/vertical-align-div/
    только размеры поправь
     
  3. almary

    almary Постоялец

    Регистр.:
    2 апр 2006
    Сообщения:
    93
    Симпатии:
    32
    :D да, кроссбраузерности...

    Спасибо за линк, но это немного не то, квадратик не тянущийся получается :(

    Вот нашел макет , который нужен, но не контент не резиновый тут ((( http://www.manisheriar.com/holygrail/index.htm
     
  4. PHP_Master

    PHP_Master

    Регистр.:
    3 фев 2008
    Сообщения:
    2.647
    Симпатии:
    590
    Ну так поставь размеры в % и получишь резину.
     
  5. almary

    almary Постоялец

    Регистр.:
    2 апр 2006
    Сообщения:
    93
    Симпатии:
    32
    Видимо ты не понял, нужна резина и с каждой стороны отступ, при таком коде появляется вертикальная прокрутка и нет отступа снизу
    HTML:
    
    <!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>
    <title>Crystal.CMS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style>
    
    html, body{
    	height: 100%;
    }
    
    body {
    	background:#9343B9;
    	text-align:center;
    	margin:10px;
    	padding:0;
    	font:normal 0.8em/1.2em verdana,aria,sans-serif;
    	color:#666;
    	}
    
    a {
    	color:#FFF;
    	text-decoration:none;
    	border-bottom:1px dotted;
    	}
    a:hover {
    	border-bottom:1px solid;
    	color:#9343B9;
    	}
    #container{
    	background:#fff;
    	color:#000;
    	height: 100%;
    	width:100%;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="container"><!-- begin container -->
    	test
    </div><!-- end container -->
    	
    </body>
    </html>
    
    
     
  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    в стили допиши
    HTML:
    #container{
    	background:#fff;
    	color:#000;
    	height: 100%;
    	width:100%;
            margin:10px;
    }
    ну а у body убери margin:10px; и все норм будет :)
     
  7. almary

    almary Постоялец

    Регистр.:
    2 апр 2006
    Сообщения:
    93
    Симпатии:
    32
    Чисто логически отступов просто не будет, с отступами мы получем 10-10=0, итого отступов нет
     
  8. kaveo

    kaveo Постоялец

    Регистр.:
    29 июн 2008
    Сообщения:
    96
    Симпатии:
    14
    Вероятно, не вполне то, что хочется, но тем не менее, может, натолкнет на мысли...

    HTML:
    <div style="position:absolute;left:10px;top:10px;right:10px;bottom:10px;background-color:#cfcfcf">hello</div>
     
  9. almary

    almary Постоялец

    Регистр.:
    2 апр 2006
    Сообщения:
    93
    Симпатии:
    32
    Такой блок не тянется :(
    Я уже почти доработал свой макет, сделал при помощи 4-х дивов прилегающих по краям с определенным размером.
     
  10. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    чяго? У тебя главному слою задан отсутп от краев в 10 пикселей со всех сторон. Откуда ты взял 10-10?