X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Проблема с центрированием картинки
FLICKER
FLICKER
Topic Starter сообщение 29.6.2009, 3:04; Ответить: FLICKER
Сообщение #1


Если сделать вот так:
<div id="page">
<div id="menu">
<img src="menu-left.jpg" align="left">

<img src="menu-right.jpg" align="right"></div>
</div>

body {
background:#1789D0;
margin:0;
}
div#page {
background-image: url(backgraund.jpg);
background-repeat: repeat-y;
margin:0 auto;
width: 766px;
height: 766px;
}
div#menu {
background-color:#1b1f21;
width:667px;
height:57px;
background-image:url(menu.jpg);
background-repeat:repeat-x;
margin:0 auto;
text-align: center;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;


то всё работает вот так:

[IMG]http://s45.radikal.ru/i109/0906/94/a0573de5bb5c.jpg[/IMG]

Но стоит между картинками вписать текст, как правая убегает вниз. Что делать?

[IMG]http://i009.radikal.ru/0906/dd/3c1e76cbd8f1.jpg[/IMG]

Я только начинаю верстать, так что не сильно кричите.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 29.6.2009, 8:42; Ответить: klenovnn
Сообщение #2


Дам совет.
Не вставляй справа и слева картинки. Делай там дивы с background (два штуки).
Если не сможешь, напиши в аську, прямо в сети сделаем и сюда выложим решение, мне в сети проще на чужом сервере сразу делать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
goshikvia
goshikvia
сообщение 29.6.2009, 11:58; Ответить: goshikvia
Сообщение #3


Попробуйте просто изменить это так
[php]
<div id="page">
<div id="menu">
<img src="menu-left.jpg" style="float: left;">
<img src="menu-right.jpg" style="float: right;"></div>
<p>...Надпись которая будет вставляться в середину...</p>
</div>
</div>
[/php]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arkady_hb
Arkady_hb
сообщение 29.6.2009, 13:35; Ответить: Arkady_hb
Сообщение #4


Я бы порезал эту картинку на три части: левый угол, правый угол и картинка для центрального блока шириной в пару пикселей, которая будет заливать все свободное центральное пространство...
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="td_left"></td>
<td class="td_center">Текст текст текст текст текст </td>
<td class="right;"></td>
</tr>
</table>
</div>



.td_left{
width: XXpx;
height:XXpx;
background: url('/images/td_left.jpg'') no-repeat;
}
.td_right{
width: XXpx;
height:XXpx;
background: url('/images/td_right.jpg'') no-repeat;
}
.td_center{
width: XXpx;
height:XXpx;
background: url('/images/td_center.jpg') left repeat-x;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FLICKER
FLICKER
Topic Starter сообщение 4.7.2009, 13:52; Ответить: FLICKER
Сообщение #5


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

Сталкнулся с такой проблеммой.

Имеем:

body {    margin:0 auto;    }
div#menu { margin:inherit; }


В Opera 10 блок menu уходит влево. Всё работает, если писать:

body {    margin:0 auto;    }
div#menu { margin:0 auto; }


В Google Chrome работает замечательно и первый вариант. Что можите сказать и посоветовать по данному поводу?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dyadya_hb
dyadya_hb
сообщение 4.7.2009, 14:08; Ответить: dyadya_hb
Сообщение #6


margin может иметь либо цифровое значение (в Вашем случае 0), либо auto.
Но никак не оба и не inherit...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FLICKER
FLICKER
Topic Starter сообщение 4.7.2009, 14:23; Ответить: FLICKER
Сообщение #7


(dyadya_hb @ 4.7.2009, 17:08) *
margin может иметь либо цифровое значение (в Вашем случае 0), либо auto.
Но никак не оба и не inherit...


Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений. © www.htmlbook.ru
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 4.7.2009, 14:49; Ответить: Apay
Сообщение #8


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
167 metvekot 27447 6.3.2024, 21:58
автор: Boymaster
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
10 NikN 2637 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Проблема с админкой
5 Prok 2338 29.7.2019, 20:04
автор: dvakarandasha
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема с таблицей, которая выводится через скрипт
7 vanchester 1339 15.2.2019, 19:06
автор: Artos_mw
Открытая тема (нет новых ответов) Нужно добавить картинки на сайт
И видео
2 Ksardas777 4096 17.11.2018, 10:41
автор: Intuit89


 



RSS Текстовая версия Сейчас: 25.4.2024, 15:27
Дизайн