Выравнивание нескольких элементов при блочной верстке

Asket · April 16, 2011

Доброго времени суток, господа! Такой вопрос - при блочной верстке на одной горизонтальной линии требуется разместить текст (2 строки) и картинку.

<div style=float:left>
<h1>TEXT</h1>
<br>
TEXT2
</div>
<div style=float:right>
<img alt="" src="">
</div>

Как сделать так, чтобы картинка прижималась к правому краю экрана, а текст в левой части центрировался по вертикали?

Чет не пойму... Зачитался уже... ((

Edited April 16, 2011 by Asket

psywalker · April 16, 2011

Ты лучше покажи-ка нам пару скришнотов дружище, один как нужно, другое - как хреново.

Asket · April 17, 2011

Ты лучше покажи-ка нам пару скришнотов дружище, один как нужно, другое - как хреново.

Понял, виноват, исправлюсь. С этим я разобрался... Но вылезла другая проблема ))Вот, как оно есть

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="description" content="">
<meta http-equiv="keywords" content="">
<style type="text/css">
	.hat {
		margin-left: 10%;
		float:left;
		text-align: center;
		font-family: Comic Sans MS;
		background-color: #0066FF;
                height: 151px;
		}
</style>
</head>
<body>
<div class="hat"><h1>Престиж</h1><h3>строительно-отделочные материалы</h3></div>
<div style=float:right><img alt="" src="images/logo.jpg"></div>
</body>
</html>

А надо сделат так чтобы синим было все от левого края экрана и до картинки...

Второй скрин сделать пока не могу - работе с изображениями только учусь (

Edited April 17, 2011 by Asket

psywalker · April 17, 2011

Так не пойдёт?

http://psywalker.ru/Forum/IMG/SelenIT/margin-right-100.html

RuSS · April 17, 2011

Понял, виноват, исправлюсь. С этим я разобрался... Но вылезла другая проблема ))Вот, как оно есть
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="description" content="">
<meta http-equiv="keywords" content="">
<style type="text/css">
	.hat {
		margin-left: 10%;
		float:left;
		text-align: center;
		font-family: Comic Sans MS;
		background-color: #0066FF;
                height: 151px;
		}
</style>
</head>
<body>
<div class="hat"><h1>Престиж</h1><h3>строительно-отделочные материалы</h3></div>
<div style=float:right><img alt="" src="images/logo.jpg"></div>
</body>
</html>
А надо сделат так чтобы синим было все от левого края экрана и до картинки...
Второй скрин сделать пока не могу - работе с изображениями только учусь (

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

Получается так:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="description" content="">
<meta http-equiv="keywords" content="">
<style type="text/css">
        .hat {
                margin-left: 10%;
                font-family: Comic Sans MS;
                background-color: #0066FF;
                height: 151px;
                }
         .text {
         		float: left;
         		text-align: center;
         }
</style>
</head>
<body>
<div class="hat">
<div class="text">
<h1>Престиж</h1>
<h3>строительно-отделочные материалы</h3>
</div>
<img src="logo.jpg" alt="" style="float: right;">
</div>
</body>
</html>

Asket · April 17, 2011

Так не пойдёт?
http://psywalker.ru/Forum/IMG/SelenIT/margin-right-100.html

Пойдет, спс огромное!

psywalker · April 17, 2011

Пойдет, спс огромное!

Не за что :facepalmxd:

Sign In

Выравнивание нескольких элементов при блочной верстке

Question

Asket

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Asket

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

RuSS

Link to comment

Share on other sites

Asket

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information