CSS template breite einstellen! HILFE!

[TheRudi]

Hallo Zusammen,

http://rudi.eu.dd21424.kasserver.com/

wie stellt man die breite des templates ein. Kennt sich jemand aus?
Ich habe hier eine .css datei in der man dies bestimmt einstellen könnte.


/*layout CSS */
body {
text-align:center; //
min-width:500px;
padding:500;
margin:500;
}

#wrapper {
margin:300; /*center hack*/
text-align:left; /*center hack*/
}

.width_500{
max-width:500px;
width:500px;
}

.width_500{
min-width:500px;
max-width:500px;
width:500px;
width:500px;
}

.width_fluid{
min-width:500px;
max-width:97%;
width:auto!important;
width:97%;
}

#heading{
width:500px;
position:relative;
padding:16px 0px 0px 0px;
}
#heading h1{
font-size:36px;
font-family:"Myriad pro", "Myriad Web", Geneva, Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#fff;
margin:0 0 0 27px!important;
padding:0 !important;
}
#heading h1 a{
color:#fff;
font-weight:normal;
}
#heading h1 a:hover{
text-decoration:none;
}
a#sitename1{
display:block;
width:258px; /* maximum 400px */
height:52px; /* maximum 68px */
text-indent:-2000px;
background:url(../images/logo.png) top left no-repeat;
}

#buttons{
position:absolute;
right:23px;
top:40px;
}
a#alarge.btnicon{
margin-right:8px;
}
a#asmall.btnicon{
margin-right:16px;
}
.btnicon{
float:left;
text-indent:-2000px;
width:10px;
height:23px;
margin-right:6px;
}

a#alarge{
background:url(../images/alarge.png) top left no-repeat;
}

a#amedium{
background:url(../images/amedium.png) top left no-repeat;
}

a#asmall{
background:url(../images/asmall.png) top left no-repeat;
}

#header{
margin-top:16px;
background:#2f2f2f url(../images/headerbg_m.jpg) top left repeat-x;
color:#fff;
}

#header .bgbl{
background:url(../images/headerbg_bl.jpg) no-repeat;
background-position:15px 100%;
height:auto!important;
height:100px;
min-height:100px;
padding:0px 24px 26px 24px;
position:relative;
}

#user3{
display:block;
position:relative;
height:40px;
}
#user3 .moduletable{
margin:0;
}

#header #top{
max-height:200px;
overflow:hidden;
}

#header #top a{
text-decoration:underline;
}

#header #top a:hover{
color:#fff;
}

#header #top .moduletable{
padding-top:6px;
position:relative;}

#header #top .moduletable h3{
background-position:0px 10px;
position:relative;
padding:4px 0 6px 25px;
margin:3px 0;
}
#header #top .moduletable td{
color:#fff;
}
#user4 {
position:absolute;
right:0;
top:-26px;
background:url(../images/user4bg-l.jpg) top left no-repeat;
padding-left:38px;
color:#000;
z-index:1000;
}

#user4 .bgright4{
background:url(../images/user4bg-r.gif) top right no-repeat;
padding-right:18px;
}

#user4 .bg4{
background:url(../images/user4bg.jpg) top left repeat-x;
padding:5px 12px 5px 10px;
}
#user4 .moduletable, #user4 form, #user4 input{
margin:0;
padding:0;
}

#container{
padding-left:18px;
position:relative;
}
#container .bgright{
padding-right:18px;
margin:0!important;
margin-right:1px;
}
#container .bg{
background:#fff url(../images/containerbg_m.png) top left repeat-x;
}

#container .bg{
padding:12px 24px 0px 24px;
}
#content, #breadcrumbs{
position:relative;
width:100%;
}
#breadcrumbs{
padding-bottom:6px;
background:url(../images/bg-breadcrumbs.png) bottom left repeat-x;
margin-bottom:9px;
}
.leftcol, .middle, .rightcol{ overflow:hidden;}
.leftcol, .rightcol{
width:205px;
}
.leftcol{
float:left;
margin-left:-100%;
background:#fff url(../images/sidebg-b.png) bottom left no-repeat;}

.rightcol{
float:left;
margin-left:-205px;
background:#fff url(../images/sidebg-b.png) bottom left no-repeat;}

.leftcol .bgtop, .rightcol .bgtop{
background:url(../images/sidebg-t.png) top left no-repeat;
padding:1px 1px 20px 1px;
}
.middlewrap{
float:left;
width:100%;
}

.middle{
background:#fff url(../images/middlebg-l.jpg) top left no-repeat;
padding-left:11px;

}
#middlenarrow{
margin:0 209px;}
#middlewide{
margin:0;
}
#middlewrapleftonly{
float:right;
width:100%;
margin-left:-209px;
}
#middleleftonly{
margin:0 0 0 209px;}
#leftleftonly{
margin:0;
}

#middlewraprightonly{
float:left;
width:100%;
margin-left:-209px;
}
#middlerightonly{
margin:0 0 0 209px;}
#rightrightonly{
float:right;
margin:0;
}

.middle .middlebg{
background:#fff url(../images/middlebg-r.jpg) top right no-repeat;
padding:16px 16px 16px 5px;
min-height:400px;
height:auto!important;
height:400px;
}

.middle h1, .middle .componentheading{
background:url(../images/dotted.gif) bottom left repeat-x;
margin-bottom:0.3em;
}
.middle ul li{
background-position:0px 0px;
padding:1px 0px 5px 24px;
margin-left:10px;
}
.middle ul ul{
list-style-type:square;
margin-bottom:0;
}
.middle ul ul li{
background:none;
padding:0;
}
.middle ol{
margin-left:30px;
padding:0;
}

.middle ol li{
margin:0;
padding:0;
}


#banner .moduletable, #footermodule .moduletable{
padding:0;
text-align:center;
}

#user1{
float:left;
width:49.5%;
overflow:hidden;
}
#user2{
float:right;
width:49.5%;
overflow:hidden;
}
#bottom {
border-top:#cdcdcd 1px solid;
margin-top:16px;
}
#bottom .bottombg{
clear:both;
background:#f4f4f3 url(../images/bottombg.png) bottom left repeat-x;
padding:18px 0px;
position:relative;
width:100%;
border-top:#fff 1px solid;
}
#bottom .moduletable{
padding:0px 16px;
}
#bottom .moduletable h3{
background:none;
margin:0;
font-size:15px;
text-transform:uppercase;
}
ul.mostread, ul.latestnews{
padding:0;
margin:0;
}
a.mostread, a.latestnews{
background:url(../images/icon_author_bottom.gif) no-repeat;
background-position:0px 1px;
padding-left:18px;
}
#bottom li.mostread, #bottom li.latestnews{
padding:3px 0;
border-top:#fff 1px solid;
}
#bottom li a{
color:#666666;
}
#bottom li a:hover{
text-decoration:none;
}
#footer {
clear:both;
color:#fff;
background-color:#777;
padding:6px 0px;
margin:16px 0;
position:relative;
width:100%;
text-align:center;
}
#footer a{
font-weight:normal;
color:#ccc;}

#footer a:hover{
color:#fff;
text-decoration:none;
}

#footer .footerleft{
float:left;
padding-left:16px;
}

#footer .footerleft img{
vertical-align:middle;
}

#footer .footerright{
float:right;
padding-right:16px;
}

#reflection-l{
position:relative;
height:54px;
margin-left:-44px;
margin-right:-44px;
padding-left:16px;
}

#reflection-r{
height:54px;
padding-right:16px;
}
#reflection{
height:54px;
}
/*global reset*/

html, body, h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl ,fieldset,address {
margin: 0;
padding: 0;
}
body {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl ,fieldset,address {
margin: 0.5em 0;
}

fieldset {
padding:.5em;
border:0;
}

/*general*/
ul{
list-style:none;
}
p, td{
font-size:12px;
}
li p{
margin:0;
}
a img{
border:0 none;
}

a{
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}
a:active, a:focus{
outline:none;
}

h1,.componentheading{
font-size:20px;
font-weight:normal;
margin:0;
padding-bottom:0.12px;
}
h2,.contentheading{
font-size:17px;
font-weight:bold;
font-family:Helvetica, Arial, sans-serif;
letter-spacing:-0.02em;
}
h3{
font-size:15px;
font-weight:bold;
}
h4{
font-size:13px;
font-weight:bold;
}
h5{
font-size:13px;
font-weight:bold;
}
h6{
font-size:12px;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_c aption{
font:11px Arial,Helvetica,sans-serif;
}
.moduletable, .moduletable_menu, .moduletable_text{
margin-bottom:12px;
padding:0 10px; /*padding for inside text*/
}
.moduletable h3, .moduletable_menu h3, .moduletable_text h3{
padding:0.5em 0.5em 12px 0.5em;
margin:0 -10px 0.5em -10px; /*negative padding to pull h3 back out from .moduletable padding*/

}

.clear{
clear:both;
}

/*search */

.search input{/* the input textarea box */
background:url(../images/searchbg.png) top left no-repeat;
border:0;
height:18px;
font-size:11px;
width:182px;
}
.search #mod_search_searchword{
padding:2px 0 0 10px;
}

/*joomla*/

#user3 ul{
margin:0;
padding:0;
width:auto;
}
#user3 ul li{
margin:0;
padding:0;
float:right;
height:40px;
}
#user3 ul li a{
color:#d0d0d0;
text-transform:uppercase;
padding:10px;
display:block;
background:url(../images/topmenu-vline.jpg) no-repeat;
background-position:0px 2px;
}
#user3 ul li a:hover{
text-decoration:none;
}
ul.menu a, a.mainlevel{
font-size:13px;
color:#2a2929;
font-weight:bold;
display:block;
background:url(../images/arrow_mainlevel.png) no-repeat;
background-position:3px 9px;
border-bottom:#eee 1px solid;
padding:4px 4px 4px 16px;
margin-right:13px;
}
ul.menu a:hover, a.mainlevel:hover{
text-decoration:none;
}
li#current a, a#active_menu.mainlevel{
font-weight:bold;
}
li#current li a{
color:#2a2929;
font-weight:bold;
background:url(../images/arrow_sub.png) no-repeat;
background-position:4px 10px;
border:none;
}


table.pollstableborder td{
padding:0.2em;
}


.button{
color:#fff;
font-size:13px;
font-weight:bold;
margin:3px 0;
padding:1px 5px;
border:none;
}

* html .button {
padding: 0px 2px !important; /*IE 6*/
}

*+html .button {
padding: 0px 2px !important; /*IE 7*/
}

.small, .articleauthor, .createdate, .modifydate{
color:#8a8a8a;
}

.articleauthor, .createdate, .modifydate{
padding-left:18px;
}

.articleauthor{
background:url(../images/icon_author.gif) top left no-repeat;
}

.createdate{
background:url(../images/icon_date.gif) top left no-repeat;
display:block;
padding-bottom:12px;
}

.modifydate{
background:url(../images/icon_updated.gif) top left no-repeat;
padding-bottom:12px;
}

div.banneritem_text{
padding:0.5em 0;
background:url(../images/dotted.gif) bottom left repeat-x;
}

.article_column {
padding-right: 5px;
}

.column_separator {
background:url(../images/dotted_v.gif) top left repeat-y;
padding-left: 10px;
}

table.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
}

table.contentpaneopen li {
margin-bottom: 5px;
}

table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #ddd;
}

td.buttonheading{
text-align:right;
}

div.buttonheading {
float: right;
width: 15%;
}

.buttonheading img {
margin: 0;
border: 0;
float: right;
}

table.pollstableborder td{
text-align:left;
}

/* content tables */
td.sectiontableheader {
background: #efefef;
color: #333;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}

/* thumbnails */
div.mosimage { margin: 5px; }
div.mosimage_caption { font-size: .90em; color: #666; }

div.img_caption { padding: 0 10px 0 10px; }
div.img_caption img { border: 1px solid #dedede; }
div.img_caption p { font-size: .90em; color: #666; text-align: center; }

[little_skunk]

Falscher Bereich. Einmal bitte nach "Scripting und Programmierung" verschieben.

Für CSS empfehle ich das hier: http://www.css4you.de/ oder auch selfhtml

[mj1985]

Ich glaube es auswegslos.

Bei solchen fertigen (CMS) Templates was zu ändern ist Horror.
1. Müsstest du die Grafiken wohl ändern
2. Müsstest du wohl alle 3 Spalten von der Breite ändern und damit wieder auf 1.

Ansonsten meine Empfehlung:
http://www.joomlaportal.de

[sys92]

Falscher Bereich.

jop

[DarkM]

Hallo Zusammen,

http://rudi.eu.dd21424.kasserver.com/

wie stellt man die breite des templates ein. Kennt sich jemand aus?
Ich habe hier eine .css datei in der man dies bestimmt einstellen könnte.

welche breite meinst du? die gesamte breite oder nur den mittleren inhaltsabschnitt?

[TrOuble@LLM]

Moin,

für eine feste Breite der kompletten Seite:
In der template_css.css In Zeile 26 einfach beim Selektor .width_fluid die Zeilen

.width_fluid {
max-width:97%;
min-width:910px;
width:auto !important;
}

durch deine feste Breite in Pixeln ersetzen.

Also zB.:

.width_fluid {
width:900px;
}

Ich glaube es auswegslos.

Bei solchen fertigen (CMS) Templates was zu ändern ist Horror.
1. Müsstest du die Grafiken wohl ändern
2. Müsstest du wohl alle 3 Spalten von der Breite ändern und damit wieder auf 1.

Nö Die linke & rechte Spalte haben jeweils eine feste Breite von 205px - die mittlere Spalte halt eine breite von 100% minus jeweils 205px (bzw 209px damit die einzelnen Container nicht direkt aneinander liegen) links und rechts. Als Ergebnis haste also nen Float Layout welches in der Breite variabel ist

Bin ehrlich gesagt recht positiv vom Template überrascht - sehr sauber und flexibel (= variable Breite) umgesetzt das Layout.

Gruß TrOuble

[TheRudi]

HEY danke danke danke ))))
HAST MIR SEHR GEHOLFEN:::::

yeah... meine page unter http://the-rudi.de/

Moin,

für eine feste Breite der kompletten Seite:
In der template_css.css In Zeile 26 einfach beim Selektor .width_fluid die Zeilen

.width_fluid {
max-width:97%;
min-width:910px;
width:auto !important;
}

durch deine feste Breite in Pixeln ersetzen.

Also zB.:

.width_fluid {
width:900px;
}

Nö Die linke & rechte Spalte haben jeweils eine feste Breite von 205px - die mittlere Spalte halt eine breite von 100% minus jeweils 205px (bzw 209px damit die einzelnen Container nicht direkt aneinander liegen) links und rechts. Als Ergebnis haste also nen Float Layout welches in der Breite variabel ist

Bin ehrlich gesagt recht positiv vom Template überrascht - sehr sauber und flexibel (= variable Breite) umgesetzt das Layout.

Gruß TrOuble