Jump to content
  • 0

Подскажите: как сделать в CSS такое?


werdi
 Share

Question

18 answers to this question

Recommended Posts

  • 0

А как это воткнуть в template_css.css

вот кусок моего кода:

/*положение текста в модуле*/
div.module{
text-align: left;
margin : 0 0 20px 0;
}
/*шрифт в модуле*/
div.module h3 {

font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
text-align : left;
width : 200%;
color : #EBEFF2;
line-height : 27px;
background : url(../images/mod_left.gif) #0066A7 repeat-x top left;
height : 29px;
margin : 0 0 15px 0;
}
/*Заглавная буковка в модуле*/
div.module h3:first-letter {
FONT-WEIGHT: bold;
FONT-SIZE: 18px;
COLOR: #ffd800
}

Прошу не смеяться над моими коментами - я только начинаю разбираться :rolleyes:

Link to comment
Share on other sites

  • 0

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

, а в css-файле прописываем для #orangevaya_figovina {width:ширина;height:высота;background-color:orange;} и позиционируем ее как надо
Link to comment
Share on other sites

  • 0

пофиг на ослика, человек движется в правильном направлении. не хватало еще под ИЕ подстраиваться, когда есть нормальные объявления. он еще text-decoration:blink не понимает, так теперь застрелиться что ли?

Link to comment
Share on other sites

  • 0
Ячейку цветом залили.

Да я понял уже :rolleyes:

У меня в ХТМЛ тоже получается, а вот в ПХП ну никак ;)

Уже голова пухнет..

Вот кстати код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Генерация с пхп и кусочки кода с CSS</title>
<style type="text/css">
<!--
/* расстояние розовой фиговины от слова "Проверка" */
.head {
PADDING-RIGHT: 20px; FONT-SIZE: 14px; PADDING-TOP: 2px
}
/* розовая буквица - я понял что это не first-letter так как ослик не хавает его */
.advetising {
FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: #0133E0
}
/* розовая фиговина */
.advetising_line {
COLOR: #ff3399; BACKGROUND-COLOR: #ff3399
}
-->
</style>
</head>

<body>


<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=head style="PADDING-LEFT: 5px" rowSpan=3><NOBR>
<SPAN class=advetising>П</SPAN>роверка</NOBR>
</TD>
<TD style="FONT-SIZE: 9px" width="100%" height=5> </TD>
</TR>
<TR>
<TD class=advetising_line style="FONT-SIZE: 6px" height=8> </TD>
</TR>
<TR>
<TD style="FONT-SIZE: 4px" height=3>
</TD>
</TR>
</TBODY>
</TABLE>



Так и не понял как это все работает???


Что и как прописать в template_css.css, а что в index.php
</body>
</html>

Link to comment
Share on other sites

  • 0
Что не получается? кажется вы полностью добились того, что вам нужно.

Не получается теперь это все вставить в заголовки модулей Joomla, там ведь используется template - css отдельно, index.php отдельно :rolleyes:

Link to comment
Share on other sites

  • 0
Какой именно кусок?

Вот template_css.css:

body,html {
padding : 0;
margin : 0 15px !important;
margin : 0 30px;
}

td, tr, p, div {
font-family : Arial, Helvetica, sans-serif;
color : #333333;
font-size : 13px;
line-height : 16px;
}

hr {
color : #999999;
height : 1px;
width : 100%;
}

a:link, a:visited {
color : #0066A7;
text-decoration : underline;
}

a:hover {
color : #999999;
text-decoration : underline;
}

ul {
margin : 2px;
padding-left : 10px;
list-style : none;
}

