Anzeige

Div Boxen Problem

Div Boxen Problem | PSD-Tutorials.de

Erstellt von Palorux, 08.08.2005.

  1. Palorux

    Palorux Guest

    Div Boxen Problem
    hallo leute,

    ich möchte gerne folgendes machen in meinen beispiel.
    die div box " rightbox " soll auf die selbe höhe wie die div box " leftbox " und der abstand zwischen der " content " soll so sein wie der von der " content " box zur " leftbox ".
    wie bekomme ich das hin, so das ist mein erstes problem.
    das zweite ist, die " content " box soll immer dynamisch sein, damit meine ich wen ich die seite mit einer kleineren auflössung betrachte soll nur die " content " box kleiner werden nicht die beiden boxen " leftbox und rightbox " was muss man daran ändern um diese beiden sachen hin zu bekommen ?

    danke schon mal und hoffe ich mache nett so eine große mühe euch damit ...

    Danke ...

    hier der code :
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>Div Boxen Design</title>
    6. <style type="text/css">
    7. <!--
    8. body {
    9.     margin: 10px;
    10.     font-family: Verdana, Arial, Helvetica, sans-serif;
    11.     font-size: 100%;
    12.     color: #000000;
    13.     background-color: #4B6356;
    14. }
    15.  
    16. #herader{
    17. background:#f3f3f3;
    18. padding:5px;}
    19.  
    20. #leftbox{
    21. background:#d3d3d3;
    22. float:left;padding:5px;
    23. width:145px;
    24. margin:5px 0 20;}
    25.  
    26. #rightbox{
    27.     width: 145px;
    28.     background-color: #A9A9A9;
    29.     float:right;
    30. }
    31.  
    32. #content{
    33.     background:#a1a1a1;
    34.     padding:5px;
    35.     margin:5px 155 20 155px;
    36.     width: 600px;
    37. }
    38. -->
    39. </style>
    40. </head>
    41.  
    42. <body>
    43. <table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
    44.   <tr>
    45.     <td align="left" valign="top">
    46.       <div id="herader">Header Bereich
    47.  
    48.       </div>
    49.       <div id="leftbox">
    50.        
    51.  
    52. Navigation Bereich
    53.  
    54.         </p>
    55.        
    56.  
    57. &</p>
    58.        
    59.  
    60.  
    61.  
    62.            
    63.  
    64.         </p>
    65.       </div>
    66.       <div id="content">Inhalt Bereich Dieser Bereich soll Dynamisch sein, er soll immer voll an der Linken und Rechten Box anliegen egal welche Aufl&ssung...
    67.  
    68.        
    69.  
    70.        
    71.  
    72.        
    73.  
    74.        
    75.  
    76.        
    77.  
    78.        
    79.  
    80.        
    81.  
    82.        
    83.  
    84.        
    85.  
    86.        
    87.  
    88.       </div>
    89.     <div id="rightbox">Rechter Bereich </div></td>
    90.   </tr>
    91. </table>
    92. </body>
    93. </html>
    Ach so, die Tabelle möchte ich gerne um alles lassen damit der Fotter der noch kommt immer ganz unten ist.

    danke für eure hilfe schon mal ....
     
    #1      
  2. icebird

    icebird Noch nicht viel geschrieben

    Dabei seit:
    13.07.2005
    Beiträge:
    14
    Geschlecht:
    weiblich
    Ort:
    Norddeutschland
    Div Boxen Problem
    Hallo,

    das ist ja ein merkwürdiges Konstrukt!
    was meinst Du denn mit Fotter ? die Fußzeile bzw das Seitenende?
    .
    es ist eigentlich "doppelt gemoppelt" wenn Du zusätzlich zu der Tabelle noch div boxen einsetzt.
    und mit den Divboxen kann auch eine "Fußzeile" gebildet werden.


    gibt es schöne Beispiele bei:
    http://css.fractatulum.net/beispiele.htm
    oder auch eine gute Adresse ist SElfHTML


    :? icebird
     
    #2      
  3. Hennel

    Hennel Guest

    Div Boxen Problem
    Hi,
    wie schon erwähnt ist dein Quelltext sehr unübersichtlicht. Wieso nutzt du Tabellen und Div-Contanier?

    - http://www.css4you.de/
    - http://www.css-info.de/css-kurs1.php /*EDIT: Besonders ab Kurs 7 für dich interessant. */

    Wenn du die Größer der beiden Boxen (links, rechts) immer beibehalten willst, dann gebe dennen feste Pixelgrößen. (z.B. 200px)
    In deinem Main-Contanier (bei dir noch nicht vorhanden), müsstest du dann mit % arbeiten. Z.B. 80%, oder.
     
    #3      
  4. K-Dawg

    K-Dawg ********

    1
    Dabei seit:
    01.11.2004
    Beiträge:
    1.794
    Div Boxen Problem
    Ich würd den vorschlag von Seph nehmen. ich persönlich kenne mich mit XHTML nicht aus, hole das aber bald nach. Aber Tabellen HTML mit XHTML zu verschmelzen ist mehr als unübersichtlich. Das ist der grund wieso du solche probleme hast. Entscheide dich, entweder Tabellen HTML oder XHTML, weil zusammen ist das nicht so dolle.
     
    #4      
  5. K-Dawg

    K-Dawg ********

    1
    Dabei seit:
    01.11.2004
    Beiträge:
    1.794
    Div Boxen Problem
    XHTML ist eine CSS2 und HTML codierung aufbauend auf XML. Ich weis nicht ob du XHTML kennst daher die einleitung :D
    Aber wenn man das genau betrachtet, ist es XHTML mit Tabellen HTML gemischt und dann kann soweit ich infoprmiert bin nicht gut gehen.

    Dein beispiel ist eigentlich schon XHTML, nur das du keine Bilder evrwendest. XHTML benutzt DIV Tags die mit per ID/Name einen CSS eintrag enthalten (da ist die Verwandtschaft mit XML) XHTMl wird durch die CSS "Befehle" auf die Position und so gesetzt. Hm, naja habe mich bis jetzt nur theoretisch mit XHTML befasst, daher kann ichnicht genau sagen wie es aufgebaut ist. Aber ich denke man versteht was ich meine mit CSS "Befehl" und so. ;)
     
    #5      
  6. K-Dawg

    K-Dawg ********

    1
    Dabei seit:
    01.11.2004
    Beiträge:
    1.794
    Div Boxen Problem
    Gernm geschehen. Joa man lernt nie aus ;)
     
    #6      
  7. profipages

    profipages Guest

    Div Boxen Problem
    Öhmmmmmm

    Sorry daß ich Dich berichtigen muß, aber Tabellen gehören durchaus zu XHTML. Der grundlegende Unterschied zwischen HTML und XHTML ist eigentlich, dass XHTML strengeren Regeln folgt, jeder Tag muss wieder geschlossen werden, Docttype und Zeichensatz müssen zwingend angegeben werden und innerhalb der Tagattribute gibt es auch strengere Regeln die befolgt werden müssen - einige Attribute sollen sogar nur noch per CSS-Formatierung definiert werden.

    Ob man nun aber die Seitenaufteilung klassisch mit Tabellenlayouts oder mit Containern (DIV-Tags) mit Positionierung per CSS-Formatierung macht ist letztendlich Geschmacksache, beides ist in XHTML möglich.
    Tabellen sind dabei sogar unproblematischer. Wenn man mit DIV Tags und
    CSS-Formatierung arbeitet, auch mit DHTML Bewegung in eine Seite bringt, muss man allerdings beachten, dass es verschiedene Browser gibt (@Seph: bitte teste mal Deinen Codevorschlag auch in Firefox und Netscape Communicator 4.X .... ;-) ) für die muss man manchmal verschieden scripten -das nennt man Cross-Browser-Programmierung.

    @K-Dawg - ich will und wollte dich sicher nicht mit meinem Beitrag ärgern, aber was du schriebst war schlicht und ergreifend falsch und bevor Leute die vom Quelltext weniger Ahnung als du haben das glauben war es vielleicht hart das hier zu schreiben ist aber gut gemeint, also nicht persönlich nehmen und weiter theorethisch und praktisch mit XHTML befassen ;-).
    gruß
    profipages
     
    #7      
  8. K-Dawg

    K-Dawg ********

    1
    Dabei seit:
    01.11.2004
    Beiträge:
    1.794
    Div Boxen Problem
    Re: Öhmmmmmm

    Nö wieso sollte ich Böse sein?
    Also das ist schon Richtig das XHTML auch Tabellen nutzen kann, ich habe aber im sinne vom Layout gemeint. Wenn du mit Richtige XHTML Freaks zu tun hast, dann weiste das mit XHTML ein Layout aus Tabellen zu bauen, für dene ein grund ist zu Mordern ;)
    Klar kann man Tabellen nutzen, wie sollte man ansonsten ein Tabelarischer Darstellung hinbekommen? Aber in XHTML herscht das ungeschriebene Gesetz, kein Layout mit Tabellen zu erstellen.

    Ich habe nicht alles erklärt, weil es viel zu schreiben gewesen wäre und ich dachte, das die hier beteiligten einwenig XHTML kennen.

    Naja habe ich oben vieleicht etwas doof beschrieben. Sorry dafür :D
     
    #8      
  9. profipages

    profipages Guest

    Div Boxen Problem
    Re: Öhmmmmmm

    *grins bevor das jetzt ausartet wirst du mir sicher zustimmen, dass XHTML-Freaks möchten, dass ihre Seiten in so vielen Browsern wie möglich dargestellt werden. Also nimm einfach mal den Code von Seph, kopier ihn über die Zwischenablage in notepad, speicher ihn als allgemeine datei nicht als textdatei z. B unter Test.html und guck dir die Datei mal in Netscape 4, Firefox und IE an. Dann siehst du wieso XHTML-Freaks Javascript Browserweichen verwenden und Ihre Codes dann per Javascript an die jeweiligen Browser anpassen damit es überall einigermaßen gleich aussieht und auch funktioniert. Das gleiche kannst du mit folgendem On the Fly Code machen,*g
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>Div Boxen Design</title>
    6. <style type="text/css">
    7. <!--
    8. body {
    9.     margin: 10px;
    10.     font-family: Verdana, Arial, Helvetica, sans-serif;
    11.     font-size: 100%;
    12.     color: #000000;
    13.     background-color: #4B6356;
    14. }
    15.  
    16. #herader{
    17. background:#f3f3f3;
    18. padding:5px;}
    19.  
    20. #leftbox{
    21. background:#d3d3d3;
    22. float:left;padding:5px;
    23. width:200px;
    24. margin:5px 0 20;}
    25.  
    26. #rightbox{
    27.     width:200px;
    28.     background-color: #A9A9A9;
    29.     float:right;
    30. }
    31.  
    32. #content{
    33.     background:#a1a1a1;
    34.     padding:5px;
    35.    
    36.    
    37. }
    38. -->
    39. </style>
    40. </head>
    41.  
    42. <body>
    43. <table width="100%"  border="1" cellpadding="0"  cellspacing="0" bg color="#FFFFFF">
    44. <tr><td align="left" valign="top" colspan="3" width="100%">
    45.   <div id="herader">Header Bereich </br>
    46.       </div></td></tr>
    47.       <tr><td align="left" valign="top" width="200px">
    48.       <div id="leftbox">
    49.        
    50.  
    51. Navigation Bereich
    52.         </p>
    53.        
    54.  
    55. &</p>
    56.        
    57.  
    58.  
    59.            
    60.         </p>
    61.       </div></td><td align="left" valign="top" width="*">
    62.       <div id="content">Inhalt Bereich Dieser Bereich soll Dynamisch sein,</br>
    63.  er soll immer voll an der Linken und Rechten Box anliegen egal welche Aufl&ssung...
    64. </br></br></br></br></br></br></br></br></br>
    65.        
    66.       </div></td><td align="left" valign="top" width="200px">
    67.     <div id="rightbox">Rechter Bereich </div></td>
    68.   </tr>
    69. <tr><td align="left" valign="top"colspan="3" width="*">
    70.   <div id="herader">Header Bereich </br>
    71.       </div></td></tr>
    72. </table>
    73. </body>
    74. </html>
    75.  
    Der ist zwar nicht sauber gecodet, denn nur das erforderliche ist eingefügt, zeigt aber gut was ich meine, denn der funkt in allen Browsern.

    Am Rande bemerkt betreibe ich seit 2001 professionelles Webdesign, datenbankgestützte Seiten vorwiegend und dabei code ich PHP, CSS, Javascript, HTML, DHTML und wenn du willst auch XHTML im Quelltext.
    Geh also mal getrost davon aus, dass ich in etwa weiß wovon ich schreibe :wink: .

    gruß
    profipages

    PS: Layertechnik, DHTML, die DOM-Levels, CSS1 und CSS2 sind auch ne gute Lektüre.
     
    #9      
  10. profipages

    profipages Guest

    Div Boxen Problem
    ist ganz einfach Seph,

    Das Layout auf ner Tabelle aufgebaut on the Fly, braucht keine Browserweiche, funkt überall und mit den Inhalten und der Formatierung
    kann man sich dann in Ruhe auseinandersetzen, :wink:

    gruß
    profipages
     
    #10      
  11. K-Dawg

    K-Dawg ********

    1
    Dabei seit:
    01.11.2004
    Beiträge:
    1.794
    Div Boxen Problem
    Re: Öhmmmmmm

    Nö wieso sollte das ausarten? OK Beruflich mache ich kein Webdesign solange, sondern eher Hobby. Beruflich habe ichnoch keine erfahrung, gehe aber mehr in eine andere richtung, jeddoch kann ich von mir behaupten, sehr gut mit HTML umgehen zu können ;)
    Ehrlich gesagt, ich mag XHTML nicht besonders. Und die Freaks erst recht net :)
    Da meiner Meinung nach XHTML mehr Nachteile hat wie HTML, die freaks behaupten das gegenteil, werde ich weiterhin auf Tabellen HTML setzen. Da weis ich das meine sachen auf alle Browser laufen da ich W3C Konform Code. Auch meine meinung ist, wer mit alte Browser noch Surft ist selber schuld :)
    Da XHTML Relative neu ist, ist es auch klar das es mit ältere Browser nicht sehr Kompatible ist. Die Freaks mit dene ich es zu Tun hatte, behaupten es müssen keine anpassungen geben, XHTML Läuft in alle Browser gleich. egal welche, egal wie alt. Ich sehe das nicht so.
    Aber egal, Ich bleibe noch bei HTML/DHTML XHTML muss meiner Meinung nach reifen. Gibt noch zu viele Browser (auch neurere) die kein CSS2 richtig können noch gibt es aktuelle Browser die sich an die W3C Standards halten (Abegsehen von FF). Egal lange rede kurzer sinn, ich wieder sprehe dir nicht, jeddoch lasse ich es nicht Inoofiziell dar stehen, das ich keine ahnung haben ;)

    @ Seph
    ich bevorzuge auch noch das Tabellen Layout. Es funzt, wenn richtig gecoded, auf alle Browser und jo mit CSS1 kann man gut formatieren. Ich setze wenig auf DIV Tags und nur basic CSS da ich nicht eine Seite haben will, wo immer anders aussieht in verschiedene Browser.
    Auch wenn Tabellen Layout HTML Etwas mehr speicher braucht als XHTML und da auch etwas länger dauert zum Laden, finde ich es immer noch besser. Auch XHTML der zwar schlanker ist, braucht etwas zeit zum laden, da die im gegensatz zu HTML CSS dateien grösser sind und daher auch etwas mehr speicher braucen ;) Alkso egal wie, irgendwie sind die Ladezeiten gleich :)
     
    #11      
  12. SilentStormer

    SilentStormer Nicht mehr ganz neu hier

    Dabei seit:
    26.06.2005
    Beiträge:
    91
    Geschlecht:
    männlich
    Ort:
    Hörsching
    Kameratyp:
    Sony Alpha 350
    Div Boxen Problem
    so kannst du das leider nicht sehen. denn nachwievor gibt es sehr viele browser, die sich nicht an den w3c-standard halten. der IE mit seinen vielen browserspezifischen tags ist da ein paradebeispiel. über ihn habe ich mich schon oft aufgeregt, wenn er nicht das darstellte, was ich wollte.
    somit ist es eigentlich egal, was du schreibst - ob xhtml oder html, ob css oder css2, ob tabelle oder div - wenn du es in vielen browsern testest und es akzeptabel funktioniert, hast du gewonnen... ;)
    (ich persönlich teste all meine homepages in IE, FF, opera und konqueror)

    manche sachen, die in xhtml zwingend vorhanden sein müssen, funktionieren auch in älteren browsern, da diese das dann einfach ignorieren (wie zB der slash bei stand-alone-tags)
    das stimmt aber allerdings, selbst die neuesten browser kommen derzeit mit der css-technologie nicht mit. es haben noch nicht viele browser auf css2 umgestellt, da wird auch schon css3 kommen (dabei sei angemerkt, dass ff schon jetzt teile aus css3 beherrscht!!)


    ich möchte dazu noch sagen, dass ich vor kurzem einen artikel gelesen habe - und zwar über xhtml 2.0. und was ich da gelesen habe, behagt mich gar nicht. das w3c will alles verändern - tabellen, grafiken, links, formulare .... alles! und das umlernen, das wird sicher nicht spaßig werden. ich verstehe nicht ganz, warum die das alles ändern wollen. ist doch gut so, wie es ist .... wenn die dauernd etwas ändern, werden die browser nie aktuell werden und das feld der benutzer immer größer werden. manche habe immer das neueste, andere arbeiten mit veralteter technologie. folglich wird es für webesigner immer schwieriger, es allen recht zu machen ...
    ach was solls, wir "kleinen" können da sowieso nichts daran ändern.[/quote]
     
    #12      
x
×
×
teststefan