Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 14.08.2016
Сообщений: 5
1

Горизонтальное выравнивание левой и правой колонок на сайте

14.08.2016, 22:59. Показов 1001. Ответов 5
Метки css, html (Все метки)

Люди, помогите пожалуйста снова новичку . Я продолжаю свле обучение и опять застрял : не понимаю почему левая колонка (свойство float: left отображается после элементов главной, а не параллельно, как правая колонка.

прикладываю свой сайт, скриншот, такж коды (фрагменты), мб может по ним будет понятно не скачивая сайта.

HTML5
1
2
3
<div class="left">
<p><a href="http://www.care2.com/click-to-donate/oceans/"><img src="https://www.cyberforum.ru/images/ocean.png" alt="click to donate - ocean - care2 project" id="ocean" target="_blank"></a></p>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.left {float:left;
    width: 350px;
    margin: 10px;
    text-align: center;
 
}
 
#ocean {border-width: 3px;
    border-style: solid;
    border-color: white;
    padding: 0px;
    width: 300px;
    margin: 10px;
 
}
0

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

Миниатюры
Горизонтальное выравнивание левой и правой колонок на сайте  
Вложения
Тип файла: zip site.zip (1.86 Мб, 10 просмотров)
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.08.2016, 22:59
Ответы с готовыми решениями:

При нажатии левой клавиши "мыши" отразить курсор в левой половине экрана, а при нажатии правой - в правой
При нажатии левой клавиши &quot;мыши&quot; отразить курсор в левой половине экрана, а при нажатии правой - в...

Анимация: человечек по желанию пользователей либо махает правой рукой, либо левой или правой ногой
написать программу, при помощи которой человечек будет по желанию пользователей либо махать правой...

Горизонтальное выравнивание
Как сделать выравнивание во flex контейнере, чтобы расстояние как между элементами так и...

Отличие правой и левой свертки
Правую и левую свертку можно реализовать так: #!/usr/bin/racket #lang scheme (define...

5
103 / 102 / 59
Регистрация: 21.10.2013
Сообщений: 341
14.08.2016, 23:43 2
Попробуй сделать обнуление стилей родительскому блоку в котором лежит Ваш класс ".left"
0
Эксперт HTML/CSS
2956 / 2545 / 1066
Регистрация: 15.12.2012
Сообщений: 9,607
Записей в блоге: 10
15.08.2016, 00:24 3
Arthur the king, по умолчанию блочные элементы занимают 100% ширины экрана... Поэтому чтобы уместить все блоки на одной линии, для блока #brd необходимо задать ширину, к примеру 20% и всё будет гуд...
0
0 / 0 / 0
Регистрация: 14.08.2016
Сообщений: 5
15.08.2016, 10:26  [ТС] 4
Fedor92, но у блока #brd ширина указана - width:350px;

Добавлено через 7 минут
Kenworth, css reset не помог
0
Эксперт HTML/CSS
2956 / 2545 / 1066
Регистрация: 15.12.2012
Сообщений: 9,607
Записей в блоге: 10
15.08.2016, 12:25 5
Лучший ответ Сообщение было отмечено Arthur the king как решение

Решение

Цитата Сообщение от Arthur the king Посмотреть сообщение
Fedor92, но у блока #brd ширина указана - width:350px;
Сначала правильно стили подключите:
HTML5
1
<link type="text/css" rel="stylesheet" href="mysite.css">
в тестовом файле, а потом мне про ширину рассказывайте... А теперь к делу:
Горизонтальное выравнивание левой и правой колонок на сайте

Его надо либо удалить - либо вставить видео... А потом дело техники, надо тупо переставить блоки местами:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>Мой Сайт</title>
<link type="text/css" rel="stylesheet" href="mysite.css">
</head>
<body>
<h1 id="header">my website</h1>
<div class="left">
<p><a href="http://www.care2.com/click-to-donate/oceans/"><img src="https://www.cyberforum.ru/images/ocean.png" alt="click to donate - ocean - care2 project" id="ocean" target="_blank"></a></p>
</div>
<div id="brd">
<p>Using data on shark catches, discards and mortality rates worldwide, the researchers estimated that approximately 100 million sharks are killed per year by humans. However, they add that this is a conservative estimate, and the true number could be as high as 273 million sharks killed annually by humans.</p>
<br>
<img src="https://www.cyberforum.ru/images/White_shark.jpg" width="300" height="300" alt="great white shark" hspace="0" vspace="0" class="pic_sh"></p>
</div>
<p class="video">
<iframe width="320" height="180" src="https://www.youtube.com/embed/wnfWoscqQTU" frameborder="0" allowfullscreen></iframe>
</p>
<DIV class="video" align="center"><embed src="naruto_new2.swf" menu="false" quality="high" width="151" height="70" name="poqbum-dot-com" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="playlist=chlist.xg" wmode="transparent"></embed></DIV>
</body>
</html>
Плюс ко всему надо добавить доктайп и указать кодировку с помощью метатега... Раз уж Вы новичок, то поясню, что доктайп является требованием обязательным иначе Ваша страничка воспроизводиться броузером в режиме совместимости, что может привести к некорректной визуализации...
1
0 / 0 / 0
Регистрация: 14.08.2016
Сообщений: 5
16.08.2016, 01:12  [ТС] 6
Fedor92,

стили подключены правильно. Сегодня уже разобарлся, да, проблема была в том, что оказывается левая и права плавающие колонки (их код) должны идти перед кодом средней. Про кодировку и доткайп знаю, просто лень делать это в одном из многих тестовый сайтов.

спасибо за Ваши ответы.

(Тот блок не пустой, просто в версии сайта которую я вам отправил не было картинок и плеера который там располагался)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.08.2016, 01:12

ПравилА левой и правой руки
Помогите пожалуйста с правилами левой и правой руки со всеми тонкостями)) Постоянно путаю все....

Рисунки с левой и с-правой сторону
Подскажите как сделать рисунок с левой стороны и с правой? я сделал но у меня криво отображается...

Горизонтальное выравнивание блоков
Доброго времени суток, сверстал сайт блочной версткой, возникла проблема: два блока стоят рядом...

Код левой и правой кнопки мышки
Нужны коды кнопок мышки, в Keys не нашёл. Я использую следующий код для захвата кнопок: protected...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.