Вход на сайт
Joomla. Отцентрировать текст в меню с картинками?
412
18.08.10 13:03
Последний раз изменено 18.08.10 13:03 (Akela_old.)
Переделываю свой fototutorials на новую версию и вот уже два часа туплю, немогу выравнять меню линки рядом с картинками. В старой версии всё как то сделал, убей не помню сейчас, а в новой не получается. Может подскажет кто, куда и чего в CSS прописать, что бы всё стало на место.
Вот так было: http://www.fototutorials.de
Вот тут муздыкаюсь:
http://www.fototutorial.de
Вот так было: http://www.fototutorials.de
Вот тут муздыкаюсь:
http://www.fototutorial.de
NEW 19.08.10 14:50
в ответ Akela_old. 18.08.10 16:16
Это код твоего меню
Как видишь, класс присутствует в хтмл но его нет в ксс, не нашёл, это значит нужно просто дописать нужное для данного класса. Возьми код из старого ксс файла, старого шаблона-сайта.
В ответ на:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr ><td><img src="/images/stories/email.jpg" border="0" alt="Joomla!-Home"/> <a href="http://www.joomla.org" class="mainlevel" >Joomla!-Home</a></td></tr>
<tr ><td><a href="http://forum.joomla.org" class="mainlevel" >Joomla!-Foren</a></td></tr>
<tr ><td><a href="http://help.joomla.org" class="mainlevel" >Joomla!-Hilfe</a></td></tr>
<tr ><td><a href="http://community.joomla.org" class="mainlevel" >Joomla! Community</a></td></tr>
<tr ><td><a href="http://www.opensourcematters.org" class="mainlevel" >OSM Home</a></td></tr>
<tr ><td><a href="http://magazine.joomla.org" class="mainlevel" >Joomla! Magazin</a></td></tr>
<tr ><td><a href="/administrator/" class="mainlevel" >Administrator</a></td></tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr ><td><img src="/images/stories/email.jpg" border="0" alt="Joomla!-Home"/> <a href="http://www.joomla.org" class="mainlevel" >Joomla!-Home</a></td></tr>
<tr ><td><a href="http://forum.joomla.org" class="mainlevel" >Joomla!-Foren</a></td></tr>
<tr ><td><a href="http://help.joomla.org" class="mainlevel" >Joomla!-Hilfe</a></td></tr>
<tr ><td><a href="http://community.joomla.org" class="mainlevel" >Joomla! Community</a></td></tr>
<tr ><td><a href="http://www.opensourcematters.org" class="mainlevel" >OSM Home</a></td></tr>
<tr ><td><a href="http://magazine.joomla.org" class="mainlevel" >Joomla! Magazin</a></td></tr>
<tr ><td><a href="/administrator/" class="mainlevel" >Administrator</a></td></tr>
</table>
Как видишь, класс присутствует в хтмл но его нет в ксс, не нашёл, это значит нужно просто дописать нужное для данного класса. Возьми код из старого ксс файла, старого шаблона-сайта.
NEW 19.08.10 15:02
ага, понятненько. Спасибо, я попробую
Попробовал. Вписал вот это со старого кода...не помогло.
a.mainlevel
{
color:#333333;
display:block;
font-size:12px;
padding-left:40px;
padding-top:5px;
text-align:left;
text-decoration:none;
}
мне сдаётся что там надо что то для картинки вписывать...
Попробовал. Вписал вот это со старого кода...не помогло.
a.mainlevel
{
color:#333333;
display:block;
font-size:12px;
padding-left:40px;
padding-top:5px;
text-align:left;
text-decoration:none;
}
мне сдаётся что там надо что то для картинки вписывать...
NEW 20.08.10 00:02
в ответ Akela_old. 19.08.10 15:02
тут дело не столько в ссылке, сколько пропал стиль для картинки, у нее отсутствует "плавание" влево, из-за чего ссылка слезает под картинку
в старой версии за это отвечал стиль [#leftcolumn img] в css
чтобы заработало выравнивание, нужно добавить для картинки стиль типа
.art-BlockContent-body img {
float: left;
padding-bottom: 4px;
}
а в a.mainlevel подправить - padding-top: 8px; чтобы ссылка была по середине
я не разбираюсь в жумале поэтому не совсем уверен что от этих стилей ничего больше не сломается, но как минимум меню начинает выглядеть как прежде
кстати очень советую поставить плагин Firebug для firefox, с его помощью очень легко править стили на лету и смотреть что получается
в старой версии за это отвечал стиль [#leftcolumn img] в css
чтобы заработало выравнивание, нужно добавить для картинки стиль типа
.art-BlockContent-body img {
float: left;
padding-bottom: 4px;
}
а в a.mainlevel подправить - padding-top: 8px; чтобы ссылка была по середине
я не разбираюсь в жумале поэтому не совсем уверен что от этих стилей ничего больше не сломается, но как минимум меню начинает выглядеть как прежде
кстати очень советую поставить плагин Firebug для firefox, с его помощью очень легко править стили на лету и смотреть что получается
NEW 20.08.10 10:13
в ответ Akela_old. 20.08.10 09:45
ну вот через фаербаг выбираем ссылку, справа находим стиль, в нем находим свойство padding-top: и мучаем его пока ссылка не отцентрируется по вертикали :)
а сайт кстати хороший, полезный, я даж загорелся и тож поснимал предметы чуток
вопрос, http://www.fototutorials.de/images/stories/workshops/work14/work14_bild3.jpg - картинка что справа, это как достигнуто, как то не понятно :)
а сайт кстати хороший, полезный, я даж загорелся и тож поснимал предметы чуток
вопрос, http://www.fototutorials.de/images/stories/workshops/work14/work14_bild3.jpg - картинка что справа, это как достигнуто, как то не понятно :)
NEW 20.08.10 10:31
в ответ Akela_old. 20.08.10 10:18
а почему картинка теперь оказалось под ссылкой, в коде? было же наоборот ) вот если вернуть тег картинки перед тегом ссылкой, а для ссылки поставить стиль
a.mainlevel {
color:#333333;
display:block;
float:left;
font-size:12px;
margin-left:9px;
padding-top:10px;
text-align:left;
text-decoration:none;
}
то будет по центру
a.mainlevel {
color:#333333;
display:block;
float:left;
font-size:12px;
margin-left:9px;
padding-top:10px;
text-align:left;
text-decoration:none;
}
то будет по центру
NEW 20.08.10 10:56
вернул...теперь картинка встала по центру менюшки и ни туда ни сюда...зато текст наконец выровнялся.
.art-BlockContent-body img
{
float: left;
padding-bottom: 4px;
}
a.mainlevel {
color:#333333;
display:block;
float:left;
font-size:12px;
margin-left:9px;
padding-top:10px;
text-align:left;
text-decoration:none;
}
.art-BlockContent-body img
{
float: left;
padding-bottom: 4px;
}
a.mainlevel {
color:#333333;
display:block;
float:left;
font-size:12px;
margin-left:9px;
padding-top:10px;
text-align:left;
text-decoration:none;
}
NEW 20.08.10 11:03
в ответ Akela_old. 20.08.10 10:56
должно быть вот так
<tr>
<td>
<img border="0" alt="Tutorials Free" src="/images/stories/email.jpg"/>
<a class="mainlevel" href="/index.php?option=com_content&view=section&layout=blog&id=6&Itemid=59">Tutorials Free</a>
</td>
</tr>
а у вас вот так, не правильно
<tr>
<td>
<a class="mainlevel" href="/index.php?option=com_content&view=section&layout=blog&id=6&Itemid=59">Tutorials Free</a>
<img border="0" alt="Tutorials Free" src="/images/stories/email.jpg"/>
</td>
</tr>
т.е. нужно сначала тег картинки, потом тег ссылки
<tr>
<td>
<img border="0" alt="Tutorials Free" src="/images/stories/email.jpg"/>
<a class="mainlevel" href="/index.php?option=com_content&view=section&layout=blog&id=6&Itemid=59">Tutorials Free</a>
</td>
</tr>
а у вас вот так, не правильно
<tr>
<td>
<a class="mainlevel" href="/index.php?option=com_content&view=section&layout=blog&id=6&Itemid=59">Tutorials Free</a>
<img border="0" alt="Tutorials Free" src="/images/stories/email.jpg"/>
</td>
</tr>
т.е. нужно сначала тег картинки, потом тег ссылки
NEW 20.08.10 11:38
Я понимаю, но ведь линки и код Joomla создаёт и пишет сама, я не могу за ней каждый линк и тэг подправлять...нужно как то это через цсс решить.
Пфууууу...нашёл. В настройках модуля собака сидела. Спасибо, наконец то можно дальше идти.
Пфууууу...нашёл. В настройках модуля собака сидела. Спасибо, наконец то можно дальше идти.
Прикреплённые файлы
NEW 20.08.10 11:58
а вы точно ничего нигде не меняли? мне отчетливо помнится, что вчера код был именно такой, когда тег картинки был перед тегом ссылки, для сравнения можно глянуть предыдущую версию сайта, там тоже так
то что сейчас, никак не может быть правильно отрисованным, т.к. сначала отображается ссылка, а потом картинка, что и видно на экране
то что сейчас, никак не может быть правильно отрисованным, т.к. сначала отображается ссылка, а потом картинка, что и видно на экране
