DIV Box (Sidebar) in bereits fertiges Design einfügen?

Daniel-sacharov · 18. Juni 2011 um 13:46

Hey!
Ich habe mir ein Design mit CSS gecodet, jetzt ist es fertig, aber ich möchte gerne noch in das fertige Design eine Sidebar (rechts) einfügen, also eine “DIV Box”.
Jetzt habe ich aber das Problem, dass ich nicht weiß, wohin ich die “Div Anweisung” (

) in die HTML Datei positionieren soll.
Wenn ich sie nach dem Content schreibe, dann positioniert sich die Sidebar im Content.

Lg
Daniel

Chris · 18. Juni 2011 um 14:09

Hi,

wenn du es “gecoded” hast dann solltest du eigentlich wissen wie die Struktur eines Templates aussieht.

Ferner ist gerade die Kristallkugel in Reparatur, weswegen wir dir ohne Quelltext auch nicht wirklich helfen können. Sowohl vom HTML als auch vom CSS-Part.

Daniel-sacharov · 18. Juni 2011 um 14:13

Okay, sorry

HTML:

[code]

Daniel Sacharov .:. Grafik- und Webdesign

Startseite
Über uns
Kontakt
Links
Impressum

<div id="page">
	<div id="content">
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
	TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    </div>
	
	
	
	
	


<div id="footer">
<p>Copyright 2011 Daniel Sacharov.</p>
</div>

<div id ="boxen">
<div class ="boxformatierung">
Startseite <br />
Über uns <br />
Impressum <br />
</div>
<div class ="boxformatierung">
2. Box <br />
LINK <br />
LINK <br />
</div>

<div class ="boxformatierung">
3. Box <br />
LINK <br />
LINK <br />
</div>
<div class ="boxformatierung">
4. Box<br />
LINK <br />
LINK <br />
</div>
<div class ="boxformatierung">
5. Box <br />
LINK <br />
LINK <br />
</div>[/code]

CSS:[code]
/*
Design by Daniel Sacharov.
Copyright 2011 Daniel Sacharov.
*/

body {
margin: 0px 300px 0px -90px;
background: #00baff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #444444;
}

h1, h2, h3 {
margin: 0;
font-family: Georgia, “Times New Roman”, Times, serif;
font-weight: normal;
color: #444444;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 2em;
}

h3 {
font-size: 1.6em;
}

p, ul, ol {
margin-top: 0;
line-height: 180%;
}

ul, ol {
}

a {
text-decoration: none;
border-bottom: 1px dotted #CC0001;
color: #FB7600;
}

a:hover {
background: none;
}

/* Header */

#header {
width: 900px;
height: 200px;
margin: 20px 0px 0px 180px;

background: url(images/header.png) no-repeat left top;

}

/* Menu */

#menu {
width: 900px;
height: 50px;
background: url(images/navi.png) no-repeat left top;
margin: 0px 0px 0px 180px;

}

#menu ul {
margin: 0;
padding: 13px 0 0 20px;
list-style: none;
line-height: normal;

}

#menu li {
float: left;
border-right:1px dashed #aeaeae;
}

#menu a {
display: block;
margin-right: 3px;
padding: 5px 20px 7px 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #333333;
border: none;
}

#menu a:hover {
color:#00baff;

}

#content {
height:auto;
width:910px;
padding-left:15px;
padding-right:15px;
background:url(images/content.png) repeat-y;
margin: 0px 185px 0px 175px ;

#footer {
width: 900px;
height: 60px;
background-image: url(images/footer.png) ;
margin: 0px 5px 0px 180px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

#footer p {
margin: 0;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
padding: 20px 80px 0px 0px;
}

#footer a {
color: #FFFFFF;
border-bottom: 1px #FFFFFF dotted;
}

#boxen {
background-image: url(images/footer_box.png);
width: 874px;
height: 120px;
margin: 0px 0px 0px 193px;
}

.boxformatierung {
float: left;
width: 150px;
padding: 5px 0px 0px 20px;
}

#sidebar {
background-image: url(images/sidebar.png);
width: 300px;
height: 500px;
float: right;
}[/code]

hoffmann · 18. Juni 2011 um 14:29

Das ist ganz einfach, die Anordnung der Inhalte im (X)HTML erfolgt immer unabhängig von der
CSS-Dekoration. Und zwar ordnet man alle Inhalte immer so an, daß es einen Sinn ergibt, also
und insbesondere auch ohne CSS.

Mit dem CSS kann man dann danach durch die Anweisungen eine alternative Anordnung
erreichen, wofür man am (X)HTML-Quelltext nichts mehr ändert.
Was man dann da für Anweisungen verwendet, hängt natürlich davon ab, in welcher Reihenfolge
die Inhalte in der (X)HTML-Datei stehen, nicht umgekehrt ;o)

Daniel-sacharov · 18. Juni 2011 um 14:52

Okay, aber schau dir mal bitte den CSS Code ganz unten an (Sidebar).
Was muss ich noch hinzufügen, damit die Sidebar nicht immer an anderen Elementen “hängt”?

hoffmann · 18. Juni 2011 um 16:37

Wenn ich das richtig gesehen habe, kommt #sidebar im (X)HTML-Quelltext noch gar nicht vor,
also wird es auch nirgends dranhängen.
Wenn du es irgendwo einfügst, wird wegen float so bestenfalls der darauf flogende Inhalt
rechts davon oder darunter positioniert, je nachdem, wieviel es ist.

Unabhängig von der Position im Quelltext kannst du natürlich absolut positionieren, also
position: absolute, dann kann float weg. Dann muß man aber per margin (oder padding) z.B.
bei body für das neue Element Platz schaffen.

Ansonsten, wenn #sidebar auch Text und nicht nur Pixelgraphik enthält, sind Angaben von
Höhe und Breite in px wohl ziemlich schlecht, dann eher em oder ex, zudem müßte man sich
dann wegen der expliziten Höhe auch um overflow: auto kümmern.

Daniel-sacharov · 18. Juni 2011 um 20:31

Okay, vielen Dank! Es hat funktioniert…
Ich bin noch ein “Anfänger”, was CSS angeht, da ich erst vor ein paar Tagen wieder angefangen habe.

Ich frage mich aber:

Ich habe jetzt in meiner CSS Datei folgenden Code:

#sidebar { background-image: url(images/sidebar.png); width: 200px; height: 350px; position: absolute; margin: 280px 0px 0px 1080px; }

Ich will jetzt einen text hineinschreiben, deswegen sollte ich den Text extra positionieren, indem ich folgenden Code eingefügt habe (in der CSS Datei):

.sidebartext { color: #333333; padding: 5px 5px 0px 0px; }

Dann habe ich in den HTML Code den text so geschrieben:

Es funktioniert, aber der ganze Body, also die ganze Seite verschiebt sich auf einmal völlig.

hoffmann · 19. Juni 2011 um 11:21

Da ist es nützlich, wenn du jeweils die URI von einem Testdokument angibst, eventuell sogar
zwei, eine Ausgangsdatei und eine mit der Änderung.
In solch einem Testdokument sollte man nur die CSS-Anweisungen, die für den diskutierten Effekt
notwendig sind, einfach im style-Element notieren und sonst das Dokument relativ einfach halten.
Dann kann man leichter sehen, wo das Problem liegt.

Bei deinem letzten Kommentar ist etwa ziemlich unklar, ob jetzt alle Elemente, die zur Klasse
sidebartext gehören, auch in sidebar notiert sind und wo dieses sidebar notiert ist relativ zu
restlichen Inhalten.

Wie ich schon sagte, wenn du in sidebar Text und nicht nur Pixelgraphik unterbringst, solltest
du width und height nicht in px-Einheiten festlegen.

Ich bin mir jetzt auch nicht sicher, wie sich margin auf absolut positioniete Elemente und ihre
Umgebung auswirkt, müßte man mal nachlesen/ausprobieren - macht das überhaupt einen
Unterschied bei deinem Beispiel, ob das da steht oder nicht?

Ein gesondertes div der Klasse sidebartext brauchst du auch nicht unbedingt, wenn das selbst
keine besondere Struktur markieren soll. Man kann den Text in Absätzen auch gleich so im
absolut positionierten Element notieren. Anders ist es natürlich, wenn du da inhaltlich relevante
Strukturen hast, für die (X)HTML keine speziellen Elemente hat, dann ist div mit Klassen recht
nützlich, um (X)HTML zu retten - oder die inhaltlichen Mängel und Defizite von (X)HTML
einigermaßen zu umgehen ;o)

Daniel-sacharov · 21. Juni 2011 um 18:01

Okay, vielen Dank für Deine Hilfe!