Jump to content
  • 0

Помогите


TrilLiaN
 Share

Question

У меня есть макет c21e387f3991.png.Проблема вот в чем я не знаю как сверстать шапку(шаблон фиксированный) тоесть я фон то могу отобразить правильно,но логотип и баннер не знаю как сверстать никак не встают так что бы логотип слева баннер справа.Не могу сообразить как сверстать...

Помогите.Пробовал фон делать релатив а логотип с баннером на обсолют,но так фон съезжает да и получается не под все разрешения экрана.

Вот код фона шапки

<table style="width: 100%; border-collapse: collapse"><tbody><tr><td style='width: 1100px; height: 174px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://nek.3dn.ru/images_shw/shapka_bg.png"); background-repeat: no-repeat; background-position: 50% 50%'>Здесь ложны быть логотип и баннер</td></tr></tbody></table>

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

А можно пример npofopr

Я не умею на слоях верстать psywalker

Дело в том что если я задам float:left логотипу то он прижмется вообще к левому краю,а у меня шаблон шириной 1100px и посередине(т.е есть некоторое расстояние по бокам)

А?

Link to comment
Share on other sites

  • 0

Если уж верстаете на таблицах, то и сделайте 2 ячейки - одну под лого, а другую под баннер. Левой скажите text-aligh: left;, а правой скажите text-aligh: right; и никаких флоатов вам не понадобится.

Link to comment
Share on other sites

  • 0

да при чём тут таблицы вообще?

Тут же всё проще простого:

<header>
<h1 id="logo"><a href="/">Ucozper.ru</a></h1>
<aside id="banner"><a href="stp://somewhere"><img src="banner.png" /></a></aside>
</header>

вот и весь код.

ну и в css что-нибудь вроде такого:

header {
display: block;
height: 153px;
}
h1#logo,
h1#logo a {
float: left;
display: block;
width: 262px;
height: 79px;
}
h1#logo {
padding: 47px 0 0 28px;
}
h1#logo a {
background: transparent url(logo.png) no-repeat;
text-indent: -4096px;
}
aside#banner {
display: block;
float: right;
width: 468px;
height: 60px;
padding: 47px 28px 0 0;
}

Link to comment
Share on other sites

  • 0

Great Rash,я пробовал так делать,да все получалось так как надо на это всем прижималось к левому краю(я имею ввиду фон шапки)а мне надо что бы было по центру экрана.

Link to comment
Share on other sites

  • 0

aside — это блок меньшей значимости, не несущий основной информации.

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

А ещё лучше покажите код, покажите скриншот, что получается, и как должно быть. Так и подсказать проще будет.

Link to comment
Share on other sites

  • 0
aside — это блок меньшей значимости, не несущий основной информации.

Ну то есть обычный sidebar. Осталось понять что ему в хедере делать.

TrilLiaN, выложи куданить свою страничку, там и посмотрим.

Link to comment
Share on other sites

  • 0

<table style="width: 1100px; border-collapse: collapse" align="center"><tr><td style='width: 1100px; height: 174px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://nek.3dn.ru/images_shw/shapka_bg.png"); background-repeat: no-repeat; background-position: 50% 50%'>
<div style="float: left;">Тут будет логотип</div>
<div style="float: right; ">Тут будет баннер</div>
</td></tr></table>

или

<table style="width: 1100px; border-collapse: collapse" align="center"><tr style='width: 1100px; height: 174px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://nek.3dn.ru/images_shw/shapka_bg.png"); background-repeat: no-repeat; background-position: 50% 50%'>
<td align="left">Тут будет логотип</td>
<td align="right">Тут будет баннер</td>
</tr></table>

Link to comment
Share on other sites

  • 0
Great Rash,я пробовал так делать,да все получалось так как надо на это всем прижималось к левому краю(я имею ввиду фон шапки)а мне надо что бы было по центру экрана.

Чтобы было по центру экрана надо задать таблице ширину (например 1000 пикселей), а потом задать для всей таблицы margin: 0 auto; тогда она встанет по центру окна.

swetlana, я конечно понимаю вашу любовь к HTML5, но человек не знает блочной верстки и просит, чтобы ему объяснили как все делается на таблицах. В этом случае ценность вашего поста стремится к нулю.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy