elastisches layout

Octavian

Hallo,

evt eine frage, bei dennen einige die Augen rollen werden, aber ich muss es einfach wissen =)

ich habe meine index seite mit css programmiert. dabei habe ich nebeneinander 3 abschnitte. links und rechts zwei säulen udn in der mitte ein textfeld, um es veeinfacht zu veranschaulichen.
wenn ich jetzt das textfeld durch eingabe eines textes nach unten vergrößere, soll sich die säule auch verlängern.

wie kann cih das realisieren? mit elastizität (em) oder flexibilität (%) oder muss ich noch ein fenster herum legen?

die säulen sind in drei teile untergliedert. kopf. rumpf und fuß. nur der rumpf soll größer werden.

freue mcih auf eure antworten

lg

sejuma

Für ein fixes Layout findest du hier eine Anleitung.

Bei prozentualen Breiten soll das in abgewandelter Form auch möglich sein, habe ich allerdings noch nicht ausprobiert. Wenn du dich etwas gedulden kannst, werde ich mal versuchen, heute oder morgen noch eine Anleitung zu schreiben (falls es klappt).

Octavian

Ich bin die geduld in person. es wäre escht super eine kleine hilfe zu haben.
dank dir tausend mal sejuma

koslowski

Hi,

ich bin nicht sicher ob ich dich richtig verstehe, aber wenn ein Container eine feste Breite aber keine Höhenangabe hat, wächst er vertikal je nach Menge des enthaltenen Textes dynamisch mit.

Wenn alle drei Abschnitte auch noch vertikal gleichlang bleiben sollen, google mal nach der "Faux Columns Technik".

koslowski

edit. oder folge einfach Sejumas Link, da gehts um diese Technik.

sejuma

So, die Anleitung ist fertig: http://www.ohne-css.gehts-gar.net/0031.php

Nochmal zur Verdeutlichung:
Unter "flexiblem" Layout versteht man, dass sich die Spaltenbreiten der jeweiligen Bildschirmgröße anpassen. Ihre Breite ist relativ zur Bildschirmbreite.
Wenn du das vor hast, ist o.g. Anleitung was für dich.

Sollen die Spalten dagegen feste Breiten (z.B. bestimmte Pixel- oder em-Werte) haben, dann verfahre hiernach

hallo sejuma,

tausend Dank für deine Bemühungen. Es ist sehr Übersichtlich und verstädnlich geschildert. Aber leider ist es für mich nicht leicht diese Methode umzusetzen, da es bei mir ein wenig anders gestaltet ist.

Ich habe neben meinem Hauotfesnter, das die Länge der von dem aus links und rechts befindlichen Grafiken bestimmen soll. Diese beiden Grafiken sind jeweils mit zwei oberhalb und unterhalb abhängigen grafiken verbunden.

[Blockierte Grafik: http://www.via-victoria.de/Lucky/seite.jpg]

Die rot umkreisten symbole sind die einzelnen Grafiken.

hier meine css datei:

Code

/* CSS Document von Lucky vom 15.05.2008*/


body {
 color:#82879D;
 background-image:url(images/background.jpg);
 background-repeat:repeat;
 background-attachment:fixed;
}


i {
 color: #bbbbbb;
}


a {
 text-decoration: none;
 font-size: 12;
 font-style: italic;
 color: #808000;
}


a:link {
 color: #8b4513;
}


a:visited {
 color: #B44B32;
}


a.button{
 Color: #000000;
 margin-left:35px;
}


a.button_right{
 Color: #000000;
 margin-right:35px;
}


a.button:hover {
 Color: #000000;
 width: 20px;
 border-left: 2px solid #000000;
 border-top: 2px solid #000000;
 border-right: 3px solid #cccccc;
 border-bottom: 3px solid #cccccc;
 text-decoration: none;
}




.eingabefeld {
 position:absolute;
 width: 150px;
 border: 1 dotted black;
 color: white;
 background: none;
  margin-top:1px;
}


.eingabe_anmeldung {
 background: none;
 color: white;
 border: 1 dotted black;
}


#main {
 background: none;
 position:absolute;
 left:451px;
 top:180px;
 max-width:533;
}


#header {
 background-color: #ffdead;
 height:133px;
 width:910px;
 position:absolute;
 left:263px;
 top:0px;
}


#saeule_kopf_links {
 background-image:url(images/saeule_kopf_angep.png);
 height:133px;
 width:187px;
 position:absolute;
 left:263px;
 top:0px;
}


#saeule_kopf_rechts {
 background-image:url(images/saeule_kopf_angep_rechts.png);
 height:133px;
 width:190px;
 position:absolute;
 left:984px;
 top:0px;
}


#logo {
 background-image:url(images/logo1.png);
 height:133px;
 width:533px;
 position:absolute;
 left:451px;
 top:10px;
}


#saeule_links {
 background-image:url(images/saeulen_stamm_angep.png);
 background-repeat:no-repeat;
 height:500px;
 width:188px;
 position:absolute;
 left:284px;
 top:133px;
}


#clock {
 background-color: #9932cc;
 height:35px;
 width:188px;
 position:absolute;
 left:984px;
 top:133px;
}


#saeule_rechts {
 background-image:url(images/saeulen_stamm_angep_rechts.png);
 background-repeat:no-repeat;
 height:500px;
 width:180px;
 position:absolute;
 left:1018px;
 top:133px;
}


#saeule_fuss_rechts {
 background-image:url(images/saeule_fuss_angep_rechts.png);
 height:133px;
 width:190px;
 position:absolute;
 left:998px;
 top:550px;
}


#saeule_fuss_links {
 background-image:url(images/saeule_fuss_angep.png);
 height:133px;
 width:190px;
 position:absolute;
 left:254px;
 top:550px;
 }


td {
 width:100px;
 height:100px;
}

Alles anzeigen

Leider weiss ich immer noch nicht weiter =(

sejuma

Die Grafik wird im Board leider nicht angezeigt.
Es wäre äußerst hilfreich, wenn du mal einen Link zur Seite reinstellen könntest, damit man den CSS- und HTML-Code mal im Zusammenhang sieht.

sry, habe die grafik dummer weise wieder aus meinem verzeichnis gelöscht xD

hier die links

http://www.via-victoria.de/index.php?seite=index

http://www.via-victoria.de/style.css

danke für deine hilfe

lg

FischBohne

hmmm wie wäre es wenn du die Bilder als mittigen hintergrund einfügst (die höhe der bilderstücke angibst) und die breite in % machst 12,5% / 75% / 12,5% so dürfte es doch stimmen

sejuma

Ich habe mal was auf die Schnelle gebastelt und auf meinen Testspace hochgeladen:
http://ptest.pt.funpic.de/testarea/victoria/viavictoria.html

Ist von den Grafiken her noch nicht perfekt, aber es soll lediglich mal das Prinzip verdeutlichen:

Das Layout habe ich auf 920px Breite begrenzt.
In einen wrapper1 wird die Hintergrundverlaufsgrafik eingebaut (wird dafür aus dem body entfernt).
Dann folgt ein header, der die Säulenköpfe und das Logo als img enthält.

Nach dem header folgt ein wrapper2: Er enthält eine Kachelgrafik für die Säulenmitte.

Hier wieder eingebunden sind der Inhalt für den linken, mittleren und rechten Bereich.

Zum Schluss folgt der footer mit den beiden Säulenfüßen.

Sieh dir insbesondere einmal die verwendeten Grafiken an. Da musst du noch etwas basteln und feilen.
Vor allem musst du darauf achten, dass die Säulenfüße von der Größenanordnung her identisch mit den Säulenköpfen sind, nur umgekehrt.
Vielleicht kannst du für die Füße auch den Säulenkopf verwenden, indem du ihn um 180 Grad drehst.

Wie gesagt: Ist jetzt noch etwas Grafikarbeit angesagt.
Aber vom CSS her müsste das so funktionieren.

Viel Erfolg!

Octavian

Wow super, danke schön sejuma. Das kann cih sehr gut bei mri umsetzen. Ich bastel gerade noch ein wenig an den Grafiken und passe sie so gut wie möglich an.
habe aber noch eine änderun eingebracht. den hintergund habe ich gelassen, falls in manachen brwowsern die auflösung höher eingestellt wird und eine mind. länge des mittleren fensters (wrapper2) habe ich auch noch eingebaut, damit die zu kleinen texte nicht dasd ganze bild evrunschönern. denke damit werde ich dann zurande kommen und mein design etwas aufpeppeln können.

Dank dir noch mal für deine schnelle und professionelle hilfe sejuma.
Weite so

LG

yeti66

Octavian,

erzeuge erst einmal einen Screen in einem Grafikprogramm und slice [Teile Deine Grafik] so, das die Teilstücke auch wieder zueinander passen. Dann erst das Grundgerüst der Seite erstellen (so das es nicht von den Inhalten zerschossen werden kann)und dann erst die Inhalte einarbeiten. So ersparst Du Dir viel Arbeit.

elastisches layout

Tags

Benutzer online in diesem Thema