Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 25 Ответов
  • 5532 Просмотров
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Люди,  нубу правильно определить позиционирование. ;D ;D
На скрине видно красный див (общий). В нем два других (белые квадраты).

Как я не морочился, но второй див стает под первым. А мне нужно на одном уровне.
Собственно:
Код
<div id=3>
<div id=1></div>
<div id=2></div>
</div>
^-^

[вложение удалено Администратором]
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: Два div в одном - позиционирования
« Ответ #1 : 11.12.2009, 12:27:12 »
#1 { float: left; }
#2 { float:right; }

указываете ширину обоим и нужные отступы. они в сумме не должны быть больше, чем ширина родителя. Внутри родителя добавляете еще один элемент со стилем clear:both;, допустим, <br class="clear"/> для очистки потока
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Re: Два div в одном - позиционирования
« Ответ #2 : 11.12.2009, 12:46:21 »
Собственно в для <div id=1> - left установить не могу.
Код

#3{
background:transparent url(images/head.png) top left no-repeat;
height:140px;
width:100%;
padding-bottom:20px;
margin:0;
}
#1{
height:140px;
padding-left:650px;

}
#2{
float:right;
}

PS  а что это последние сообщения отображаются первыми? Это теперь везде так?
*

Antosha

  • Захожу иногда
  • 420
  • 52 / 0
  • Плохо спорить плохо
Re: Два div в одном - позиционирования
« Ответ #3 : 15.12.2009, 21:26:27 »
Так все получилось?
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Re: Два div в одном - позиционирования
« Ответ #4 : 16.12.2009, 11:52:14 »
Та нечего не получилось...)) Если есть идеи, буду рад помощи ^-^
« Последнее редактирование: 16.12.2009, 11:57:32 от ART-DELI »
*

radius

  • Давно я тут
  • 550
  • 45 / 0
Re: Два div в одном - позиционирования
« Ответ #5 : 16.12.2009, 12:10:08 »
#3{
background:transparent url(images/head.png) top left no-repeat;
height:140px;
width:100%;
padding-bottom:20px;
margin:0;
}
#2{
float:left;
width:50px;
margin-right:10px;
}
#1{
float:left;
width:50px;
}
*

Antosha

  • Захожу иногда
  • 420
  • 52 / 0
  • Плохо спорить плохо
Re: Два div в одном - позиционирования
« Ответ #6 : 16.12.2009, 13:23:58 »
Если Float 100% нельзя использовать, то остается только табличка с 2-мя ячейками.
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Re: Два div в одном - позиционирования
« Ответ #7 : 16.12.2009, 14:52:26 »
Ну как то табличками уже вроде не модно верстать))
radius  - по твоему примеру, тож не вышло..
Собственно сайт мой art-deli.info
Код шаблона
Код
<body>
<div id="page">
<div id="header">

<div id="im"><img src="<?php bloginfo('template_directory'); ?>/images/im.png"/></a></div> - это фотка
<div id="main_menu"><?php wp_list_pages('title_li=&depth=1'); ?></div> - это "меню" которое падает чего то..

</div>
</div>
СSS
Код
body{
padding:0;background-color:#fff;
background-image:url(images/bg.png);
background-repeat:repeat-x;margin:0;
padding:0;
font-family: Arial,Helvetica,sans-serif;color:#333;
padding-top:15px;
}

#page{background-color:transparent;
width:98%;
margin:0 auto 0;
color:#333;
}
#header{
background:transparent url(images/head.png) top left no-repeat;
height:140px;
width:100%;
padding-bottom:20px;
margin:0;
}
#im{
height:140px;
padding-left:650px;

}
#main_menu{
margin:0;
position:fixed;
float:right;
}
И как не крутлил, все равно падает ^-^

*

radius

  • Давно я тут
  • 550
  • 45 / 0
Re: Два div в одном - позиционирования
« Ответ #8 : 16.12.2009, 15:17:27 »
#im{
height:140px;
padding-left:650px; - Это нужно убрать
float:left;
}

#main_menu{
margin:0;
position:fixed; - это убрать
float:right;
}

#header{
background:transparent url(images/head.png) top left no-repeat;
height:140px;
width:100%;            - Здесь похоже antosha прав, нужно выставить жестко ширину, иначе дочерние контейнеры не будут знать, в какую ширину им умещаться

padding-bottom:20px;
margin:0;
}
*

Antosha

  • Захожу иногда
  • 420
  • 52 / 0
  • Плохо спорить плохо
Re: Два div в одном - позиционирования
« Ответ #9 : 17.12.2009, 03:16:09 »
Короче, резюме, либо float, либо таблица. =)))
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: Два div в одном - позиционирования
« Ответ #10 : 17.12.2009, 10:50:49 »
...либо абсолютное позиционирование...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: Два div в одном - позиционирования
« Ответ #11 : 18.12.2009, 22:50:19 »
Собственно в для <div id=1> - left установить не могу.
А в чем проблема в установке для него свойства float?
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Re: Два div в одном - позиционирования
« Ответ #12 : 19.12.2009, 10:09:12 »
А в чем проблема в установке для него свойства float?
padding-left:650px;
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: Два div в одном - позиционирования
« Ответ #13 : 19.12.2009, 10:43:41 »
Не очень понимаю, а что с этим отступом, для чего он?
Я так понимаю, что для меню отводится 650 пикселей и за ним сразу должна идти фотка?
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Re: Два div в одном - позиционирования
« Ответ #14 : 19.12.2009, 10:57:32 »
Не очень понимаю, а что с этим отступом, для чего он?
Я так понимаю, что для меню отводится 650 пикселей и за ним сразу должна идти фотка?
Код
<div id="im"><img src="<?php bloginfo('template_directory'); ?>/images/im.png"/></a></div>
Фотка внутри дива.
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: Два div в одном - позиционирования
« Ответ #15 : 19.12.2009, 11:02:49 »
Фотка-то внутри, но 650px — это что за значение?
И почему тег а не открыт, а только закрыт?

Вот, к примеру такой вариант подойдет?
Код: html4strict
<!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>float block</title>
<style type="text/css"><!--
*{margin:0;padding:0;}
a img{border:none;}
#page{width:98%;margin:0 auto;color:#333;min-width:775px;}
#header{width:100%;overflow:hidden;margin-bottom:20px;}
#main_menu{width:650px;float:left;}
#main_menu ul{width:100%;overflow:hidden;}
#main_menu li{list-style:none;float:left;margin-right:10px;}
#im{float:left;}

#page{background:silver;}
#header{background:teal;}
#main_menu li{background:yellow;}
#im{background:green;}
#main_menu{background:red;}
--></style>
</head>
<body>
<div id="page">
<div id="header">

<div id="main_menu">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</div><!-- #menu -->
<a href="/" id="im">
<img src="http://www.art-deli.info/wp-content/themes/tech9-317/images/im.png" alt="img" />
</a><!-- #im -->

</div><!-- #header -->
#page
</div><!-- #page -->
</body>
</html>

Назначение фонов в стилях можно убрать.

[вложение удалено Администратором]
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Re: Два div в одном - позиционирования
« Ответ #16 : 19.12.2009, 11:05:53 »
Конечно подойдет! Не знаю как отблагодарить.
Могу отправить шоколадного деда мороза на НГ. Говори адрес))
+1. И всем остальным)
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
*

Шмайсер

  • Давно я тут
  • 801
  • 35 / 3
Re: Два div в одном - позиционирования
« Ответ #18 : 19.12.2009, 11:18:29 »
Я сильно в подробности топика не вдавался, так проскроллил по диагонали, но точно могу сказать вот такое значение padding-left:650px;
в корне неверно
Сам тоже иногда раньше так делал, ну в процессе экспериментирования, и параллельно смотрел верстку разных шаблонов, так вот: ни в одном, нормально сверстанном шаблоне таких значений ниразу не видел. Так же, как и margin-left: 450px, например.
Вобщем, такие огромные значения отступов и полей - это может и сработает и шаблон будет отображаться нормально, но с точки зрения верстки это неправильно.
Гуру, подскажите, я прав?
Разработка сайтов любой сложности, на Joomla 3.9-4.x и не только на ней. Пишу компоненты, модули и плагины на заказ. Переношу сайты с ветки 2.5.х на 4-ю версию Joomla. Пишу любые скрипты и интерфейсы.
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: Два div в одном - позиционирования
« Ответ #19 : 19.12.2009, 11:40:37 »
Я сильно в подробности топика не вдавался, так проскроллил по диагонали, но точно могу сказать вот такое значение padding-left:650px;
в корне неверно
Не верно, что оно не верно)
Оно же валидно и, к тому же, по логике ничем не противоречит индивидуальному подходу в верстке.

Такой отступ можно реализовать, к примеру, в такой ситуации:
Есть контейнер, в котором есть блок с position: fixed; и шириной в 650px, который должен быть постоянным с левой стороны, плюс текстовки всякие. При этом получится, что весь материал в контейнере будет отступать на размер этого фиксированного блока.

Да, можно подойти и другими путями в решении подобной задачи.
Но каждый реализует верстку в своем понимании «мира» страницы.
Абсолютных стандартов верстки-то нет.
«Голь на выдумки хитра».
*

Шмайсер

  • Давно я тут
  • 801
  • 35 / 3
Re: Два div в одном - позиционирования
« Ответ #20 : 19.12.2009, 12:15:06 »
gdX, я ж и говорю - это будет отображаться нормально в шаблоне, так же охотно верю что это будет валидно, но я нигде! в грамотных профессиональных шаблонах такого не видел. Ни разу. Поэтому, склонен думать что профи такой подход не практикуют. Равняться то нужно не на хитрую голь, а на профи, ЯТД.
Разработка сайтов любой сложности, на Joomla 3.9-4.x и не только на ней. Пишу компоненты, модули и плагины на заказ. Переношу сайты с ветки 2.5.х на 4-ю версию Joomla. Пишу любые скрипты и интерфейсы.
*

Lex

  • Завсегдатай
  • 1615
  • 274 / 1
Re: Два div в одном - позиционирования
« Ответ #21 : 19.12.2009, 12:22:45 »
Это неправильно потому, что никем никогда не делалось. Хм, странности логики не замечаете.
Жизнь заставила учиться.
В личке на вопросы не отвечаю.
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Re: Два div в одном - позиционирования
« Ответ #22 : 19.12.2009, 13:07:27 »
А я в первом топике и написал что я чайник в верстке. Хоть и владею общими понятиями, но ровняться к тем людям которые занимаются этим постоянно не могу.  ^-^
padding-left:650px; - втулил как первое, что пришло в голову. Потом пришел сюда.
Шмайсер  - да. Я сделал неправильно, и пусть простит меня мир! Разрешаю забросать меня камнями.  ;D
Но честно говоря, мне как то все равно как оно правильно или неправильно. Главное что бы отображалось нормально, как надо. А вопрос валидности - это дело каждого.
*

Шмайсер

  • Давно я тут
  • 801
  • 35 / 3
Re: Два div в одном - позиционирования
« Ответ #23 : 19.12.2009, 15:22:08 »
Lex, почему странности логики, ведь если разобраться - раз никем ( мы берем опытных верстальщиков) никогда не делалось, значит скорее всего неправильно)) Я рассуждаю так: маргин 650 пикс - это в зависимости от разрешения от половины до трети экрана монитора. Зачем делать такой отступ?
Причем, я говорю что Я ниразу не видел чтобы так делали. Возможно, я просто не встречал шаблонов где так сделано. С удовольствием посмотрю, если таковые есть.
Разработка сайтов любой сложности, на Joomla 3.9-4.x и не только на ней. Пишу компоненты, модули и плагины на заказ. Переношу сайты с ветки 2.5.х на 4-ю версию Joomla. Пишу любые скрипты и интерфейсы.
*

ART-DELI

  • Давно я тут
  • 801
  • 75 / 9
  • Не успеешь ты – сделают другие.
Re: Два div в одном - позиционирования
« Ответ #24 : 19.12.2009, 16:19:02 »
Люди, не стоит спорить. Каждый прав со своей колокольни. Вопрос решен. Тема закрыта.  ^-^
*

Шмайсер

  • Давно я тут
  • 801
  • 35 / 3
Re: Два div в одном - позиционирования
« Ответ #25 : 19.12.2009, 16:24:48 »
Цитировать
Люди, не стоит спорить
а никто не спорит! Нормальная дисскусия..
Прсто я тоже когда начинал верстать, тоже корежил код и так и сяк и иногда получались огромные маргины и пэддинги... подсознательно я понимал, что это неправильно, и изучал верстку других шаблонов, где при подобной моей верстке никогда такого не видел. Отрицательные маргины - да, были....
Так что все нормально, обычное обсуждение
Разработка сайтов любой сложности, на Joomla 3.9-4.x и не только на ней. Пишу компоненты, модули и плагины на заказ. Переношу сайты с ветки 2.5.х на 4-ю версию Joomla. Пишу любые скрипты и интерфейсы.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Разный размер шрифта в одном браузере

Автор parsanches

Ответов: 1
Просмотров: 1605
Последний ответ 10.06.2010, 20:55:15
от trismegistos
Поднятие текста относительно картинки в одном и том же классе

Автор jr0001

Ответов: 5
Просмотров: 2904
Последний ответ 18.02.2010, 23:12:40
от jr0001
разные таблицы CSS для страниц (содержаний) на одном сайте

Автор manitu

Ответов: 1
Просмотров: 1685
Последний ответ 25.01.2010, 17:46:54
от manitu
Два background в одном контейнере DIV

Автор IRIDON

Ответов: 8
Просмотров: 4552
Последний ответ 16.07.2009, 13:14:26
от IRIDON