Variable Breite mit fester Breite vermischen

vertex · #1 (**permalink**) 11.10.2006, 22:15

Hi!

Folgendes Layout:

Wie zu sehen ist, soll die Website immer 90% Breite des Fensters annehmen. Das geht soweit auch so ganz gut auch, wenn ich viel tricksen musste.

Jetzt kommt aber die Infobox mit fester Breite(160px) und der Kontext mit ins Spiel. Beide sind Div-Kontainer mit den Attributen float: left (um halt Spalten zu realisieren).

Gebe ich beim Kontext-Kontainer keine Breite an(nur ein Margin auf alle 4 Seiten) bestimmt nur der Inhalt die Breite. Er soll aber die volle Breite nutzen. Nun gibt es aber bei CSS keine Angaben wie width: 90% - 160px o.ä.

Ja, wie setze ich nun diese viel propagierte Ausnutzung der vollen Breite in diesem Fall um? (Ganz zu schweigen, das es in dem Fall mal wieder rein garnicht ohne Div-Tags geht und die Trennung von Layout und Inhalt aus bleibt deswegen.)

mfg olli

steinefrenz · #2 (**permalink**) 12.10.2006, 09:03

Alles erstes würde ich einen Wrapper um den gesamten Bereich legen. Z. B.

Code:

div#maincontainer {
     margin: 0 5% 0 5% auto;
     width: 100%;
     height: 100%;
}

div#banner {
      width: 100%;
}
div#infobox {
      width: 160px;
      float:   left;
}
div#kontext {
       /* Keine Breitenangabe */
}
div.clearleft {
/* Diese Klasse vor dem Footer setzen */
     clear: left;
     height: 1px;
}
div#footer {
     width: 100%;
}

Gerade getest. Und funktioniert.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  div#maincontainer {
     margin: 0 5% 0 5% auto;
     width: 100%;
     height: 100%;
}

div#banner {
      width: 100%;
}
div#infobox {
      width: 160px;
      float:   left;

}
div#kontext {
       /* Keine Breitenangabe */
       margin-left: 160px;
}
div.clearleft {
/* Diese Klasse vor dem Footer setzen */
     clear: left;
     height: 1px;
}
div#footer {
     width: 100%;
}
  
  </style>
  </head>
  <body>
  <div id="maincontainer">
        
        <div id="banner">
            <h1>Banner</h1>
        </div>
 
        <div id="infobox">
            <h1>LeftNav</h1>
        </div>
        
        <div id="kontext">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
        </div>
        
        <div class="clearleft"> </div>
        <div id="footer"> 
            <h1>Footer</h1>
        </div>    
  </div>

  </body>
</html>

Herzliche Grüße

Michael
24iX Systems

mazzo · #3 (**permalink**) 12.10.2006, 10:39

Zitat:

Zitat von vertex

Ganz zu schweigen, das es in dem Fall mal wieder rein garnicht ohne Div-Tags geht und die Trennung von Layout und Inhalt aus bleibt deswegen.

wieso? Ohne Markup (z.B. Divs) kein CSS was diesen "layoutet".

vertex · #4 (**permalink**) 12.10.2006, 21:24

Das funktioniert super steinefrenz! Vielen Dank!
mazzo: wenn ich die Div-Suppe in meinen Inhalt einbringen muss, dann ist das keine strikte Trennung mehr von Inhalt und Layout. Ich kann somit dem Inhalt nur begrenzt verschiedene Layouts zuweisen aber nicht alle erdenklichen. Aber darüber könnte ich mich stundenlang aufregen

mfg olli

dr4g0n · #5 (**permalink**) 12.10.2006, 21:36

Zitat:

Ich kann somit dem Inhalt nur begrenzt verschiedene Layouts zuweisen aber nicht alle erdenklichen. Aber darüber könnte ich mich stundenlang aufregen

in wie fern bist du denn begrenzt? sicherlich ist ein bisschen Trickserei und bastelei nötig aber das ist es überall.

greetz

vertex · #6 (**permalink**) 12.10.2006, 22:04

Dieses angesprochene Tricksen darf nicht sein, denn es kostet den Webdesigner unnötig viel Zeit. Irgendwo muss man immer Div Tags einsetzen. Sicher kann man hier und da auch große Layouts damit gestalten aber dann nur auf Kosten der Bandbreite, da man die Layoutbilder nichtmehr stückeln kann. Ich habe mir da schonmal meine Gedanken gemacht, wie man das Layout komplett aus der XHTML Datei verbannen kann. Dabei habe ich den Ansatz der Tabellenlayouts aufgegriffen, sie aber in das Stylesheet eingebunden. Hier ist strikte Trennung möglich und jedes erdenkliche Layout lässt sich auf ein und den selben Inhalt aufsetzen - ohne Div Trickserei usw. Aber ich brauche mal Zeit, das Konzept zusammenzufassen. Als Programmierer weiß ich auch, wie man das ganze auch mal Browserkompatibel machen kann. Blub, wie gesagt, stundenlang

mfg olli

mazzo · #7 (**permalink**) 13.10.2006, 10:09

Vorweg definier ich mal kurz zwei unterschiedliche Begriffe nach meinen Verständnis (das hoffentlich auf Zustimmung trifft).
Layout: Anordnung von Elementen auf einer Fläche.
Design: Gestaltung und Erscheinungsweise (Farben, Formen, Wiedererkennung, "Look and Feel").

Zitat:

Zitat von vertex

Dieses angesprochene Tricksen darf nicht sein, denn es kostet den Webdesigner unnötig viel Zeit.

der Webdesigner bastelt Grafiken in einem Grafikprogramm zusammen. Dem Sind DIVs doch wurscht.

Zitat:

Irgendwo muss man immer Div Tags einsetzen. Sicher kann man hier und da auch große Layouts damit gestalten aber dann nur auf Kosten der Bandbreite, da man die Layoutbilder nichtmehr stückeln kann.

also ohne DIV-Tags fällt mir ein sematisch halbwegs sauberer Code schon schwer... Warum DIVs im Gegensatz zu anderen Elementen mehr Bandbreite brauchen, verstehe ich nicht. Ebensowenig warum ein zerschnittenes Bild schneller lädt als eines am Stück.
Hintergrundbilder zu stückeln und über mehrere Elemente verteilt wieder "zusammenzukleben" ist in vernünftigen "CSS-Layouts" kaum bis gar nicht nötig. Das ist noch alte Denke aus Tabellenlayouts.

Zitat:

Ich habe mir da schonmal meine Gedanken gemacht, wie man das Layout komplett aus der XHTML Datei verbannen kann. Dabei habe ich den Ansatz der Tabellenlayouts aufgegriffen, sie aber in das Stylesheet eingebunden.

Herzlichen Glückwunsch! Das ist der Sinn von CSS, aber Tabellen dafür zu benutzen ist totaler Quark. Diese bilden nämlich auch ohne CSS schon Layout und sind auch mit CSS längst nicht zu jeder gewünschten Anordnung zu bringen. DIVs hingegen sind ohne CSS einfache nacheinanderfolgende Kästen und ohne Layout.

Zitat:

Hier ist strikte Trennung möglich und jedes erdenkliche Layout lässt sich auf ein und den selben Inhalt aufsetzen - ohne Div Trickserei usw. Aber ich brauche mal Zeit, das Konzept zusammenzufassen. Als Programmierer weiß ich auch, wie man das ganze auch mal Browserkompatibel machen kann.

Programmierer arbeiten mit Progerammiersprachen, das sind aber weder CSS noch (X)HTML

Mit PHP, Java, C++ usw. lässt sich aber keine Browserkompatibilität herstellen.

Ich bin gespannt, wie Du mit ein und derselben Tabelle "jedes erdenkliche Layout" realisierst. Wenn dein Konzept fertig ist, kannst Du es ja netterweise mal vorstellen.

Heinzer · #8 (**permalink**) 16.10.2006, 12:03

Hallo Steinefrenz,
habe als Neuling eine kl. Zwischenfrage?
Mein Firefoxbrowser ignoriert diese margin-Angaben:

PHP-Code:


			
div#maincontainer {

     margin: 0 25% 0 25% auto;

     width: 100%;

     height: 100%;

}

Der ie machts.
Ist es nicht möglich die gesamt Breite zu verändern? Oder muß man es für den Firefox anders schreiben?

Danke

Synoxis · #9 (**permalink**) 16.10.2006, 12:28

5 margin Werte ? Wie soll ein Browser das auch richtig umsetzen ?

1 Wert, 2 Werte oder 4 Werte aber keine 5 Werte, oder gibts bei dir mehr als Links, Rechts, Oben und Unten ?

Gruß,
Synoxis

Heinzer · #10 (**permalink**) 16.10.2006, 12:35

Sorry Synoxis,
ich habe nur Steinefrenz code zitiert (siehe oben) und in den Browsern getestet.
wie gesagt im IE gehts, beim Firefox nicht.
Hast Du eine Lösung?

schöne Grüße
Heinzi

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Variable Breite -> Problem Hintergrundgrafik	Korasu	CSS	2	08.01.2010 00:26
flexibles Div soll Div mit fester Breite links umfliessen?	braindead	CSS	3	23.09.2006 12:58
3 Spalten \| Aussen: variable Breite; Mitte: feste Breite	dreamshocker	CSS	9	17.08.2005 16:23
100% Breite + Layer mit fester Breite + Scrollen	Russian	CSS	7	06.06.2005 11:11
problem mit IE Textarea + variable breite	stese	CSS	3	26.07.2004 11:52