• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sidebar breiter machen

Status
Für weitere Antworten geschlossen.
megaman87

megaman87

Neues Mitglied
Hi Leute,

Habe seit einiger Zeit ein E-Blogger Blog auf Silver Screen und nun möchte ich die Sidebar links etwas breiter machen. In den Optionen ist es möglich den HTML Code zu beeinflussen, doch weiss ich nicht wo ich was verändern muss, damit sich lediglich die Sidebar etwas breiter macht. Kann mir da vielleicht jemand behilflich sein? Der HTML Code sieht folgendermassen aus:

PHP: 
*/
body {
  margin-top: 0px;
  margin-$endSide: 0px;
  margin-bottom: 0px;
  margin-$startSide: 0px;
  background:#123 url("http://www.blogblog.com/dots_dark/bg_minidots.gif");
  background-position: 50% 31px;
  text-align:center;
  font:x-small Verdana, Arial, Sans-serif;
  color:$textcolor;
  font-size/* */:/**/small;
  font-size: /**/small;
}


/* Page Structure
----------------------------------------------- */
#outer-wrapper {
  background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
  width:930px;
  margin:0 auto;
  text-align:$startSide;
  font:$bodyfont;
  }

#header-wrapper { 
  display: none;
 }

#main-wrapper {
  width:680px;
  float:$endSide;
  padding:100px 0 20px;
  font-size:85%;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
#main {
  background:url("http://www2.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
  padding:20px 10px 15px;
  }
#sidebar-wrapper {
  width:200px;
  float:$startSide;
  font-size:85%;
  padding-bottom:20px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
#sidebar {
  background:url("http://www2.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
  padding:40px 10px 15px;
  width:200px;
  width/* */:/**/180px;
  width: /**/180px;
  }

/* Title & Description
----------------------------------------------- */

.Header h1 {
  margin:0 0 .5em;
  line-height: 1.4em;
  font: $pagetitlefont;
  color: $pagetitle;
}
.Header h1 a {
  color:$pagetitle;
  text-decoration:none;
}

.Header .description {
  margin:0 0 1.75em;
  color: $blogDescriptionColor;
  font: $blogDescriptionFont;
}


/* Links
----------------------------------------------- */
a:link {
  color:$linkcolor;
  }
a:visited {
  color:$vlinkcolor;
  }
a:hover {
  color:$vlinkcolor;
  }
a img {
  border-width:0;
  }


/* Posts
----------------------------------------------- */
h2.date-header {
  margin:0 0 .75em;
  padding-bottom:.35em;
  border-bottom:1px dotted $borderColor;
  text-transform: lowercase;
  letter-spacing:.3em;
  color: $dateheadercolor;
  font: $dateHeaderFont;
  }
.post {
  margin:0 0 2.5em;
  }
.post h3 {
  margin:.25em 0;
  line-height: 1.4em;
  font: $headerfont;
  font-size: 130%;
  font-weight: bold;
  color:$posttitle;
  background:url("http://www1.blogblog.com/dots_dark/bg_post_title_$startSide.gif") no-repeat $startSide .25em;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:1px;
  padding-$startSide:45px;
}

.post h3 a {
  text-decoration:none;
  color: $posttitle;
}
.post h3 a:hover {
  color: $textcolor;
  }

.post .post-body {
  margin:0 0 .75em;
  line-height:1.6em;
 }

.post-body blockquote {
  line-height:1.3em;  
}

.post-footer {
  margin:0;
}

.uncustomized-post-template .post-footer {
  text-align: $endSide;
}

.uncustomized-post-template .post-author,
.uncustomized-post-template .post-timestamp {
  display: block;
  float: $startSide;
  margin-$endSide: 4px;
  text-align: $startSide;
}

.post-author, .post-timestamp {
  color:$posttitle;
}

a.comment-link {
  /* IE5.0/Win doesn't apply padding to inline elements,
     so we hide these two declarations from it */
  background/* */:/**/url("http://www.blogblog.com/dots_dark/icon_comment_$startSide.gif") no-repeat $startSide .25em;
  padding-$startSide:15px;
  }
html>body a.comment-link {
  /* Respecified, for IE5/Mac's benefit */
  background:url("http://www.blogblog.com/dots_dark/icon_comment_$startSide.gif") no-repeat $startSide .25em;
  padding-$startSide:15px;
  }
.post img {
  margin-top:0;
  margin-$endSide:0;
  margin-bottom:5px;
  margin-$startSide:0;
  padding:4px;
  border:1px solid $borderColor;
  }

.feed-links {
  clear: both;
  line-height: 2.5em;
}

#blog-pager-newer-link {
  float: $startSide;
 }

#blog-pager-older-link { 
  float: $endSide;
 }
 
#blog-pager {   
  text-align: center; 
 }

/* Comments
----------------------------------------------- */
#comments {
  margin:0;
  }
#comments h4 {
  margin:0 0 10px;
  border-top:1px dotted $borderColor;
  padding-top:.5em;
  line-height: 1.4em;
  font: bold 110% Georgia,Serif;
  color:#9c7;
  }
#comments-block {
  line-height:1.6em;
  }
.comment-author {
  background:url("http://www.blogblog.com/dots_dark/icon_comment_$startSide.gif") no-repeat 2px .35em;
  margin:.5em 0 0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:0;
  padding-$startSide:20px;
  font-weight:bold;
  }
.comment-body {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:0;
  padding-$startSide:20px;
  }
.comment-body p {
  margin:0 0 .5em;
  }
.comment-footer {
  margin:0 0 .5em;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.75em;
  padding-$startSide:20px;
  color:#996;
  }
.comment-footer a:link {
  color:#996;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }


/* More Sidebar Content
----------------------------------------------- */
.sidebar h2 {
  margin:2em 0 .75em;
  padding-bottom:.35em;
  border-bottom:1px dotted $borderColor;
  line-height: 1.4em;
  font: $headerfont;
  text-transform:lowercase;
  color:$sidebartitle;
  }
.sidebar p {
  margin:0 0 .75em;
  line-height:1.6em;
  }
.sidebar ul {
  list-style:none;
  margin:.5em 0;
  padding:0 0px;
}

.sidebar .widget { 
  margin: .5em 0 1em;
  padding: 0 0px;
  line-height: 1.5em;
 }

.main .widget { 
  padding-bottom: 1em;
 }

.sidebar ul li {
  background:url("http://www1.blogblog.com/dots_dark/bullet.gif") no-repeat 3px .45em;
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:5px;
  padding-$startSide:15px;
}
.sidebar p {
  margin:0 0 .6em;
  }

/* Profile 
----------------------------------------------- */
.profile-datablock { 
  margin: 0 0 1em;
}

.profile-img { 
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 8px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  border: 4px solid #345;
}

.profile-data { 
  margin: 0;
  line-height: 1.5em;
}
.profile-textblock { 
  clear: $startSide;
  margin-$startSide: 0;
}

/* Footer
----------------------------------------------- */
#footer {
  clear:both;
  padding:15px 0 0;
}

#footer p {
  margin:0;
}

/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper { 
  padding: 0;
}

body#layout #sidebar-wrapper,
body#layout #sidebar { 
  padding: 0;
  width: 240px;
 }
]]></b:skin>
</head>

<body>
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>
 
    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog-Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Silver Screen (Header)' type='Header'/>
</b:section>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mein Profil' type='Profile'/>
<b:widget id='LinkList2' locked='false' title='Filmarchiv' type='LinkList'/>
<b:widget id='LinkList4' locked='false' title='Meine bisherigen Erstsichtung-Highlights 2009' type='LinkList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog-Archiv' type='BlogArchive'/>
<b:widget id='LinkList3' locked='false' title='Blogroll' type='LinkList'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Text1' locked='false' title='Bewertungsskala' type='Text'/>
<b:widget id='Text2' locked='false' title='Alle Filmreviews' type='Text'/>
<b:widget id='Text3' locked='false' title='Alle Serienreviews' type='Text'/>
<b:widget id='HTML1' locked='false' title='Besucher' type='HTML'/>
<b:widget id='Subscribe1' locked='false' title='Abonnieren von' type='Subscribe'/>
</b:section>
      </div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'> </div>

    </div> <!-- end content-wrapper -->

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

  </div></div> <!-- end outer-wrapper -->
</body>
</html>
Danke schonmal!! :)
 
Werbung:
In #sidebar-wrapper ist die Breite mit 200px angegeben. Änder das, achte jedoch gleichzeitig darauf auch die Breite von #main-wrapper anzupassen.
 
Werbung:
Danke euch beiden, ich komme der Sache schon näher! :) Die Sidebar wird jetzt zwar breiter, aber der Text in der Sidebar bewegt sich nicht mit und bleibt auf der selben Senkrechten stehen. Die Sidebar verbreitet sich jetzt nach links, der Text bleibt aber stehen und fängt somit in der Mitte der Sidebar erst an. Wie kann ich den jetzt in der Sidebar noch linksbündig machen?
 
hab hetzt den sidebar und main wrapper zu 100px vergrössert, aber es funktioniert weiterhin nicht. main wrapper wird zwar breiter, aber nicht die sidebar... und beim main wrapper wird dann das Haupttextfeld einfach breiter, aber das will ich ja nicht...
 
Werbung:
Installier Dir im Firefox das Plugin Firebug. Dann ist die Frage ganz leicht zu beantworten:

1. #outer-wrapper muss verbreitert werden.
2. #sidebar-wrapper muss verbreitert werden.
3. Jetzt kann auch #sidebar verbreitert werden.

Fertig.

Aber Du wrappst Dich ja zu Tode in dem Code. Das ist ein grauenvoller Code, Semantik gleich Null. Dass Du da nicht durchsteigst, wundert mich nicht :-)
 
Efchen schrieb:
Installier Dir im Firefox das Plugin Firebug. Dann ist die Frage ganz leicht zu beantworten:

1. #outer-wrapper muss verbreitert werden.
2. #sidebar-wrapper muss verbreitert werden.
3. Jetzt kann auch #sidebar verbreitert werden.

Fertig.

Aber Du wrappst Dich ja zu Tode in dem Code. Das ist ein grauenvoller Code, Semantik gleich Null. Dass Du da nicht durchsteigst, wundert mich nicht :-)
Zum Vergrößern anklicken....

Super, jetzt ist die sidebar nach links breiter geworden, nur bleiben die Links (der Text) in der sidebar stehen und geht nicht nach links mit. Ich möchte die sidebar nämlich breiter machen damit eben der Text in der sidebar nicht so viele Zeilenumbrüche hat.

Ich weiss ist kein idealer code, aber meine Kenntnisse sind halt auch nicht gross...Aber ich möchte ja auch nicht viel verändern, ausser eben diese sidebar...;-)
 
Werbung:
Im Firefox bleibt der Abstand von Text zum Rand gleich, d.h. die Links "gehen nach links mit".

Welcher Browser?
 
Im Firefox hat das bei mir so geklappt, wie ich das beschrieben habe. Dann hast Du vielleicht was falsch gemacht. Hochgeladen scheinst Du Deine Änderung noch nicht zu haben, denn das sieht genauso aus wie vorher (und korrekt). Dann kann ich dazu nicht mehr sagen.
 
Werbung:
Hab jetzt bei #sidebar noch bei padding den mittleren Wert verändert auf 60 und nun auch abgespeichert, damit du das Resultat sehen kannst. Die "Links" stehen jetzt eben in der Mitte, obwohl ich sie eigentlich bündig mit dem linken Rand der sidebar haben möchte.
 
megaman87 schrieb:
Hab jetzt bei #sidebar noch bei padding den mittleren Wert verändert auf 60
Zum Vergrößern anklicken....

Du hast ihn größer gemacht, nicht kleiner, oder?
Wenn Du den Wert auf 20px setzt, passt es doch wunderbar.

Aber die width in #sidebar ist ja noch gar nicht verändert (siehe Punkt 3).
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben