помогите с шапкой форума

Uzanka 21 май 2014, 19:59 Сообщение

Спасибо большое! Всё получилось :Yahoo!: правда, пришлось шапку пока убрать. Надо картинку красивую придумать :oops: Та, что я хотела, не подошла. Надо новую нарисовать. Но идея понятна. Спасибо большое! :Rose:
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

Uzanka 03 июл 2014, 00:37 Сообщение

Ребята, помогите с шапкой форума еще разок. Я сделала как-то, но меня не очень устраивает.

Шапка у меня резиновая. Залила ее цветом. Внутрь вставила картинку с девушкой. Картинка не очень большой ширины и поэтому оставалось много места слева и справа. Я сделала так, что она автоматически теперь 1) ставит картинку слева 2) остальное справа заполняет белым.

Вот так получилось:
Изображение

Но это не красиво. Хотелось бы, чтобы оставалось место справа и слева (цвета фона). В общем, я никак не могу понять как правильно это реализвать. Подбирать размер картинки под мою шапку и мой экран? А если будет другой размер, то как это будет выглядеть?

Помогите, пожалуйста :oops:

зы. чтобы было более понятно, что я хочу... вот что-то типа такого см. шапку этого форума (только бабочку не нужно)
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 03 июл 2014, 14:18 Сообщение

Uzanka » Сегодня, 03:37 писал(а):А если будет другой размер, то как это будет выглядеть?
Вот в этом обычно и заключается загвоздка:)

Можно нарисовать ещё одну картинку, не очень широкую, и установить её по правому краю. Получится примерно такое:
ваше изображение / белая пустота / новое изображение

Получится что на широких мониторах будет видна вся шапка, а на тех что поуже новое изображение будет скрыто.

Делается это так. В хедере у вас есть такой кусок:

Код: Выделить всё

<div class="post bg3" style="background-color:white; width:1000px;">
меняете его на:

Код: Выделить всё

<div class="post bg3" style="background: url(new_image.png) no-repeat 600px 0 #FFF;width:1000px;">
600px - это отступ слева.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 05 июл 2014, 01:21 Сообщение

CabinetAdmin » 03 июл 2014, 14:18 писал(а):Получится что на широких мониторах будет видна вся шапка, а на тех что поуже новое изображение будет скрыто.
А не получится так, что у кого-то на широком мониторе будет браузер не на весь экран развёрнут и будет видна часть второй картинки? :)
  • 0

CabinetAdmin 05 июл 2014, 06:26 Сообщение

Может быть и такое. В этом смысле фиксированная ширина форума лучше.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 05 июл 2014, 19:31 Сообщение

CabinetAdmin
спасибо. Я поняла. Подумаю как лучше сделать.
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

Uzanka 06 июл 2014, 00:49 Сообщение

CabinetAdmin
не подскажете как бы мне разместить эту часть, обернутую в <div class="post bg3" style="background-color:white; width:120%;">, по середине шапки. Сейчас она смещена влево. А хочется немного сдвинуть ее от левого края. Вот так (красными стрелочками попыталась пояснить):
Изображение

Если честно, то я уже разные варианты пробовала. Ничего не работает :(
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 06 июл 2014, 10:03 Сообщение

Замените:

Код: Выделить всё

<div class="post bg3" style="background-color:white; width:120%;">
на:

Код: Выделить всё

<div class="post bg3" style="background-color:white; clear: both;text-align: center;">
И в теме стиля добавьте к #site-description { - right: 0;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Степ 31 авг 2014, 15:22 Сообщение

CabinetAdmin, здравствуйте. Вытачиваю другой стиль под себя. Возник вопрос. Подскажите, какой код отвечает за положение логотипа в шапке. Именно логотипа. Как можно сдвинуть его в разных направлениях? *нужно вверх чуть поднять, что бы выровнять, ну и для себя знать каким образом можно двигать в разные стороны логотип.
Стиль - сынок сабсильвера.
Спасибо.
+
  • 0
Если хотите узнать глубину души человека, то плюньте ему в душу и считайте до тех пор,
пока не получите по морде.

silver073000Василий 01 сен 2014, 01:41 Сообщение

Этот стиль? http://demo.phpbb3styles.net/X-Static
В overall_header.html этот участок кода отвечает за логотип

Код: Выделить всё

				<td height="100" align="left" valign="middle" rowspan="2"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
и плюс в теме

Код: Выделить всё

#top_logo {
margin : 0 0 0 0;
padding : 0 0 0 0;
background : url('./images/top_header.png') repeat-x top right;
height : 100px;
border: 1px solid #4d6c95;

/*border-left : 1px solid #404040;
border-right : 1px solid #404040;*/
white-space : nowrap;
overflow : hidden;
}
можно попробовать поиграться со значениями margin и padding
Ну а вот тут

Код: Выделить всё

#logodesc {
margin-bottom : 5px;
padding : 5px 25px;
background : #d9dfe4;
border-bottom : 1px solid #4787a7;
}
код margin-bottom : 5px; - это отступ до кнопок, что расположены под логотипом. А в padding : 5px 25px; 5 - это отступ от логотипа сверху и снизу. Если, например, установить значение 55, то над логотипом и под ним образуется пустое место в 55px :milo: То же самое и со значением 25, только это относится к боковым отступам :)
  • 0

romaamor 04 сен 2014, 16:41 Сообщение

CabinetAdmin
А как правильно вставить дополнительные элементы в шапку форума для prosilver, в один ряд ? Как не пытаюсь всё сьезжает , ломается. В subsilver2 было проще, таблицей.
  • 0

CabinetAdmin 04 сен 2014, 18:41 Сообщение

Ну, дык, таблицей и сделай.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 04 сен 2014, 19:06 Сообщение

CabinetAdmin » 23 минуты назад писал(а):Ну, дык, таблицей и сделай.
Пробовал. Всё равно получается в два этажа вложения.
  • 0

silver073000Василий 04 сен 2014, 22:12 Сообщение

Если есть строка

Код: Выделить всё

<tr><td>содержимое ячейки</td><td>содержимое второй ячейки</td></tr>
то строку не должно переносить. Если в ячейке есть слова, то ячейка может сжиматься, перенося слова на новые строки. То же самое и с картинками, если таблица будет примерно с таким кодом

Код: Выделить всё

<table><tr><td>картинка картинка</td><td>картинка картинка</td></tr></table>
При низком разрешении монитора картинки могут стать одна под одной. То же самое и с элементами.
  • 0

romaamor 04 сен 2014, 22:32 Сообщение

Пытался вставить картинку, скрипт, всё в приделах размеров шапки. Меня там дивы смущают. Не привык я ещё к просильверу. Вот как к примеру вставить между логом и поиском ещё один елемент что бы всё было в ряд ?

Код: Выделить всё

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
			  
				<a href="{U_INDEX}" title="{L_INDEX}"><img src="http://satelitray.ru/styles/prosilver/imageset/Black_and_white_on_transparent_background_312x75.png" /></a>
				
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
				
			</div>
			
            <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

    <span class="clear"></span></div>
</div>

  • 0

Похожие темы