maxym
27-04-2009, 23:49
Witajcie utknąłem na zmianie szerokości w templatce.
W dosyć prosty sposób przedstawiłem to na poniższym zrzucie z ekranu.
Templatka beez posiada szerokość 1000px.
* Postanowiłem ją zmienić tak aby górne menu było na całą szerokość width:100% otwieranej strony
* natomiast cała reszta wyświetlała się węższa tj na szerokość 1000px;
Wyszło mi coś takiego że górne menu dało się rozciągnąć na szerokość 100% jednak środkowa część 1000px przylega do lewej krawędzi templatki.
Moje pytanie :
Czy znacie sposób w jaki można by było ją wyśrodkować. Tak aby wyglądało to tak jak na załączonym obrazku?
: góra templatki 100%;
: cała reszta 1000px;
/**
* @version $Id: position.css 9765 2007-12-30 08:21:02Z ircmaxell $
* @author Design & Accessible Team ( Angie Radtke / Robert Deutz )
* @package Joomla
* @subpackage Accessible-Template-Beez
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant to the
* GNU General Public License, and as distributed it includes or is derivative
* of works licensed under the GNU General Public License or other free or open
* source software licenses. See COPYRIGHT.php for copyright notices and
* details.
*/
*
{
margin: 0;
padding: 0;
}
body
{
background:url(../images/tlo.gif);
color: #335700;
font-family:trebuchet MS, sans-serif;
font-size: 100%;
;
}
/* ################ Position ################ */
#all
{
background: #FFF;
border: solid 1px #335700;
color: #335700;
font-size: 0.8em;
margin: 0 auto;
max-width: 100%;
padding: 0 3px 3px 3px;
text-align: left;
}
#page { }
#header
{
background: #fff;
color: #fff;
margin:0;
position: relative;
text-align: right;
border-bottom: solid 1px #fff;
}
#contentarea,#contentarea2
{
border: solid 0px #335700;
width: 1000px;
background: ffff00;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
#wrapper { margin: 0 0 0 21%}
#left
{
background: #FFF;
border-right: solid 0px #EEEEEE;
float: left;
margin: 20px 0 30px 0;
width: 21%;
}
#right
{
color: #335700;
float:left;
width: 25%;
padding: 0px 0px 0px 10px;
}
#main2
{
background: #FFF;
width:71%;
padding: 0px 0px 0px 19px;
position: relative;
min-height:720px;
float:left;
}
#main
{
background: #fff;
margin: 0 0px 0 0;
padding: 25px 50px 90px 45px;
position: relative;
}
/* ###################### generell ###################### */
.unsichtbar,.u2,.invisible , .unseen
{
display: inline;
height: 0px;
left: -6000px;
position: absolute;
top: -2000px;
width: 0px;
z-index: 200;
}
.wrap
{
border: 0;
clear: both;
float: none;
font-size: 1px;
height: 0;
line-height: 1px;
margin: 0;
padding: 0;
visibility: hidden;
}
#logo
{
font-size: 1em !important;
font-weight: bold !important;
position: relative;
text-align: left;
text-transform: none !important;
z-index: 0;
margin-top: 17em;
}
#logo img { display: block; }
#logo span
{
display: block;
margin: 0px 0 0 0px !important;
border-bottom: solid 1px #666;
}
/* ############### main * ########################### */
/* position */
.leading
{
background: #fff;
border: solid 1px #FFF;
color: #335700;
font-family:trebuchet MS, sans-serif;
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
position: relative;
}
.leading_separator
{
border-bottom: solid 0px #333333;
display: block;
height: 10px;
margin: 0 0 0px 0;
}
.article_separator
{
border: solid 1px #333333;
display: none;
margin: 30px 0 30px 0;
}
.blog { padding: 0; }
.cols1
{
display: block;
float: none !important;
margin: 0 !important;
}
.cols2 { width: 45%; }
.cols3 { width: 30%; }
.column1 , .column2
{
border: solid 0px #335700;
margin: 0 0px 0 0;
position: relative;
}
.column2
{
float: right;
margin: 0px 0px 30px 0px;
width: 48%;
}
.column1
{
float: left;
margin: 0px 0px 30px 0px;
width: 48%;
}
.article_row
{
margin: 0px 0 0px 0;
padding: 0;
overflow: hidden;
}
.article_column
{
border: solid 0px #ccc;
padding: 0px 0px 0px 0;
}
.row_separator2
{
display: block;
clear: both;
margin: 0;
border: solid 0px;
}
W dosyć prosty sposób przedstawiłem to na poniższym zrzucie z ekranu.
Templatka beez posiada szerokość 1000px.
* Postanowiłem ją zmienić tak aby górne menu było na całą szerokość width:100% otwieranej strony
* natomiast cała reszta wyświetlała się węższa tj na szerokość 1000px;
Wyszło mi coś takiego że górne menu dało się rozciągnąć na szerokość 100% jednak środkowa część 1000px przylega do lewej krawędzi templatki.
Moje pytanie :
Czy znacie sposób w jaki można by było ją wyśrodkować. Tak aby wyglądało to tak jak na załączonym obrazku?
: góra templatki 100%;
: cała reszta 1000px;
/**
* @version $Id: position.css 9765 2007-12-30 08:21:02Z ircmaxell $
* @author Design & Accessible Team ( Angie Radtke / Robert Deutz )
* @package Joomla
* @subpackage Accessible-Template-Beez
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant to the
* GNU General Public License, and as distributed it includes or is derivative
* of works licensed under the GNU General Public License or other free or open
* source software licenses. See COPYRIGHT.php for copyright notices and
* details.
*/
*
{
margin: 0;
padding: 0;
}
body
{
background:url(../images/tlo.gif);
color: #335700;
font-family:trebuchet MS, sans-serif;
font-size: 100%;
;
}
/* ################ Position ################ */
#all
{
background: #FFF;
border: solid 1px #335700;
color: #335700;
font-size: 0.8em;
margin: 0 auto;
max-width: 100%;
padding: 0 3px 3px 3px;
text-align: left;
}
#page { }
#header
{
background: #fff;
color: #fff;
margin:0;
position: relative;
text-align: right;
border-bottom: solid 1px #fff;
}
#contentarea,#contentarea2
{
border: solid 0px #335700;
width: 1000px;
background: ffff00;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
#wrapper { margin: 0 0 0 21%}
#left
{
background: #FFF;
border-right: solid 0px #EEEEEE;
float: left;
margin: 20px 0 30px 0;
width: 21%;
}
#right
{
color: #335700;
float:left;
width: 25%;
padding: 0px 0px 0px 10px;
}
#main2
{
background: #FFF;
width:71%;
padding: 0px 0px 0px 19px;
position: relative;
min-height:720px;
float:left;
}
#main
{
background: #fff;
margin: 0 0px 0 0;
padding: 25px 50px 90px 45px;
position: relative;
}
/* ###################### generell ###################### */
.unsichtbar,.u2,.invisible , .unseen
{
display: inline;
height: 0px;
left: -6000px;
position: absolute;
top: -2000px;
width: 0px;
z-index: 200;
}
.wrap
{
border: 0;
clear: both;
float: none;
font-size: 1px;
height: 0;
line-height: 1px;
margin: 0;
padding: 0;
visibility: hidden;
}
#logo
{
font-size: 1em !important;
font-weight: bold !important;
position: relative;
text-align: left;
text-transform: none !important;
z-index: 0;
margin-top: 17em;
}
#logo img { display: block; }
#logo span
{
display: block;
margin: 0px 0 0 0px !important;
border-bottom: solid 1px #666;
}
/* ############### main * ########################### */
/* position */
.leading
{
background: #fff;
border: solid 1px #FFF;
color: #335700;
font-family:trebuchet MS, sans-serif;
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
position: relative;
}
.leading_separator
{
border-bottom: solid 0px #333333;
display: block;
height: 10px;
margin: 0 0 0px 0;
}
.article_separator
{
border: solid 1px #333333;
display: none;
margin: 30px 0 30px 0;
}
.blog { padding: 0; }
.cols1
{
display: block;
float: none !important;
margin: 0 !important;
}
.cols2 { width: 45%; }
.cols3 { width: 30%; }
.column1 , .column2
{
border: solid 0px #335700;
margin: 0 0px 0 0;
position: relative;
}
.column2
{
float: right;
margin: 0px 0px 30px 0px;
width: 48%;
}
.column1
{
float: left;
margin: 0px 0px 30px 0px;
width: 48%;
}
.article_row
{
margin: 0px 0 0px 0;
padding: 0;
overflow: hidden;
}
.article_column
{
border: solid 0px #ccc;
padding: 0px 0px 0px 0;
}
.row_separator2
{
display: block;
clear: both;
margin: 0;
border: solid 0px;
}