li {
line-height : 14px;
padding-left : 14px;
padding-top : 2px;
background-image : url(../images/quadrato.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
}


form {
margin : 0;
padding : 0;
}

.inputbox {
color : #000000;
background : #ECEEEF;
border : 1px solid #cccccc;
margin : 3px 0;

}

form select.button{
color : #000000;
background : #ECEEEF;
}

option {
background : #ffffff;
}



.back_button {
font-size : 12px;
font-weight : normal;
padding-bottom : 3px;
margin-right : 4px;
float : right;
line-height : 20px;

}
div.back_button a{
text-decoration : none;
}


.button {
font-size : 11px;
color : #EDF1F3;
border : 1px solid #EDF1F3;
margin : 3px 0;
padding : 2px;
cursor : pointer;
background : url(../images/button.gif) repeat-x top left;
}


.contact_email {
width : 100%;
}

.contact_email .inputbox {
}



table.moduletable {
margin : 0 0 8px 0;
width : 100%;
}

table.moduletable th {

font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
text-align : center;
width : 100%;
color : #EBEFF2;
padding : 2px;
line-height : 25px;
background : url(../images/mod_left.gif) #414141 repeat-x top left;
height: 29px;
}

table.moduletable td {
padding-top: 2px;
}



div.module{
text-align: left;
margin : 0 0 20px 0;
}

div.module h3 {

font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
text-align : center;
width : 100%;
color : #EBEFF2;
line-height : 27px;
background : url(../images/mod_left.gif) #0066A7 repeat-x top left;
height : 29px;
margin : 0 0 15px 0;
}

.rightcol div.module h3{
background : url(../images/mod_right.gif) #0066A7 repeat-x top left;
}


.contentmod {
text-align : left;
padding : 8px 0;

}

.contentmod td {
padding : 5px;
}

.contentmod table.moduletable {
margin : 0 0 8px 0;
width : 100%;
border : 1px solid #DDE1E3;
background : #ECEEEF;
}


.contentmod table.moduletable th{
font-size : 14px;
font-weight : bold;
text-align : center;
width : 100%;
color : #0066A7;
padding : 2px;
line-height : 25px;
background : #E7EAEC;
border-bottom : 1px solid #DDE1E3;
}


a.readon:link, a.readon:visited {
color : #0066A7;
font-size : 12px;
white-space : normal;
font-weight : normal;
padding : 1px 0px 1px 10px;
float : right;
line-height : 15px;
text-decoration : none;
border-left:1px solid #0066A7;

}
a.readon:hover {
color : #000000;
font-size : 12px;
white-space : normal;
font-weight : normal;
padding : 1px 0 1px 10px;
line-height : 15px;
text-decoration : none;
border-left : 1px solid #000000;
}


.pagenavcounter {
font-size : 11px;
color : #999999;
}

.pagenavbar {
border-top : 1px solid #999999;
padding : 2px;
}

.pagenav, .pagenav_prev, .pagenav_next {
font-weight : normal;
}

a.pagenav:link, a.pagenav:visited {
font-size : 11px;
color : #999999;
text-decoration : none;
}

a.pagenav:hover {
font-size : 11px;
color : #0066A7;
text-decoration : none;
}

table.contenttoc {
border : 1px solid #dcdcdc;
background : #3083B8;
padding : 0;
margin-left : 2px;
margin-bottom : 2px;
}

table.contenttoc th{
margin : 0;
padding : 2px;
background : #e7eaec;
color : #333333;
}
table.contenttoc td{
margin : 0;
padding : 3px 4px;
border-bottom : 1px solid #dcdcdc;
background-image : url(../images/quadrato.gif);
background-repeat : no-repeat;
background-position: 4px 7px;
}


table.contenttoc td a:link, table.contenttoc td a:visited{
padding-left : 12px !important;
padding-left : 0;
text-indent : 12px;
text-decoration : none;

}


.pathway {
font-size : 11px;
color : #333333;
padding-left : 5px;

}

a.pathway:link, a.pathway:visited {
font-size : 11px;
padding-left : 0;
font-weight : bold;
text-decoration : underline;
}

a.pathway:hover {
font-size : 11px;
padding-left : 0;
font-weight : bold;

}
.pathway img{
padding-top : 5px;

}

.sectiontableheader {

font-weight : bold;
letter-spacing : 1px;
color : #ffffff;
background : #414141;
padding : 3px 5px;
border : 1px solid #ffffff;
}


.sectiontableentry1 {
vertical-align : top;
background : #f6f6f6;
border-bottom : 1px solid #ffffff;
line-height : 20px;

}

.sectiontableentry1 td, .sectiontableentry2 td{
padding : 2px 5px;
border-bottom : 1px solid #ffffff;
line-height : 20px;

}

.sectiontableentry2 {
vertical-align : top;
border-bottom : 1px solid #ffffff;
background : #f0f0f0;
line-height : 20px;
}
.sectiontableentry1 img{
margin: 0 4px;
}
.sectiontableentry2 img{
margin: 0 4px;
}


a.category:link, a.category:visited {
font-size : 12px;
font-weight : normal;
padding: 5px;
}


.small {
font-size : 11px;
color : #999999;
}
.smalldark {
font-size : 11px;
color : #333333;
}
.createdate, .modifydate {
font-size : 11px;
color : #666666;
font-weight : normal;
text-align : left;
width : 100%;
}
.content_vote {
font-size : 11px;
height : 22px;
padding : 2px 0;
}
.content_rating {
font-size : 11px;
color : #999999;
}

table.content{
width : 100%;
padding : 0;
border-collapse : collapse;
border-spacing : 0;
margin-bottom : 10px;
}

table.contentpane {
width : 100%;
border-spacing : 0;
padding-left : 5px;
padding-right : 5px;
margin-bottom : 5px;
}
table.contentpaneopen {
width : 100%;
border-spacing : 0;
padding-left : 5px;
padding-right : 5px;
margin-bottom : 5px;
}

.contentheading {
font-family : Arial, Verdana, Helvetica, sans-serif;
width : 100%;
font-size : 17px;
font-weight : bold;
line-height : 21px;
text-align : left;
text-indent : 0;
color : #000000;
padding : 3px;
margin : 3px 0;
background : #ECEEEF;

}
.contentheading a {
text-decoration:none;
}
.componentheading {
font-family : Arial, Verdana, Helvetica, sans-serif;
width : auto;
font-size : 17px;
font-weight : bold;
line-height : 21px;
text-transform : uppercase;
text-align : left;
color : #616161;
padding : 3px;
margin : 5px !important;
margin : 5px 1px;
background : #ECEEEF;
}



.contentdescription {
width : auto !important;
margin : 0;
padding : 0;
padding-top : 5px;
text-align : left;
}

.blog_more {
margin : 10px 0 7px 7px;
}

.buttonheading {
padding : 0 2px;
}

.blog {
width:100%;
}

.poll {
color : #333333;
line-height : 13px;
font-weight : normal;
text-align : left;
}

.pollstableborder{
border-color : #999999;
}

.ontab {
border-left : 1px solid #666666;
text-align : center;
font-weight : bold;
color : #333333;
padding : 5px;
cursor : pointer;
line-height : 30px;
}
.offtab {
border-left : 1px solid #666666;
text-align : center;
color : #999999;
font-weight : normal;
padding : 5px;
cursor : pointer;
line-height : 30px;
}
.tabpadding {
border-left : 1px solid #666666;
}


a.mainlevel {
display : block;
width : auto !important;
width : 100%;
margin : 1px 0;
padding : 0;
font-size : 12px;
background : none;
text-indent : 10px;
}

a.mainlevel:link, a.mainlevel:visited {
display : block;
font-size : 14px;
border-bottom : 1px solid #DCDFE1;
font-weight : normal;
padding : 2px 0;
color : #666666;
padding-left : 10px;
text-decoration : none;

}
a.mainlevel:hover {
border-bottom : 1px solid #DCDFE1;
font-size : 14px;
font-weight : normal;
color : #666666;
text-decoration : none;
padding-left : 10px;
text-decoration : none;
background : #ECEEEF;

}
#active_menu {
color : #0066A7;
border-bottom : 1px solid #DCDFE1;
background : url(../images/menu.gif) #ECEEEF 96% 50% no-repeat;
text-decoration : none;

}
a#active_menu:hover {
color : #333333;
border-bottom : 1px solid #DCDFE1;
}



.sublevel {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
color : #999999;
padding : 3px 1px 3px 5px;
margin : 3px;
}
a.sublevel:link, a.sublevel:visited {
color : #999999;
text-decoration : none;
}
a.sublevel:hover {
color : #0066A7;
text-decoration : none;
}
a.sublevel#active_menu {
background : transparent;
color : #0066A7;
border : 0;

}


ul#mainlevel-nav {
font-size : 11px;
list-style : none;
padding-right : 20px;
margin : 0;

}

#mainlevel-nav li {
float : right;
display : block;
list-style : none;
background-image : none;
padding : 0;
margin : 0;
width : auto !important;
font-size : 13px;
line-height : 28px;
white-space : nowrap;


}
#mainlevel-nav li a {
display : block;
padding-left : 10px;
padding-right : 0;
font-size : 13px;
color : #0066A7;
text-decoration : underline;

}

#mainlevel-nav li a:hover {
display : block;
font-size : 13px;
color : #cccccc;

}


.mosimage {
border : 1px solid #E7EAEC;
margin : 5px;
padding-top: 3px;

}

.mosimage_caption {
margin-top: 3px;
padding : 2px;
color : #666666;
font-size : 10px;
background: #ECEEEF;
}



.moduletable-topnav {
width : auto;
padding : 0;
margin: 13px;
}


.topnav {
width : 0;
text-decoration : none;
color : #ffffff;
font-size : 14px;
}

a.topnav {
position : relative;
width : auto;
background : none;
padding : 10px 6px 10px 6px;
color : #5B9DC6;
text-decoration : none;
font-weight : normal;
line-height : 36px !important;
line-height : 16px;
_height:0;

}
a.topnav:hover{
width : auto;
color : #ffffff;
padding : 10px 6px 10px 6px;
font-weight : normal;
text-decoration : none;
background-color: #000000;
}
a.topnav#current {

cursor : default;
position : relative;
width : auto;
background : #000000;
padding : 10px 6px 10px 6px;
color : #FFFFFF;
text-decoration : none;
background : #000000;
}

a.topnav#current:hover {
cursor : pointer;
position : relative;
width : auto;
background : #0066A7;
padding : 10px 6px 10px 6px;
color : #ffffff;
text-decoration : none;

}


a.topnav:visited, .topnav a:link {
text-decoration : none;
color : #fff;
}


#body {
background: url(../images/top_bg.gif) #ECEEEF repeat-x top left;
}

.main {
text-align : left;
width : 100%;
}

div.mod {
background : none;
width : 6px;
}

#clear {
clear: both;
height: 0px;

}

#centertb {
border: 1px solid #ffffff;
background: #ffffff;
}

#contenttb{
padding: 10px 15px;
}

td.pw {
width : 100%;
padding : 5px 5px 10px 5px !important;
padding : 2px 2px 10px 2px;
}

td.pw div{
padding : 5px;
width : auto;
border : 1px solid #DDE1E3;
background : #ECEEEF;
}




.footer {
width : 410px;
font-size : 12px;
color : #3F4446;
font-weight : normal;
padding-top : 10px;
padding-left: 34%;

}




.leftcol, .rightcol {
vertical-align : top;
padding : 7px;
text-align : left;
width : 190px;
background : #FFFFFF;
border: thin solid #3083B8;
}

.leftcol div, .rightcol div{
width : 185px;

}

.foot {
height : 117px;
background : url(../images/footer.jpg) repeat-x top left;
border-top : none;


}

.foot td {
padding: 10px 15px;
}

#logo {
background : url(../images/logo.gif) no-repeat 20px 0;
height : 92px;
margin: 13px;
}


#top_bar_home {
position : absolute;
margin : 0;
padding : 0;
right : 80px;
height : 91px;
background : url(../images/icon_home.gif) no-repeat 0 35px;
}
#top_bar {
position : absolute;
margin : 0;
padding : 0;
right : 80px;
height : 91px;
background : url(../images/icon.gif) no-repeat 0 35px;
}

А вот index.php :

<?php
defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
author: raduga http://mambasana.ru
copyright: GNU/GPL
-->
<head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) {initEditor();} ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />

<?php
$myway = $GLOBALS['mosConfig_live_site']."/templates/".$mainframe->getTemplate();
require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/splitcssmenu.php");
echo "<link rel="stylesheet" href="$myway/css/template_css.css" type="text/css"/>";
echo "<link rel="shortcut icon" href="$myway/favicon.ico" />";?>

</head>

<body id="body">

<div id="logo">



</div></div>


<div align="left" ><?php echo $mycssONLY_PRI_menu ?></div>

<div id="clear"></div>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="centertb">
<tr>

<?php if (mosCountModules('left')) { ?>
<td valign="top" class="leftcol">
<div>
<?php mosLoadModules ( 'left',-3 ); ?>
</div>
</td>

<?php } ?>

