Перейти к публикации
Gameer

Нужна помощь по HTML/CSS

Рекомендованные сообщения

Gameer

Нужно что бы эти элементы держались и никуда не совались, ка это сделать? Пример подан в картинках. Для пояснения.

Qp4A2L0.pngRE1Wfqu.png

 

это если мало новостей и отдалить зум
phED2qm.png 
 
Это если новостей достаточно что бы его прижало к низу, или в полной новости.
oSw0BA7.png

 
CSS код для ракеты:
.rocket2 {
float: right;
position: absolute;
right: 45px;
top: 75px;
}

CSS Код для планеты:

.earth {
position: absolute;
float: left;
left: 15px;
margin-top: -15px;
} 

Спасибо за внимание и помощь.

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Luv

Не кажется слишком наглым воровать чужую иллюстрацию? :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Gameer

Какую?



Не этом суть) Нужна помощь :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Luv

Задний фон и планету.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Gameer

Особо совесть не мучает. Помогите, плиз :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
FlaZeR

position:relative; поставь.

а после margin-ы правь :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Михаил

@Gameer, Тебе нужно прижать подвал к низу экрана, чтобы планета стала норм ( и позоционирование поставь относительное ), а для ракеты тебе нужно создать отдельный див, и запихнуть его в контент передвинув его на задний план, подвинуть после всего этого его вправо

Вот HTML/CSS

/* Ракета */
<div class="класс контента">
    <div class="rocket2">
        <a href="тут ссылка">
            <img src="путь к картинке" alt="Картинка">
        </a>
    </div>
</div>
/* Ракета */
.rocket2{position:absolute;float:right;margin-right:-/* Тут ширина картинки */;top:0;}

Если не получится помогу в скайпе

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Gameer

Спасибо, с ракетой я уже сам разобрался а вот с планетой... не могу. Скачет туда сюда.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

насколько я понимаю косяк не с css а с новыми стандартами которые принес html5... если поставишь какой-нить старый доктайп то все будет шикарно либо можно скриптами пофиксить...

 

Вот скрипт, хотя в его правильности я малость сомневаюсь.

var topHbody = $("body").height();
				
function stylesheetToggle() {
	var topH = $(window).height();
	if( topHbody >= topH ) {} else {
		$("body").css({"height": topH});
	};
}
			
$(document).ready(function() {
	stylesheetToggle();
	$(window).resize(stylesheetToggle);
});
Изменено пользователем webil

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Gameer

 

насколько я понимаю косяк не с css а с новыми стандартами которые принес html5... если поставишь какой-нить старый доктайп то все будет шикарно либо можно скриптами пофиксить...

 

Вот скрипт, хотя в его правильности я малость сомневаюсь.

var topHbody = $("body").height();
				
function stylesheetToggle() {
	var topH = $(window).height();
	if( topHbody >= topH ) {} else {
		$("body").css({"height": topH});
	};
}
			
$(document).ready(function() {
	stylesheetToggle();
	$(window).resize(stylesheetToggle);
});

Спасибо, все как бы ок, но слетает в лево. А так держится внизу. Только при уменьшении в левую сторону его тянет.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
qpPeW

@Gameer, Тебе нужно прижать подвал к низу экрана, чтобы планета стала норм ( и позоционирование поставь относительное ), а для ракеты тебе нужно создать отдельный див, и запихнуть его в контент передвинув его на задний план, подвинуть после всего этого его вправо

Вот HTML/CSS

/* Ракета */
<div class="класс контента">
    <div class="rocket2">
        <a href="тут ссылка">
            <img src="путь к картинке" alt="Картинка">
        </a>
    </div>
</div>
/* Ракета */
.rocket2{position:absolute;float:right;margin-right:-/* Тут ширина картинки */;top:0;}
Если не получится помогу в скайпе

 

еще один мего верстальщик...

головой сильно ударился использовать float вместе с position: absolute !?

 

@Gameer, что бы получить корректный ответ, для начала нужно задать вопрос нормально и что бы в нем был смысл, а не просто набор слов.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Gameer

Я задал полностью корректный вопрос.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

Спасибо, все как бы ок, но слетает в лево. А так держится внизу. Только при уменьшении в левую сторону его тянет.

Не понял...

еще один мего верстальщик...

головой сильно ударился использовать float вместе с position: absolute !?

Это уже норма...............щито поделать в общем... Изменено пользователем webil

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...