Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> DIV Смещение к левой стороне, Нужна помощь по CSS
eLDeR  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Пользователь
**

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 73
Пользователь №: 18969
На форуме: 7 лет, 3 месяца, 3 дня
Карма:




Выравнивается вертикально... сделать горизонтально примыкающем не получается... Прошу помощи...
Код:
<div class="page-list page-list-ext allpagelist">
<div
class="page-list-ext-item"><hr class='style-two'>
<div
class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-010/" title="Баня Б-010">
<img
src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_010_mini-150x150.jpg" width="100" alt="Баня Б-010" /></a></div>
<h3
class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-010/" title="Баня Б-010">Баня Б-010</a></h3>
<div
class="page-list-ext-item-content">Одноэтажная баня (7,35м х 9,1м). Парная. Душевая. Комната отдыха. Терраса. Тамбур.</div>
</div>
<div
class="page-list-ext-item"><hr class='style-two'>
<div
class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-009/" title="Баня Б-009">
<img
src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_009_mini-150x150.jpg" width="100" alt="Баня Б-009" /></a></div>
<h3
class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-009/" title="Баня Б-009">Баня Б-009</a></h3>
<div
class="page-list-ext-item-content">Двухэтажная баня (6м х 7м). Парная. Бассейн. Душевая. Раздевалка. Комната отдыха. Крыльцо. Мансарда. Балкон.</div>
</div>
<div
class="page-list-ext-item"><hr class='style-two'>
<div
class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/banya-b-008/" title="Баня Б-008">
<img
src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_008_mini-150x150.jpg" width="100" alt="Баня Б-008" /></a></div>
<h3
class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/banya-b-008/" title="Баня Б-008">Баня Б-008</a></h3>
<div
class="page-list-ext-item-content">Одноэтажная баня (5,7м х 5,4м). Душевая. Парная. Комната отдыха. Крыльцо. Тамбур.</div>
</div>
<div>
CSS:
div.allpagelist {
width: 100%;
}

div.allpagelist div.page-list-ext-item {
width: 300px;
height: 200px;
display: block;
float: left;
border: 1px solid #444;
margin:0;
padding:0;
}


Это сообщение отредактировал sergeiss - 4.03.2015 - 17:37
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 14980
Пользователь №: 4190
На форуме: 8 лет, 10 месяцев, 5 дней
Карма: 444




Цитата (eLDeR @ 4.03.2015 - 16:59)
Выравнивается вертикально... сделать горизонтально примыкающем не получается...

Поясни подробнее, так не понятно. Что именно должно быть выровнено? Лучше, может быть, даже картинку нарисуй.


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
eLDeR  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Пользователь
**

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 73
Пользователь №: 18969
На форуме: 7 лет, 3 месяца, 3 дня
Карма:




Сейчас так:
user posted image
Могу указать прямую ссылку на страницу, если тут разрешено
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 14980
Пользователь №: 4190
На форуме: 8 лет, 10 месяцев, 5 дней
Карма: 444




Цитата (eLDeR @ 4.03.2015 - 17:44)
Могу указать прямую ссылку на страницу, если тут разрешено

Не запрещено smile.gif

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

Браузер какой у тебя? Я смотрю в Опере 27.

Полный код страницы, как я ее сделал

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
div.allpagelist {
width: 100%;
}

div.allpagelist div.page-list-ext-item {
width: 300px;
height: 200px;
display: block;
float: left;
border: 1px solid #444;
margin:0;
padding:0;
}
</style>
</head>

<body>
<div class="page-list page-list-ext allpagelist">
<div class="page-list-ext-item"><hr class='style-two'>
<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-010/" title="Баня Б-010"><img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_010_mini-150x150.jpg" width="100" alt="Баня Б-010" /></a></div>
<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-010/" title="Баня Б-010">Баня Б-010</a></h3>
<div class="page-list-ext-item-content">Одноэтажная баня (7,35м х 9,1м). Парная. Душевая. Комната отдыха. Терраса. Тамбур.</div>
</div>
<div class="page-list-ext-item"><hr class='style-two'>
<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-009/" title="Баня Б-009"><img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_009_mini-150x150.jpg" width="100" alt="Баня Б-009" /></a></div>
<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-009/" title="Баня Б-009">Баня Б-009</a></h3>
<div class="page-list-ext-item-content">Двухэтажная баня (6м х 7м). Парная. Бассейн. Душевая. Раздевалка. Комната отдыха. Крыльцо. Мансарда. Балкон.</div>
</div>
<div class="page-list-ext-item"><hr class='style-two'>
<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/banya-b-008/" title="Баня Б-008"><img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_008_mini-150x150.jpg" width="100" alt="Баня Б-008" /></a></div>
<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/banya-b-008/" title="Баня Б-008">Баня Б-008</a></h3>
<div class="page-list-ext-item-content">Одноэтажная баня (5,7м х 5,4м). Душевая. Парная. Комната отдыха. Крыльцо. Тамбур.</div>
</div>
<div>

</body>
</html>


Это сообщение отредактировал sergeiss - 4.03.2015 - 17:59


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
eLDeR  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Пользователь
**

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 73
Пользователь №: 18969
На форуме: 7 лет, 3 месяца, 3 дня
Карма:




Ссылка на страницу: http://stroi-servis-mr.ru/all-project/
Сам пользуюсь яндексом (в опере также)
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Winston  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 9509
Пользователь №: 18161
На форуме: 7 лет, 5 месяцев, 17 дней
Карма: 552




В стиле
.page-list-ext .page-list-ext-item {
clear: both;
margin: 10px 0 30px 0;
}

убрать clear: both;
PMСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 14980
Пользователь №: 4190
На форуме: 8 лет, 10 месяцев, 5 дней
Карма: 444




Винстон опередил, пока я писал :)

Проблема в том, что ты указал не все стили, относящиеся к используемым элементам. У тебя есть еще вот такая хреновина

.page-list-ext .page-list-ext-item {
clear: both;
margin: 10px 0 30px 0;
}


Убери тут "clear: both;" и оно будет работать так, как надо.


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
eLDeR  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Пользователь
**

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 73
Пользователь №: 18969
На форуме: 7 лет, 3 месяца, 3 дня
Карма:




спасибо ))
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса