div float

ko6ag · April 9, 2009

Делаю шаблон к Joomla. Свой первый шаблон.

ммм... возник вопрос по div и float.

Есть большой див, внутри него еще два дива, которые распологаются на одной строке.

<div id="header">
     <div id="logoh">LOGO</div>
     <div id="authh">FORM</div>
    </div>

CSS такой:

#header
{
	background: #fff;
	color: #000000;
	margin: 0 auto;
	position: relative;
	text-align: right;
border-bottom: solid 4px #ccc;
           width: 1000px;
}


#logoh
{
  width: 760px;
  float: left;
  background: #cccccc;
  border: 0px solid;
  border-color: #666666;
  height: 235px;
  background-image: url(../img/header.jpg);
  background-repeat: no-repeat;
}

#authh
{
  margin-left: 780px;
  width: 220px;
  height: 235px;
  border: 1px solid;
  border-color: #000000;
}

Т.е. слева у нас находится див с большим логотипом, а дальше справа от него через 20 пикселей находится форма авторизации.

Так вот дело в том, что если у формы авторизации непрописывать margin-left: 780px; тогда она почему то прячется за логотип. Не переносится на другую строку, а просто находится за ним. Если у логотипа прописать margin-right: 20px; то это тоже никакого результата не дает.

Все пока проверяю в Опере. А IE вообще твориться что то невообразимое.

Ткните меня мордой в правильном направлении. Все головушку сломала уже. Прочитала кучу информации, но по-моему у меня в голове каша...

Спасибо.

Searcher · April 10, 2009

Параметр float выводит элемент из общего потока. Все не плавающие блоки (т.е. у которых float отсутствует) не замечают блока с float:left или right. По-этому authh размещается так как-будто logoh нет. Вот и приходится вам сдвигать его отступами.

А что надо получить то?

Если вы хотите, чтобы форма авторизации была справа от логотипа то задайте для authh float:right;. После этого родительский блок header перестанет видеть и логотип и форму авторизации, чтобы увидел задайте для него overflow:hidden;

psywalker · April 10, 2009

ko6ag

А мой вам совет вообще не делать так , как вы делаете, всё делается намного проще:

Вот например один из вариантов:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Logotype</title>

<style type="text/css">
   div#header{ position: relative; border: 1px solid #000; }

	  h1 { width:...px; height:...px; }
		 h1 a { display: block; }

  form { 
	 position: absolute; 
	 right: 20px; 
	 top: 30px;
  }


</style>
</head>
<body>

<div id="header">
   <h1><a href="#">LOGOTYPE</a></h1>
   <form action="">
	   <input type="text" />
	   <input type="password" />
   </form>
</div>

</body>
</html>

Пояснение:

1) Я задал Хедеру (#header) position: relative; , для того , что бы внутри него можно было позиционировать ,Относительно него всякие штуки, типа вашей Формы (form),

2) Внутрь #header я поместил Заголовок (h1), который в свою очередь и является Логотипом, назначьте ему Ширину и Высоту только.., Внутри него я поместил ссылку, в которой и будет лежать ваш Логотип

3) А самое главное нам удалось Позиционировать вашу Форму(form), в любое место Хедера (#header), какое хотите, вот например справа, Главное задать элементу form Свойсто : position:, со значением: absolute; и Координаты: right: 20px; top: 30px;

Маленький код и никаких проблем

Edited April 10, 2009 by psywalker

ko6ag · April 10, 2009

да, вы правильно поняли. Мне надо чтобы логотип и форма авторизации были на одной линии, но логотип слева, авторизация справа, через 20 пикселей

спасибо огромное. сейчас попробую

Edited April 10, 2009 by ko6ag

Flex · April 16, 2009

Проблема в чём-то схожа с рассматриваемой вначале поста.

Есть тот же блок и в нём два вложенных. Тоже хочу поставить один слева, а другой справа. 1-й и 2-й способ ничего не даёт. А проблема в том, что когда указываю параметр float (для первого случая) или position: relative (для второго), то содержимое блока, который слева, вылазит за пределы родительского блока. Если убираю эти параметры, то отображается нормально, однако блоки расположены не так как надо.

Searcher · April 17, 2009

я же все там писал, читайте внимательнее, при использовании float ставьте родительскому блоку overflow:hidden;

а при использовании абсолютного позиционирования вложенных блоков родитель никак не узнает о них, он перестает видить вложенные блоки, если у них указано position:absolute. Родителю тогда надо устанавливать высоту.

sytrus · April 18, 2009

Не вижу надобности в position для header'а.

Можно сделать еще проще по крайней мере в стилях.

стили

.header {border: 1px solid #000;}
.header h1 {float: left; width: 220px; height:...px;} /* логотип например 200px, а ширину ставим на 20px больше */
.header h1 a {display: block;}
.header form {float: left;}

xhtml, при это для валидности между input'ами лучше поставить "пустые" div'ы.

<div class="header">
<h1><a href="#">LOGOTYPE</a></h1>
<form action="">
<input type="text" />
<input type="password" />
</form>
</div>

Flex, вам этот вариант думаю тоже подойдет.

Sign In

div float

Question

ko6ag

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

ko6ag

Link to comment

Share on other sites

Flex

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

sytrus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information