Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: elastisches layout

  1. #1
    Youngster
    Registriert seit
    13.05.2008
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard elastisches layout

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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).

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    13.05.2008
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  4. #4
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  6. #6
    Gast

    Standard

    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.



    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;
    }
    Leider weiss ich immer noch nicht weiter =(

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

  8. #8
    Gast

    Standard

    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

  9. #9
    FischBohne
    Gast

    Standard

    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

  10. #10
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich habe mal was auf die Schnelle gebastelt und auf meinen Testspace hochgeladen:
    http://ptest.pt.funpic.de/testarea/v...avictoria.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!

Ähnliche Themen

  1. Layout
    Von NurIch im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 09.08.2007, 16:40
  2. CSS: Div Layout
    Von eriza im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 06.08.2007, 12:35
  3. Tabellen-Layout in DIV-Layout umändern...
    Von Peter_Pan im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 22.03.2007, 21:29
  4. Layout
    Von Help_me-lol im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 23.01.2005, 00:29
  5. Layout
    Von McMetzger im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 15.08.2004, 23:17

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •