Thema: Layout anpassen!

£Hi leute,

ich hab für meine Page www.swissbeatbox.ch das pixelperfect template gekauft von rockettheme. dabei kann der User mit einer kleinen Toolbar das template verändern, darunter auch die breite der Page.

Nun mein Problem: wenn ein User "Fluid With" wählt, also ganze seitenbreite, sind links und rechts die positionen viel zu breit. Ich möchte also, das zum beispiel links, bei "SBX-Navigation" der Rand ums Menü schmäler wird, also quasi näher an den Text rückt.
Ich würde dies gern ändern, da ich nun ein neues Forumsystem einbinden möchte, und somit den Platz brauche.

Allerdings kann ich nichts finden, in den css und php dateien die mir helfen könnten, dies anzupassen. Ich weiss natürlich auch nicht richtig wonach ich suchen soll.

Falls ich noch Code posten soll, dann mach ich das natürlich, ich möchte nur nicht unnötig den thread überfüllen.

merci schon mal für eure Hilfe

mfg

ne is noch: Joomla! 1.0.12 Stable

ich weiss ich sollte wahrscheinlich mal updaten, aber trau mich nicht so recht. möchte keine contents verlieren. naja jedenfalls erstmal das layout problem beheben.

jemand ne idee? ich suche hier wirklich unermüdlich, nach diesem Code-Fetzel , doch bisher ohne erfolg! ich kann auch auf die anderen zwei breiten-einstellungen verzichten. hauptsache ganze seitenbreite, und ein schmaleres menü, und auch rechts, beim ipod soll es schmaler werden.

ähm, das ist nicht ganz das was ich gemeint habe. ich meine das mit den 3breiten hab ich ja schon, es geht nur um eine kleine Anpassung.
ich hab mal printscreen gemacht bei Fluid-width:

http://www.swissbeatbox.ch/watch.jpg

ich habe den Bereich den ich meine mit einem balken gekennzeichnet und dementsprechend beschriftet. dieser bereich links und rechts soll "einfach" schmaler werden.

Ich möchte mal an dieser Stelle eine Empfehlung aussprechen:

Firebug: http://getfirebug.com hat mir schon einige male gerade bei solchen Problemchen geholfen

hmm das kann so nicht gehe, da ich ja noch andere seitenbreiten habe, und die module dann zusammengequetscht werden. ausserdem habe ich auch module in der mitte oben, diese ändern ja dann auch, und dann zerreiss ich mir das ganze layout.

hier mal der code der template_css.css

PHP-Code:

/* custom stuff */

html {
  height: 100%;
  margin-bottom: 1px;
}


body {
    margin: 0;
    padding: 0;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
}

fieldset {
    border: 0;
    padding: 5px 0;
}

span.pathway {
    display: block;
    vertical-align: middle;
    margin-top: 5px;
    font-weight: normal;
}

span.pathway img {
  padding: 0px 10px;
  vertical-align: middle;
}

span.pathway a {
  line-height: 150%;
}

div#pathway {
    margin-bottom: 10px;
    padding-left: 8px;
}

a.readon {
  line-height: 300%;
}

/*** fonts ***/
body {
        line-height: 125%;
        font-family: Tahoma, Helvetica, sans-serif;
}

/* size attributes */

body.f-smaller {
    font-size: 10px;
}

body.f-default {
    font-size: 11px;
}

body.f-larger {
    font-size: 13px;
}

.small,
.modifydate,
.createdate,
div.mosimage_caption {
    font-size: 90%;
}

#nav a,
#inset a {
    font-size: 100%;
}

div.moduletable h3,
div.moduletable-hilite h3,
td.side h3,
.componentheading {
    font-size: 93%;
    line-height: 100%;
}

table.outer .contentheading {
  font-size: 150%;
  line-height: 100%;
  font-weight: normal;
  padding-top: 15px;
  padding-bottom: 0px;
}

div.componentheading {
  text-transform: uppercase;
    font-weight: normal;
}


/* font family */
h1,
h2,
h3,
h4,
h5,
.contentheading,
.componentheading,
.sectiontableheader {
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: bold;
}

a:link,
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* component heading */

.componentheading {
    margin-top: 6px;
    margin-bottom: 10px;
    margin-left: -4px;
    margin-right: -4px;
    padding: 6px;
}

/* module settings */

div.moduletable h3,
div.moduletable-hilite h3 {
  text-transform: uppercase;
    font-weight: normal;
  padding: 5px; 
  margin: 0 -5px 5px -5px;
}

div.moduletable,
div.moduletable-hilite {
    margin-bottom: 5px;
    padding: 6px 5px;
}

td.left div.moduletable-hilite,
td.right div.moduletable-hilite {
    margin: 0 -6px;
    padding: 6px 12px;
    border-width: 6px 0;
    border-style:  solid;
}

/* default menu link styles */
a.sublevel {

}

a.mainlevel:hover {
    text-decoration: none;
}

td a.sublevel:hover {
    text-decoration: underline;
}

/** regular joomla menu **/

a.mainlevel {
    display: block;
    padding: 3px 0px;
    text-indent: 4px;
    width: 100%;
}

/* headings */

h1 {
    line-height: 100%;
    font-size: 200%;
}

h2 {
   line-height: 100%;
   font-size: 150%;
}

h3 { 
   line-height: 100%;
   font-size: 120%;
}

h4 {
     line-height: 100%;
     font-size: 110%;
}

.small,
.modifydate,
.createdate {
    font-weight: normal;
}

.modifydate {
    height: 20px;
    vertical-align: bottom;
}

.createdate {
    height: 20px;
    vertical-align: top;
    vertical-align: top;
    padding-bottom: 5px;
    padding-top: 0px;
}

/** some joomla class stuff */

table.contenttoc {
  margin: 5px;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


td.buttonheading {
     vertical-align: bottom;
}

td.buttonheading img {
    margin-right: 5px;
}

table.outer td.sectiontableheader {
  font-weight: bold;
  padding: 0 4px;
  line-height: 20px;
}

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

table.contentpaneopen, table.contentpane {
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  width: 100%;
}

table.contentpaneopen td p {
  padding-right: 10px;
}

div.contentpane, div.contentpaneopen {
  width: 100%;
}

.clr {
    clear: both;
}

div.mosimage {
  margin: 5px;
}


table.adminform textarea {
  width: auto;
  color: #666;
}

/** width stuff **/

.w-wide div.wrapper {
    width: 950px;
}

.w-thin div.wrapper {
    width: 775px;
}

.w-fluid div.wrapper {
    
}

/** template layout stuff **/

body {
    height: 100%; 
    padding: 0;
    margin-bottom: 1px;
}

div.wrapper {
    margin: auto;
    position: relative;
}

div#outer-border {
    border-width:  0 6px 6px 6px;
    border-style:  solid;
}

table.outer,
table.nopad {
    width: 100%;
    border:  0;
    padding:  0;
}

table.outer tr,
table.nopad tr {
    vertical-align:  top;
}

table.outer td,
table.nopad td {
    padding: 0;
}

table.nopad td {
  width: 33%;
  padding-right: 6px;
}

div#top-head {
    border-width: 0 6px;
    border-style:  solid;
    height: 92px;
}

div#access-bar {
    height: 25px;
}

span#logo {
    position: absolute;
    z-index: 10000;
    /* change these values below if you want to move your logo */
    top: 16px;
    left: 21px;
    /* change these values below if you change your logo image size */
    width: 317px; 
    height: 68px;
}

div#color-insert {
    position:  absolute;
    z-index: 1;
    top:  32px;
    left: 23px;
    width: 28px;
    height: 50px;    
}

div#top-mod {
    margin: 10px 5px 10px 370px;  /* 370 here is to make room for the logo */
    height: 47px;
    overflow: hidden;
}

div#horiz-menu {
    border-width: 6px 6px 0 6px;
    border-style: solid;
    height:  22px;
}


table.outer td.left {
    width:  22%;
    border-width:  6px 6px 0 6px;
    border-style:  solid;
}

table.outer td.middle {
    border-width:  6px 6px 0 6px;
    border-style:  solid;
}

table.outer td.right {
    width:  22%;
    border-width:  6px 6px 0 6px;
    border-style:  solid;
}

div.path-padding {
  padding: 0 10px;
}

div.padding {
  padding: 0px 10px 20px 10px;
}

div.smallpad {
  padding-left: 6px;
}

div.sidepad {
  padding: 0 6px;
}

div.midbox {
    border-width:  6px 0 0 0;
    padding-left: 6px;
    border-style:  solid;
  margin-bottom: 6px;
}

div.botbox {
    border-width:  6px 0 0 0;
    padding-left: 6px;
    border-style:  solid;
    margin-top: 15px;
    margin-bottom: -1px;
}

div#bot-footer{
    border-width: 6px 6px 0 6px;
    border-style:  solid;
    height: 38px;
    text-align: center;
    line-height: 38px;
}

div#bot-footer a:hover {
    text-decoration: underline;
}

#bot-rocket {
    text-align: center;
}

span.rocket {
    margin: 10px auto;
    display: block;
    position: relative;
    width: 137px;
    height: 35px;
}

/* accessibility stuff */

#access {
    position: absolute;
    z-index: 10000;
    top: 4px;
    right: 12px;
    width: 300px;
    height: 16px;
    overflow: hidden;
}

#access span {
    background-repeat: no-repeat;
}

#access a {
    text-decoration: none;
}

#access .spacer {
    display:  block;
    float:  right;
    width: 10px;
    overflow:  hidden;
}

#access #buttons {
    float: right;
}

#access .button {
    display: block;
    float: right;
    width: 16px;
    height: 16px;
    margin-left: 4px;    
    background-repeat: no-repeat;
}

/* some page content things */

.hide {
    display: none;
}

td.left ul,
td.right ul {
  margin: 0;
  padding: 5px 0px 5px 12px;
}

form {
    border: 0;
    margin: 0;
    padding: 0;
}

table.blog span.article_seperator {
    display: block;
    height: 20px;
}

blockquote {
    margin: 10px 0;
    line-height: 140%;
    padding: 10px;
}

pre {
    padding: 10px;
}

table.pollstableborder td {
    text-align: left;
    padding: 2px 0;
} 


das muss irgendwie gehen. merci leute!

kann ich das nicht irgendwie steuern/verändern?

für alle die gerade erst diesen thread gesehen haben und bisher mein problem noch nicht ganz erkennen.

wenn ich bei meinem template beim styleswitcher volle seitenbreite wähle, ist der abstand zum menü, zum banner, und auch zur shoutbox rechts einfach zu breit. ich möchte das dies schmaler wird, sodass ich in der mitte mehr platz für den content habe. (www.swissbeatbox.ch)

ich bin echt verzweifelt! ihr coder kriegt das doch hin?