Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Расположение дивов
 
 автор: sl1p   (19.11.2008 в 12:09)   письмо автору
 
 

хелп..

нужно сделать следующее:

блок1 - блок 2 - блок 3,
всё это горизонтально в одном диве.

<div class="head">
 <div class="r">
  <div class="left">
<a href="index.php"><img src="img/head_logo.gif" alt="description"></a>
  </div>
  
   <div class="content">
    <div class="pad">
head
    </div>
   </div>
   
  <div class="right">
  right
 </div>
</div>
</div>


.head {background:url(../img/head.gif) center repeat-x;margin:0 8;}
.head .left{float:left; width:110px;}
.head .right{ float:right;background:#000;}
.head .content{text-align:center;height:68px;}
.head .content .pad{padding-top:20px;}
.head .r { background:url(../img/head_right.gif) no-repeat right;}


так получается положить горизонтально только left и content, right же падает вниз.. как я только не пробовал рр..
заранее спасибо ;)

  Ответить  
 
 автор: sl1p   (20.11.2008 в 09:32)   письмо автору
 
   для: sl1p   (19.11.2008 в 12:09)
 

^

  Ответить  
 
 автор: Madman   (20.11.2008 в 12:54)   письмо автору
 
   для: sl1p   (20.11.2008 в 09:32)
 

Тебе вот так надо?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height:100%; }
.left { float:left; width:150px; position:relative; background:#00FF00; }
.content { float:left; width:100%; margin-right:-200px; margin-left:-150px; }
.pad { margin:0 200px 0 150px; background:#FFFF66; }
.right { float:left; width:200px; background-color:#6699CC; }
</style>
</head>

<body>
    <div class="left">
        rgjtyjn<br />
        trhrtjnty<br />
        rynmry<br />
    </div>
    <div class="content">
        <div class="pad">
            123<br />
            457574
        </div>
    </div>
    <div class="right">
        kjfdhg<br />
        ghkmth<br />
        rgnr
    </div>
</body>
</html>

  Ответить  
 
 автор: sl1p   (20.11.2008 в 13:13)   письмо автору
 
   для: Madman   (20.11.2008 в 12:54)
 

оно, но всё нижнее под этим хидером подымается вверх.. тобишь не учитывает этот хидер:)

  Ответить  
 
 автор: Madman   (20.11.2008 в 13:28)   письмо автору
 
   для: sl1p   (20.11.2008 в 13:13)
 

т.е.? Надо, чтобы его высота не учитывалась? Так помести все это дело в абсолютный блок с шириной 100%
Или я не привильно понял?!

  Ответить  
 
 автор: sl1p   (20.11.2008 в 13:35)   письмо автору
 
   для: Madman   (20.11.2008 в 13:28)
 

а всё спасибо:)
я забыл про clear:both..

нет просто все нижние залезли под хидер изза флоата..

  Ответить  
 
 автор: Madman   (20.11.2008 в 13:37)   письмо автору
 
   для: sl1p   (20.11.2008 в 13:35)
 

=)
Ну я как бы и пологал, что это самостоятельно допишешь!
НП

  Ответить  
 
 автор: sl1p   (20.11.2008 в 13:51)   письмо автору
 
   для: sl1p   (20.11.2008 в 13:35)
 

правда твой вариант немного не подошёл) ибо там картинки и немного не стыковалось...

получилось вот так :

.clear{clear:both;}
.head {background:url(../img/head.gif) center repeat-x; margin:0 8; height:68px;}
.head .left{float:left; width:110px;}
.head .right{float:left;background:url(../img/head_right.gif) no-repeat right; width:110px; height:68px;}
.head .content{text-align:center;height:68px; float:left; width:100%; margin:0px -110px;}
.head .content .pad{padding-top:20px;}


<div class="head">
  <div class="left">
<a href="index.php"><img src="img/head_logo.gif" alt="description" align="top"></a>
  </div>
   <div class="content">
    <div class="pad">
headddddddddddddddddddddddddddddd
    </div>
   </div>  
   <div class="right"> 
  right
 </div>
</div>

<div class="clear"></div>

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования