Mitwachsende Sidebar - Problem ;-)

mint · 09.09.2010

Hallo, ich bin am erlernen von CSS und komme auch (für mein Empfinden) schon gut zurecht. Nun wollte ich eine Sidebar mit einem aus 3 Teilen bestehenden Hintergrund einbauen. Leider komme ich damit nicht ganz zurecht.
Kann mir bitte jemand helfen ?
Es handelt sich um ein 2 spaltiges Layout.

Anbei der betreffende CSS und Html Code

Danke & Gruß, Mint

Anbei der betreffende CSS und Html

Uploaded with

Uploaded with

Ladyan · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

Hallihallo, wo liegt denn dein Problem?

Ps: Wenn du den Code als Text anstatt als Bild einbaust kann man auch leichter damit rumprobieren - das abtippen ist bisschen stressig

Sc_Grafix · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

warum machst du denn n Screenshot von deinem Code, anstatt ihn einfach komplett hier rein zu kopieren was schneller und auch viel besser für jeden der dir helfen möchte wäre...???

Dafür gibts extra diese Schaltfläche beim erstellen der Posts!

mint · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

...ich bekomme es nicht hin, dass die Sidebar mitwächst. Irgendetwas läuft noch schief.

Ich habe mal ein Screenshot von der Sidebar gemacht wie sie ausssehen soll und daneben wie es im Moment ist.

Yfrog Image : yfrog.com/jcbildschirmfoto20100909up - Uploaded by musikusmint1

Hier mal der Code (Auszug).

html:

HTML:

<div id="sidebarLeft">
    
    <div id="sidebarTop">  
    <div id="sidebarMid">
    
    <div id="sidebarBot">
    
    <p>Test ...</p>
    <p>...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext
    ...das ist ein Testtext...das ist ein Testtext...das ist ein Testtextv...das ist ein Testtextv...das ist ein Testtext</p></div>
    

    </div>
    </div>
    </div>
      </div>
      
         <div id="mainContent">

und CSS:

Code:

#sidebarLeft {
    width: 250px;
    height: 100%;
    font-size: 14px;
    margin: 10px 0 0 10px;
    float: left;
    
    
    
}

#sidebarTop {
    width: 250px; height: 101px; background:url(../images/bg_sideBar_top.jpg) no-repeat;
    margin: 20px 0 0 10px;
   

    
}

#sidebarMid {
    width: 250px; background:url(../images/bg_sideBar_mid.jpg) repeat-y;
    margin: 0 0 0 10px;

    
}

#sidebarBot {
    width: 250px; height: 54px; background:url(../images/bg_sideBar_bot.jpg) no-repeat;
    margin: 0 0 0 10px;
    

}

Ladyan · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

Hey, also zuerst solltest du die divs sidebarTop, sidebarMid und sidebarBot gleich wieder schließen und nicht ineinander verschachteln.
Der Text sollte in sidebarMid eingeschlossen werden anstatt in sidebarBot, und das margin-left von 10px kannst du für die drei weglassen, da du es für sidebarLeft schon definiert hast.
Probier das mal aus und melde dich dann wieder

mint · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

Danke erstmal

Jetzt geht es (der Hintergrund wächst mit und ist korrekt) aber der Text fängt unterhalb der SidebarTop an (ist ja auch definiert) aber kann ich den Text nicht so anordnen, dass er oben beginnt (also schon über der Grafik sidebarTop ?

HTML:

<div id="sidebarLeft"> 
    
    <div id="sidebarTop"> </div> 
    <div id="sidebarMid">
    
    <p>...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext
    ...das ist ein Testtext...das ist ein Testtext...das ist ein Testtextv...das ist ein Testtextv...das ist ein Testtext
    ...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext
    ...das ist ein Testtext...das ist ein Testtext...das ist ein Testtextv...das ist ein Testtextv...das ist ein Testtext</p> </div>
    
    <div id="sidebarBot"></div>
    
    
    

 </div>

CSS

Code:

#sidebarLeft {
    width: 200px;
    background: #fff;
    padding: 22px 10px;
    font-size:0.7em;
    text-align:justify;
    line-height: 1.4em;
    float: left;
    
}

#sidebarTop {
    width: 250px; height: 101px; background:url(../images/bg_sideBar_top.jpg) no-repeat;
   
   

    
}

#sidebarMid {
    width: 250px; background:url(../images/bg_sideBar_mid.jpg) repeat-y;
    

    
}

#sidebarBot {
    width: 250px; height: 54px; background:url(../images/bg_sideBar_bot.jpg) no-repeat;

}

Ladyan · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

Dann musst du deine Boxen absolut positionieren, und die sidebarMid mit einem höheren z-Index über die sidebarTop legen.
Ich weiß nicht ob dir das den Aufwand wert ist?

DE_Nemesis_TM · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

z.B. mit einem negativen "margin-top" für dein p-Tag

mint · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

Hört sich alles gut an, aber wie mache ich das ? Den Aufwand (wenn ich das selbst hinbekomme) wäre es mir schon wert, ich will es ja lernen...;-)

Ladyan · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

*doing* Natürlich. Nach sonem Tag sieht man vor Bäumen den Wald nicht mehr.

Code:

sidebarMid p {
margin-top: -50px;
}

mint · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

...geht nicht, da sich nun die sidebarMid über das sidebarTop schiebt und somit der Hintergrund nicht mehr zu sehen ist :-(

DE_Nemesis_TM · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

"sidebar-Mid" nicht als Bild sondern mit CSS gestalten:
z.B.

Code:

#sidebarMid{
border-left: ...;
border-right: ...;
background: transparent;
width:...;}

sollte da keine zierelemente im Mittelteil sind funktionieren

@ladyan: mit position bin ich lieber etwas vorsichtiger, wenn ich die restliche site nicht kenne... hab mir damit schon einige layouts "zerschossen"

Ladyan · 09.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

DE_Nemesis_TM schrieb:
@ladyan: mit position bin ich lieber etwas vorsichtiger, wenn ich die restliche site nicht kenne... hab mir damit schon einige layouts "zerschossen"

ja das versuche ich auch so gut es geht zu umgehen.
war wieder mal viel zu kompliziert gedacht

mint · 10.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

@DE_Nemesis_TM

Das ist es ja gerade, da sind "Zierelemente" im Hintergrund, darum gehts mir ja.

sokie · 10.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

die inneren Elemente absolut zu positionieren ist keine Lösung- weil gerade dann die äusseren nicht mitwachsen.
ich würde die container einfach ineinander schachteln, der mit dem durchgehenden wiederholten rahmen nach aussen.

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
#sidebarAll{
    width: 250px;
    background: url(img/repeat.png);
}
#sidebarBottom{
    background: transparent url(img/bottom.png) left bottom no-repeat;
}
#sidebarTop{
    background: transparent url(img/top.png) left top no-repeat;
    padding: 70px 0 50px 0;
}
#sidebarTop p{
    width: 220px;
    margin: auto;
}
</style>
<title></title>
</head>

<body>
<div id="sidebarAll">
  <div id="sidebarBottom">
    <div id="sidebarTop">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>
</body>
</html>

grob umrissen

mint schrieb:
Code:

#sidebarLeft { width: 200px; ...}

ist frickelei. hier drückst du einen 250px breiten container in einen bereich der eigentlich nur 200px breit ist.

mint · 10.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

@sokie

Super, Danke

Das ganze versuche ich jetzt noch mit dem Content-Main und dann bin ich doch wieder einen Schritt weiter...

Gruß, Mint

mint · 10.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

@sokie

Kannst du mir ggf. noch bei dem Main Content helfen, es ist ein zweispaltiges Layout, links die sidebar und rechts daneben der Main Content (gleiches Prinzip wie Sidebar) - ich bekomme nur das Top Image nicht angezeigt ???

CSS

#mainContent p {
font-size: 0.9em;
}

#mainContent {
width: 698px;
background:url(../images/repeat-main.jpg);
text-align:justify;
line-height: 1.4em;
padding-right: 4px;
float: right;
}

#mainContentBottom {
background: transparent url(../images/bottom-main.jpg) right bottom no-repeat;
margin-right: 2px;
}

#mainContentTop {
background: transparent url(../images/top-main.jpg) right 20px 1px no-repeat;
padding: 32px 0 50px 0;

}

#mainContentTop p,
#mainContentTop h1 {
width: 680px;
margin: auto;
}

HTML

<div id="sidebarAll">
<div id="sidebarBottom">
<div id="sidebarTop">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>

<div id="mainContent">
<div id="mainContentBottom">
<div id="mainContentTop">
<h1>Test ...</h1>
<p>...das ist ein Testtext</p>

<p>...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext...das ist ein Testtext</p>
<br><br/>
<h3>! Diese Seite befindet sich noch im Aufbau !</h3>

</div>
</div>
</div>

...ich habe es ersteinmal hinbekommen. Danke für die Hilfe !!!

Gruß, Mint

sokie · 10.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

auf dem erste Blick hast du hier zuviele Werte eingeragen:

Code:

background: transparent url(../images/top-main.jpg) right 20px 1px no-repeat;

background: farbe url(url) wert-left wert-top repeat [attachment]

wert-left kann entweder eine massangabe px,cm,mm,etc eine reletive angabe %,em oder den einen der werte right, center, oder left(default) annehmen.
wenn du also dein hintergrundbild rechts anordnen willst, aber nicht "ganz_rechts", musst du einen wert von links angeben, der das bewirkt(aber nicht right und pixelwert).

Bitte bitte, code in die Codebereiche setzen. die Werkzeuge stehen zur Verfügung wenn man unten am Antwortfenster auf "Erweitert" klickt. Codes mit Einrückungen sind um ein vielfaches einfacher zu lesen. also bitte beherzigen.

mint · 10.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

Danke. Das habe ich schon geändert. Ich habe jetzt nur noch das Problem, dass das "Repeat-Image" unter der Rundung von Top und Bottom durchblitzt. Ich werde mal versuchen Top und Button ein paar Pixe breiter zu machen.

@sokie

Kannst du mir noch einen Tipp geben, wie ich den Fehler beheben kann (siehe Bild). Rechts geht der rand vom "Repeat-Image" durch, obgleich ich das Top und Bottom Image etwas breiter habe und der Hintergrund weiß ist !???

Danke für Hilfe.

@sokie

hier der Link:

http://www.farbenspiel-grafik.de/
http://yfrog.com/ngbildschirmfoto20100910up

sokie · 10.09.2010

AW: Mitwachsende Sidebar - Problem ;-)

zu Boldern kann man nicht viel sagen. wie sieht den der Code jetzt aus?
Das einfachste ist (wo es ja nun schon eine Webseite werden soll) die Sache einfach ins netz zu laden(wenn nicht schon geschehen) und einfach den Link zur Seite zu posten.

Bitte 'edit' verwenden um Mehrfachposts zu vermeiden.