<td valign="top" width="100%" id="contenttb">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<?php if (mosCountModules('top')) { ?>
<tr valign="top" >
<td colspan="3" align="center" class="contentmod">
<div>
<?php mosLoadModules ( 'top'); ?>
</div>
</td>
</tr>
<tr><td colspan="3"></td></tr>

<tr>

<td valign="top" class="contentmod">
<div>

</div>
</td>




<td><div class="mod"></div></td>



<td valign="top" class="contentmod">
<div>

</div></td>

</tr>

<tr><td colspan="3"></td></tr>
<?php } ?>
<tr>
<td colspan="3" class="pw" ><div><?php mosPathWay(); ?></div></td>
</tr>

<tr align="left" valign="top">
<td colspan="3" style="padding: 5px 0;">
<div class="main">
<?php mosMainBody(); ?>
</div>
</td>
</tr>

<?php if (mosCountModules('bottom')) { ?>
<tr>
<td colspan="3" valign="top" style="padding-top: 3px;text-align: left;">

<div>
<?php mosLoadModules ( 'bottom' ); ?>
</div>
</td>
</tr>
<?php } ?>

</table>
</td>

<?php if (mosCountModules('right')) { ?>
<td valign="top" class="rightcol">
<div>
<?php mosLoadModules ( 'right',-3 ); ?>
</div>
</td>
<?php } ?>

</tr>
</table>

<div class="foot">

<div class="footer">
<?php if (mosCountModules('user3')) { ?>
<?php mosLoadModules ( 'user3',-1 ); ?>


<?php } ?>


<a href="http://www.about-maremma.com/" title="Maremma">Maremma</a> | © design by <a href="http://www.lastwebagency.com/">realizzazione siti


</a>& <a href="http://www.guadagnamo.net/" target="_blank">telelavoro</a> | <a href="http://www.la-civetta.it/" title="Annunci">Annunci</a><br/ >
</div>
</div>


<a href="http://www.lastwebagency.com/">
<map name="Map" id="Map">
<area shape="rect" coords="-4,45,28,29" href="index.php" alt="home" />
<area shape="rect" coords="37,45,71,29" href="index.php?option=com_contact&Itemid=3" alt="contact" />
<area shape="rect" coords="80,45,114,29" href="index.php?option=com_search&Itemid=5" alt="search" />
</map>
</a>
<map name="Map" id="Map">
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="37,45,71,29" href="index.php?option=com_contact&Itemid=3" alt="contact" />
<area shape="rect" coords="80,45,114,29" href="index.php?option=com_search&Itemid=5" alt="search" />
</map>


</body>
</html>

Я просто не знаю в какой комбинации все это надо вставлять - уже тыкал-тыкал, не получаеться.

Посмотрите пожалуйста :rolleyes:

Link to comment
Share on other sites

  • 0

Даю наводку, ибо мне лениво читать код. У, к примеру, div'a можно юзать сколь угодно много классов или id. Смотрите:

<div class="footer temp copyright" id="result qwerty"></div>

Мы применили к диву:

Классы: footer, temp и copyright.

ID: result и qwerty.

Думаю после осознания такой возможности вопросы отпадут.

Link to comment
Share on other sites

  • 0
Даю наводку, ибо мне лениво читать код. У, к примеру, div'a можно юзать сколь угодно много классов или id. Смотрите:

<div class="footer temp copyright" id="result qwerty"></div>

Мы применили к диву:

Классы: footer, temp и copyright.

ID: result и qwerty.

Думаю после осознания такой возможности вопросы отпадут.

Хм.... Живой пример в студию - как говорил М.Твен :rolleyes:

Покажите наглядно, как это можно реализовать хотябы в HTML - коде

Link to comment
Share on other sites

  • 0

Попробуй перенести в template_css.css это:

.head {
PADDING-RIGHT: 20px; FONT-SIZE: 14px; PADDING-TOP: 2px
}
/* розовая буквица - я понял что это не first-letter так как ослик не хавает его */
.advetising {
FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: #0133E0
}
/* розовая фиговина */
.advetising_line {
COLOR: #ff3399; BACKGROUND-COLOR: #ff3399
}

а в index.php это:

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=head style="PADDING-LEFT: 5px" rowSpan=3><NOBR>
<SPAN class=advetising>П</SPAN>роверка</NOBR>
</TD>
<TD style="FONT-SIZE: 9px" width="100%" height=5> </TD>
</TR>
<TR>
<TD class=advetising_line style="FONT-SIZE: 6px" height=8> </TD>
</TR>
<TR>
<TD style="FONT-SIZE: 4px" height=3>
</TD>
</TR>
</TBODY>
</TABLE>

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