Zdravím, potreboval by som poradiť. Niesom veľmi odborník čo sa týka CSS a potreboval by som dať na pozadie stránky dva obrázky. Jeden by bol hore a druhý by na neho naväzoval a opakoval by sa.
Tu je HTML a CSS kód. Je to šablóna pre joomla 1.5. Za pomoc ďakujem
Kód:
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );
define( 'YOURBASEPATH', dirname(__FILE__) );
?>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>
<?php if($this->get('template_width') == 0) { ?>
<style type="text/css">#wrap {width:750px;!important}</style>
<?php } ?>
<?php if($this->get('template_width') == 1) { ?>
<style type="text/css">#wrap {width:960px;!important}</style>
<?php } ?>
<?php if($this->get('template_width') == 2) { ?>
<style type="text/css">#wrap {min-width:760px;max-width:960px;width:auto !important;width:960px;}</style>
<?php } ?>
</head>
<body>
<div id="wrap">
<?php if($this->countModules('left')) : ?>
<div id="leftfauxcol">
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="rightfauxcol">
<?php endif; ?>
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg('sitename');?></h1>
<jdoc:include type="modules" name="user1" style="raw" />
</div>
</div>
<jdoc:include type="modules" name="user2" style="xhtml" /> <!--This is tab menu-->
<?php if($this->countModules('top')) : ?> <!--This is the teaser module-->
<div id="top">
<div class="inside">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php else : ?>
<div id="top"> </div>
<?php endif; ?>
<?php if($this->countModules('left')) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="raw" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('bottom')) : ?>
<div id="bottom">
<div class="inside">
<jdoc:include type="modules" name="bottom" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('left')) : ?>
</div>
<!--end of leftfauxcol-->
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
</div>
<!--end of rightfauxcol-->
<?php endif; ?>
<div class="design">
<?php require(YOURBASEPATH .DS."/js/template.css.php"); ?>
</div>
</div>
<!--end of wrap-->
</body>
</html>
Kód:
* {
margin:0;
padding:0;
}
body {
text-align:center;
font-size:76%;
font-family:Tahoma, Arial, Helvetica, sans-serif;
line-height:1.3;
background:url(../obrazky/background.png) top center repeat-y;;
}
#wrap {
background:url(../obrazky/wrapper.png) top center repeat-y;;
text-align:left;
margin:0 auto;
}
#header {
color:#fff;
background:#212121 url(../obrazky/header.png) no-repeat;
height: 150px;
position:relative;
}
#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}
#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:12px Arial, Helvetica, sans-serif;
padding:2px;
}
#header .search {
position:absolute;
top:20px;
right:20px;
}
#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}
#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:10px 10px 0 10px;
padding:10px;
}
#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}
#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}
#bottom {
background:#333;
color:#666;
padding:10px 50px;
}
#sidebar {
float:left;
width:170px;
}
#content60 {
float:left;
width:410px;
overflow:hidden;
background:transparent url(../images/pagetop.png) center repeat-x;
}
#content80 {
float:left;
width:410px;
overflow:hidden;
background:transparent url(../images/pagetop.png) repeat-x;
}
#content100 {
float:left;
width:410px;
overflow:hidden;
background:transparent url(../images/pagetop.png) repeat-x;
}
#sidebar-2 {
float:left;
width:170px;
}
.inside {
padding:10px;
}
#sidebar .inside,#sidebar-2 .inside {
padding-top:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address,.componentheading,.contentheading {
margin:0.75em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
a:link,a:visited {
text-decoration:underline;
color:#fff;
}
a:hover {
text-decoration:none;
}
#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited {
color:#000;
}
h1,.componentheading {
font-size:1.8em;
}
h2,.contentheading {
font-size:1.6em;
}
h3 {
font-size:1.3em;
}
h4 {
font-size:1.2em;
}
h5 {
font-size:1.1em;
}
h6 {
font-size:1em;
font-weight:700;
}
.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
line-height:25px
font-size:14px;
margin:4px 0;
padding:0 4px;
cursor:hand;
}
.small,.createdate,.modifydate,.mosimage_caption {
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.sectiontableheader {
background:url(../images/teaser.png);
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
padding:5px;
}
.sectiontableheader a:link,.sectiontableheader a:visited {
color:#fff;
}
/* Module styling */
.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}
.moduletable h3 {
background:url(../obrazky/modul.png) no-repeat center;
font:15px Verdana,Arial,Tahoma,sans-serif;
color:#000;
font-weight:bold;
text-align:center;
margin:0 -10px;
padding:5px 10px;
}
/*Menu Styling*/
.moduletablemenu {
margin-bottom:1em;
}
.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
.moduletablemenu ul {
list-style:none;
margin:5px 0;
}
.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}
.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}
.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}
/*Tab Menu Styling*/
.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.moduletabletabs ul {
list-style:none;
float:right;
margin:0;
padding:0;
background:#212121;
width:100%;
}
.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}
.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}
.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}
.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}
.design a:link,.design a:visited {
color:#666;
float:right;
font:0.8em Verdana, Arial, Helvetica, sans-serif;
}
