Ergebnis 1 bis 14 von 14
  1. #1
    Lightstorm ist offline Eroberer
    registriert
    29-07-2008
    Beiträge
    72

    Variable div container

    Hi,

    gibt es eine Möglichkeit um ein div container so einzustellen das seine Größe (die Höhe) sich an unterschiedlich lange Texte anpasst?

    Ich habe das auf ein paar Seiten gesehen wo registrierte Nutzer ein Profil haben und Text selber schreiben, ihr Text wird dann in einem div Container angezeigt der sich natürlich je nach geschriebener Textlänge anpasst.

    Auch habe ich gehört das man mit PHP oder JavaScript da was machen kann.
    Nämlich das man mit PHP oder JS die Größe des Inhalts liest (z.B. Bildgröße oder Zeilenmenge) und dann einen passenden div container generiert.

    Ich brauche aber konkrete Beispiel Code.

  2. #2
    Bieber ist offline König
    registriert
    10-12-2007
    Ort
    Erfurt
    Beiträge
    964

    AW: Variable div container

    schau dir doch einfach den entsprechenden Quellcode an bzw. die CSS-Dateien

    alternativ:
    div-Container passen sich automatisch dem Inhalt an, wenn keine feste Höhe definiert ist
    d.h. wenn du z.B. "nur" eine "min-height:400px;" definierst, wird dann in Abhängikeit der Menge an content, die Größe angepasst
    crazy

    Schach online: Lust auf eine Partie Schach gegen mich? Einfach kostenlos auf onlineschach.eu registrieren und den Bieber suchen.

  3. #3
    Lightstorm ist offline Eroberer
    registriert
    29-07-2008
    Beiträge
    72

    AW: Variable div container

    Hallo Bieber,

    super ,vielen dank, es klappt

    Nur ein Problemchen: Ich habe verschachtelte div Elemente, also ein div container in einem anderen div container.
    Wenn ich für den ineren container "min-height: 400px" angebe passt die Größe sich an, aber der äußere container bleibt gleich bzw. wenn ich dafür auch "min-height: 400px" angebe passt es sich nicht an die Größe des ineren container an sondern ist 400px groß.

    Dafür gibt es doch sicher auch eine Lösung?
    Ich suche schon in CSS Referenzen, aber wer die Lösung kennt darf es schon mal zeigen

    So schauen die verschachtelten div container aus:
    Code:
    #inhalt{
    	position: absolute;
    	width: 773px;
    	min-height: 400px;    1.  /* container "inhalt" passt sich nicht an Textmenge an */
    	z-index: 1;
    	background-color: #ffffff;
    	border: 1px solid #000000;
    	left: 343px;
    	top: 300px;
    	font-family: Verdana;
    }
    
    #inhalt2{
    position: absolute;
    	width: 730px;
    	min-height: 400px;
    	z-index: 1;
    	background-color: #ffffff;
    	border: 1px solid #000000;
    	left: 10px;
    	top: 20px;
    	padding: 10px;
    	border-style: dashed;
    	font-family: Verdana;
    	font-size: small;
    }
    Geändert von Lightstorm (29-07-2008 um 10:53 Uhr)

  4. #4
    Don Carlos ist offline Jungspund
    registriert
    13-07-2008
    Beiträge
    17

    AW: Variable div container

    Hi,

    verzichte doch einfach völlig auf jegliche Höhenangaben für den äußeren Container.
    Dann sollte es passen.
    "min-height" wird übrigens von einem der beiden "größten" Browsern nicht akzeptiert.
    Ich weiß grade nicht, wer da herumzickt, aber ich vermute mal es ist der IE. ;-)

    Editierter Nachtrag: Warum hast Du eigentlich so Riesenwerte für left und top beim ersten DIV?

  5. #5
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Variable div container

    Es gibt verschiedene Möglichkeiten:
    1.
    PHP-Code:
    #inhalt2{
    positionrelative;
        
    width730px;
        
    min-height400px;
        
    z-index1;
        
    background-color#ffffff;
        
    border1px solid #000000;
        
    margin:20px 0 0 10px;
        
    padding10px;
        
    border-styledashed;
        
    font-familyVerdana;
        
    font-sizesmall;

    2.
    PHP-Code:
    #inhalt2{
        
    width730px;
        
    min-height400px;
        
    background-color#ffffff;
        
    border1px solid #000000;
        
    margin-left10px;
        
    margin-top20px;
        
    padding10px;
        
    border-styledashed;
        
    font-familyVerdana;
        
    font-sizesmall;



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  6. #6
    Lightstorm ist offline Eroberer
    registriert
    29-07-2008
    Beiträge
    72

    AW: Variable div container

    Ich muss ja sagen das ich ein totaler CSS Anfänger bin und so schaut meine erste kleine CSS Seite aus: Edit: Site offline.

    Mit den angegebenen Beispielen kann ich nur den ineren container so einstellen das er sich dem Text anpassen, der äußere container macht nicht mit.


    Und bitte wundert euch nicht über die Seite, wie gesagt bin echt ein Anfänger
    Auch scheint die Seite im IE nicht Fehlerfrei zu sein, hätte nicht erwartet das man CSS wirklich so gut an verschiedene Browser anpassen muss, selbst bei solchen einfachen Konstruckten.
    Aber irgendwie muss man ja anfangen, ich bastel an solchen Seiten einfach mal rum und sammele Erfahrung.


    @Don Carlos

    Die großen Werte die ich zuvor hatte kamen daher weil ich eine Bildschirmauflösung von 1280x1024 habe und die Seite zentriert haben wollte.
    Leider merkte ich das bei kleineren Auflösungen die Seite gar nicht mittig steht sondern zu weit rechts verschoben, weswegen ich die Seite jetzt einfachheitshalber einfach links verschoben habe ^^
    Geändert von Lightstorm (19-10-2008 um 09:15 Uhr)

  7. #7
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Variable div container

    du meinst: Sleeper Cell - Startseite
    Ich würde völlig auf position:absolute verzichten ist in deinem Fall auch überflüssig. Die Breitenangabe im Inhalt bewirkt nur, das man einen unnötigen Scrollbalken bekommt. Für die Hintergrundfarbe brauchst du keine Grafik. Du solltest um Absätze zu produzieren einfach p-Tags verwenden. Also statt:
    HTML-Code:
    <p><h1>Sleeper Cell</h1>
    
    Sleeper Cell spielt in der Gegenwart ....
    <br>
    <br>
    Doch auch Darwyn ...
    <br>
    <br>
    HTML-Code:
    h1>Sleeper Cell</h1>
    
    <p>Sleeper Cell spielt in der Gegenwart ....</p>
    <p>Doch auch Darwyn ...</p>
    Ausserdem ist dein Code nicht valide: [Invalid] Markup Validation of http://www.lightstrom.jinjael.de/ - W3C Markup Validator
    Geändert von ein schlauer (02-08-2008 um 18:40 Uhr)

  8. #8
    Lightstorm ist offline Eroberer
    registriert
    29-07-2008
    Beiträge
    72

    AW: Variable div container

    @schlauer

    Danke das du mal reingeschaut hast. Das mit der Hintergrundfarbe habe ich gemacht weil ich nicht wusste wie der html color code für die Farbe das ich da habe heißt.
    Es ist eines der Systemfarben: CSS 4 You - The Finest in Stylesheets: Systemfarben
    Die richten sich aber nach den Einstellungen am Betriebsystem, kann also von Besucher zu Besucher abweichen, daher habe ich das mit der Grafik gemacht.

    Und das mit dem nicht valide, wenn ich etwas in CSS oder HTML will suche ich über Google nach Beispielen und verwende diese. Woher soll ich immer genau wissen was valider Code ist und was nicht? Das geht doch glaube ich nur über eingehende HTML bzw. CSS Kenntnise.

  9. #9
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Variable div container

    Die Hintergrundfarbe ist #ABA899. Umsowas zu ermitteln sollte dein Grafikprogramm eine Funktion haben, ich hab ein 10 Jahre altes, das hat diese.
    Die meisten Fehler werden erklärt. Du machst es dir auch unnötig schwer, weil du XHTML verwendest, genau wie beim CSS wo du dir es auch unnötig schwer machst.

  10. #10
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Variable div container

    Du kannst (solltest) Dein HTML überarbeiten und auch im CSS einiges ändern. Einige Punkte wie die Sache mit den Hintergrundbildern hat ein schlauer schon gesagt.

    Ich habe menu und inhalt mal ein klein wenig reformiert, sodass die Seite - soweit ich das hier sehe - im FF2, IE6, IE7 und Opera9 gleich angezeigt wird. Vergleich einfach mal und frage nach, wenn Dir etwas unklar ist. (Habe Dir aber noch einiges übrig gelassen.)

    PHP-Code:
    #menu{
        
    floatleft;
        
    margin-top10px;
        
    width190px;
        
    height300px;
        
    border1px solid black;
        
    background-colorinactiveborder;
        
    background-imageurl(http://www.lightstrom.jinjael.de/hintergrund2.jpg);
    }

    #menu2{
        
    margin:4px;
        
    width180px;
        
    height290px;
        
    border1px solid;
        
    text-aligncenter;
        
    font-familyVerdana;
        
    font-weightbolder;
        
    border-styledashed;
        
    border-colorblack;
        
    background-colorinactiveborder;
        
    background-imageurl(http://www.lightstrom.jinjael.de/hintergrund2.jpg);
    }

    #inhalt{
        
    margin10px 0 0 195px;
        
    width773px;
        
    border1px solid #000000;
        
    font-familyVerdana;
        
    background-imageurl(http://www.lightstrom.jinjael.de/hintergrund2.jpg);
    }

    #inhalt2{
        
    margin:2px 10px 10px;
        
    width730px;
        
    border1px solid #000000;
        
    padding10px;
        
    border-styledashed;
        
    font-familyVerdana;
        
    font-sizesmall;
        
    background-imageurl(http://www.lightstrom.jinjael.de/hintergrund2.jpg);

    Schau Dich hier mal ein wenig um. Da findest Du Ideen, wie Du die Seite mittig machen kannst, falls das noch aktuell ist.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  11. #11
    Lightstorm ist offline Eroberer
    registriert
    29-07-2008
    Beiträge
    72

    AW: Variable div container

    Hallo anna55,

    danke, es funktioniert.
    Soweit alles klar, ich frage mich aber wieso man bei margin auch null Werte setzt: margin: 10px 0 0 195px;
    Scheint aber erforderlich da wenn ich es weg mache der div container verutscht.
    Verstehe aber nicht wieso das so ist.

    Und was war genau mein Fehler was z.B. die Anzeige im IE angeht, sollte man im IE z.B. nicht Top und Left benutzen sondern die Außenabstände mit margin festlegen? Oder wo lag der Fehler?

  12. #12
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Variable div container

    Zitat Zitat von Lightstorm Beitrag anzeigen
    Soweit alles klar, ich frage mich aber wieso man bei margin auch null Werte setzt: margin: 10px 0 0 195px;
    ?
    Das ist eine einfache und logische Geschichte.
    Mit margin wird ja der Außenabstand zum übergeordneten Element bestimmt.
    D.h. im obigen Szenario:
    Es wird immer wie folgt gezählt (es gibt nur eine Ausnahme): top, right, bottom und left.
    Und da 0 immer 0 ist, egal ob px, % oder em, braucht man auch nur 0 angeben (für keinen Abstand).

  13. #13
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Variable div container

    Zitat Zitat von Lightstorm Beitrag anzeigen
    Soweit alles klar, ich frage mich aber wieso man bei margin auch null Werte setzt: margin: 10px 0 0 195px;
    Scheint aber erforderlich da wenn ich es weg mache der div container verutscht.
    Verstehe aber nicht wieso das so ist.
    Ich habe die margin-Werte, die man auch einzeln setzten kann, hier zusammengefasst. Damit die Browser wissen, welcher Abstand nun gemeint ist, kann es erforderlich sein, auch 0 zu setzen. Lies mal hier unter Erläuterungen:
    SELFHTML: Stylesheets / CSS-Eigenschaften / Außenrand und Abstand

    Zitat Zitat von Lightstorm Beitrag anzeigen
    Und was war genau mein Fehler was z.B. die Anzeige im IE angeht, sollte man im IE z.B. nicht Top und Left benutzen sondern die Außenabstände mit margin festlegen? Oder wo lag der Fehler?
    top und left funktionieren in Zusammenhang mit position, was Du ursprünglich angegeben hattest.
    SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

    Wie ein schlauer aber schon sagte, ist das bei Deiner Seite aber nicht notwendig.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  14. #14
    Lightstorm ist offline Eroberer
    registriert
    29-07-2008
    Beiträge
    72

    AW: Variable div container

    Ok werde ich mir mal anschauen, danke für die ganze Hilfe

Ähnliche Themen

  1. DIV Container Deaktivieren
    Von alex.maier im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 24-04-2007, 07:43
  2. Antworten: 5
    Letzter Beitrag: 08-10-2006, 22:24
  3. script das div id ändert ?
    Von darkstar im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 22-08-2006, 12:02
  4. div container soll erscheinen bei Mouseover
    Von Mirak im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 17-11-2005, 18:17
  5. prob: automatisches nach unten Scrollen im Div container
    Von scorpion4000 im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 30-03-2005, 21:43

Lesezeichen

Berechtigungen

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