kostenloser Webspace werbefrei: lima-city


Probleme beim umsetzen eines Tabledesigns in Containerdesign

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    reimann

    Kostenloser Webspace von reimann

    reimann hat kostenlosen Webspace.

    Also ich war selbst immer Anhänger des "guten Stils", aber so langsam merke ich wieviel CSS mit Containern nicht leisten kann.
    Ich wollte ein mit Tabledesign gemachtes Design mit Div-containern umsetzen und verzweifle an verschiedenen Dingen. Zum einen möchte ich zwei Container nebeneinander anordnen und zwar so, dass der rechte den Rest der Breite benutzt, aber ohne, dass der linke Container größer/höher sein muss, als der rechte, worauf es bei CSS nunmal hinausläuft (ansonsten umfließt er den linken Container). Außerdem wäre es mir lieb, wenn beide Container die gleiche relative Höhe hätten, was auch nur mit Tabellen möglich ist. (und wehe hier kommt einer mit FauxColumns, denn bei variabler Breite eine ganze schlechte Idee)
    Das nervt!

    Hoffe hier kann trotzdem jemand helfen.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. w******s

    Wenn du dem einem div-Tag entsprechend margin/padding gibst, überlappen die schon nicht. Ich würde dir vorschlagen, nicht zu meckern, sondern das hier zu posten was du bisher erreicht hast. Die meisten Probleme sind lösbar - aber sie müssen konkret sein!

    CSS wird in Zukunft auch die Verhaltensmuster von Tabellen beherrschen - wie bisher das ganze umgesetzt ist, kann ich nicht sagen. Du solltest dazu Informationen unter "CSS Columns" finden.
  4. Autor dieses Themas

    reimann

    Kostenloser Webspace von reimann

    reimann hat kostenlosen Webspace.

    Sie überlappen auch einander nicht, sondern die eine umfließt die andere und das sieht sehr unschön aus. Das Problem ist eigentlich konkret genug geschildert. Es steht da was erreicht werden soll und das mit CSS. Dazu braucht man keinen kompletten Quelltext. Zumal ich dann erstmal mehrere Varianten hochladen müsste, um das überhaupt verdeutlichen zu können.
    Aber nur um mal das eine Problem zu zeigen habe ich was hochgeladen. Es zeigt die Lösung, die ich per Google gefunden habe und wie sie nicht funktioniert.
    http://reimann.lima-city.de/test

    Es ist auch erstaunlich, dass in dem Beispiel der Text wenigstens noch richtig weiterläuft. Bei mir ist das nichtmal der Fall.

    Beitrag zuletzt geändert: 30.5.2010 16:04:18 von reimann
  5. Hey,

    also ich würde es so lösen:

    <body>
    
    	<div id="wrapper">
        	<div id="col_left">
            	<div id="menu">
                	<div class="inner">
                		<p> DEIN MENU </p>
                    </div>
                </div>
            </div>
            <div id="col_right">
            	<div id="content">
                	<div class="inner">
                    	<p> DEIN INHALT </p>
                    </div>
                </div>
            </div>
        </div>
    
    </body>


    CSS Dazu:
    html {
            height:100%;
    	width:100%;
    }
    
    body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    
    #wrapper {
    	width:100%;
    	height:100%;
    	margin:auto;
    	padding:0;
    	background:#CCC;
    }
    #col_left {
    	width:16%;
    	height:100%;
    	margin:0;
    	padding:0;
    	float:left;
    }
    #col_right {
    	width:84%;
    	height:100%;
    	margin:0;
    	padding:0;
    	float:left;
    }
    #menu {
    	width:100%;
    	height:auto;
    }
    #content {
    	width:100%;
    	height:auto;
    }
    .inner {
    	padding:15px;
            width:auto;
    	height:auto;
    }
    p {
    	margin:0;
    	padding:0;
    }


    Erklärung:
    Body - margins und padding entnommen um den Außenabstand zu verhindern.
    (bei wrappern mit weniger als 100% margin auf auto setzten um die Webseite zu Zentrieren)

    Wrapper - nur eine nette Möglichkeit die Seiten Breite schnell und einfach anzupassen bei Skalierbaren Weblayouts.
    Col_left - verhindert das umfließen anderer Container die im Col_right sind.
    ( wichtig hierbei ist der befehl float:left; dieser lässt Div´s neben einander stehen, solange der Übergeordnete Container breit genug ist.)
    Inner - hier können Angaben ohne neu Berechnung des übergeordneten Containers gemacht werden.
    p - margins und paddings entnommen damit es nicht zu Layout Fehlern führt.


    Als nächstes kommt dein Text Fehler.
    Browser haben einen automatischen Umbruch. Durch das entnehmen von Leerzeichen nimmst du dem Browser die Möglichkeit einen Umbruch am Container Ende zu machen.
    Nimm einfach Blindtexte von einem Generator
    Damit sollte das Problem gelöst sein.

    Wenn noch Probleme bestehen kannst mich auch per pn anschreiben

    //EDIT
    Fehler im Code verbessert.
    Hier noch ein live Beispiel

    Hoffe ich konnte helfen
    mfg
    psd




    Beitrag zuletzt geändert: 30.5.2010 17:13:06 von psd
  6. das vorangegangene Beispiel ist schön und gut, aber es täuscht nicht wirklich eine Tabellenstruktur vor, eher ein Frameset.
    Ein Tabellenlayout bekommt man nur über ein paar Umwege hin, sprich wenn man Hintergründe hat wird es etwas umständlich, aber möglich ist es:
    <body>
    	<div id="wrapper">
    		<div id="menu">
    			<p> DEIN MENU </p>
    			<p> DEIN MENU </p>
    		</div>
    		<div id="content-wrapper">
    			<div id="content">
    				<p> DEIN INHALT </p>
    				<p> DEIN INHALT </p>
    				<p> DEIN INHALT </p>
    			</div>
    		</div>
    	</div>
    </body>
    dazu dann dieses CSS:
    * { margin:0; padding:0; }
    #wrapper { background:blue; overflow:hidden; }
    #menu { width:20%; float:left; background:lime; }
    #content-wrapper { background:lime; padding-left:20%; }
    #content { background:blue; }
    Zur Erklärung (Regel + warum):
    *: Abstände nullen, dann ist es leichter das Layout zu erstellen
    #wrapper :Einmal den Hintergrund den der Inhalt haben soll, passt zwar nicht so wirklich da hin, aber muss so sein, außerdem dafür sorgen, dass der komplette Inhalt (inkl. Menü) auch umschlossen wird, damit der Hintergrund auch zu sehen ist, wenn das Menü länger als der Inhalt ist
    #menu: das Menü bekommt eine Breite zugeteilt, welche ist egal, außerdem wird noch dafür gesorgt, dass es links vom Inhalt steht und einen eigenen Hintergrund bekommt
    #content-wrapper: dieser Teil ist dazu da, damit die linke seite auch grün ist, wenn das Menü kürzer als der Inhalt ist, und bekommt daher den selben Hintergrund, wie das Menü außerdem einen Innenabstand, der genau so breit ist, wie das Menü, damit diese Fläche nicht vom Inhalt eingenommen wird.
    #content: braucht nur noch den eigenen Hintergrund zu erhalten

    Diese Konstruktion erzeugt ein "Tabellenlayout", aus Containern, welches sich genauso verhält, wie eine 2-spaltige Tabelle.
    Tip, wenn als Hintergrund Bilder verwendet werden sollen, dann sollte das Menu eine absolute Breite haben, sprich px,em,ex,cm ein
    außerdem muss dann das Bild im #wrapper entsprechend verschoben werden:
    * { margin:0; padding:0; }
    #wrapper { background:url('content-bild.png') 200px 0; overflow:hidden; }
    #menu { width:200px; float:left; background:url('menu-bild.png'); }
    #content-wrapper { background:url('menu-bild.png'); padding-left:200px; }
    #content { background:url('content-bild.png'); }
    um zu zeigen was ich meine habe ich hier mal ein Beispiel, für die nicht verschobene Ansicht und eine mit entsprechenden Vorkehrungen
  7. Autor dieses Themas

    reimann

    Kostenloser Webspace von reimann

    reimann hat kostenlosen Webspace.

    Ok also die Lösung von psd war zwar ziemlich gut, aber in der Breite kann man nicht mit absoluten Werten arbeiten. Da gefällt mir die von nemoinho besser, obwohl sie mir zu sehr nach Krücke aussieht.
    Dann werde ich nur hoffen können CSS wird in den nächsten Versionen Ergänzungen anbieten.
    Trotzdem danke.:thumb:
  8. reimann schrieb: ... aber in der Breite kann man nicht mit absoluten Werten arbeiten. ...


    hmm wie meinst du das ?


    Ich hab die Variante von Nemoinho mal versucht und Sie etwas variert.
    Somit kommt villeicht mehr der Tabelleneffect herraus.

    Hier



    Beitrag zuletzt geändert: 31.5.2010 8:01:48 von psd
  9. Autor dieses Themas

    reimann

    Kostenloser Webspace von reimann

    reimann hat kostenlosen Webspace.

    Naja du arbeitest damit, dass man auf einer Seite in Prozent angibt, wie etwa 24% und auf der anderen dann die restlichen 76%, aber das Problem dabei ist, dass wenn man absolut angibt, wie etwa 200px man ja immer noch den Rest angeben muss, bei unterschiedlicher Auflösung ist das unterschiedlich und deshalb nicht umsetzbar. Den zweiten Ansatz schau ich mir an und editiere dann nochmal.

    €dit: Jop das ist ja im großen und ganzen dasselbe wie bei nemo... Also werde das wohl so lösen müssen, auch wenns mir nicht wirklich gefällt.^^

    €dit: So hab es jetzt in meine Website eingebaut und es funktioniert prima.:thumb:
    Den Trick muss ich mir unbedingt merken^^

    Beitrag zuletzt geändert: 1.6.2010 12:03:21 von reimann
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!