Header

mazhar · April 24, 2010

Доброй ночи!

Спасибо за удобный, понятный для начинающих мастеров сайт!

Удачи Вам и процветания!

Обращаюсь к Вам за помощью.)))

Пытаюсь сверстать шапку сайта, которая состоит из трех картинок. Сделал все вроде так, но не так.))))

Две картинки стали нормально (слева и по центру), а третья стала справа, но сместилась вниз ровно на ту высоту которая задана в шапке.

Код прилагаю.

Если можете, помогите разобраться, поделитесь опытом.))))

Заранее спасибо.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

</div>

CSS

* {

margin: 0;

padding: 0;

}

html {height: 100%}

body {

font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

width: 100%;

height: 100%;

background-color:#FFF;

}

a {

color: blue;

outline: none;

text-decoration: underline;

}

a:hover {

text-decoration: none;

}

p {margin: 0 0 18px}

img {

border: none;

}

input {vertical-align: middle}

#wrapper {

width: 1000px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

}

/* Header

—————————————————————————--*/

#header {

height: 163px;

width: 1000px;

}

/* Middle

—————————————————————————--*/

#middle {

width: 100%;

padding: 0 0 100px;

height: 1%;

}

#middle:after {

content: '.';

display: block;

clear: both;

visibility: hidden;

height: 0;

}

#container {

width: 100%;

float: left;

overflow: hidden;

}

#content {

padding: 0 270px 0 270px;

}

/* Sidebar Left

—————————————————————————--*/

.sl {

float: left;

width: 250px;

margin-left: -100%;

position: relative;

background: #B5E3FF;

}

/* Sidebar Right

—————————————————————————--*/

.sr {

float: left;

margin-right: -3px;

width: 250px;

margin-left: -250px;

position: relative;

background: #FFACAA;

}

/* Footer

—————————————————————————--*/

#footer {

width: 1000px;

margin: -100px auto 0;

height: 100px;

background: #BFF08E;

}

/*——————header—————————--*/

#logo {

width: 302;

height: 163;

}

#logo1 {

width: 505;

height: 163;

}

#logo2 {

width: 193;

height: 163;

Скрин:

Edited April 24, 2010 by mazhar

psywalker · April 25, 2010

1) Код в спец.теги на будещее. В следующий раз бан сразу за нарушение правил.

2) Где тут единицы измерения на конце?

/*——————header—————————--*/
#logo {
width: 302;
height: 163;
}
#logo1 {
width: 505;
height: 163;
}
#logo2 {
width: 193;
height: 163;

3) Почему ты считаешь, что блочные элементы просто так должны выравниваться по горизонтали идя друг за другом?

mazhar · April 25, 2010

1) Код в спец.теги на будещее. В следующий раз бан сразу за нарушение правил.
2) Где тут единицы измерения на конце?
/*——————header—————————--*/
#logo {
width: 302;
height: 163;
}
#logo1 {
width: 505;
height: 163;
}
#logo2 {
width: 193;
height: 163;
3) Почему ты считаешь, что блочные элементы просто так должны выравниваться по горизонтали идя друг за другом?

Извините, исправлюсь. )))

Измерения исправлю.

Намекните как сделать, чтобы блоки шли по горизонтали. Может ссылку, где про это написано.

Спасибо.

А почему я так думал, потому что в штмл странице написал выравнивание 1 картинки слева, другой по центру, а третей по правому краю?!

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

Edited April 25, 2010 by mazhar

Justnewone · April 25, 2010

Извините, исправлюсь. )))
Измерения исправлю.
Намекните как сделать, чтобы блоки шли по горизонтали. Может ссылку, где про это написано.
Спасибо.
А почему я так думал, потому что в штмл странице написал выравнивание 1 картинки слева, другой по центру, а третей по правому краю?!
Но теперь я понял свою ошибку, блочные элементы по умолчанию идут один под другим. Как их выровнять по горизонтали?

У меня такое ощущение, что а данном случае картинку резать не надо. Это кроме того, что можно было бы вложить последовательно друг в друга 3 div-а, разместив соответствующие бекграунды. Или даже 2, бекграунд + бекграунд + img.

mazhar · April 25, 2010

У меня такое ощущение, что а данном случае картинку резать не надо. Это кроме того, что можно было бы вложить последовательно друг в друга 3 div-а, разместив соответствующие бекграунды. Или даже 2, бекграунд + бекграунд + img.

Дело в том, что psd макета нет. Есть сайт, который делался давно и сверстан он, к сажелению, не правильно.

ShumNo · April 25, 2010

Картинку легко соединить в одну и прилепить. Выгода очевидна как для пользователя так и для сервера и разработчику меньше гемороя

Great Rash · April 26, 2010

mazhar, погуглите по словосочетанию "трехколоночный макет", мне кажется это именно то что вам нужно.

rus · April 26, 2010

да тут даже гуглить не надо, вот.

mazhar · April 26, 2010

да тут даже гуглить не надо, вот.

Всем спасибо разобрался.

Sign In

Header

Question

mazhar

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

mazhar

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

mazhar

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

mazhar

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information