Layout dynamisch mit css

joha · 27.12.2009

Hallo,

ich möchte eine Seite mit dynamischen Inhalt realisieren,wo aber seitlich rechts und links Grafiken immer stehen bleiben, nur der Inhalt soll dynamisch sein

Die Kopfgrafik soll aus 2 Bildern bestehen,die je rechts und links angeordnet sind,die Mitte passt sich dann dynamisch an

die grafiken rechts und links sollen immer da sein, und sich größenmäßig nicht verändern, nur der Inhalt soll dynamisch sein,sich der Bildschirmgröße anpassen

kann ich die grafiken li und re in div boxen mit pixelangabe packen,und den rest mit prozentangaben?

oder kann ich das mit css gar nicht so lösen?

Irgendwie komme ich grade nicht weiter

ich hänge mal eine Skizze mit rein

Vielen Dank schon mal

Joha

wex_stallion · 27.12.2009

AW: Layout dynamisch mit css

Du kannst das über drei DIV-Container lösen.

Links und Rechts sind dann so groß wie die Grafik, z.B. 100 Pixel.

Dem mittleren DIV-Container gibst du den Abstand über margin-left: 100px und margin-right: 100px mit.

Ob das unbedingt semantisch korrekt ist weiß ich gerade nicht, funktioniert aber.

sokie · 27.12.2009

AW: Layout dynamisch mit css

nach deinemmuster musst du nur dem body ein padding geben (rechts und links in der breite der grafik) und die grafiken positionierst du einfach absolut:

Code:

body{
padding: 0 100px;
}
.grafiklinks{
  position:absolute;
  top: 150px;/*austesten*/
  left: 0;
}
.grafikrechts{
  position:absolute;
  top: 150px;/*austesten*/
  right: 0;
}
#wrapper{
  border: 1px solid #000000; /*nur damit er zu sehen ist*/
  height: 500px; /*später löschen - ergibt sich durch die Inhalte*/
}

HTML:

<img src="links.png" class="grafiklinks" />
<img src="rechts.png" class="grafikrechts" />
<div id="wrapper">
  inhalte
</div>

tomtom · 27.12.2009

AW: Layout dynamisch mit css

hallo, da gearde das wort container gefallen ist, muss ich auch mal noch so nebenbei eine frage stellen. muss um jedes div-element zusätzlich noch ein container? habe ein tut gelesen (weiss momentan den namen nicht mehr, werde es aber bestimmt wieder finden), da wurde um <div id="header"> noch ein <div id="headerContainer"> gebastelt. macht das sinn für einen strukturierten aufbau? sorry leute, steh auf dem schlauch und css raff ich einfach nicht! lg

cebito · 27.12.2009

AW: Layout dynamisch mit css

tomtom schrieb:
hallo, da gearde das wort container gefallen ist, muss ich auch mal noch so nebenbei eine frage stellen. muss um jedes div-element zusätzlich noch ein container?

nö, muss nich, kommt immer drauf an welchen Zweck der drumherumdiv erfüllen soll. Hat er keinen kann man ihn weglassen.

eFoX · 28.12.2009

AW: Layout dynamisch mit css

hast hier mehrere möglichkeiten:

1) in drei spalten alles anzuordnen:
| spalte links | spalte mitte | spalte rechts |
wobei du spalte links und rechts jeweils einen abstand (einen festen in px oder einen flexiblen in %) vom rand angibst, deine hauptspalte ist dann die mittige. deine header-grafiken kannst du dann per float rechts und links anordnen, danach die navigation den float aufheben lassen und nach der navigation den content bereich anlegen

2) in drei zeilen alles anzuordnen:
| zeile header-grafiken |
| zeile navigation |
| zeile content-bereich |
hier wird jeder zeile einen abstand vom rand gegeben (z.b.: margin: 0 100px) oder ein master-wrapper um alles gelegt der eben einen abstand hat! die grafiken im header werden wieder durch float oder absolut angeordnet (für zwei grafiken ist es wirklich egal welche lösung man verwendet, ich komm besser und schneller mit float zurecht). die navigation ist einfach eine ul mit li-elementen (vertikal) und der content passt sich dann dynamisch in höhe (und breite?) an.

Sema · 28.12.2009

AW: Layout dynamisch mit css

Ich hätte dazu auch eine Frage.

Ich möchte im Grunde das gleiche realisieren, nur nicht dynamisch. meine Frage bezieht sich eher auf die Vorgehensweise.
Ist es zwingend notwendig die Grafiken links und rechts (ich möchte auch über dem Header noch eine Grafik) in div container zu packen? oder kann ich das ganze nicht irgendwie über den background regeln? (zur Veranschaulichung hier ein beispiel aus dem Web: - so möchte ich es vom Prinzip her auch machen, also Grafiken im Hintergrund, die um den eigentlichen Inhaltscontainer angeordnet sind.)

Auch schon mal Danke.

Sema

cebito · 28.12.2009

AW: Layout dynamisch mit css

Sema schrieb:
so möchte ich es vom Prinzip her auch machen, also Grafiken im Hintergrund, die um den eigentlichen Inhaltscontainer angeordnet sind.)

Einfach deine Grafik als (body)Hintergrund, background-position:top center; und deinen Div mit den Inhalten entsprechend positionieren - margin: 50px auto 0; wobei die 50px der Abstand von oben sind auto den div mittig positioniert und die 0 für den Abstand nach unten.

Sema · 28.12.2009

AW: Layout dynamisch mit css

Ah, ok, danke für die schnelle Antwort. Das versuch ich gleich mal. Das bedeutet dass ich meine Hintergrundgrafik für den body so gestalten muss, dass, je nach Größe des div Inhalts container, eine Lücke (oder auch nicht) bleibt.

Aber wie siehts eigentlich bei so relativ großen body backgrounds aus? Als jpg sind die ja immens groß (Dateigröße). Und als gif kann ich ja nur Grafiken und eher keine Bilder verwenden (zwecks Farben).

Wie groß / klein (Dateigröße und Auflösung) sollten / dürfen die Grafiken sein? Habe bisher nur mit Verläufen oder mit gekachelten Hintergründen gearbeitet.

Ich weiß, das passt jetzt nicht zum eigentlichen Topic, würde mich aber dennoch interessieren.

joha · 28.12.2009

AW: Layout dynamisch mit css

Erst mal vielen Dank für die Antworten, ich versuche mich nun schon seit Tagen dran,und ehe ich ganz verzweifle *g

zeige ich hier mal 2 Seiten,

bei dieser hier klappt es ja bisher einigermaßen, außer dass die rechte grafik nicht oben beginnt und es nur beim IE klappt, der Opera bringt es untereinander :-(

alsich versucht habe im Inhalt was rein zu bringen, da wird das Chaos noch schlimmer

Vielleicht kann man es sich so besser anschauen, und es hat wieder jemand einen Tip, wäre super

Danke nochmal

Joha

hier noch die css -vorlage:

Code:

#links{
margin-left: 0px;
float: left;
margin-top: 0px;

}
#rechts{
margin-right: 0px;
float: right;
margin-top: 0px;


}


#kopf {
        width: 80%;
        height: 180px;
        margin: 0 auto;
        padding: 0 0 0 0;
        background-color: #C19B19;
}

img.c2 {float: left;}

img.c1 {float: right;}

h1 {
        margin: 0;
        padding: 0;
        font-size: 0.8em;
        color: #000000;
        float: left;
}

#menu {

        width: 100%;
        height: 30px;
        background: #C14A07;
        margin: 0 auto;
}

#menu ul {


        padding-left: 2%;
        list-style: none;
        margin-left: 10%;
        margin-right: 10%;
}

#menu li {
        display: inline;

}

#menu a {

        float: left;
        padding: 0 0 0 0;
        text-transform: lowercase;
        font-size: 0.8em;
        font-weight: bold;
        color: #FFFFFF;
        width: 10%;

}

#inhalt {

        margin: 30px 130px 0 130px;
        padding: 0 0 0 0;
        background-color: #C19B19;
        float: left;

}

p.inh1 {

        margin: 10 10 10 10;
        padding: 10 10 10 10;
        background-color: #F6F4DF;
        float: left;
        width: 200px;

}

p.inh2 {

        margin: 10 10 10 10;
        padding: 10 10 10 10;
        background-color: #F3390B;
        float: left;
        width: 200px;

}

p.inh3 {

        margin: 10 10 10 10;
        padding: 10 10 10 10;
        background-color: #07E2FB;
        float: left;
        width: 200px;

}



#footer{
clear:  both;
width: 100%;
background: #F8FF00;
color: #000000;
text-align: center;
padding: 4px 0;
}

cebito · 28.12.2009

AW: Layout dynamisch mit css

Schau dir mal an, was sokie gepostet hat. Warum positionierst du die Grafiken rechts und links nicht absolut? Dann kommt auch niemand, der sie verschiebt

Und gewöhn dir an bei allen Werten die ungleich NULL sind die Einheit mit dazuzuschreiben (und deinen code hier auch als solchen zu posten):

Code:

p.inh1 {

        margin: 10 10 10 10; [COLOR=Red]/* px? pt? em? Biereinheiten? */[/COLOR]
        padding: 10 10 10 10; [COLOR=Red]/* wie oben */[/COLOR]
        background-color: #F6F4DF;
        float: left;
        width: 200px;

}

joha · 28.12.2009

AW: Layout dynamisch mit css

danke, ich probier mal weiter, und sorry,
werde mich bessern, wegen dem Code richtig posten

sokie · 29.12.2009

AW: Layout dynamisch mit css

sehr wahrscheinlich wird die definition der Spalten(floats) als p-elemente zu weiteren problemen führen. p elemente dürfen keine block-Elemente beinhalten. (zBÜberschriften h1, h2, h3 etc.) besser wären an der stelle divs.

joha · 30.12.2009

AW: Layout dynamisch mit css

nochmals vielen Dank, ich habe nun weiter probiert

mit den positionen absolute das hat geklappt

nun schaut es erst mal so aus :

was ich noch nicht hinbekommen habe, ist folgendes, dass die Fußzeile unter den beiden Randgrafiken liegt. Wenn ich den Inhalt verändere, schiebt es sich nach unten, ok, aber sie sollte auch so immer ganz unten sein, hat jemand noch ne Idee?

Womit ich auch nicht klar gekommen bin,mit dem wrapper, hatte ihn um inhalt und sidebar gelegt,das wurde aber nix ?

Danke
Joha

Code:

* {
        margin: 0;
        padding: 0;
}

body {
        background: #FFFFB3 url(images/bg_kopf5.gif) repeat-x;
        text-align: justify;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 12px;
        color: #666666;
}

h1, h2, h3 {
        color: #333333;
}

h1, h2 {
        margin-bottom: 10px;
        font-weight: normal;
}

h1 {
        font-size: 197%;
}

h2 {
        font-size: 152%;
}

h3 {
        font-size: 100%;
}

p, ul, ol {
        margin-bottom: 20px;
        line-height: 1.8em;
}

ul, ol {
        margin-left: 3em;
}

blockquote {
        padding-left: 20px;

        font-style: italic;
}

a:link {
        color: #1953A7;
}

a:active {
        color: #ED5C0C;
}

a:visited {
        color: #666666;
}

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

img {
        border: none;
}

img.c1 {

        margin-left: 130px;
}


p.c1 {

        margin-left: 40px;
}

p.c2 {

        margin-left: 80px;
        font-size: 15px;

}
/* Menu */

#menu {
        width: 80%;
        height: 50px;
        margin: 0 auto;
        border-right: 1px solid #B9643A;
}

#menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

#menu li {
        display: inline;
}

#menu a {
        display: block;
        float: left;
        width: 10%;
        height: 30px;
        padding: 20px 0 0 0;
        border-left: 1px solid #B9643A;
        text-decoration: none;
        text-align: center;
        font-size: 130%;
        color: #BABABA;
}

#menu a:hover {
        background: #B9643A;
}

#menu .active a {
        background: #B9643A;
        color: #FFFFFF;
}

/* Kopf */

#kopf {
        width: 80%;
        height: 170px;
        margin: 0 auto;
        /*background: url(images/kopf1.jpg) no-repeat;*/

}

#kopf h1 {
        float: left;
        width: 220px;
        height: 100px;
        margin: 0;
        padding: 120px 0 0 0;
        background: url(images/grie_kopf3.gif) no-repeat;*/
        text-align: center;
        font-size: 26px;
        color: #7D3200;
}

#kopf h2 {
        float: left;
        width: 530px;
        height: 86px;
        margin: 0;
         /*background: url(images/kopf_grie2.jpg) no-repeat; */
        padding: 140px 20px 0 0;
        text-align: right;
}



/* inhalt */

#inhalt {
        float: left;
        width: 600px;
        padding: 5px 5px 5px 5px;
        border: 2px solid #F63615;
        margin-left: 120px;
        display:inline;
}
#inhalt h1 {
        margin-left: 5px;
        padding: 10px;
        font-size: 18px;
        color: #000000;
        width: 600px;

}

#inhalt h2 {
        margin: 0 1px;
        padding: 10px;
        font-size: 18px;
        color: #000000;

}

#inhalt h3 {
        margin: 0 10px;
        padding: 5px;
        font-size: 18px;
        color: #000000;

}
.text {
        margin-bottom: 10px;
        padding: 0 20px;
}

.hr {
        border-bottom: 1px solid #B92500;
}

/* Sidebar */

#sidebar {
        float: left;
        margin-left: 10px;
        width: 150px;
        padding: 0;
        background: #919A4B;
}

#sidebar h2 {
        margin: 0;
        padding: 5px 15px;
        color: #FFFFFF;
}

#sidebar h3 {
        font-size: 85%;
        color: #FFFFFF;
}

#sidebar ul {
        margin: 0;
        padding: 15px;
        list-style: none;
}

#sidebar li {
}

#sidebar a {
        color: #FFFFFF;
}

.box {
        background: #F7BC5B;

}

. h2 {
      color: #F2F90E;
}

/* Footer */

#footer {

        height: 50px;
        padding: 0 0;
        background: #EDEBD5 url(images/img004.gif) repeat-x;
        width: 100%;
        text-align: center;
        font-size: 100%;
}



#links{
position:absolute;
  top: 270px;
  left: 0;


}

#rechts{
 position:absolute;
  top: 270px;
  right: 0;


}

li.c2 {list-style: none}
 div.c1 {clear: both;}

sokie · 30.12.2009

AW: Layout dynamisch mit css

um die inhalte sollte ein wrapper sein, der sicherstellt, dass der ganze bereich nicht kleiner wird, als du für deine Bilder brauchst, damit sie nicht umgebrochen werden, unddir so das layout zerschlagen, wenn die fenstergrösse kleiner als x ist.
der footer, wenn er über die ganze seitenbreite gehen soll, darf dann nicht imwrapper liegen.
Deinen Code solltest du entsprechend der Schachtelung einrücken, das lässt sich einfacher lesen.

Du must nur dafür sorgen, dass inhaltsbereich eine mindesthöhe hat, damit der footer nicht in grafiken rutscht wenn weniger inhalte da sind.

Code:

#inhalt{
min-height: yypx /*ausprobieren oder ausrechnen*/
}
* html #inhalt{
height: yypx /*ausprobieren oder ausrechnen*/
/*für IE<=6 */
}

warum hat der #inhalt ein display: inline ???

joha · 30.12.2009

AW: Layout dynamisch mit css

danke Sokie

das hat so geklappt

, super, *freu,

der IE macht auch alles mittig, nur beim Opera ,da hängt es links, geht das auch noch zu ändern?

das display inline habe ich wieder raus genommen,
irgendwas hatte sich verändert, als ich es rein genommen hatte, aber frag bitte nicht mehr was, weil ich langsam den Wald vor Bäumen nicht mehr sehe *g

Joha

edit: habe es jetzt noch mal anders gemacht, und nun geht es halbwegs